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

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

  1. Hi,

    Bei den Elementen der übergeordneten Liste funktionieren padding und width grundsätzlich, padding:auto funktioniert jedoch nicht.

    Kein Wunder, das gibt's nämlich auch nicht.

    Ich würde die weiße Schrift gerne auf den 70 px breiten, schwarzen Boxen zentrieren.

    Dann nutze text-align.

    Bei den Elementen der untergeordneten Liste funktionieren padding und width grundsätzlich nicht.

    Dann nimm dir Firebug oder ein vergleichbares Tool, und schau nach, wieso nicht.

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. Danke für den Hinweis zu padding: auto. Ich habe nicht wenige Forenbeiträge gelesen, in denen jemand das ohne Widerspruche empfohlen hat ... für mich hat text-align das gewünschte Ergebnis gebracht.

      Dann nimm dir Firebug oder ein vergleichbares Tool, und schau nach, wieso nicht.

      Kann Firebug das denn (ich kenne es noch nicht)? Ich habe den Quellcode oben leicht verändert und dann validieren lassen, dabei wurde kein Fehler gefunden ...

      1. Hallo

        Danke für den Hinweis zu padding: auto. Ich habe nicht wenige Forenbeiträge gelesen, in denen jemand das ohne Widerspruche empfohlen hat ... für mich hat text-align das gewünschte Ergebnis gebracht.

        Dann nimm dir Firebug oder ein vergleichbares Tool, und schau nach, wieso nicht.

        Firebug als Firefox-Addon ermöglicht es dir (unter Anderem) in einer geladenen Seite mit Klick auf das gewünschte Element dessen eigene und von anderen Definitionen geerbte CSS-Eigenschaften zu ermitteln und überdies live die Werte der Eigenschaften zu ändern. Schon ganz praktisch, das Teil.

        Tschö, Auge

        --
        Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
        Terry Pratchett, "Wachen! Wachen!"
        ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
        Veranstaltungsdatenbank Vdb 0.3
        1. Firebug als Firefox-Addon ermöglicht es dir (unter Anderem) in einer geladenen Seite mit Klick auf das gewünschte Element dessen eigene und von anderen Definitionen geerbte CSS-Eigenschaften zu ermitteln und überdies live die Werte der Eigenschaften zu ändern. Schon ganz praktisch, das Teil.

          Die Werte zu verändern und live das Ergebnis zu sehen, ist echt 'ne tolle Sache. Auch das parallele Betrachten von html und css ist super ... leider hilft mir das nicht weiter. Ich habe Listenelemente gestaltet mit ...

          ul#navi2 li {  
                      margin: 0px 5px 0px 0px;  
                      padding: 1px auto 1px auto;  
                      width: 70px;  
                      float: left;  
                      position: relative;  
                      background-color: black;  
                      color: white;  
          }
          

          und es funktioniert. Ich habe andere Listenelemente mit praktisch demselben Code gestaltet und es funktioniert nicht ...

          li:hover ul li {  
                      margin: 0px 5px 0px 0px;  
                      padding: 1px auto 1px auto;  
                      width: 50px;  
                      float: left;  
          }
          

          Ich schätze, dass ich hier einen (?) Fehler mache, ohne es zu erkennen ...

          1. Hi,

            Ich habe Listenelemente gestaltet mit ...

            ul#navi2 li { ... }

            und es funktioniert. Ich habe andere Listenelemente mit praktisch demselben Code gestaltet und es funktioniert nicht ...

            li:hover ul li { ... }

            Der erste Selektor hat eine höhere Spezifität als der zweite.

            MfG ChrisB

            --
            RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
            1. Danke, genau das war's!

      2. Hi,

        Danke für den Hinweis zu padding: auto. Ich habe nicht wenige Forenbeiträge gelesen, in denen jemand das ohne Widerspruche empfohlen hat ...

        Bist Du sicher, daß dort wirklich padding:auto stand? Oder war's doch eher margin:auto?

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.