✔ UL LI Floaten mittig (horizontal) ausrichten

Status
Nicht offen für weitere Antworten.
G

Gunah

Erfahrenes Mitglied
moin allerseits.

ich habe folgendes Problem ich habe eine Liste die als Menü dienen soll gefloatet...

nur leider wird es nicht mittig gesetzt mit (text-align:center; margin:0px auto;)...

display:inline, macht mir zwischen den Einträgen leider immer leerzeilen... und das geht leider bei dem Menu nicht :(

hier mal der SRC:
CSS:
Code: 
.menu 
{
    text-align:center;
    margin:0px auto;
    height:43px;
    display:block;
}
.menu ul {
    text-align:center;
    margin:0px auto;
    list-style-type:none;
    padding:0px;
    margin:0px;
    width:80%;
}
.menu ul li {
    text-align:center;
    margin:0px auto;
    list-style-type:none;
    padding:0px;
    margin:0px;
    margin-bottom:-5px;
    display:block;
    float:left;
    background-image:url('../images/menu/spacer.jpg');
    background-position:top left;
    background-repeat:repeat-x;
    padding-left:1px;
    padding-right:1px;
}
hier HTML:
HTML: 
            <div class="menu">
            <ul>
              <li class="activ"><img src="images/menu/home.jpg" alt="Startseite" /></li>
              <li><img src="images/menu/home.jpg" alt="Startseite" /></li>
              <li><img src="images/menu/home.jpg" alt="Startseite" /></li>
              <li><img src="images/menu/home.jpg" alt="Startseite" /></li>
            </ul>
            </div>

danke schonmal im vorraus

Gruß
Gunah
 
danke , leider nicht :( da meine Einträge Verschieden gross sind :(

sonst hat einer eine Lösung, wie es mit display:inline geht, sodass es keine Leerzeichen zwischen den beiden nebeneinander gelegten LIs macht.
 
stimmt das 2te Modell macht es mittig ... *an kopf fass*

nur für den IE 6 nicht, da muss ich dann noch mal gucken und probieren ob es dafür eine Varinate gibt...
(also mit dem Codeschnipsel von unten in der oberen Demo geht es)
 
Hast du auch diesen Teil des Codes übernommen?

Code: 
<!--[if lt IE 7]>
<style type="text/css">
#menu2 li {
  float:left;
  }
#menu2 a {
  float:left;
  }
.container {display:inline-block;}
</style>
<![endif]-->
 
Bei mir funktioniert's im IE6 einwandfrei:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_Gunah</title>

<style type="text/css">
<!--
#info {
  text-align:center;
}

#menu2 {
  display:table;
  padding:0;
  margin:0 auto;
  list-style-type:none;
  white-space:nowrap;
  }
#menu2 li {
  display:table-cell;
  }
#menu2 a {
  width:auto;
  display:block;
  padding:4px 16px;
  color:#fff;
  background:#08c;
  border:1px solid #fff;
  text-decoration:none;
  }
#menu2 a:hover {
  color:#000;
  background:#d4d4d4;
  }

.container {clear:both; text-decoration:none;}
-->
</style>
<!--[if lt IE 7]>
<style type="text/css">
#menu2 li {
  float:left;
  }
#menu2 a {
  float:left;
  }
.container {display:inline-block;}
</style>
<![endif]-->

</head>
<body>

<div id="info">
     <del class="container">
          <ul id="menu2">
              <li><a href="#nogo">Tab One</a></li>
              <li><a href="#nogo">Tab Two: Longer</a></li>
              <li><a href="#nogo">Tab Three: Longest</a></li>
              <li><a href="#nogo">Tab Four</a></li>
          </ul>
     </del>
</div>

</body>
</html>
 
hab gerade mal diff gemacht, alter hab ich heut Buchstabendreher drin geht garnicht...

naja bald ist wieder WE *gg*

danke an dieser Stelle ;)

Gruß
Gunah
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück