|
|||
Moin,
ich meine das div, das in deinem Bild die Bezeichnung hauptcontainer hat. Diesem div musst du ein Hintergrundbild geben. gruß, take |
Sponsored Links |
|
|||
Hallo,
ja das ist doch super, dass sollte machbar sein. Was sollte das für ein Bild sein, muss ich auf etwas achten wie Länge, Höhe, es könnte ja theoretisch auch eine transparente png oder gif Datei sein. Arbeite ich dann weiterhin mit Wrapperklassen bzw. was muss sonst noch getan werden? LG, Alex |
Sponsored Links |
|
|||
Moin,
Nein. Du hast Faux Columns nicht verstanden. Das Längere der beiden inneren divs bestimmt die Länge des äußeren divs und damit die Länge des Hintergrundbilds, das auch hinter dem kürzeren inneren div dargestellt wird. Somit entsteht die Illusion die divs wären gleich lang. Ausführliche Erklärung hier. gruß, take |
|
|||
Jetzt habe ich das Prinzip verstanden, dann kann ich damit tatsächlich leider nicht arbeiten.
Der Hintergrund der DIVs soll transparent sein, wichtig bzw. entscheident sind lediglich die Rahmen. |
|
|||
Moin,
Zitat:
gruß, take |
|
|||
Für den Hauptcontainer geht das nicht, denn die beiden innen-liegenden haben Margings usw, dazu müsste ich das pixelgenau wissen und es wäre nicht dynamisch.
Wenn ich den Hauptcontainer auf fest 200px Höhe definiere, passt er beide innenliegenden Container auch korrekt an. Lediglich wenn ich den Hauptcontainer auf 100% setze klappt es nicht. |
|
|||
Moin,
Bei height:100% immer die Frage stellen: 100% von was? Hat das Elternelement keine Höhe (height: auto) hat eine 100%-Höhe nicht den gewünschten Effekt. gruß, take |
|
|||
Moin,
also ich habe es auch noch einmal mit JavaScript versucht, hatte gedacht man könnte die Größe des DIV Containers ermitteln und statisch übergeben, klappt leider auch nicht. Grund: Für 100% Größe gibt JavaScript "100" wieder |
|
|||
|
Sponsored Links |
|
|||
Hallo vaults,
mach das mal so in etwa: HTML-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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>box</title> <style type="text/css" media="screen"> /* CSS Reset Start */ html, body, div, p { margin: 0; padding: 0; } html { height: 101%; } body { background-color: #E4E6D6; color: #000; font: 100.1% Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: center; } /* Aussenbox Container */ #page { border: 2px solid #000; margin: 1em auto; text-align: left; width: 880px; } /* Bereich Container */ .container { background-color: #fff; color: #000; overflow: hidden; width: 100%; } /* Wrapper für rechte u linke Spalte */ .wrapper { background-color: #fff; color: #000; display: inline; /* Anweisung für IE 5 6 */ float: left; width: auto; background-color: white; } /* rechte Spalte */ .right { background-color: #f5deb3; border: 5px solid #72653c; color: #000; float: left; margin: 20px 20px 0px 10px; width: 400px; } /* linke Spalte */ .left { background-color: #ffe135; border: 5px solid #72653c; color: #000; display: inline; /* Anweisung für IE 5 6 */ float: left; margin: 20px 10px 0px 20px; width: 400px; } /* Anweisung für gleich hohe Spalten */ .wrapper, .right, .left { margin-bottom: -16000px; padding-bottom: 16000px; } #page-footer { background-color: #fff; color: silver; clear: both; height: 25px; } #page-footer p { border-top: 5px solid #72653c; width: 410px; float: left; margin-left: 20px; } </style> </head> <body> <div id="page"> <div class="container"> <div class="wrapper"> <!-- Start linke box --> <div class="left"> left... Er hörte leise Schritte </div> <!-- geschlossen --> <!-- Start recht box --> <div class="right"> Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel. Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel. </div> <!-- geschlossen --> </div> <!-- wrapper geschlossen --> </div> <!-- Ende InnenContainer der die Spalten zusammen haelt --> <!-- Start Footer --> <div id="page-footer"> <p>Box.1</p> <p>Box.2</p> </div> <!-- Ende Footer --> </div> <!-- Page AussenContainer geschlossen --> </body> </html> Anhang 4458 ___________ Gruß, Roland Geändert von K.Roland (03.06.2012 um 12:43 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Div zentrieren (Höhe und Breite dynamisch) | capricorn | CSS | 2 | 26.02.2010 13:47 |
IE div höhe und overflow | tintifax | CSS | 1 | 06.08.2008 13:38 |
DIV höhe an Eltern DIV auto anpassen | tabtwo | CSS | 18 | 18.07.2008 15:26 |
div höhe an anderen anpassen | Jache84 | CSS | 4 | 13.02.2007 15:14 |
höhe eines div tag an ein anderes anpassen | ffr | CSS | 4 | 09.12.2003 17:59 |