Autor |
Nachricht |
Pukey
Threadersteller
Dabei seit: 07.09.2006
Ort: Mannheim/Heidelberg
Alter: 37
Geschlecht:
|
Verfasst Di 14.07.2009 12:44
Titel CSS] das aktive Objekt und die Klassen |
|
|
Hallo leute,
folgendes Problem. Ich habe ein automatisch generiertes Menü und möchte den aktiven Menüpunkt "markieren".
HTML
Code: |
<ul class="menu">
<li class="item1"><a href="#"><span>Das Musical</span></a></li>
<li class="item2"><a href="#"><span>Handlung</span></a></li>
<li class="item3"><a href="#"><span>Galerie</span></a></li>
<li class="item4"><a href="#"><span>Tourdaten</span></a></li>
<li class="item5"><a href="#"><span>Pressestimmen</span></a></li>
<li id="current" class="active item6"><a href="#"><span>Presse</span></a></li>
</ul>
|
Das letzte item is gerade aktiv.
CSS
Code: |
ul.menu li.item6 a { background: url(../images/de/btn_06.jpg) no-repeat center; display: block; width: 57px; height: 20px; padding: 0px; }
ul.menu li.item6 a:hover { background: url(../images/de/btn_6.jpg) no-repeat center; }
|
meine Versuche
Code: |
ul.menu li.item6 a:hover, ul.menu li#current li.item6 a { background: url(../images/de/btn_6.jpg) no-repeat center; }
|
Code: |
ul.menu li.item6 a:hover, ul.menu li#current + li.item6 a { background: url(../images/de/btn_6.jpg) no-repeat center; }
|
Code: |
ul.menu li.item6 a:hover, ul.menu li#current ~ li.item6 a { background: url(../images/de/btn_6.jpg) no-repeat center; }
|
bin grad bissl ratlos ^^
Danke euch.
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 14.07.2009 12:52
Titel
|
|
|
wie wird das Menü generiert?
kommt das aus einer DB?
ansonsten könntest du auch request wert der seite abfragen.die url bspweise.
mittels ASP könnte das so aussehen
Code: |
<%If Request.ServerVariables("URL") = "/foo.asp" then %>class="aktiv"<%End If%>
|
|
|
|
|
|
Anzeige
|
|
|
Pukey
Threadersteller
Dabei seit: 07.09.2006
Ort: Mannheim/Heidelberg
Alter: 37
Geschlecht:
|
Verfasst Di 14.07.2009 13:06
Titel
|
|
|
so kompliziert wollt ichs nun auch nicht machen.
ich wollt eigentlich wissen wie ich per css #current von item 6 anspreche ohne die andere anzusprechen.
ebenso auch wenn der menüpunkt wechselt, dass ich z.b. #current von item 3 anspreche.
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Di 14.07.2009 13:14
Titel
|
|
|
öh. wenn ich dich richtig verstehe:
Code: |
#current a {
background: url(../images/de/btn_6.jpg) no-repeat center;
} |
// edit: achso. jetzt weiß ich was du meinst.
sinnvoller wäre es das "active" einfach an das a zu hängen. dann könntest du sowas machen:
Code: | // grade nicht aktiv
.item6 a {
background: url(meinhintergrund-normal.gif) 0 0 no-repeat;
}
// aktiv
.item6 a.current {
background: url(meinhintergrund-aktiv.gif) 0 0 no-repeat;
} |
abfragen ob ein item grade gleichzeitig die id current und die klasse item-N gleichzeitig hat, kannst du nicht.
Zuletzt bearbeitet von sahnemuh am Di 14.07.2009 13:19, insgesamt 2-mal bearbeitet
|
|
|
|
|
Pukey
Threadersteller
Dabei seit: 07.09.2006
Ort: Mannheim/Heidelberg
Alter: 37
Geschlecht:
|
Verfasst Di 14.07.2009 13:18
Titel
|
|
|
ja schon richtig. aber jedes item hat nen andern bg.
deswegen muss ich ja das li#current und auch gleichzeitig das li.itemX ansprechen.
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 14.07.2009 13:20
Titel
|
|
|
du kannst dem class Attribut deines HTML Elementes auch mehrere Klassen zuweisen.
durch ein Leerzeichen getrennt.Deine Hintergründe könntest du so also als seperate Klassen anlegen.
bspweise so:
Code: | <a href="#" class="foo bar">foo</a> |
// hier noch ein Artikel den ich dir ans Herz lege
http://www.webkrauts.de/2009/07/06/objektorientiertes-css-eine-einfuehrung/
Zuletzt bearbeitet von Kash am Di 14.07.2009 13:21, insgesamt 1-mal bearbeitet
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Di 14.07.2009 13:25
Titel
|
|
|
Hier noch mal um zu verdeutlichen was ich meine:
CSS
Code: | /* -------- DEFINITIONEN FÜR ALLE ITEMS ------- */
.menu li {
background-repeat: no-repeat;
background-position: top left;
// ...weitere angaben
}
/* -------- ITEM 2 -------- */
.item1 a { // grade nicht aktiv
background-image: url(meinhintergrund-normal-1.gif);
}
.item1 a.current { // aktiv
background-image: url(meinhintergrund-aktiv-1.gif);
}
/* -------- ITEM 2 -------- */
.item2 a { // grade nicht aktiv
background-image: url(meinhintergrund-normal-2.gif);
}
.item2 a.current { // aktiv
background-image: url(meinhintergrund-aktiv-2.gif);
}
/* -------- ITEM 3 -------- */
.item3 a { // grade nicht aktiv
background-image: url(meinhintergrund-normal-3.gif);
}
.item3 a.current { // aktiv
background-image: url(meinhintergrund-aktiv-3.gif);
}
/* -------- ITEM 4 -------- */
.item4 a { // grade nicht aktiv
background-image: url(meinhintergrund-normal-4.gif);
}
.item4 a.current { // aktiv
background-image: url(meinhintergrund-aktiv-4.gif);
}
/* -------- ITEM 5 -------- */
.item5 a { // grade nicht aktiv
background-image: url(meinhintergrund-normal-5.gif);
}
.item5 a.current { // aktiv
background-image: url(meinhintergrund-aktiv-5.gif);
}
/* -------- ITEM 6 -------- */
.item6 a { // grade nicht aktiv
background: url(meinhintergrund-normal-6.gif);
}
.item6 a.current { // aktiv
background-image: url(meinhintergrund-aktiv-6.gif);
} |
HTML:
Code: | <ul class="menu">
<li class="item1"><a href="#"><span>Das Musical</span></a></li>
<li class="item2"><a href="#"><span>Handlung</span></a></li>
<li class="item3"><a href="#"><span>Galerie</span></a></li>
<li class="item4"><a href="#"><span>Tourdaten</span></a></li>
<li class="item5"><a href="#"><span>Pressestimmen</span></a></li>
<li class="item6"><a class="active" href="#"><span>Presse</span></a></li>
</ul> |
Kash hat geschrieben: | du kannst dem class Attribut deines HTML Elementes auch mehrere Klassen zuweisen.
durch ein Leerzeichen getrennt.Deine Hintergründe könntest du so also als seperate Klassen anlegen.
bspweise so:
Code: | <a href="#" class="foo bar">foo</a> |
// hier noch ein Artikel den ich dir ans Herz lege
http://www.webkrauts.de/2009/07/06/objektorientiertes-css-eine-einfuehrung/ |
und was soll ihm das bringen? er legt auf den selben link die klasse item6 und active. jedes item hat ein anderes hintergrundbild. es gibt keine möglichkeit der klasse "active" mitzugeben, dass sie das hintergrundbild von item6 und zwar im aktiven zustand benutzen soll. das lässt sich in diesem fall ausschließlich über vererbung regeln.
Zuletzt bearbeitet von sahnemuh am Di 14.07.2009 13:28, insgesamt 1-mal bearbeitet
|
|
|
|
|
Pukey
Threadersteller
Dabei seit: 07.09.2006
Ort: Mannheim/Heidelberg
Alter: 37
Geschlecht:
|
Verfasst Di 14.07.2009 13:26
Titel
|
|
|
Kash hat geschrieben: | du kannst dem class Attribut deines HTML Elementes auch mehrere Klassen zuweisen.
durch ein Leerzeichen getrennt.Deine Hintergründe könntest du so also als seperate Klassen anlegen.
bspweise so:
Code: | <a href="#" class="foo bar">foo</a> |
// hier noch ein Artikel den ich dir ans Herz lege
http://www.webkrauts.de/2009/07/06/objektorientiertes-css-eine-einfuehrung/ |
Pukey hat geschrieben: |
Code: |
<ul class="menu">
<li class="item1"><a href="#"><span>Das Musical</span></a></li>
<li class="item2"><a href="#"><span>Handlung</span></a></li>
<li class="item3"><a href="#"><span>Galerie</span></a></li>
<li class="item4"><a href="#"><span>Tourdaten</span></a></li>
<li class="item5"><a href="#"><span>Pressestimmen</span></a></li>
<li id="current" class="active item6"><a href="#"><span>Presse</span></a></li>
</ul>
|
|
das wurde hier ja gemacht.
nur wie lautet quasi der pfad zu dem object li.#current li.itemX??
ist Id oder class dominant? so dass erst ID dann class geschrieben muss? kann ich mir aber nich vorstellen, da ich das auch schon ausprobiert habe.
|
|
|
|
|
|
|
|
Ähnliche Themen |
CSS: links in klassen definieren -pseudoklassen in klassen?
aktive buttons
CSS aktive Navi funktioniert nur in Opera
a: menue aktive und Sound auf Rollover legen...
AS 3 und Klassen
Klassen in PHP
|
|