CSS Angabe "padding-top: 0px" zerschießt Menü

[dagobert50gold]

Guten Abend,

ich versuche aus einer ungeordneten Liste, die von einem CMS automatisch erstellt wird, ein horizontales Menü zu machen. Damit bin ich auch fast fertig, würde nicht dieser Fehler auftreten:

Ich möchte die Menügrafik (grün, im Code "navitab" 1 und 2) ganz oben mit der Hintergrundgrafik (orange, im Code "navibackground.png") machen während beides an dem kleinen grauen Rahmen oben dranhängt. Das orangene hängt automatisch dran, das grüne kann ich durch verkleinern von "padding-top" immer näher heranrücken. Doch wenn ich genau 0px auswähle, sind zwar Hinetrgrund und Reiter bündig, jedoch rutschen sie plötzlich unter den grauen Rahmen (Abstand in rot gekennzeichnet). Wie kann ich das verhindern?

Hier der Code:

nav {
     background-image: url("navibackground.png");
     background-repeat: repeat-x;
     border-bottom: 1px solid #DDDDDD;
     height: 17px;
     padding-top: 0px;
}

nav li {
     background-image: url("navitab1.gif");
     color: #FFFFFF;
     display: inline;
     float: left;
     font-family: Arial,Verdana;
     font-size: 14px;
     list-style: none outside none;
     padding: 0px;
     text-align: center;
     text-decoration: none;
     width: 130px;
}

nav li, nav span, nav a {
     background-image: url("navitab1.gif");
     color: #FFFFFF;
     text-decoration: none;
}

nav li:hover, nav span:hover, nav a:hover {
     background-image: url("navitab2.gif");
     color: #FFFFFF;
     text-decoration: none;
}

Die automatisch erstellte Liste ist wie folgt aufgebaut:

<ul class="naviklasse">
<li><a href="seite1.html">Seite A</a></li>
<li><a href="seite2.html">Seite B</a></li>
<li><a href="seite3.html">Seite C</a></li>
</ul>

Vielen Dank schonmal!

 

[Seby007]

versuch es mal mit white-space:nowrap

 

[dagobert50gold]

Das hlft leider nicht, das macht exakt dasselbe .

 

[Daaron]

Du hast n paar Fehler und eventuelle Stolperfallen drin, drin die alle mit rein spielen könnten.
- display:inline; deaktiviert jegliche Möglichkeiten, Höhe oder Breite zu setzen. Geht einfach nicht. Das geht nur bei block und inline-block.
- inline ist eh hinfällig, wenn du floatest
- sowohl bei display:inline als auch inline-block darfst du nicht einfach die Breiten der Elemente addieren. Aus lauter Lesbarkeit steht im Code meistens ein Zeilenumbruch hinter Elementen (in dem Falle: die <li>'s). Wenn du jetzt Inline/Inline-Block nutzt wird aus dem Newline ein dargestelltes Leerzeichen, das ebenfalls ein paar px beansprucht (bei üblichen Schriftgrößen ca. 3-4px)

 

[dagobert50gold]

Hab mal den Code umsortiert:

ul.naviklasse {
     margin-top: 0px;
     padding-left: 0px;
}
nav.navi {
     background-image: url("navibackground.png");
     background-repeat: repeat-x;
     border-bottom: 1px solid #DDDDDD;
     height: 16px;
     padding: [muss null werden];
}
nav.navi li {
     background-image: url("navitab1.gif");
     color: #FFFFFF;
     display: block;
     float: left;
     font-family: Arial,Verdana;
     font-size: 14px;
     list-style: none outside none;
     padding: 0px;
     text-align: center;
     text-decoration: none;
     width: 130px;
}
nav.navi a {
     background-image: url("navitab1.gif");
     color: #FFFFFF;
     text-decoration: none;
     display: block;
}
nav.navi a:hover {
     background-image: url("navitab2.gif");
     font-weight: bold;
     color: #CCCCCC;
     text-decoration: none;
     display: block;
}

Dennoch weiter dasselbe Problem.

Hab noch eine zweite Navigation erstellt, diesmal vertikal:

nav.naviklein {
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #FFFFFF;
}
nav.naviklein li {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
nav.naviklein a {
    display:block;
    text-decoration: none;
    color: #FFFFFF;
    background-color: #2044D8;
    padding: 0.2em;
  }
nav.naviklein a:hover {
    font-weight: bold;
    text-decoration: none;
    color: #CCCCCC;
    background-color: #3555D9;
  }

Hier ist das Problem, dass hier nach der Navigation unten 14px Abstand zum Ende sind.

Beide Probleme zeigen, dass irgendwie immer automatisch bei einer ul ein Abstand nach oben und unten gelassen wird (zeigt auch Firebug zu an), aber den hätte ich eben bei beiden Navis gerne weg.

 

[Daaron]

is auch so. Die Standard-Formatierung für <ul> hat ne Margin-Top/Bottom von ich glaub 1em sowie noch n Padding dazu, zumindest in den meisten Browsern... genauso wie die meisten Browser eben runde Knöpfe vor <li> machen oder <p> n halbes em oder so als Margin geben.
Simple Lösung: ul.naviklasse {margin:0;padding:0;}

Chrome arbeitet z.B. standardmäßig so:

ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

Wobei z.B. -webkit-margin-before sich weitestgehend wie ein margin-top verhält und davon auch überschrieben werden kann.

Für solche Sachen gibts übrigens CSS-Reset-Scripte wie http://meyerweb.com/eric/tools/css/reset/

 

[dagobert50gold]

Ich könnte wetten dass ich das schonmal ausprobiert hab und der mir alles durcheinander gemacht hat, jtzt funktioniert es aber bestens. Danke!
Liegt vielleicht daran, dass ich in einer älteren Version noch nicht display:block eingestellt hatte sondern inline und das dann mit padding:0 und margin:0 immer alles zusammengeschoben hat ...

Vielen Dank!