|
|||
Dynamische Layout Breite und Höhe
Hallo,
ich habe folgendes "Konzept" für ein Layout (am besten in eine leere HTML-Datei kopieren - dann ist mein Problem besser verständlich): Code:
<html> <head> <title>Layout</title> <style> #frame { margin-top: 20px; text-align: center; width: 740px; } #headerLeft { border: 1px #000000 solid; float: left; width: 348px; } #headerMiddle { border: 1px #000000 solid; float: left; width: 38px; } #headerRight { border: 1px #000000 solid; float: left; width: 348px; clear: right; } #contentLeft { border: 1px #000000 solid; float: left; width: 18px; height: 300px; } #contentMiddle { border: 1px #000000 solid; float: left; width: 698px; height: 300px; } #contentRight { border: 1px #000000 solid; float: left; width: 18px; height: 300px; clear: right; } #footerLeft { border: 1px #000000 solid; float: left; width: 348px; } #footerMiddle { border: 1px #000000 solid; float: left; width: 38px; } #footerRight { border: 1px #000000 solid; float: left; width: 348px; clear: right; } </style> </head> <body> <div id="frame"> <div id="headerLeft">1</div> <div id="headerMiddle">2</div> <div id="headerRight">3</div> <div id="contentLeft">4</div> <div id="contentMiddle">5</div> <div id="contentRight">6</div> <div id="footerLeft">7</div> <div id="footerMiddle">8</div> <div id="footerRight">9</div> </div> </body> </html> Beispiel: Bereich 5 (contentMiddle) ist der Bereich in dem später der Inhalt der Seite stehen soll. Grundsätzlich soll das Layout 740 Pixel breit sein - wenn in diesem Bereich Nr. 5 aber nun z.B. ein großes Bild eingefügt wird soll sich das Layout automatisch an dessen Größe anpassen. - Wenn das Bild breiter ist sollen die Bereiche 2 (headerMiddle), 5 (contentMiddle) und 8 (footerMiddle) breiter werden - alle anderen Bereiche sollen allerdings die gleiche Breite behalten. - Wenn das Bild höher wird soll sich nur Bereich 4 (contentLeft), 5 (contentMiddle) und 6 (contentRight) anpassen. Wie muss ich das Layout ändern dass die bestimmten Bereiche dynamisch die Größe verändern können, andere Bereich allerdings _immer_ die selber Größe behalten? Vielen Dank im voraus, altes-kind |
Sponsored Links |
|
|||
Dir fehlt ein korrekter Doctype. Ohne diesen geht der IE in den Quirksmodus und stellt das Boxmodell falsch dar. Siehe FAQ.
wenn Du Container pixelgenau in der Breite definierst musst Du mit diesen Werten leben. Sinnvoller wären für "dynamische" Bereiche andere Werte. Im FAQ-Thread sind links zu skalierbaren 3-Spalten-Layouts, die Dir da als Vorlage weiterhelfen können. |
Sponsored Links |
|
|||
Hi!
Den Doctype hätte ich natürlich im fertigen Layout noch definiert - das obige Beispiel war auch nur schnell zum Testen erstellt. Ich habe wegen folgendem Layout gefragt: http://altes-kind.de/data/xhtmlforum.de/screenshot.png Das ganze funktioniert mit fester Breite wunderbar - allerdings will ich nun das sich das Layout "dynamisch" an den Inhalt anpasst - wenn also ein großes Bild eingfügt wird soll das Footer Image und Header Image breiter werden. Wie kann ich das am besten aufteilen um dies zu erreichen? Vielen, vielen Dank im voraus, altes-kind |
|
|||
Zitat:
Zitat:
|
|
|||
Zitat:
Zitat:
Nochmals Danke! altes-kind |
|
|||
den Schatten nachzubilden wird dann etwas frickelig. Aber wenn Du ein Rahmenelement hast, in dem der Schatten "mitfläuft" (Background-repeat), und das Rahmenelement sich nach dem inneren in der Breite und Höhe richtet, sollte es gehen. ich hab es aber nicht ausporbiert.
|
|
|||
Ok - und noch eine Frage habe ich - sorry...
Zitat:
Beispiel: Wenn ich margin-left: 300px; und margin-right: 300px; habe ich bei einer 1024-768er Auflösung ja eine Box mit 424 Pixel Breite - bei z.b. 1280-1024er Auflösung ist die Box ja automatisch 680px breit. Ich will aber dass das Layout grundsätzlich z.B. 680 Pixel breit ist - egal mit welcher Bildschirmauflösung es betrachtet wird. Dann muss ich da ja eine feste Breite definieren, oder? Geändert von altes-kind (12.01.2007 um 12:09 Uhr) |
|
|||
wenn Du stets 680px willst, dann musst Du das so tun - und die Konsequenzen ertragen. Die Nachteile von px-definiertem Layout sind Dir aber bekannt, oder?
Check einfach mal eine oder zwei Schriftgrößenveränderungen bei px-layouteten Seiten. Da wird schnell das Layout zerschossen. Und im IE wird px-definierte Schrift gar nicht vergrößert - unschön für Benutzer, denen die Schrift zu gross ist. Alternativ wäre min-width und max-width eine Lösung. Diese Angaben werden vom IE aber nicht verstanden und brauchen eine workaround (z.B. mit JavaScript). |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Probleme mit der Breite und Höhe nach Padding | BoFiaZ | CSS | 1 | 12.03.2009 11:21 |
3 Spalten Layout mit Divs - mitte fest, Seiten dynamische Breite | devnull | CSS | 3 | 02.02.2009 11:03 |
3 spaltiges Layout, Außen feste Breite, innen dynamisch | NicolaibassDH | CSS | 3 | 13.06.2007 12:09 |
Dynamische Höhe im Content und DIV immer unten | keaton | CSS | 8 | 13.12.2006 19:19 |
dynamische höhe bei box layout | roakin | CSS | 16 | 12.02.2005 23:44 |