Letztes Menüelement Padding auf 0 setzen

html.de-Forum HTML, XHTML & CSS
1

Hallo,

Ich habe ein horiziontales Top Menue, bei dem der Abstand der einzelnen Menüpunkte durch padding-right: xy definiert wird. Jetzt muss ich das aber beim letzten Menüpunkt abschaffen, weil das Menü sonst nicht mittig ausgerichtet wird.

So schauts bisher aus:

#menu li {float:left;padding-right:42px}
#menu li a {display:block;font-size:16px;color:#afbfc7;text-decoration:none;line-height:37px;background:url(…/images/) top repeat-x;height:39px;overflow:hidden;cursor:pointer}

Wie bekomme ich das am einfachsten hin?

THX a lot!

2

Moin

#menu li:last-child {}

MfG

3

Hallo, danke!

Leider funktioniert es noch nicht.

#menu {float:left;padding:45px 0 0 0} #menu li {float:left;padding-right:50px} #menu li:last-child {} #menu li a {display:block;font-size:16px;color:#afbfc7;text-decoration:none;line-height:37px;background:url(../images/) top repeat-x;height:39px;overflow:hidden;cursor:pointer} #menu li a span {display:block;background:url(../images/) top left no-repeat} #menu li a span span {background:url(../images/) top right no-repeat;padding:0 0px;height:0px} #menu li a:hover, #menu #menu_active a {color:#afbfc7;background:url(../images/) top repeat-x} #menu li a:hover span, #menu #menu_active a span {background:url(../images/) top left no-repeat} #menu li a:hover span span, #menu #menu_active a span span {background:url(../images/) top right no-repeat} #menu .nav3 a:hover, #menu .nav3#menu_active a {background:url(../images/) top repeat-x} #menu .nav3 a:hover span, #menu .nav3#menu_active a span {background:url(../images/) top left no-repeat} #menu .nav3 a:hover span span, #menu .nav3#menu_active a span span {background:url(../images/) top right no-repeat} #menu .nav4 a:hover, #menu .nav4#menu_active a {background:url(../images/) top repeat-x} #menu .nav4 a:hover span, #menu .nav4#menu_active a span {background:url(../images/) top left no-repeat} #menu .nav4 a:hover span span, #menu .nav4#menu_active a span span {background:url(../images/) top right no-repeat} #menu .nav5 a:hover, #menu .nav5#menu_active a {background:url(../images/) top repeat-x} #menu .nav5 a:hover span, #menu .nav5#menu_active a span {background:url(../images/) top left no-repeat} #menu .nav5 a:hover span span, #menu .nav5#menu_active a span span {background:url(../images/) top right no-repeat}

4

Diese Zeile

#menu li:last-child {}

kannst du auch weglassen, wenn du da dein Padding nicht reinschreibst :smiley:

5

#menu {float:left;padding:45px 0 0 0} #menu li {float:left;padding-right:45px} #menu li:last-child {0px}

#menu {float:left;padding:45px 0 0 0} #menu li {float:left;padding-right:45px} #menu li:last-child {0}

So? Klappt aber immer noch nicht:)

6

Was 0? Kartoffeln?
Was wolltest du denn auf 0 setzen? Mach das mal :wink:

7

Das Padding des letzten Menüpunktes (ganz rechts) wollte ich auch 0 setzen. Klappt aber nicht, weil dein Code auch das Padding der mittleren Menüpunkte eliminiert.

8

Das Padding des letzten Menüpunktes (ganz rechts) wollte ich auch 0 setzen. Klappt aber nicht, weil dein Code auch das Padding der mittleren Menüpunkte eliminiert.

[HTML]#menu li:last-child { padding: 0; }[/HTML]

9

Ich danke dir Nookie, fummel schon seit Tagen daran herum, jetzt klappt es!!! :slight_smile:

10

Kein Problem. Die Anderen haben dich aber auch schon öfters darauf hingewiesen. Siehe bdt600 Beitrag. :wink: