nicht angemeldet
Webdesign mit absoluten DIVs
Hi,
oft wird hier im Forum ja (bekanntlich) der Sinn und die Vor- und Nachteile von Tabellenlayout und DIV/CSS-Layout diskutiert!
Ich hoffe ihr wisst was ich meine.
Bisher habe ich meine Seiten immer mit Tabellen gelayoutet und möchte nun aber auch mal die (für gewöhnlich als modern bezeichnete) Variante mit den absolut positionierten DIVs ausprobieren.
Dazu ist mir nur folgendes Problem durch den Kopf gegangen:
Wenn ich z.B. so ein Layout habe:
|------------------------------------------|
| |
| HEADER (BANNER O.Ä) |
| NAVI- |
| GATION |
| --------- |
| FUSSZEILE |
| --------- |
Da ist meiner Meinung nach das Problem das absolute Positionieren der Fusszeile, da der Top-Abstand ja von der Höhe der Hauptseite (variable) abhängt (variable z.B. durch sich ändernde News oder Gästebucheinträge). Auch die Höhe der Navigationsspalte muss genauso groß sein wie die Hauptseite.
Mit Tabellen also kein Problem, aber wie kann ich das mit DIV/CSS-Layout bewerkstelligen? Mit der bottom-Eigenschaft kann und will ich auch nicht arbeiten, da es nur die neueren Browser kennen und außerdem kann die Fusszeile auch einen größeren bottom-Abstand zum unteren Fensterrand haben (z.B. wenn die Höhe der Hauptseite sehr klein ist).
Geht mal auf meine Seite: http://www.abi01-wrg.de
Dort seht ihr etwa oben beschriebenes Layout (mit Tabellen). Wie würde man das mit DIVs/CSS am besten umsetzen?
Geht das überhaupt? Oder ist es bei sowas nicht doch sinnvoller und einfacher Tabellen zu nehmen?
Gruß
Christian
-
Hallo,
Nur ganz grob eine Idee:
|-----------------------------------------------------------|
| position:relative; widht:730px; |
| margin-left:auto; margin-right:auto; |
| |
| |-------------------------------------------------------| |
| | position: absolute; widht:100%; height:80px; | |
| | | |
| |-------------------------------------------------------| |
| |--------------| |-------------------------------------| |
| | position: | | position: relative; | |
| | absolute; | | top:140px; left:180px; | |
| | top:140px; | | width:500px; | |
| | width:160px; | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| |--------------| |-------------------------------------| |
|-----------------------------------------------------------|So ähnlich hab ich es mal umgesetzt. Kann sein, dass einiges in der Kürze etwas ungenau beschrieben ist. Soll nur ein Denkanstoß sein.
Auf jeden Fall positioniert man ein Haupt-Div, in dass man dann die anderen Div-Elemente einsetzt. Diese orientieren sich mit ihren Startkoordinaten an dem Hauptdiv und nicht mehr am Browserfenster.
Mit position: relative können variable Abmessungen erreicht werden, so dass sich die Divs bei längeren Textmengen z. b. in der Höhe anpassen.
Max