DX-Rated Geschrieben 11. April 2005 Geschrieben 11. April 2005 Folgendes: Ich möchte eine Seite schreiben, die sich in der Mitte des Bildschirms aufhält, und im Wesentlichen aus drei Teilen besteht: oben der Header, dadrunter links die Navigation und rechts der Inhalt. Dazu nehme ich vier <div>s. Ein <div>, um die Seite zentral auszurichten (inklusive 1px dickem Rahmen). Da kommen nun die anderen drei <div>s rein. Klappt auch soweit wunderbar, nur der Firefox wehrt sich ein bisschen. Der Rahmen verläuft nicht ums gesamte äußere <div>, sondern nur um den Header. :confused: IE und Opera zeigen den Rahmen so an wie ich mir das vorgestellt habe (handeln dafür das Boxmodel falsch, aber das ist ein anderes Thema), nur der FF macht Zicken. Woran liegt das? Ich kann an meinem Code nichts verdächtiges feststellen. Kann in der Firma leider nichts hochladen, sonst könnte ich das an einem Beispiel zeigen. Ich hoffe, es wird auch so klar, worum es geht. Zur Verdeutlichung ein Auszug aus dem Quelltext: CSS: .allgemein { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; background-color: #001040; } #div_frame { width: 800px; [COLOR=Red]border: 1px dashed #00A0F0;[/COLOR] margin: 0px auto; } #div_header { height: 100px; } #div_navigation { width: 105px; height: 580px; background-color: #002050; float: left; padding: 10px; } #div_inhalt { width: 655px; height: 580px; background-color: #004080; float: right; padding: 10px; } HTML: <body class="allgemein"> <!-- Großer Container, in den die Seite platziert wird --> <div id="div_frame"> <!-- Header --> <div id="div_header"> <img src="img/platzhalter.gif" width="800" height="100" alt="bla" /> </div> <!-- Navigation --> <div id="div_navigation"> Text </div> <!-- Inhalt --> <div id="div_inhalt"> Text </div> </div> </body> Thanks in advance for any help.
geloescht_JesterDay Geschrieben 11. April 2005 Geschrieben 11. April 2005 Änder deine id div_inhalt mal so: #div_inhalt { width: 780px; height: 380px; background-color: #004080; padding: 10px; } und beim div_navigation das margin-right: 10px; hinzufügen
DX-Rated Geschrieben 11. April 2005 Autor Geschrieben 11. April 2005 Danke, das funktioniert. Gehe ich recht in der Annahme, dass der Inhaltscontainer ohne ein float:right; also in der Breite um die Breite des Navigationscontainers verkürzt wird (damit beides in den großen Container passt), oder warum muss man die entsprechende Breite drauf rechnen? Warum bewirkt nun das padding: 10px; auf der linken Seite des Inhaltscontainers nichts mehr? Und warum zur Hölle geht das mit dem Rahmen nun bzw. warum ging es vorher nich? Das leuchtet mir noch nicht so ganz ein. Abgesehen davon zerschießt es das Design im IE und im Opera nun völlig. Das Inhalts-div hängt bei diesen Browsern nun unterhalb der Navigation und nicht daneben.
geloescht_JesterDay Geschrieben 11. April 2005 Geschrieben 11. April 2005 Danke, das funktioniert. Gehe ich recht in der Annahme, dass der Inhaltscontainer ohne ein float:right; also in der Breite um die Breite des Navigationscontainers verkürzt wird Nein, "float" nimmt das floatende Objekt aus dem Textfluss, es schwebt sozusagen über allem, aber bewirkt, dass der Text es umfliesst. Der Inhaltscontainer geht über die volle Breite und deswegen bewirkt das Padding nichts, weil das Padding ja unter den Nav Container ist. Deswegen auch der Right Border. Keine Ahnung warum das insg. nicht geht... hätte eigentlich so gehen sollen. Im Moment hab ich keinen Zugang zu meinen Arbeiten (bin ausserhalb), da könnt ich mal nachsehen... hab da was ähnliches.
DX-Rated Geschrieben 12. April 2005 Autor Geschrieben 12. April 2005 Nein, "float" nimmt das floatende Objekt aus dem Textfluss, es schwebt sozusagen über allem, aber bewirkt, dass der Text es umfliesst. Der Inhaltscontainer geht über die volle Breite und deswegen bewirkt das Padding nichts, weil das Padding ja unter den Nav Container ist. Deswegen auch der Right Border. OK, das leuchtet ein. Ich habs jetzt auch anders hinbekommen. Dem großen Container ein "height" zugewiesen, und schwupps, geht der Rahmen brav um das gesamte Ding. So einfach eigentlich. :hells: Aber danke für die Hilfe!
Empfohlene Beiträge
Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren
Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können
Benutzerkonto erstellen
Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!
Neues Benutzerkonto erstellenAnmelden
Du hast bereits ein Benutzerkonto? Melde Dich hier an.
Jetzt anmelden