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

Zentrieren im Float

E

Erhano

Neues Mitglied
Hallo zusammen,

ich würde gerne mehrere float:left-DIV-Elemente horizontal zentrieren.
Ich habe dies über das umgebene DIV mit
Code: 
margin: 0px auto;
probiert.
Leider funktioniert es nicht.
Hier noch ein paar Ausschnitte aus dem Code:
HTML: 
<body>
  <div id="wrapper">
    <div id="header"><p>Header</p></div>
    <div id="content">
      <div id="content_wrapper">
        <div id="slider">Slider</div>
        <div id="teaser_group">
           <div class="teaser">Teaser 01</div>
           <div class="teaser">Teaser 02</div>
           <div class="teaser">Teaser 03</div>
           <div class="teaser">Teaser 04</div>
      </div>
      <p>Text</p>
    </div>
  </div>
  <div id="footer"><p>Footer</p></div>
</div>
</body>
dazu der CSS:
Code: 
html, body {margin: 0px;padding: 0px;}
body {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 0.9em;height: 100%}
#header {margin: 0px auto;float: left;color: #333;width: 100%;height: 50px;background: #6B6659;}
#wrapper {margin: 0px auto;width: 100%;height: 100%;}
#content {margin: 0px auto;float: left;color: #333;background: #FFFFFF;width: 100%;display: inline;}
#content_wrapper {margin: 0px auto;padding: 20px;background: #000;width: 600px;height: 100%;}
#slider {margin: 0px auto 20px;width: 400px;height: 300px;background: #c00;}
#teaser_group {margin: 0px auto;width: 400px;height: 300px;background: #00f;}
.teaser {margin: 0px auto;width: 150px;height: 100px;background: #0f0;text-align: center;overflow: auto;float: left;}
#footer {width: 100%;height: 200px;clear: both;color: #333;background: #6B6659;}

Es dabei also um die grünen Boxen, die leider nicht zentriert sind.
Wenn gewünscht kann ich die Dateien auch als ZIP anhängen.


Grüße

Erhano
 
Schau dich mal nach "horizontales menü zentrieren" um. Da gibt es eine Möglichkeit mit "position: relative;" und Verschiebung von Elementen nach links und rechts.
 
Danke schonmal für die ersten Tipps.
Ich will diese Boxen automatisch zentrieren, d.h. wenn sie z.b. etwas kleiner werden sollen sie immer noch zentriert sitzen.
Daher haben die Lösungen, die ich per Padding und Margin gefunden habe leider nur bei festen Größen funktioniert.
Damit ihr euch das noch besser vorstellen könnt, hänge ich die Dateien als ZIP an.
 

Anhänge

Dazu hab ich nur Infos zu ul listen gefunden. Meinst du so etwas? Konnte mir anhand der Beschreibungen, die ich im Internet zu deinem Stichwort Fingern konnte, leider selbst nicht soviel bei meinem Fall anfangen.

Gruß Stefan
 
Mit einem zusätlichen Container geht es so.
Code: 
#teaser {
text-align:center;
}

#teaser_group {
display:inline-block;
 background:#ada;
}
 
#teaser_group div {
display:inline-block;

}


  <div id="teaser">
        <div id="teaser_group">
           <div class="teaser">Teaser 01</div>
           <div class="teaser">Teaser 02</div>
           <div class="teaser">Teaser 03</div>
           <div class="teaser">Teaser 04</div>
       </div>
  </div>
 
Null Problemo!
Dann bekommen diese Browser über CC ein display:inline,. Fertig!
Allerding gibt es Schwierigkeiten mit padding und margin, für den Fall, dass das Fenster verkleinert wird. Ist aber vertretbar. Vielleicht könnte man sogar mit line-height arbeiten?!

Hier mal ein Beispiel. Funktioniert auch im IE 5.5 , 6.0 und 7.

Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Horizontal zentrierte Navigation bei unbekanner Größe</title>
<style type="text/css">
* {
 list-style:none;
 text-decoration:none;
 margin:0;
 padding:0;
}

#navi {
 text-align:center;
}

li {
 display:inline-block;
 background:#333;
 color:#fff;
 margin-left:-3px; /* Die nicht benötigten Außenabstände(ca. 4px) von -display:inline-block- korrigieren */
 margin-bottom:1px; /* Dami beim umbrechen der Navi etwas Raum nach unten bleibt.*/
}

#navi a {
 display:block;
 padding:10px;
 color:#fff;
}

#navi a:hover {
 background:#a33;
}
</style>

<!--[if lt IE 8]>
<style type="text/css">
li {
 display:inline;
 margin-left:1px;
}

#navi a {
 position:relative; /* Für IE kleiner 7 (darf der 7er auch sehen -egal-)*/
}
</style>
<![endif]-->
  
</head>
<body>
  <div id="navi">
   <ul>
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Anbieterkennzeichnung</a></li>
    <li><a href="#">Block</a></li>
   </ul>
  </div>
</body>
</html>
 
Zuletzt bearbeitet:
Ich bezog mich eher auf die Pseudoklasse hover die der IE6 und älter nur bei Links kennt. Diese Browser würden so keine aufklappenden Submenüs sehen können.
 
Achso, achso. Ich habe aber bei Erhano's Frage keine Navi gesehen. Übrigens, der Lösungsansatz funktioniert auch ohne zusätzlichen Container. Da hab ich wohl zu früh gebrüllt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben