Navigation - breite und höhe der Menüpunkte

[trilling-relations]

Guten Morgen zusammen,

bin seit drei Tagen an zwei Seiten am bauen und habe alles im Griff - ausser der Navigation.

Seht mal hier: http://web6.vps9608.alfahosting-vps.de/index.php

Ich bekomme eine Navigation hin, Start- und Stoplevel etc sind klar.

Ich habe eine CSS die für die Navigation zuständig ist. Klappt auch.
Gesetzt sind:

/* Nimmt die Aufzählungszeichen raus */
.mod_navigation ul
{
margin:0;
padding:0;
list-style-type:none;
}

/* lässt die Navigation im Header horizontal erscheinen */
#header li
{
display:inline
}

/* Setze die Fontfarben in der Header-Navigation */
#header a:hover,
#header a:active,
#header span.active,
#header a.trail,
#header a:visited,
#header a:link
{
text-decoration:none;
color:#FFFFFF;
}

/* Setze die Fontfarben in der Linken-Navigation */
#left a:hover,
#left a:active,
#left span.active,
#left a.trail,
#left a:visited,
#left a:link
{
text-decoration:none;
color:#2D3032;
}

/* Navigationsblock links auf minimum 300px setzen */
#left .mod_navigation
{
height:300px;
min-height:300px;
display:run-in;
text-align:left;
vertical-align:middle;
}

/* Setze den Hintergrund in der Linken-Navigation für die erste Ebene */
#left .mod_navigation li
{
width:188px;
background-image:url("tl_files/layout/menue_trail_bg.png");
background-repeat:no-repeat;
}

/* Setze den Hintergrund in der Linken-Navigation für die zweite Ebene */
#left .mod_navigation ul
{
width:188px;
height:25px;
background-image:url("tl_files/layout/menue_ul_bg.png");
background-repeat:no-repeat;
}

Im Ergebnis bekomme ich in der Navigation Links die Hintergrundgrafik für das erste Level auch auf dem zweiten Level plus zusätzlich (wie auch immer das geht) im 2. Level die entprechende Hintergrundgrafik.

Das eigentliche Problem: Alle Hintergrundgrafiken sind abgeschnitten da ich es nicht schaffe, die Boxen für jeden einzelnen Menüpunkt mit entsprechender Breite , Höhe und Formatierung des Textes zu versehen.

Würde mich über eure Hilfe freuen.

Gruß

Michael

[hofff]

Hallo,

Dadurch, dass Dein Menü mit display=inline in die horizontale bringst, werden aus den li logischerweise Inlineelemente. Du kannst aber nur blockelementen eine Höhe geben. Versuch es mal damit, dass du den li ein float=left gibst, dann solltest du auch Höhen und Breiten zuweisen können. Oder du gibst den a-Tags ein display=block, dann kannst du denen alles zuweisen.

fg
nicky


---
I am here: http://maps.google.com/maps?ll=51.316905,12.460545
--
von meinem iPad mit Tapatalk gesendet.

[trilling-relations]

Hallo hoff,

und vielen Dank für deine Antwort auf mein Problem.

Du hast sicherlich überlesen, das nur die horizontale Navi im Header inline gesetzt wird, die im linken Kasten nicht.

Ich habe jetzt mal #left li {display:block} gesetzt und die Höhe bei
#left mod_navigation entsprechend auf 25px (Höhe hintergrund) gesetzt.
Ergebnis ist aber immer noch ein gewurschtel durcheinander.

Mein Problem scheint irgendwo in der Fromatierung Box, Formatierung Text und Formatierung Menü-Abstände zu liegen. Irgendwas mache ich da grundsätzlich falsch.

Vieleicht noch Anregungen?

Gruß

Michael

[trilling-relations]

Nachtrag: Problem Teil 1 gelöst

Da ich in der basic.css angegeben habe, wie die Schriftgröße und die Zeilenhöhe sein sollen, muss ich in der avigation.css jetzt auch die Zeilenhöhe auf die 25px der Hintergrundgrafik anheben. Klappt super.

ABER:

Immer noch folgt auf den Menüpunkt 1 der Menüpunkt 2 und der Menüpunkt 1.1 - beide überlagern sich anstatt das erst 1, dann 1.1, 1.2 und dann erst 2.

Tipps?

Gruß

Michael

[trilling-relations]

Gelöst.

Ich hatte in der navigation.css dem Listenelemten der ersten Stufe (li) eine fixe Höhe gegeben. Die musste einfach wieder raus und schon geht es.

Für alle die vieleicht vor dem gleichen Problem stehen:

ul ist die Navigation als solche - eine unsortierte Liste
In der ul haben wir li - Listenelemente, werden also mit li in der css-datei angesprochen.
Da in der ul nur li sein dürfen, muss für die zweite Ebene der Navigation wieder eine ul innerhalb eines Listenelementes li kommen, das ist dann also li ul in der css-Datei.
Und diese neue ul erbt natürlich von der ersten ul alle Einstellungen, kann jedoch als li ul auch neu angesprochen werden.
Und dann kommen natürlich in der zweiten Ebene der Navigation auch wieder einzelne Listenelemente, die li ul li .

Für alle die wie ich noch etwas wackelig in CSS sind, hier wirds erklärt: http://de.selfhtml.org/css/layouts/n...ten.htm#ebenen

Gruß

Michael