Ergebnis 1 bis 5 von 5

Thema: Anordnung von divs abhngig von Fenstergre?

  1. #1
    Gast

    Standard Anordnung von divs abhngig von Fenstergre?

    Hallo,
    mir ist aufgefallen, dass nebeneinander angeordnete divs (per float:left) sich trotzdem untereinander anordnen, wenn man das Browserfenster in horizontaler Richtung schmaler macht.

    Hier sieht man das sehr gut. Wenn man das Fenster kleiner macht, verschieben sich die Buttons untereinander. Im IE ist eins sogar von anfang an in der nchsten "Zeile".

    Wie kann ich das denn unterbinden?

    Die Buttons:
    Code:
    <div style="float&#58;left; background-color&#58;#FF0000;">
    <span class="content">
    	<span class="buttons_oben">
             	<span class="1">LABER</span>
             	<span class="2">BLA</span>
             	<span class="3">FORUM</span>
             	<span class="4">START</span>
             	<span class="5">SLZ</span>
    	</span>
    </span>
    </div>
    style.css
    Code:
    .content&#123;
    float&#58;left;
    border-width&#58;3px;
    border-color&#58;#000000;
    border-style&#58;double;
    &#125;
    
    .buttons_oben a&#123;
    float&#58;left;
    background-color&#58;#D5D5D5;
    color&#58;#404040;
    font-size&#58; 12px;
    font-family&#58;Eurostile;
    font-weight&#58; bold;
    width&#58;197px;
    text-align&#58;center;
    text-decoration&#58;none;
    padding-top&#58; 10px;
    padding-bottom&#58;10px;
    &#125;
    
    .1 a&#123;
    float&#58;left;
    border-top&#58; solid 2px #444;
    border-bottom&#58; solid 1px #444;
    &#125;
    
    .1 a&#58;hover&#123;
    float&#58;left;
    border-top&#58; solid 4px #444;
    &#125;
    
    .2 a&#123;
    float&#58;left;
    &#125;
    
    .3 a&#123;
    float&#58;left;
    &#125;
    
    .4 a&#123;
    float&#58;left;
    &#125;
    
    .5 a&#123;
    float&#58;left;
    &#125;
    Bei den klassen 1 - 5 hab ich auch noch das Problem, dass die sich rein gar nicht bemerkbar machen... der Border in .1 a{...} ist nicht zu sehen z.B.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist lter als 90 Tage. Die darin enthaltenen Informationen sind mglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    05.03.2006
    Alter
    29
    Beitrge
    432
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    post ist von mir...

    vergessen einzuloggen... sry

  3. #3
    Prinz(essin) Avatar von Lizzard
    Registriert seit
    19.02.2006
    Ort
    Mnchen
    Beitrge
    788
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi,

    du musst um die floatenden Elemente einfach noch ein weiteres DIV mit fester Breite packen, um zu verhindern, dass die Buttons untereinander rutschen, wenn das Fenster zu klein wird.
    Beim Berechnen der einzelnen Buttongren auf die Gesamtbreite des DIVs solltest du unbedingt an das Box-Modell denken ansonsten rutschen dir wieder Buttons von Anfang an in die nchste Zeile...

    MfG
    LizZard
    Sometimes you have a programming problem and it seems like the best solution is to use regular expressions; now you have two problems.

  4. #4
    Meister(in)
    Registriert seit
    05.03.2006
    Alter
    29
    Beitrge
    432
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    mit Box-Model meinste den roten Rahmen?

    EDIT: schon ok funzt wunderbar...

  5. #5
    Prinz(essin) Avatar von Lizzard
    Registriert seit
    19.02.2006
    Ort
    Mnchen
    Beitrge
    788
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ne Box-Modell is die Adition der verschiedenen Attribute auf die Gesamtbreite...

    Also kurz gesagt

    Padding-left + margin-left + border-left + width + border-right + margin-right + padding-right = gesamtbreite des Containers

    Aber gut wenns funzt!

    MfG
    LizZard
    Sometimes you have a programming problem and it seems like the best solution is to use regular expressions; now you have two problems.

hnliche Themen

  1. I-explorer richtige anordnung im Firefox alles verfuscht
    Von holzverleih im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 20.02.2008, 19:15
  2. Windows-Anordnung
    Von rwo-tony im Forum Computer - Internet Forum
    Antworten: 3
    Letzter Beitrag: 04.04.2007, 20:39
  3. Anordnung
    Von !ron m@n im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 12.08.2005, 01:36
  4. Hintergrundbild anordnung?
    Von HSFighter im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 23.12.2003, 20:03
  5. Anordnung von CSS-Buttons bei Ebay (Mich-Seite)
    Von Romi im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 09.06.2003, 13:59

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhnge hochladen: Nein
  • Beitrge bearbeiten: Nein
  •