✔ Menü unordered List ul li 2 Ebenen CCS Formatierung

D

dreamdiver

Mitglied
Hallo,

ich habe gerade Probleme mit dem IE6 und IE7.
Firefox 3.0.5 stellt alles wie gedacht dar.
Den a Tags kann ich nichts mitgeben, weil die in Typo3 ausgetauscht werden.
Problem ist eigentlich hauptsächlich, dass die unordered list immer eine CSS Anweisung für eine aktive Klasse und/oder eine id für den kompletten Baum annimmt. Wobei das eigentlich ja anders angegeben wird.
Am besten wäre es, wenn man direkt nur eine id wie id=act ansprechen könnte und auch nur die und nichts in den Unterbenen marktiert werden würde.

Es soll im Menü nur der ausgewählte Menüpunkt und wenn ein übergeordneter existiert, dann soll auch dieser Menüpunkt aktiv angezeigt werden.

Ursprünglich hatte ich das mit einem class="active" Tag im a Tag gelöst, aber diese Lösung fällt leider raus, weil der Link in Typo3 durch Typoscript ersetzt werden soll.

Achso ich habe jetzt glaube ich nicht alle unwichtigen CSS Anweisungen rausgenommen. CSS ist aber gegliedert.

Ich hoffe es weiß Jemand einen Rat.

MfG Dreamdiver
 

Anhänge

Hallo Maik,

Danke. Das Thema habe ich mir vorher schon durchgelesen und es hat leider in meinem Fall nicht geholfen. Das Ergebnis bei der im Thema angesprochenden Seite hat auch keine aktiven Stati für den aktiv ausgewählten Link. Sonst hätte ich da weiter geguckt.

MfG Dreamdiver
 
Dann hast du dir den Quellcode der Seite nicht genau angeschaut, denn:

HTML: 
<li id="current"> ... </li>

zeichnet den aktiven Link in der oberen Menüebene aus.

Und für den aktiven Link innerhalb eines Submenüs ist der ID-Bezeichner li#active vorgesehen.

Wie sich nun die beiden ohne zusätzlichen Klassen für die Links formatieren lassen, hab ich dem Hilfesuchenden zu seiner vollsten Zufriedenheit demonstriert. Und die "Grundtechnik" dürfte bei dir dieselbe sein, wie die CSS-Selektoren zu lauten haben.

mfg Maik
 
Hallo Maik,

irgendwie bleibt es dabei. Das vererbt sich trotz id bzw. Klasse auch in die zweite Ebene.
Vielleicht guckst Du ja Mal in mein Beispiel rein, dann siehst Du genauer was ich meine.

Ob ich nämlich die id angebe oder ne Klasse ist der Liste scheibar total egal.
Im Beispiel was Du erwähnst war das Ziel nur die Veränderung für das aktive Untermenü und nicht da dann noch für einen aktiven Link im Untermenü.

Also es war schon die Lösung für das Problem dort, aber meins geht ja bis in die zweite Ebene mit dem Aktivzustand. Das überschreiben im FF funktioniert zur Lösung des Problems ja, aber IE6 und IE7 machen das irgendwie leider nicht mit.

MfG Dreamdiver
 
Du mußt zwei anders lautende ID-Bezeichner für die aktiven Menüpunkte der ersten und zweiten Menüebene, sowie für die Submenüs wählen, denn eine ID darf im Dokumentbaum einer HTML-Seite nur einmal enthalten sein, und nicht wie bei dir mit #act und #level2 zweimal (oder mehrmals).

mfg Maik
 
dreamdiver hat gesagt.:
Im Beispiel was Du erwähnst war das Ziel nur die Veränderung für das aktive Untermenü und nicht da dann noch für einen aktiven Link im Untermenü.
Zum Vergrößern anklicken....
Hast du den empfohlenen Thread nicht aufmerksam durchgelesen?

http://www.tutorials.de/forum/1716639-post4.html zeigt, wie ich die aktiven Menüpunkte bis in die zweite Menüebene anspreche, und wie ich der unerwünschten Vererbung an die weiteren Links des Submenüs entgegenwirke.

mfg Maik
 
Hallo Maik,

ja das weiß ich doch auch.

Ich habe nochmal ein Beispiel auf das Problem selbst reduziert angehängt.
Vielleicht wird es damit ja deutlich.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>easy list example</title>
<style type="text/css">

<!--
/*****************************
* menu begin  */

#menu_1 ul {
        list-style:none;
        margin:0;
        padding:0;
}

#menu_1 li {
        margin:0;
        padding:0;
}

#menu_1 a:link, #menu_1 a:visited {
    color:black;
    display:block;
    margin:0;
    /* top right bottom left */
    padding:0.75em 0.75em 0.75em 1.0em;
	
    /* background-color:#C6D9D7; */
    height:1em;
}

/* the position*/
html>body #menu_1 a:link, #menu_1 a:visited {
    height:auto;
}

#menu_1 li ul a:link, #menu_1 li ul a:visited {
/*    color:black;*/
/*    display:block;
/*    margin:0; */
    /* top right bottom left */
	/* padding:0.20em 0.75em 0.20em 1.5em; org */
    /* padding:0.15em 0.75em 0.30em 1.5em; */
	padding:1px 10px 6px 10px;
    /* background-color:#DAD4A6;*/
    height:1em; /* has additional effect here */
}

#menu_1 ul ul {
    margin-left: 12px;
}



/* working as it should marking normal links not necessary on first level because background is already background-color:none */
#menu_1 ul#level1 li.no {
	background:none;
	background-color:none;*/
}

#menu_1 li#current a{
	background-color:red;
}

#menu_1 li.current{
	background-color:green;
/*
	background:none;
	background-color:none;*/
}

/* working as it should on hand over marking normal links orange */
#menu_1 ul li.no a:hover {
	background-color:orange;
}



#menu_1 ul#level1 li ul#level2 li.no a{
	background:none;
	background-color:none;
/*	background-color:green; */
}


-->

</style>
</head>
<body>

<div id="menu_1">

<ul id="level1">
  <li class="no"><a href="#">Link1</a></li>
  <li class="no"><a href="#">Link2</a></li>
  <li id="current"><a href="#">Link3</a>
  	<ul id="level2">
		<li class="no"><a href="#">Link4</a></li>
		<li id="active"><a href="#">Link5</a></li>
	</ul>
  </li>
  <li class="no"><a href="#">Link6</a></li>
  <li class="current"><a href="#">Link7</a>
	<ul id="level2">
		<li class="no"><a href="#">Link8</a></li>
		<li class="active"><a href="#">Link9</a></li>
	</ul>
  </li>
</ul>


</div>
</body>
</html>


Inzwischen habe ich mir aber schon was anderes überlegt, denn das will halt nicht so funktionieren mit Klassen und nur der unordered list.

Ich hoffe natürlich Du kannst mich vom Gegenteil überzeugen. :-)

MfG Dreamdiver
 
Schau es dir mal hiermit an:

CSS: 
#menu_1 li#current a, #menu_1 li#current li#active a {
        background-color:red;
}
#menu_1 li#current li a {
        background-color:transparent;
}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück