float left elemente horizonal zentrieren?

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • float left elemente horizonal zentrieren?

    hallo leute!

    ich habe ein großes problem mit meiner seitenblätterfunktion. ich kann die einzelnen boxen mit den seitenzahlen, die ich per float left anordne, in meinem hauptdiv (seitenleiste) nicht zentrieren.

    hier der komplette code meines testdivs.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/html">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    
    <style type="text/css">
    
    .EPOS {position:relative}
    .EPOS2 {position:absolute}
    
    .SButton{position:relative; min-width:16px; height:13px; padding:4px; border:1px solid #d4d4d4;
    float:left; background:url(../Bilder/Leisten/grauneu3.png); background-repeat:repeat-x;
    text-align:center; margin:0px 2px; cursor: pointer; color:#2a2a2a}
    	
    </style>
    </head>
    <body>
    
    <div class='EPOS' style='width:700px; height:30px; clear:left; margin:0 auto;
     text-align:center; border:1px solid #ff0000'>
    
    <div class='EPOS2' style='min-width:100px; margin:0 auto; text-align:center;; border:1px solid #badcfe'>
    <div class='SButton'>1</div>
    <div class='SButton'>2</div>
    <div class='SButton'>3</div>
    <div class='SButton'>4</div>
    </div>
    
    </div>
    
    </body>
    </html>
    wobei das mittlere div eine absolute position haben sollte, da sonst min-width nicht funktioniert.

    bei relative zentriert er es, aber ich kann dort keine min-width angeben (nur width und max. width). ich benötige aber min-width, denn sonst wird es nicht richtig zentriert.

    jemand eine idee wie man das ohne JS (berechnungen -> breite aller elemente addieren usw.) hin bekommt?
    Zuletzt geändert von Gamer20; 18.03.2012, 19:38.

  • #2
    Hallo,

    im Firefox (andere nicht getestet) kannst du das div.EPOS2 auf display: inline-block setzen und das position: absolute weglassen. Dann greift text-align: center, um die Zentrierung dynamisch an die vorher nicht bekannte Inhaltsbreite anzupassen.

    Es gibt sicherlich noch andere und kompatiblere Möglichkeiten, aber das wäre erstmal die einfachste und am wenigsten aufwändige.

    Gruß,

    Amica
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Kommentar


    • #3
      Super danke, habe mich vorher noch nie mit dem inline zeug befasst, werde das jetzt mal nachholen.

      Kommentar

      Lädt...
      X