|
|||
was ist das elternelement für einen div
Hi,
ich hoffe ich nerve keinen mit meinem DIV-Fragen Aber laut Anleitung wird mit "position: absolute;" : Zitat:
Code:
<td width="375" align="center"> <div id="werk_2" style="z-index:1; position:absolute; width:165px; height:113px; left: 0px; top: 0px;">[img]../../../images/instand/werk_2.jpg[/img]</div> <div id="werk_3" style="z-index:2; position:absolute; width:247px; height:166px; left: 10px; top: 10px;">[img]../../../images/instand/werk_3.jpg[/img]</div> </td> so long Tino |
Sponsored Links |
|
|||
Code:
<div id="werk_2" style="z-index:1; position:absolute; width:165px; height:113px; left: 0px; top: 0px;">[img]../../../images/instand/werk_2.jpg[/img]</div> <div id="werk_3" style="z-index:2; position:absolute; width:247px; height:166px; left: 10px; top: 10px;">[img]../../../images/instand/werk_3.jpg[/img]</div> Zitat:
Warum schreibst Du diese Tags in die Tabelle ???? Du könntest diesen Code überall im BODY schreiben - nach W3C mit dem selben Ergebnis. Ein z-index ist die Reihenfolge einer Ebene, quasi mehrere Seiten übereinander, durch position:absolute wird eine neue Ebene erzeugt. Ohne z-index wird die Reihenfolge durch die Postition im Code festgelegt. Mehrer Container in einer Ebene müssen dann auch mit dem gleichen z-index verifiziert werden. Tabellen sollten nur noch für solche benutzt werden. - niemals zum strukturieren. Weg mit dem Dreck - freie Bahn für CSS2+XHTML1.0.
__________________
</ulle> |
Sponsored Links |
|
|||
Lese-TIPP
__________________
</ulle> |
|
|||
Ich hab die divs in die tabelle geschrieben weil ich mir gedacht habe das an dieser stelle das td zum eltern element wird.
Ich beschreibe mal den seitenaufbau ... und zwar ist es eine tabelle mit 2 spalten und 2 zeilen. In der ersten spalte (erste zeile) steht text mit einer liste, in der zweiten spalte (erste zeile) sind zwei bilder untergebracht und zwar überlappen sie sich gegenseitig und habe eine farbigen rahmen (ich möchte das gerne mit divs realisieren, weil ich beide bilder verwenden möchte und nich eines daraus machen will, in dem sie sich überlappen anhand der divs, das spart arbeit und speicherplatz). In der ersten spalte (zweite. zeile) sind auch zwei grafiken, nach dem gerade beschriebenen schema als inhalt vorgesehen. In der zweiten spalte (zweite. zeile) ist wieder text mit einer liste. Mein hauptanliegen ist halt die jeweiligen 2 bilder zu überlappen und das geht halt schön mit den divs, doch leider hoppst das dann aus der tabelle raus bzw. überlappt den text, bei andere fenster-/framegröße. deshalb ... so long Tino |
|
|||
Logisch hopst das raus...........weil die Table oder die DIVs nicht relativ def. ist.
Im prinzip benötigts Du eine 4teilung - richtig (?) Also 2 + 2 , nun diese bastelst Du mit float:left und clear:left, die Höhen der 2 nebeneinander natürlich mit gleicher Höhe. Dann hast Du nur noch das Problem mit den 2 Bildern in einem Container. Die stellst Du einfach nacheinander in den CODE des entsprechenden DIVs. Das zweite Bild mit Code:
position:relative; left: -20px; top: -20px; Dazu benötigst Du keine Ebenen (~z-index), erklärt ist alles hier auf der Homepage von Thomas. Und Du solltest Dir wirklich mal den LINK ansehen, den den ich weiter oben eingestellt habe.
__________________
</ulle> |
|
|||
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- html,body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; background-color: #FFCC99; color: #000000; padding: 0px; margin: 0px; height: 100%; } .w30 { float: left; width:30%; background: #FFCCFF; height: 30%; border: 1px solid #000000; margin: 1px; padding: 20px; } .clear { clear: both; } .imageover { position: relative; top: -15px; left: -20px; } --> </style> </head> <body> <div class="w30">&</div> <div class="w30"> [img]file:///C|/WINDOWS/Help/Tours/htmlTour/best_road.jpg[/img] [img]file:///C|/WINDOWS/Help/Tours/htmlTour/best_road.jpg[/img] </div> <div class="clear">&</div> <div class="w30">&</div> <div class="w30">&</div> </body> </html> Übrigens das Teil mit dem clear geht wahrscheinlich eleganter, habe aber wenig Zeit.
__________________
</ulle> |
|
|||
Einen habe ich noch........
Zitat:
Code:
position:absolute ansonsten ist das Eltern-Element der BODY
__________________
</ulle> |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |