|
|||
Container untereinander mit position
Morgen,
ich habe das Problem, dass ich die beiden Container (id1, id2) nicht untereinander bekomme bzw. nicht richtig dargestellt werden! PHP-Code:
|
Sponsored Links |
Sponsored Links |
|
|||
Um protonenbeschleunigers Antwort auszuführen, verwende folgenden Aufbau für ein sinnvolles HTML:
Code:
<div> <h2> Überschrift </h2> <img> <img> </div> Um es kurz zusammenzufassen: Lösche 90% vom obigen Code, dann bist du auf einem guten Weg. |
|
|||
Vielleicht habe ich mich nicht klar ausgedrückt..aber wenn ich die positions weglasse legt er mir bild11.png unter (im Textfluss) bild1.png... es soll aber auf der grafik liegen
Zu den HEADLINES... dies ist einfach nur ein Text der auf der Grafik liegt ... habe die konkreten Werte zu Vereinfachung weggelassen |
|
|||
Nochmal zur verdeutlichung: Wir wissen nicht genau, was du erreichen willst. Wir kennen deine Bilder nicht und wissen auch nicht, wie es im Endeffekt aussehen soll.
Damit wir dir helfen können brauchen wir ein Beispiel (KEIN PHP) mit HTML & CSS, welches wir einfach bei zB jsfiddle.net einfügen können. |
|
|||
Code:
<div id='id1' style='position:relative;'>"; <span style='width:230px; height: 30px; top: 10px; left: 100px; z-index:1; position:absolute;'> Grafik1 </span> <div style='z-index:0; position: absolute;'> <img src='grosseGrafik1(400x400).png> </div> <div style='position:absolute; top: 50px; left: 50px; z-index:1;'> <img style='width: 45px; height: 30px; opacity: 0.5;' src='kleinebild(45x30).png'> </div> </div> <div id='id2' style='position:relative;'>"; <span style='width:230px; height: 30px; top: 10px; left: 100px; z-index:1; position:absolute;'> Grafik2 </span> <div style='z-index:0; position: absolute;'> <img src='grosseGrafik2(400x400).png> </div> <div style='position:absolute; top: 50px; left: 50px; z-index:1;'> <img style='width: 45px; height: 30px; opacity: 0.5;' src='kleinebild(45x30).png'> </div> </div>"; - Auf der grossen Grafik soll eine kleine Grafik eingeblendet werden im Vordergrund ... dies funktioniert - Was nicht funktioniert, dass der Cointainer id2 unterhalb des Container id1 angezeigt wird ... Container id2 verschwindet unter id1 |
|
|||
Mit position:absolute nimmst du Elemente aus dem Dokumentenfluss. Du verwendest absolute bei allen 3 unterelementen. Verwende es nur bei den Elementen, die es auch wirklich brauchen (wie dem 2. Bild) Das "große" Bild braucht eigentlich kein position:absolute, das soll ja dort sehen wo es schon steht.
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Menueleiste anpassen | Mulo | CSS | 1 | 04.02.2015 11:08 |
Anfängerfrage: Zentrierung in Galerie und Border-Problem | goldbeere | CSS | 3 | 04.11.2013 20:07 |
div-höhe? - Hauptcontainer über ganze Seite will nicht... | AndMei | CSS | 5 | 13.12.2010 15:43 |
Problem mit einem 3D-Effekt | moep0710 | CSS | 12 | 12.06.2010 15:30 |
prblemme mit mein inhalt div | carlos587261 | CSS | 3 | 23.04.2008 15:07 |