✔ Bekomme CSS-Liste nicht zentriert... wo liegt der Fehler

Status
Nicht offen für weitere Antworten.
K

Karbrüggen

Grünschnabel
Hallo,

wie ihr unter http://css.gaw2006.de sehen könnt, habe ich eine Liste versucht mit CSS zu layouten. Bilderchen hab ich schon erstellt, diese als Hintergrundbilder eingebunden, per Hover werden diese ausgetauscht...

Nur soll die Liste zentriert dargestellt werden - und das bekomm ich nicht hin... und jetzt bin ich ratlos...

Weiß mir hier jemand zu helfen?

Danke..
Karbrüggen
 
CSS: 
margin-left: auto;
margin-right: auto;
... und für den IE ...
HTML: 
<body align="center">
Oder einen DIV mit 100%iger Breite um die Liste legen mit der Eigenschaft:
CSS: 
text-align: center;
 
Hm, danke erstmal...

Aber weder erste Version, noch zweite funktionieren...
Beides zusammen auch nicht. Hmm... und nun?

Gruß
Dominik
 
@suye: Wenn Du Dir den Quellcode der Seite genauer angeschaut hättest, wäre Dir aufgefallen, daß der linke und rechte Außenabstand zum horizontalen Zentrieren der Liste schon bestimmt wurde, aber nichts bewirkt.

Da zum einen dem Dokument bislang eine Dokumenttyp-Deklaration fehlt, werden die Browser in den Quirksmodus versetzt und führen das Boxmodell nicht korrekt aus, und zum anderen die Links mit der float-Eigenschaft formatiert sind, muß für die Liste eine feste Breite bestimmt werden, deren Summe sich aus den Breitenangaben der eingesetzten Links ergibt.

Hier mein Lösungsvorschlag:

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">
<html>
<head>
<title>CSS-Listen-Test</title>
<style type="text/css">
li#menu_faq a { width: 64px; background: url("./images/icon_mini_faq.gif") no-repeat center; }
li#menu_search a { width: 70px; background: url("./images/icon_mini_search.gif") no-repeat center; }
li#menu_members a { width: 87px; background: url("./images/icon_mini_members.gif") no-repeat center; }
li#menu_groups a { width: 78px; background: url("./images/icon_mini_groups.gif") no-repeat center; }
li#menu_profile a { width: 58px; background: url("./images/icon_mini_profile.gif") no-repeat center; }
li#menu_login a { width: 117px; background: url("./images/icon_mini_login.gif") no-repeat center; }
li#menu_pms a { width: 70px; background: url("./images/icon_mini_message.gif") no-repeat center; }
li#menu_pms_alert a { width: 70px; background: url("./images/icon_mini_message_alert.gif") no-repeat center; }
li#menu_forums a { width: 66px; background: url("./images/icon_mini_forums.gif") no-repeat center; }
li#menu_register a { width: 98px; background: url("./images/icon_mini_register.gif") no-repeat center; }

li#menu_faq a:hover { background: url("./images/icon_mini_faq_hover.gif") no-repeat center; }
li#menu_search a:hover { background: url("./images/icon_mini_search_hover.gif") no-repeat center; }
li#menu_members a:hover { background: url("./images/icon_mini_members_hover.gif") no-repeat center; }
li#menu_groups a:hover { background: url("./images/icon_mini_groups_hover.gif") no-repeat center; }
li#menu_profile a:hover { background: url("./images/icon_mini_profile_hover.gif") no-repeat center; }
li#menu_login a:hover { background: url("./images/icon_mini_login_hover.gif") no-repeat center; }
li#menu_pms a:hover { background: url("./images/icon_mini_message_hover.gif") no-repeat center; }
li#menu_pms_alert a:hover { background: url("./images/icon_mini_message_hover.gif") no-repeat center; }
li#menu_forums a:hover { background: url("./images/icon_mini_forums_hover.gif") no-repeat center; }
li#menu_register a:hover { background: url("./images/icon_mini_register_hover.gif") no-repeat center; }

ul#navigation {
        margin: 0 auto;
        padding: 0;
        width: 532px; /* = Summe der einzelnen Linkbreiten */
}

ul#navigation li {
        list-style: none;
        display: inline;
        margin: 0;
        padding: 0;
}
ul#navigation a span {
        display: none;
}
ul#navigation a {
        height: 30px;
        float:right;
        margin: 0;
}
</style>
</head>

<body>

<ul id="navigation">
        <li id="menu_login"><a href="#"><span>Logout</span></a></li>
        <li id="menu_pms"><a href="#"><span>PN-Box</span></a></li>
        <li id="menu_faq"><a href="#"><span>FAQ</span></a></li>
        <li id="menu_search"><a href="#"><span>Search</span></a></li>
        <li id="menu_members"><a href="#"><span>Members</span></a></li>
        <li id="menu_profile"><a href="#"><span>Profil</span></a></li>
        <li id="menu_forums"><a href="#"><span>Foren</span></a></li>
</ul>


</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück