Margin-top bei Links

Verwende zunächst eine Listen-Navi:

<div id="navigation">
<ul>
[*][url='#'][img]images/toplinks/search.gif[/img]</img>[/url] 
[*][url='#'][img]images/toplinks/memberlist.gif[/img]</img>[/url]
[*][url='#'][img]images/toplinks/calendar.gif[/img]</img>[/url]
[*][url='#'][img]images/toplinks/help.gif[/img]</img>[/url]
[/list]
</div>

und als CSS:

#navigation {
   background-image: url(images/bg_menue.jpg);
   background-repeat: no-repeat;
   text-align: center;
   margin: 0 auto;
   width: 950px;
   height: 44px;
   border: 1px solid blue;
}


#navigation a{
   text-decoration: none;
   color: #FFFFFF;
   padding: 15px;
}


#navigation ul li
{
list-style-type: none;
display: inline;
margin-top: 20px;
}

Wie groß sind denn die Grafiken?
Dein Navidiv ist lediglich 44px hoch.
Abzüglich 20px verbleiben nur 24px. Evtl. gibt es dann noch einen Konflikt mit der Line-height und dem padding.
kannst du einen Link reinstellen?

So sollte es hinkommen (wobei ich mir nicht erklären kann, weshalb margin-top nicht unmittelbar funktioniert):

Lösche #navigation ul li

Füge dafür ein:

#navigation ul
{
	list-style-type: none;
	margin: 0 auto;
width: 700px;
}


#navigation li
{
float: left;
margin-top: 20px;
}

Hi,

Zitat

Zitat von sejuma:
So sollte es hinkommen (wobei ich mir nicht erklären kann, weshalb margin-top nicht unmittelbar funktioniert):

weil a ein Inline-Element ist, da funktionieren vertikale margins nicht.

Deshalb sollte man eine navi immer in eine ul packen.
li ist nämlich kein Inlineelement, da geht dann was mit vertikalen Margins.

koslowski

koslowski:
Deine erste Aussage ist korrekt.
Die zweite stimmt leider nicht: li ist auch ein Inline-Element:
http://de.selfhtml.org/html/referenz/elemente.htm#li

Ich habe es durch die Float-Angabe allerdings zum Blockelement umfunktioniert, damit es klappt

Moin,

Zitat von sejuma

koslowski:
Deine erste Aussage ist korrekt.
Die zweite stimmt leider nicht: li ist auch ein Inline-Element:
http://de.selfhtml.org/html/referenz/elemente.htm#li

Ich habe es durch die Float-Angabe allerdings zum Blockelement umfunktioniert, damit es klappt

*räusper*, äh..., aus dem von dir geposteten Link geht eindeutig hervor das li
kein Inline-Element ist.
Die alphabetische Aufzählung enthalt auch Blockelemente.
Ganz oben auf der Seite sind Block,- und Inline-Elemente explizit zusammengefaßt aufgeführt. Da steht li nicht bei den Inline-Elementen.

Listenelemente erzeugen von Hause aus Block-Boxen und die stehen untereinander.
Gibt man li float stehen sie nebeneinander, weil jedes li float bekommt.
Wenn man mehreren <div<-Containern float gibt stehen sie ja auch nebeneinander.

D.h. wenn Elemente eh schon ein Blockelemente sind bewirkt floaten nur das die dann nebeneinander stehen.

Wenn du z.B. a, eine klassische Inline-Box floatest, erzeugst du eine Block-Box.
Aber wenn das Element (li) eh schon von Hause aus eine Block-Box ist, änderst du durch das floaten nur die Darstellung nicht aber die Box.

Alles klaro damit?

koslowski