Container mit float-Div's zentrieren

hermanhass · 22. April 2009

Hallo ich habe folgendes Problem.
Ich möchte ein horizontales Menü mittig in einen Container packen.
Im Mozilla klappt das wunderbar, im IE leider immer nur linksbündig:
der Container hat die Breite 100%
Das Menü besteht aus einem Div(class=menu) mit width auto als inline-block, die Listeneinträge nur vom typ float:left.
im Mozilla erscheint der Container über den ganzen bildschirm(korrekt) und das menu mittig, im IE das menü mit kompletter breite und deshalb nicht mittig. Mein IE ist Version 6
Vielen Dank
Hermann
Hier der Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
.container {
	width:100%;
	text-align: center;
	background-color: #999999;
}
.menu {
	width:auto;
	display:inline-block;
	background-color: #CC3300;
}
.menu_ul {
	list-style-type: none;
}
.menu_il{
    float:left;
}
</style>

</head>

<body>
<div class="container">
<div class="menu">
<ul class="menu_ul">
<li class="menu_il">
<a>Test1</a>
</li>
<li class="menu_il">
<a>Test2</a>
</li>
<li class="menu_il">
<a>Test3</a>
</li>
</ul>
</div>
</div>
</body>
</html>

Maik · 22. April 2009

Moin,

Centering Float Left Menus - in deinem Fall "a centered floated left menu (unknown width)":

CSS:

.menu_ul {
        list-style-type: none;
        margin: 0 auto;
        padding: 0;
        float: left;
        position: relative;
        left: 50%;
}
.menu_il{
        float: left;
        position: relative;
        right: 50%;
}

mfg Maik

Container mit float-Div's zentrieren

hermanhass

Grünschnabel

Maik

Neue Beiträge