CSS Menü intigieren

kulli · 6. März 2006 13:31

Hallo

Nach vielem Suchen und Probieren bin ich leider nicht ans Ziel gekommen!

Ich möchete dieses Menü

Bild: img115.imageshack.us/…/nav2men9lu.jpg

mit dem CSS

* {
margin : 0;
padding : 0;
} 
#navi2 {
	width: 132px;
	} 
#navi3{
	width: 112px;
	} 

#navi2 ul, #navi2 li, #navi3 ul, #navi3 li {
list-style: none;
}

#navi2 li a, #navi2 a:link, #navi2 a:visited{
	font-size: 12px;
	#margin-left: 0px;
	list-style: none;
	color: #000000;
	background-color: #ffffff;
	font-family: Tahoma;
	border-left-width: 6px;
	border-left-style: solid;
	border-left-color: #FFFFFF;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #FFC12B;
	width:100%;
	display: block;
 	text-decoration: none;
	padding: 2px;
	padding-left:12px;
}
#navi2 #act{
	border-left-color: #FFC12B;
	font-weight: bold;
} 
#navi2 #actifsub{
	border-left-color: #FFC12B;
	font-weight: bold;
} 

#navi2 a:hover{
	text-decoration: underline;
	}
	
#navi3 a:link, #navi3 a:visited, #navi3 li a{
	font-size: 11px;
	margin-left: 18px;
	list-style: none;
	color: #000000;
	background-color: #ffffff;
	font-family: Tahoma;
	border-left-width: 6px;
	border-left-style: solid;
	border-left-color: #FFFFFF;
	width:100%;
	text-decoration: none;
	padding: 2px;
	padding-left: 10px;
}
#navi3 #act{
	border-left-color: #FFC12B;
	font-weight: bold;
} 

#navi3 a:hover{
	text-decoration: underline;
	}

und dem html

<ul id="navi2"> 
	<li> <a href="#" id="actifsub">nav2_actifsub</a> </li> 
	<li> <a href="#" id="act">nav2_act</a> </li>
	<li> <a href="#">nav2</a> </li> 
</ul>
<ul id="navi3"> 
        <li> <a href="#">nav3</a></li>
	<li> <a href="#" id="act">nav3_act</a></li>
	<li> <a href="#">nav3</a> </li> 
</ul>

in mein TMENU umsetzen... ich habs nach allen möglichkeiten, die mir loschisch erschienen versucht.

mein jetziger Versuch sieht so aus:

nav_2 = COA
nav_2 {

20 = HMENU
20 {
entryLevel = 2

1 = TMENU
1{
wrap = <ul id="navi2">|</ul>
noBlur = 1
subst_elementUid = 1
NO{
wrapItemAndSub = <li class="act">|</li>
   subst_elementUid = 1
}
} 
}
}

Angezeigt wird aber eine normal Liste mit nem "dot" davor und Links in Browserstandart darstellung.

Habe noch einige andere Sachen probiert, und jetzt bin ich an dem Punkt wo ich nicht mehr weiter kommen - LATEIN am ENDE... :o

Vermutlich ist die Lösung einfacher als ich Denke, aber bitte es stoße mich jemand mit der Nase drauf.

Gruß
Kulli

d.walter · 6. März 2006 13:42

Vor dem gleichen Problem stand ich gestern auch.

Hab hier das TMENU aus der Referenz genommen. Das TS aus dem 4. Posting.

/faq/menu-bulletlist

Aber die Links dann mit CSS formatieren hat nicht geklappt.

Bei mir war es so, dass ich zwar den dot wegbekommen habe, aber dafür den Standard-Style hatte und die Links einen mords padding-left hatten, dass ich aber nirgends beeinflussen konnte.

Bin daraufhin auf ein GMENU gewechselt. #angry#

Falls du eine Lösung findest würde ich mich freuen wenn du Sie posten würdest.

Greetz[/url]

kulli · 8. März 2006 11:17

Hallo

Habe eine Lösung gefunden !!! #giggle#

nach vielem probieren mit der Borderfunktion die CSS mitbringt bin ich, mangels Dastellungsproblemen in den unterschiedlichen Browsern zu einer bzw. mehreren Hintergrundgrafiken gewechselt.

Bild: img72.imageshack.us/…/cssnavimenue6sa.gif

Man beachte die Darstellung des Untermenües im IE und in FF, Lösung dafür habe ich leider noch keine gefunden, wenn da jemand noch ne Idee hat bin ich dankbar.
Die Hintergründe sind nun jeweils Grafiken.
Besonders aufstoßen tut bei mir die Darstellung der Grafiktextes "Startseite" beim Opera.

Mein TS CODE

nav_2 = COA
nav_2 {

[...]

20 = HMENU
20 {
entryLevel = 2
1 = TMENU
1{
noBlur = 1
wrap = <ul class="navi2">|</ul>
NO = 1
NO.linkWrap = <li class="navi2_NO">|</li>
ACT = 1
ACT.linkWrap = <li class="navi2_ACT">|</li>
IFSUB = 1
IFSUB.linkWrap = <li class="navi2_IFSUB">|</li>
CURIFSUB = 1
CURIFSUB.linkWrap = <li class="sub2_cur">|</li>
ACTIFSUB = 1
ACTIFSUB.linkWrap = <li class="sub2">|</li>
}
2 = TMENU
2{
noBlur = 1
wrap = <ul class="navi3">|</ul><img src="fileadmin/template/bg_nav3_line_bottem.gif" alt="" />
NO = 1
NO.linkWrap = <li class="navi3_NO">|</li>
ACT = 1
ACT.linkWrap = <li class="navi3_ACT">|</li>
}
}
}

der Code für die CSS Datein (habe der Übersichtlichkeit halber zwei benutzt)

für die 1. Ebene

* {
margin : 0;
padding : 0;
} 
.navi2 {
	width: 144px;
	
	padding-top:10px;
	padding-bottom:10px;
	} 
.navi2 a:link, .navi2 a:visited, .navi2 li a {
color: #000000;
text-decoration: none;
}
.navi2 a:hover{
	text-decoration: underline;
	}

.navi2_NO {
	height: 18px;
	list-style: none;
	font-size: 12px;
	font-family: Tahoma;
	color: #000000;
	display: block;
	text-decoration: none;
	padding-left:10px;
	background-image: url(bg_nav2_NO.gif);
	background-repeat: no-repeat;
	line-height: 18px;
}

.navi2_ACT {
	height: 18px;
	line-height: 18px;
	list-style: none;
	font-size: 12px;
	font-family: Tahoma;
	color: #000000;
	display: block;
	text-decoration: none;
	padding-left:10px;
	font-weight: bold;
	background-image: url(bg_nav2_ACT.gif);
	background-repeat: no-repeat;
}

.navi2_IFSUB {
	height: 18px;
	line-height: 18px;
	list-style: none;
	font-size: 12px;
	font-family: Tahoma;
	color: #000000;
	display: block;
	text-decoration: none;
	padding-left:10px;
	font-weight: normal;
	background-image: url(bg_nav2_IFSUB.gif);
	background-repeat: no-repeat;
}


.sub2 {
	height: 18px;
	line-height: 18px;
	list-style: none;
	font-size: 12px;
	font-family: Tahoma;
	color: #000000;
	display: block;
	text-decoration: none;
	padding-left:10px;
	font-weight: bold;
	background-image: url(bg_nav2_IFSUB_on.gif);
	background-repeat: no-repeat;
	}
.sub2_cur {
	height: 18px;
	line-height: 18px;
	list-style: none;
	background-image: url(bg_nav2_CUR.gif);
	background-repeat: no-repeat;
	font-size: 12px;
	font-family: Tahoma;
	color: #000000;
	display: block;
	text-decoration: none;
	padding-left:10px;
	font-weight: bold;
	}

für die 2. Ebene

* {
margin : 0;
padding : 0;
} 
.navi3 {
	} 
.navi3 a:link, .navi3 a:visited, .navi3 li a {
	color: #000000;
	display: block;
	text-decoration: none;

}
.navi3 a:hover{
	text-decoration: underline;
	}

.navi3_NO {
	list-style: none;
	line-height: 16px;
	font-size: 10px;
	font-family: Tahoma;
	color: #000000;
	display: block;
	text-decoration: none;
	padding-left: 10px;
	font-weight: normal;
	background-color: #ffffff;
	
}

.navi3_ACT {
	list-style: none;
	line-height: 16px;
	font-size: 10px;
	font-family: Tahoma;
	color: #000000;
	display: block;
	text-decoration: none;
	font-weight: bold;
	padding-left: 10px;
	background-image: url(bg_nav3_ACT.gif);
	background-repeat: no-repeat;

}

Gruß
Kulli

fuss · 8. März 2006 15:13

Olla!

1. background-position sollte das prob der verschiebung in kombination mit ner condition fuer den ff loesen.
2. die act & actifsub dinge sollten eine class sein, und nicht wie bei dir eine id.

ein list tutorial, welches nur zu empfehlen ist:
http://css.maxdesign.com.au/listamatic/

und fuer all die, denen es nicht schnell genug gehen kann:
http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/

gruss, fuss

kulli · 9. März 2006 13:23

fuss schrieb
Olla!

1. background-position sollte das prob der verschiebung in kombination mit ner condition fuer den ff loesen.

etwa so ?

[...]
/*IE Anstand vom Rand */
*html .navi3 {
	padding-left: 0px;
	} 
/*FF Anstand vom Rand */
.navi3 {
	padding-left: 10px;
	}
[...]

geht zumindest...

2. die act & actifsub dinge sollten eine class sein, und nicht wie bei dir eine id.

ein list tutorial, welches nur zu empfehlen ist:
http://css.maxdesign.com.au/listamatic/

und fuer all die, denen es nicht schnell genug gehen kann:
http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/

gruss, fuss

habe alles in Klassen umgewandelt.

Danke für die Tips.

Kulli

fuss · 9. März 2006 14:05

yup.
nur drauf achten, dass zwichen * und html nen leerzeichen ist, also
* hmtl { definition }, dann is es auch valide 😉

gruss, fuss

kulli · 9. März 2006 16:11

OK danke

😃

Kulli