Komisches Navi Problem

[DerM]

Hey Leute,

Ich hab mal ne Frage. Komischerweise komm ich irgendwie nicht drauf... ich kenne mich auch noch nicht ganz soo gut mit CSS aus, das wird wahrscheinlich der Grund sein ^^...

also:
Ich habe eine Navigation mit einer ungeordneten Liste gemacht:

#navigation {
height: 45px;
width: 996px;
background-image: url(images/navigation.png);
float: center;
text-align: center;
}

#navigation ul {
margin-top: 0px;
padding-top: 26px;
padding-right: 20px;
}

#navigation li {
list-style: none;
display: inline;
height: 45px;
width: 100px;
background-color: #575d79
}

#navigation li a {
text-decoration: none;
padding-left: 30px;
padding-right: 30px;
text-align: center;
color: white;
font-weight: bold;
}

#navigation li a:hover {
color: red;
text-decoration: underline dotted;
}

Outcome:

Mein Problem liegt darin: Ich möchte anstatt einer Hintergrundsfarbe (HINTER DEN LINKS), ein Bild setzen. Das an sich ist ja kein Problem, nur das Bild soll viel größer sein, als jetzt die Hintergrundfarbe. Ich möchte so ein typischen Buttom als BG machen, aber wie bekomme ich nun Bereich höher? Versteht ihr was ich meine?
Z.B. so wie bei der Seite pixelio.de - Deine kostenlose Bilddatenbank für lizenzfreie Fotos die obere Menüleiste.. die hat ja auch so ein hintergrundsbild, was höher ist als der link...

Ich hoffe, ihr könnt mir helfen :-)

vielen dank schon mal,

Michi

 

[prm]

Definiere für "a" ein display: block; und weise zusätzlich noch eine Höhe und Breite entsprechend der Hintergrundgrafik zu. Diese dann ebenfalls "a" zuweisen.

 

[DerM]

Danke

Danke für die schnelle Antwort!

Jedoch wird die Navigation dann zu einer Liste:

Folgendes habe ich eingefügt:

display: block;
height: 30px;
width: 100px;

Und dann sieht das so aus:

Startseite
Impressum
Kontakt
...

hmm...

Was nun???

 

[prm]

In diesem Fall kannst du li anstelle von "display: inline;" ein "float: left;" zuweisen.

 

[Efchen]

Jedoch wird die Navigation dann zu einer Liste:

Die Navigation ist schon immer eine Liste, nicht durch CSS, sondern durch das HTML-Tag <ul>.

Zur Erklärung:
height/width sind nur für Block-Elemente zugewiesen. Mit Deinem display:inline hast Du sie aber zu Inline-Elementen gemacht.
Und Block-Elemente stehen bekanntlich untereinander, man kann sie aber mit float nebeneinander kriegen.