Ergebnis 1 bis 4 von 4

Thema: Variable höhe und Zentrierung von Divs

  1. #1
    HTML Newbie
    Registriert seit
    31.08.2007
    Ort
    Pinnow bei Schwerin
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Variable höhe und Zentrierung von Divs

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

    Ich habe - um das in einem anderen Thread (http://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:
    Code:
    <body>
    <div id="mainpage">
    <div id="banner">
        <?php include&#40;"banner.php"&#41;; ?>
    </div>
    <div id="navi">
        <?php include&#40;"navi.php"&#41;; ?>
    </div>
    <div id="main">
        <?php include&#40;"seitenwahl.inc.php"&#41;; ?>
    </div>
    <div id="news">
        <?php include&#40;"news.php"&#41;; ?>
    </div>
    </div>
    </body>
    in der style.css schauts dann wie folgt aus:
    Code:
    div      &#123;margin&#58;0 auto; background-color&#58; black; border&#58;none;&#125;
    
    div#mainpage    &#123;position&#58;absolute; height&#58; 750px; width&#58; 1000;&#125;
    div#mainpage a  &#123;color&#58;red;&#125;
    
    div#banner       &#123;border&#58; 1px solid red; position&#58;absolute; left&#58;0px; top&#58;0px; width&#58;999px; height&#58;100px;&#125;
    div#navi         &#123;border&#58; 1px solid red; position&#58;absolute; left&#58;0px; top&#58;100px; width&#58;110px; height&#58; 81.5%;&#125;
    div#main         &#123;border&#58; 1px solid red; position&#58;absolute; left&#58;111px; top&#58;100px; width&#58;777px; height&#58; 81.5%; overflow&#58; auto;&#125;
    div#news         &#123;border&#58; 1px solid red; position&#58;absolute; left&#58;889px; top&#58;100px; width&#58;110px; height&#58; 81.5%;&#125;
    div#navi a       &#123;text-decoration&#58;none; color&#58;red; font-size&#58;16px;&#125;
    div#navi a&#58;hover &#123;color&#58;yellow;&#125;
    EDIT: Link verändert, da ich nicht mehr auf einer experimentellen unterseite arbeite.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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      &#123;margin&#58;0 auto; background-color&#58; black; border&#58;none;&#125;
    
    div#mainpage    &#123;position&#58;absolute; height&#58; 750px; width&#58; 1000;&#125;
    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.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    31.08.2007
    Ort
    Pinnow bei Schwerin
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hey sejuma, erstmal danke

    Was das zentrieren angeht: ich brauch das div für spätere formatierungssachen leider, also auch den stylesheet o.O 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*

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    31.08.2007
    Ort
    Pinnow bei Schwerin
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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.

Ähnliche Themen

  1. Probleme mit Zentrierung bei Frames
    Von Joerg7777777 im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 23.10.2007, 18:54
  2. Zentrierung eines Divs - negativer margin
    Von Dark_Dog im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 18.07.2007, 09:28
  3. zentrierung - egal welche auflösung!
    Von im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 5
    Letzter Beitrag: 16.12.2006, 01:11
  4. Problem mit Zentrierung und Orientierung
    Von Sportfreund im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 03.10.2005, 16:08
  5. Problem mit Zentrierung im IE
    Von SniperSister im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 22.07.2005, 11:28

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •