✔ Navigation formatieren li ul

[ZipZek]

Hi Ihr da draußen,

kurz worum es geht: Ich bin so langsam am verzweifeln... das Anpassen meines XT Commerce Shop Menüs klappt einfach nicht. Ich komm mit der vererbung der classes und id's überhaupt nicht zurecht, wo ich was setzen muss und wo an anderer Stelle etwas weglassen kann/muss. Im Anhang hab ich mal ein Bild wie es wenn möglich aussehen soll.

Und hier die Navigation:

<ul id="CatNavi">
<li class="CatLevel1 SubMenue CurrentParent"><a href="#">Lederbänder</a>
	<ul>

	<li class="CatLevel2 SubMenue Current"><a href="#">flache Ausführung</a>
		<ul>
		<li class="CatLevel3"><a href="#">grün</a></li>
		<li class="CatLevel3"><a href="#">schwarz</a></li>
		</ul>
	</li>
	<li class="CatLevel2"><a href="#">gepolsterte Ausführung</a></li>

	</ul>
</li>
<li class="CatLevel1"><a href="#">Metallbänder</a></li>
<li class="CatLevel1"><a href="#">Titanbänder</a></li>
</ul>

* Class SubMenue dürfte eig nicht relevant sein glaub ich, dass ist von der PHP ein Counter soweit ich dass herausgefunden habe.


Und soweit bin ich gekommen:

#CatNavi,#CatNavi ul { margin:0px; padding:0px; }
#CatNavi li {list-style-type:none;  padding:6px}
#CatNavi a {border-bottom:1px solid #e0eaf2;}

#CatNavi .CatLevel1 a { color:#045697; font-weight:bold; font-size:12px; }
#CatNavi .CatLevel2 a { color:#383838; font-weight:normal; font-size:11px; padding-left: 20px; }
#CatNavi .CatLevel3 a { color:#383838; font-weight:normal; font-size:9px; padding-left: 40px; }

es fängt schon an wie ich den border auf die richtige ebene vererbe... ich komm einfach nicht weiter.
Wenn ich mal den anfang hätte, das mit den Icons (wie auf dem bild) ist mir garnicht so wichtig, sondern eher der Border, die Abstände zueinander und eventuell wo ich später das Bild reinsetzen muss.....

könnt Ihr mir einen Denkanstoß geben oder mir irgendwie auf die Sprünge helfen....

HILLLLFEEEEE

So long, und vielen Dank vorarb,
Euer Phil

 

[Kalma]

Ich würd dir das eben coden, würd aber ein bisschen dauern.

 

[Gumbo]

Das ist gar nicht nötig. Wenn du die Selektoren geschickt einsetzt, brauchst du nur eine ID oder Klasse:

#CatNavi, #CatNavi ul { margin:0px; padding:0px; }
#CatNavi li {list-style-type:none;  padding:6px}
#CatNavi a {border-bottom:1px solid #e0eaf2;}

#CatNavi ul a { color:#045697; font-weight:bold; font-size:12px; }
#CatNavi ul ul a { color:#383838; font-weight:normal; font-size:11px; padding-left: 20px; }
#CatNavi ul ul ul a { color:#383838; font-weight:normal; font-size:9px; padding-left: 40px; }

 

[ZipZek]

Mmh....? Wie geht das mit nur 2 Klassen? Für ein Tip wär ich dankbar

wow Kalma das wär super.....

 

[Kalma]

Ja gut, dann mach ich das mal feddig

 

[Maik]

Hi.

Ja gut, dann mach ich das mal feddig

Aber bitte nicht zu fettig machen. :suspekt:

 

[Kalma]

Das meinst du nicht ernst oder?

 

[ZipZek]

soo habe mich nochma selbst rangesetzt und durch ein paar tutorials jetzt ein vorläufiges halb zufriedenstellendes Ergebnis

#CatNavi, #CatNavi ul { list-style-type: none; margin: 0px; padding: 0px; }

#CatNavi li a {color:#045697; font-weight:bold; font-size:12px; padding:6px; margin:0px;}
#CatNavi li { 
	border-top:1px solid #e0eaf2; padding:8px 0px 8px 10px; 
	background-image:url(images/dot.jpg);
  	background-repeat:no-repeat;
  	background-position:2px 12px; margin:0px;
}

#CatNavi .CatLevel1 li a {color:#383838; font-weight:bold; font-size:11px; margin:0px;}
#CatNavi .CatLevel1 li { border-top:0px solid #e0eaf2; padding:4px 0px 0px 18px; 
	background-image:url(images/minidot.jpg);
  	background-repeat:no-repeat;
  	background-position:9px 7px; margin:0px;}

#CatNavi .CatLevel2 li a {color:#383838; font-weight:normal; font-size:9px; margin:0px;}
#CatNavi .CatLevel2 li { border-top:0px solid #e0eaf2; padding:5px 0px 2px 29px; 
	background-image:url(images/adot.jpg);
  	background-repeat:no-repeat;
  	background-position:10px 3px; margin:0px;}

trotzdem danke für die schnelle hilfe

 

[Gumbo]

Wieso probierst du es nicht mal mit meinem Vorschlag?

 

[ZipZek]

ist doch auch nicht anders oder?