mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 14:22 Benutzername: Passwort: Auto-Login

Thema: CSS] das aktive Objekt und die Klassen vom 14.07.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS] das aktive Objekt und die Klassen
Seite: 1, 2  Weiter
Autor Nachricht
Pukey
Threadersteller

Dabei seit: 07.09.2006
Ort: Mannheim/Heidelberg
Alter: 37
Geschlecht: Männlich
Verfasst Di 14.07.2009 11:44
Titel

CSS] das aktive Objekt und die Klassen

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 14.07.2009 11:52
Titel

Antworten mit Zitat Zum Seitenanfang

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%>
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Pukey
Threadersteller

Dabei seit: 07.09.2006
Ort: Mannheim/Heidelberg
Alter: 37
Geschlecht: Männlich
Verfasst Di 14.07.2009 12:06
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Di 14.07.2009 12:14
Titel

Antworten mit Zitat Zum Seitenanfang

ö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 12:19, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
Pukey
Threadersteller

Dabei seit: 07.09.2006
Ort: Mannheim/Heidelberg
Alter: 37
Geschlecht: Männlich
Verfasst Di 14.07.2009 12:18
Titel

Antworten mit Zitat Zum Seitenanfang

ja schon richtig. aber jedes item hat nen andern bg.

deswegen muss ich ja das li#current und auch gleichzeitig das li.itemX ansprechen.
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 14.07.2009 12:20
Titel

Antworten mit Zitat Zum Seitenanfang

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 12:21, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Di 14.07.2009 12:25
Titel

Antworten mit Zitat Zum Seitenanfang

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 12:28, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Pukey
Threadersteller

Dabei seit: 07.09.2006
Ort: Mannheim/Heidelberg
Alter: 37
Geschlecht: Männlich
Verfasst Di 14.07.2009 12:26
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.