Variable höhe und Zentrierung von Divs

Insanctus

Vorab: Es handelt sich um die Seite: http://insanctus.kilu.de

Ich habe - um das in einem anderen Thread (https://www.forum-hilfe.de/viewtopic.php?p=234065#234065) beschriebene Problem zu umgehen meine Homepage mal statt Frames mit Divs gemacht. Natürlich gibt es auch hier gleich ein Problem: Das Hauptdiv ist nicht korrekt mittig ausgerichtet, mit

Code

margin=0 auto;

hab ichs schon versucht, und auch ein

Code

text-align="center"

im <body> Tag hat nicht viel gebracht, da war auf einmal alles am rechten Rand.
Also ist die Ausrichtung Problem #1.

Problem #2 ist folgendes: Die unteren 3 Divs (navi,main,news) sind im moment zwar prozentual eingegeben,verändern aber ihre Größe nicht, da ich overflow auf auto gesetzt habe beim Div main.
Zukunftsziel: alle 3 unteren Divs sollen, sofern sich der Inhalt des mittleren Divs über dessen Rand hinaus erstreckt, gleichermaßen nach unten erweitert werden, so dass alle gleich lang sind.... und der Text nicht einfach über die Grenze des Divs hinaus wächst.

Der Code für die Divs:

PHP

<body>
<div id="mainpage">
<div id="banner">
    <?php include("banner.php"); ?>
</div>
<div id="navi">
    <?php include("navi.php"); ?>
</div>
<div id="main">
    <?php include("seitenwahl.inc.php"); ?>
</div>
<div id="news">
    <?php include("news.php"); ?>
</div>
</div>
</body>

Alles anzeigen

in der style.css schauts dann wie folgt aus:

Code

div      {margin:0 auto; background-color: black; border:none;}


div#mainpage    {position:absolute; height: 750px; width: 1000;}
div#mainpage a  {color:red;}


div#banner       {border: 1px solid red; position:absolute; left:0px; top:0px; width:999px; height:100px;}
div#navi         {border: 1px solid red; position:absolute; left:0px; top:100px; width:110px; height: 81.5%;}
div#main         {border: 1px solid red; position:absolute; left:111px; top:100px; width:777px; height: 81.5%; overflow: auto;}
div#news         {border: 1px solid red; position:absolute; left:889px; top:100px; width:110px; height: 81.5%;}
div#navi a       {text-decoration:none; color:red; font-size:16px;}
div#navi a:hover {color:yellow;}

Alles anzeigen

EDIT: Link verändert, da ich nicht mehr auf einer experimentellen unterseite arbeite.

sejuma

Zunächst solltest du einen qualifizierten Doctype zu Beginn jeder Seite einfügen.

Deine CSS-Angaben widersprechen sich: Du willst den mainpage zentrieren, hast ihn aber absolut positioniert.

Dein momentaner Code:

Code

div      {margin:0 auto; background-color: black; border:none;}


div#mainpage    {position:absolute; height: 750px; width: 1000;}

Lass den ersten div ganz weg und kopiere die Angaben in den mainpage. Beim mainpage nimm das position: absolute raus. Das solltest du ohnehin nur gezielt einsetzen. Auch bei den anderen Elementen würde ich das nicht verwenden, sondern mit float und margin arbeiten. Schließlich hat jeder eine andere Bilschirmauflösung und da kommt die Zentrierung in Konflikt mit der absoluten Positionierung.
Die Breite von 1000px ist etwas groß. Würde ich noch etwas reduzieren.
Orientiere dich vielleicht mal an diesem layout

Das zweite Problem mit der automatischen Höhenanpassung lässt sich über
faux columns lösen.

Insanctus

Hey sejuma, erstmal danke

Was das zentrieren angeht: ich brauch das div für spätere formatierungssachen leider, also auch den stylesheet sonst muss ichs ja für jeden einzeln eintragen *g* und ohne das position absolute verschiebt sich das ganze layout und backt sich oben links in die ecke, so dass man den rand nicht mehr sieht, auch nach unten wird es länger. zentriert ist es trotzdem nicht

Das genannte Layout ändert leider nichts an meinem Problem, da ich ja nicht mit prozentualangaben rechnen will eigentlich, immerhin soll der obere div immer die gleiche höhe, der linke und rechte div immer die gleiche breite haben. (für zugeschnittene images später). nur der mittlere soll komplett variabel sein .... oder ne minimal breite haben. Hab das ganze erstmal wieder durch overflow:auto gehandelt bis mir was besseres einfällt

Das mit den Columns bin ich grad am testen, da komm ich bisher auch noch nicht auf nen grünen zweig. also heißts weiter experimentieren *g*

Insanctus

hmz ... hab das mit dem mittig positionieren hinbekommen, jedoch nur so, dass es im mozilla korrekt angezeigt wurde. im ie gabs pixelverschiebungen und es backte trotzdem am rand. daher lass ichs einfach mal so wies ist, gefällt mir im moment werd mir das andere trotzdem testweise nochmal zu gemüte führen.

Tags