Thorsten S.: Gestaltung von Listenelementen / padding:auto und width funktion

Beitrag lesen

SELF-Forum

Gestaltung von Listenelementen / padding:auto und width funktion

Thorsten S.
– Informationen zu den Bewertungsregeln

Hallo!

Ich habe ein Problem mit width- und padding-Attributen im css-Code, die sich nicht auf die Darstellung auswirken. Vielleicht kann jemand einen Blick darauf sagen und mir sagen, wo die Fehler liegen? Der css- und html-Code folgen unten.

Bei den Elementen der übergeordneten Liste funktionieren padding und width grundsätzlich, padding:auto funktioniert jedoch nicht. Ich würde die weiße Schrift gerne auf den 70 px breiten, schwarzen Boxen zentrieren.

Bei den Elementen der untergeordneten Liste funktionieren padding und width grundsätzlich nicht. Ich würde hätte hier gerne 50px breite Boxen, auf denen die Schrift ebenfalls zentriert ist.

ul, li {  
            margin: 0px;  
            padding: 0px;  
            list-style-type: none;  
}  
  
ul#navi2 {  
            margin: 0px 10px 0px 230px;  
}  
  
ul#navi2 li {  
            margin: 0px 5px 0px 0px;  
            padding: 1px auto 1px auto;  
            width: 70px;  
            float: left;  
            position: relative;  
            background-color: black;  
            color: white;  
}  
  
ul#navi2 a:link, ul#navi2 a:visited, ul#navi2 a:active {  
            text-decoration: none;  
            background-color: black;  
            color: white;  
}  
  
ul#navi2 a:hover {  
            text-decoration: none;  
            background-color: black;  
            color: #FFCC33;  
}  
  
li ul {  
            display: none;  
}  
  
li:hover ul {  
            display: inline;  
            position: absolute;  
            top: 22px;  
            left: -75px;  
            width: 450px;  
}  
  
li:hover ul li {  
            margin: 0px 5px 0px 0px;  
            padding: 1px auto 1px auto;  
            width: 50px;  
            float: left;  
}

<html>  
<body>  
  
<ul id="navi2">  
     <li><a href="aktuell.php">aktuell</a></li>  
     <li><a href="index.php">eulenbiss</a>  
         <ul>  
         <li><a href="katrin.php">Katrin</a></li>  
         <li><a href="kery.php">Kery</a></li>  
         <li><a href="kirsten.php">Kirsten</a></li>  
         <li><a href="michael.php">Michael</a></li>  
         <li><a href="oliver.php">Oliver</a></li>  
         <li><a href="thomas.php">Thomas</a></li>  
         <li><a href="thorsten.php">Thorsten</a></li>  
         </ul>  
     </li>  
     <li><a href="hoerproben.php">h&ouml;rproben</a></li>  
     <li><a href="bilder.php">bilder</a></li>  
     <li><a href="kontakt.php">kontakt</a></li>  
     <li><a href="links.php">links</a></li>  
</ul>  
  
</body>  
</html>

Gruß,
Thorsten

Beitrag melden
–
Informationen zu den Bewertungsregeln