• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hauptbereich mit variabler Breite verschiebt sich bei verkleinertem Fenster

G

goc

Neues Mitglied
Hallo,

ich denke man darf nach 2 Tagen suchen und probiere mal ne Frage stellen, also bitte nicht hauen. :oops:

:arrow: Also, zu meinem Problem. Ich entwickle gerade ein neues Layout fuer eine Seite. Grundsaetzlich handelt es sich um ein DIV-Element, welches zentriert dargestellt werden soll (lassen wir mal IE6 aussen acht funktioniert das auch schon). In der Seite soll auf der linken Seite das Menu (fixe Breite mit 200px) und auf der rechten Seite der Hauptcontent (variable Breite, min: 730px, max: 902px) erscheinen.
Dazu habe ich nun folgendes Template erstellt:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
    <title></title> 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 
    <style type="text/css"> 
    body { 
        font-family: Helvetica,Arial,Verdana,sans-serif; 
        font-size: 12px; 
        margin-top: 0; 
        width: 100%; 
    } 
    #page { 
        margin: 0 auto; 
        max-width: 1102px; 
        min-width: 930px; 
        position: relative; 
    } 
    #pageContainer { 
        background: none repeat scroll 0 0 #FFFFFF; 
        border-color: #D3D3D3; 
        border-style: solid; 
        border-width: 1px; 
        float: left; 
        max-width: 1102px; 
        min-width: 960px; 
        width: 100%; 
    } 
    #pageContent { 
        float: left; 
        width: 100%; 
    } 
    #pageInternals { 
        float: left; 
        width: 100%; 
    } 
    #pageMenu { 
        float: left; 
        width: 200px; 
    } 
    #pageMain { 
    float: left; 
        max-width: 902px; 
        min-width: 730px; 
    } 
    .clearer { 
        clear: both; 
    } 
    </style> 
</head> 
<body> 
<div id="page"> 
    <div id="pageContainer"> 
        <div id="pageContent"> 
        <div id="pageInternals"> 
            <div id="pageMenu"> 
                &nbsp; 
            </div> 
            <div id="pageMain"> 
                <div id="pageMainStyle"> 
                    <h1>Title 1</h1> 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br /><br />  
                </div> 
            </div> 
            <div class="clearer"></div> 
        </div> 
    </div> 
    </div> 
</div> 
</body> 
</html>
Der Fuelltext ist hier absichtlich im Template. Denn erst dadurch kann man das Problem erkennen. Und zwar geht es um das Verhalten, wenn man das Browser-Fenster kleiner als 930px zieht. In diesem Fall sprint der Hauptcontent unter das Menu. Entfernt man den Fuelltext, passiert das nicht mehr.
Der Grund dafuer ist, dass ohne den Fuelltext der Hauptcontent die Breite von 902 nicht erreicht und somit kein Konflikt mit der Breite (200px) des Menus entsteht.

Ich hoffe die Erklaerung ist ausreichend. Ansonsten bitte bitte das Template mal rauskopieren und selbst probieren. Und hoffentlich bin ich hier mit dem Problem bei CSS richtig :oops:.

Bin fuer jeden Ratschlag dankbar!!!
goc
 
Der Grund ist, dass Du bei #page eine max-width und eine min-width angegeben hast. Du solltest aber einen festen Wert (width) verwenden, dann verschiebt sich auch nichts. Wieso soll die Seite überhaupt in so kleinen Maßen in der Breite variabel sein?
 
Hm, erstmal danke fuer die Antwort. Werd das mal ausprobieren. Um ehrlich gesagt ist das mit der variablen Breite erst mal nur ein Experiment. Daher haben die Werte (jedenfalls noch) keine konkrete Bedeutung. Muss erst mal das Urteil des Auftraggebers abwarten ... Thx
 
Hallo,
hm, da bin ich aber skeptisch. Wieso soll die Seite eine bestimmte Breite haben? Ich denke, es macht schon einen Sinn diese variabel zu belassen(verschiedene Bildschirme/Auflösungen bei den Clients usw.). Dafür würde ich die Weiten einfach mal mit width:auto; angeben.

Wenn du die komplette Seite als solche zentriert sehen willst, also die Ränder links und rechts brauchst, dan verwende für #page width:xx%;. XX ist die Prozentzahl für den Bereich, den dieser #page Container auf den Bildschirm einnehmen muss. Mit margin:0 auto; hast du deine Positionierung schon erreicht.

Das Problem mit IE6 ist einfach zu erklären: die relative Positionierung hat ohne weitere Angaben wie top, right, bottom oder left keinen Sinn. Andere Brauser ignorieren es einfach, IE6 kann es aber nicht. Entferne die Zeile position:relative; und es wird funktionieren.

Nun zum Problem mit der Verschiebung. Dein Hauptcontent springt runter weil er keinen
platz rechts hat wenn du das Fenster verkleinerst. Dies passiert weil du in zwingst in einer bestimmten Breite zu bleiben. Arbeite mit width:XX%; das soll das Problem lösen.

Ich habe nicht verstanden wozu du so viele <div>-Container brauchst. Für dein Zweispaltiges Layout brauchst du ja nur drei davon. Erster für das Zentrieren der Gesamtseite. Zweiter fürs Menü links und ein letzter für dein Content (oder ich habe was übersehen?).
Für dieses Thema kann ich folgende Seite empfehlen. Link.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben