|
|||
Layout mit vier Boxen...
Hallo miteinander,
bin schon länger auf der suche nach einer Lösung für mein Problem, hoffe ich finde sie hier Zu meinem Problem, ich habe eine #page-box, welche relativ positioniert ist, um den gesamten Webinhalt mittig auszurichten. Darin sind drei weiter Boxen, #header-box, #content-box und #navi-box, enthalten, welche absolut positioniert sind. So weit so gut. Nun, wenn ich die #content-box fülle, dann geht die #page-box nicht mit auf, das selbe bei der #navi-box. Wenn ich nun in der #page-box das Attribut "overflow:auto;" setze, dann geht es, aber nur im Firefox und nicht im IE. Gibt es hierfür eine Lösung, welche ohne gebastel à la JavaScript auskommt? Hier noch der Source: Code:
<body> <div id="page">page <div id="header">header</div> <div id="content">content</div> <div id="navi">navi</div> </div> </body> Code:
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: normal; background-color: #CCCCCC; margin: 0px; padding: 0px; text-align: center; } #page { background-color: #FFFFFF; text-align: left; margin: auto; width: 900px; position: relative; overflow:auto; } #header { background-color: #00FF00; height: 150px; width: 900px; position: absolute; left: 0px; top: 0px; } #content { position: absolute; left: 0px; top: 150px; height: auto; width: 740px; background-color: #00CCFF; } #navi { position:absolute; left:740px; top:150px; width:160px; background-color:#996699; } |
Sponsored Links |
|
|||
Sorry, aber ich werde aus deinem Text nicht schlau. Wie meinst du das, dass die Boxen "nicht mit aufgehen"??
BTW: Das position: relative; in #page kannst du dir sparen, ein einfachen margin:0 auto; tuts auch. |
Sponsored Links |
|
|||
ja das schon, aber wenn ich die position der Box #page nicht auf relativ setze, dann ist der bezugspunkt (0-Punkt) der anderen Boxen nicht der der Box #page (im linken oberen Eck), sondern der des body!
Desweitern ist es ja so, dass wenn ich einfach zwei Boxen in einander habe, und ich in der inneren der beiden etwas schreibe, denn gehen beide Boxen auf, sofern ich nicht eine höhe der Box definiert habe, aber wenn ich diese absolut positioniere, dann eben nicht! Meine Frage ist jetzt, wie man das machen könnte!? |
|
|||
Ich verstehe leider immer noch nicht, was du mit "aufgehen" meinst. Sollen die anderen Container mit größer werden, wenn der Content größer wird?? Dann such mal nach faux columns!
Hast du einen Link auf die Seite? An deiner Stelle würde ich die ganze absolute und relative Positionierung weglassen! Wenn du #content und #navi jeweils float:left gibst und einfach jedes "position:absolute" und position:relative" löschst, wirds genauso dargestellt! Positionierung ist oft eine Fehlerquelle. |
|
|||
ja, die anderen Conainer sollen mit grösser werden. Einen Link habe ich nicht, da das ein allgemeines Problem ist, welches ich habe.
Das stimmt, wenn ich die Positionierungs angaben weglasse, dann wirds genau so, nur ist es ja dann trotzdem relativ positioniert und zudem habe ich damit schlechte erfahrungen gemacht, weil der IE die abstände anders, meiner Meinung nach falsch, darstellt als z.b. der Firefox oder Opera! Darum würde ich es schon gerne absolut positionieren. Werde mal wie du gesagt hast nach "faux columns" nachschauen. |
|
|||
Zitat:
Zudem lässt relative Positionierung im Gegensatz zu absoluter die Elemente im normalen Fluss. Zitat:
Zitat:
Grüße fricca |
|
|||
Verstehe ich dich richtig, du schaffst es nicht die inneren Boxen korrekt zu positionieren?
Wenn das so ist, dann mach bitte folgendes: Code:
#page { background-color: #FFFFFF; margin: 0 0 0 -450px; padding: 0; width: 900px; position: absolute; left: 50%; overflow:auto; } In deinem Fall richten sich die inneren Boxen nach dem Browser und nicht nach der #page Box. Der Code ist auf jedenfall zu den wichtigsten Browsern (Firefox/Opera/IE) kompatiebel und wird identisch interpretiert. Greetz B. |
|
|||
Zitat:
Deine Variante der horizontalen Zentrierung ist die schlechteste alle Möglichkeiten, da der Inhalt bei schmalem Viewport unerreichbar nach links verschwindet. Grüße fricca |
|
|||
Wenn der IE es aber nicht so interpretiert!
Der IE ist nunmal ein nicht wegzudenkender Browser, da kann ich nicht nur für Firefox oder Opera Seiten erstellen, zumal der Code so valide ist. Ich verstehe deine Abneigung gegen den IE nich, in mehreren Threads verzichtest du auf eine vom User gewünschte Eigenschaft, die der IE eben anders interpretiert. Sorry für meine Meinung, nimms dir nicht zu Herzen! Schau dir meine Seite an, da nutze ich das auch so und ich finde alles bestens! |
Sponsored Links |
|
|||
Zitat:
Bitte schau dir dieses Beispiel an, da geht's zwar eigentlich um vertikale Zentrierung - aber es ist auch horizontal zentriert: fricca.funpic.de edit: hmm, gerade nicht erreichbar. Dann kopier dir den Code von hier: http://www.xhtmlforum.de/viewtopic.php?p=34786#34786 Zitat:
Zitat:
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Split Layout mit vier Slides | Cu Chullain | Javascript & Ajax | 0 | 16.01.2015 22:36 |
Problem mit Mittelspalte bei 3-Spalten Layout mit Boxen | ToDoWaldi | CSS | 6 | 02.03.2013 21:02 |
3 Spalten Layout: Schrift läuft in andere Boxen | nauen | CSS | 7 | 05.12.2011 15:39 |
Vertikales Layout - Floats - 2 Boxen nebeneinander | grischa_sgd | CSS | 4 | 25.09.2007 15:55 |
Zentriertes Layout und Boxen darüber ==> Problem | Steran | CSS | 1 | 03.01.2006 13:26 |