Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: Div`s verspringen :(

  1. #1
    Interessierte/r
    Registriert seit
    18.08.2007
    Beiträge
    112
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Div`s verspringen :(

    Nabend Leute,

    ich bau mir gerade nen kleines Testlayout auf und habe dabei ein Problem
    und zwar verspringen meine Div`s sobald das Browserfenster kleiner wird
    und ich weiß nicht wie ich das fixen kann.

    So (bei Maximierten Browser) sieht alles so aus wie es soll:




    Wenn das Browser Fenster nun kleiner wird fangen die Divs an zu verspringen




    Und hier mein HTMl / CSS Code

    HTML

    <body>

    <div id="head">Kopfbereich ROT</div>
    <div id="navi">Navigation GELB</div>
    <div id="quote">Zitatleiste GRÜN</div>
    <div id="misc">Sonstige Infos GRAU</div>
    <div id="content">Contentbereich BRAUN</div>

    </body>
    CSS

    #head{
    width: 1000px;
    max-width: 1000px;
    height: 100px;
    background-color: red;
    }

    #navi{
    min-width: 150px;
    max-width: 150px;
    height: 600px;
    float: left;
    background-color: yellow;
    }

    #quote{
    min-width: 700px;
    max-width: 700px;
    height: 30px;
    float: left;
    background-color: green;
    }

    #content{
    min-width: 700px;
    max-width: 700px;
    margin-left:150px;
    height: 590px;
    background-color: brown;
    }

    #misc{
    min-width: 150px;
    max-width: 150px;
    height: 600px;
    float: left;
    background-color: grey;
    }
    Ich dachte eigentlich man kann mit dem min-width das verspringen verhindern
    Der Head z.B. verspringt nie.

    Ich wäre echt dankbar wenn mir da jemand sagen kann woran das liegt.

    Achja und eine Verständnis Frage habe ich noch und zwar muss ich bei meinem
    #Content ein margin-left von 150px geben, damit er vollständig hinter der Navigation hervorschaut ich dachte mit einem float:left würde ich erreichen, das er das Element Ignoriert und sich als nächstes angliedert, aber er rutscht dann ganz nach unten. Funktioniert also nur die Methode mit dem Padding-Left oder kann ich die gleiche Darstellung (das der Content zwischen Navi und Misc ist) auch anders erreichen ?

    Sorry für die Noob fragen aber das leuchtet mir gerade nicht ein.

    Gruß viva
    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) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

    Standard

    Ich hab jetzt zwar nicht nachgerechnet, aber vermutlich sind die festen Breiten das Problem. Versuche es doch mal mit mehr relativen Breiten.

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

    Standard

    Zum einen verwendest du jeweils gleiche min-width und max-width-Werte. Das kann der IE6 überhaupt nicht interpretieren.
    Dass gefloatete divs bei verkleinerten Fenstern "verspringen" ist normal. Irgendwo müssen sie ja hin, wenn sie breiter sind als das Fenster.
    Nach Elvis' Vorschlag:
    Code:
    body&#123;
    margin&#58; 0;
    padding&#58; 0;
    &#125;
    
    #head&#123;
    width&#58; 100%;
    height&#58; 100px;
    background-color&#58; red;
    &#125;
    
    #navi&#123;
    width&#58; 15%;
    height&#58; 600px;
    float&#58; left;
    background-color&#58; yellow;
    &#125;
    
    #quote&#123;
    width&#58; 70%;
    height&#58; 30px;
    float&#58; left;
    background-color&#58; green;
    
    &#125;
    
    #content&#123;
    width&#58; 70%;
    height&#58; 570px;
    float&#58;left;
    background-color&#58; brown;
    &#125;
    
    #misc&#123;
    width&#58; 15%;
    height&#58; 600px;
    float&#58; right;
    margin-top&#58; -30px;
    background-color&#58; gray;
    &#125;
    HTML
    Code:
    <div id="head">Kopfbereich ROT</div>
    <div id="navi">Navigation GELB</div>
    <div id="quote">Zitatleiste GRÜN</div>
    <div id="content">contentbereich</div>
    <div id="misc">Miscbereich</div>
    Dieser Code passt sich dann unterschiedlichen Fensterbreiten an. Allerdings kann es zu hier zu Überlappungen der Inhalte kommen, wenn das Fenster zu schmal wird.

  4. #4
    Interessierte/r
    Themenstarter

    Registriert seit
    18.08.2007
    Beiträge
    112
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi,

    danke erstmal für eure Hilfe.

    Aber es gibt doch auch die Möglichkeit das mit den Containern nichts passiert wenn das Fenster kleiner wird. Das der Inhalt der vom Browserfenster nicht mehr angezeigt wird einfach verschwindet und nicht der ganze Container verspringt.

    Sowas hätte ich ganz gerne.


    Ich hoffe ich wisst was ich meine

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

    Standard

    ja, versuchs mal mit meiner "Prozentual-Lösung".
    Ich habe den Quelltext zwischenzeitlich etwas editiert, da ich da was missverstanden hatte.

  6. #6
    Interessierte/r
    Themenstarter

    Registriert seit
    18.08.2007
    Beiträge
    112
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi,

    ich habe das jezt mal mit Prozentualen Angaben gemacht dann hab ich aber was natürlich logisch ist auch ein Layout wo sich der Container je kleiner er wird auch Prozentual zusammenzieht...

    Es gibt aber doch die Möglichkeit das mit dem ***** Container einfach nix passiert wenn das Browserfenster kleinen wird. Man sieht dann z.B. nur noch einen Teil des Containers der andere ist quasi außerhalb des Sichtbaren Bereichs

    Oh man es ist zum heulen

  7. #7
    Interessierte/r
    Registriert seit
    04.12.2005
    Beiträge
    133
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    moin ...

    Setze die Divs doch in ein Weiteres und gebe diesem eine feste Breite.

    gruß ...

  8. #8
    Interessierte/r
    Themenstarter

    Registriert seit
    18.08.2007
    Beiträge
    112
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von topfblume
    moin ...

    Setze die Divs doch in ein Weiteres und gebe diesem eine feste Breite.

    gruß ...
    Ach du bist ja nen Schatz ^^
    Danke das funktionukelt

    €dit:

    Aber ich versteh nicht ganz wieso das nur so klappt ?
    Wenn ich das DIV nicht drumherum habe und trotzdem jedem Div ne Feste größe gebe klappt es nicht hab ich nen Div drum klappt es O.o

    Kann mir das mal jemand erklären ?

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

    Standard

    Das hängt m.E. mit den float-Eigenschaften zusammen. Die hat der äußere Container nicht. Und die gefloateten Elemente, die sich innerhalb des äußeren Containers befinden, sind durch dessen fixe Breite vor dem "Verspringen" geschützt.

  10. #10
    Großmeister(in)
    Registriert seit
    18.01.2007
    Ort
    Hamburg
    Alter
    26
    Beiträge
    710
    Danke
    2
    Bekam 2 mal "Danke" in 2 Postings

    Standard

    ansonsten setzt du einfach überall ein
    Code:
    position&#58;absolute;
    dazu

Stichworte

Berechtigungen

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