Problembereich Navigationsmenü

[Cydox]

Hi,

irgendwie ist das Navigationsmenü immer mein Problembereich, deshalb wollte ich fragen, ob mir da mal jemand mit dem Stylesheet helfen kann. Ich möchte gerne, dass 1. der Punkt verschwindet 2. alle Elemente nebeneinander ausgerichtet werden 3. Die Farbe des aktuellen Menüpunktes grün ist

Hier der Link: http://hgezzx.square7.ch/typolight/ (unten)


Ich habe zwar schon bei CSS4You geguckt und jedem Element eine einzellne ID zugewiesen, um Verschachtelungsprobleme zu vermeiden, aber wenn man den line-syle-typ auf none setzt sind die Punkte immernoch da.


Ich weiß, dass es ein reines CSS-Problem ist, hoffe aber trotzdem dass sich jemand hier gut auskennt ^^ und mir hilft.

Gruss Cydox

[planepix]

Hallo Cydox,

wenn Du nur eine Navigation im Footer hast, kannst Du auf die CSS ID verzichten.

#footer .mod_navigation ul
{
margin:0;
padding:0;
list-style-type:none;
}

#footer .mod_navigation li
{
margin:0;
padding:0 10px 0 0;
float:left;
}

#footer .mod_navigation span.active
{
color:green;
}

sollte Dich weiter bringen.

[Cydox]

Vielen lieben Dank, ich habe dafür so lange rumprobiert ^^

Eine Problem ergibt sich jetzt jedoch, und zwar verdeckt nun die footer_undermenu_line.jpg zum Teil das Navigationsmenü. Diese "footer_undermenu_line" habe ich mit einfachen img-tag eingebunden. Die Frage ist nun, ob es möglich ist, das Menü eine Ebene höcher zu packen als das Bild oder umgekehrt?


Gruss Cydox

[Cydox]

Ah Problem gelöst, für alle die noch in diesen Thread verlieren: man kann über den z-index in CSS BIlder oder Elemente nach hinten und vorne verschieben. Sehr, sehr, sehr praktisch!

[planepix]

Hallo Cydox,

bitte gerne.

Du meinst die senkrechten Trennstriche?

das würde ich versuchen, auch über CSS zu lösen, indem Du dem Listenelement einen rechten Rand mit gibst:

#footer .mod_navigation li
{
margin:0;
padding:0 10px 0 0;
border-right:1px solid #666;
}

und dann dem letzten Listenpunkt mit der Klasse .last dann keinen Rand:

#footer .mod_navigation li.last
{
margin:0;
padding:0 10px 0 0;
border-right:none;
}