Ramme både en div og en class via CSS

<ole>

Jeg forstår ikke problemet

/mvh
</bole>

Hmm.. Jeg forstår heller ikke helt... Et ID er jo altid unikt så du svarer vel næsten selv på dit spørgsmål... Hvis du vil ramme præcis det link med ID "inpath" skriver du bare følgende CSS:

#inpath

{
  background: url(sti);
}

Ja, hvad er problemet? Giver class="lastitem" ikke linket nogle styles og id="inpath" nogle andre? Det burde da fungere fint!

Problemet ligger ved baggrundsbilledet.

class="firstitem" har ét slags billede. Det samme med "lastitem" og id="inpath".

Det skal dog være et helt andet baggrundsbillede, hvis "firstitem" eller "lastitem" også er selected, dvs. yderligere har id="inpath."

Altså, "firstitem" og "lastitem" uden id="inpath".... billede nr. 1.

Har class="firstitem" eller class="lastitem" yderligere end id="inpath" (hvilket skyldes det er det aktive menupunkt), billede nr. 2!

Har allerede sat baggrundsbillede via CSS, hvor jeg går ind og rammer classes. Men skal altså gerne kunne ramme det element, som både indeholder class OG id på samme tid.

Forstår I? Eller er jeg en nar til at forklare? :)

I dit stylesheet tilføjer du så bare den linje jeg skrev længere oppe, efter dine classes - så overskriver den tidligere baggrundsbilleder på det element der har id="inpath" :-)

Som sagt er det ikke nødvendigt at ramme det element der indeholder både calsses OG id på samme tid.. Da IDer altid er unikke er der kun ET element der kan have id="inpath" og det er derfor nok bare at sigte efter det - uagtet hvilken classe det har :-)

Altså:

.firstitem

{
  background: url(sti);
}

.lastitem

{
  background: url(sti);
}

#inpath

{
  background: url(sti);
}

Det eneste der er vigtigt her er at du husker at tilføje dit inpath css efter de to klasser i din dokument struktur da det så overskriver tidligere baggrunds billeder tilføjet længere oppe :-)

Var det et fjerde billede, du ville vise i menupunktet?

Så kan det vel fikses med java script:

<script type="text/JavaScript">
function appendEvent(a,b,c){
    if(a.attachEvent){a.attachEvent("on"+b,c)}
    else if(a.addEventListener){a.addEventListener(b,c,false)}
    else{a["on"+b]=c}
}

appendEvent(window,"load",function(){if(document.getElementById("inpath").className==("lastitem"||"firstitem")) document.getElementById("inpath").style.backgroundImage='url(sti)'"})
</script>

Hov, der var et " for meget:

<script type="text/JavaScript">
function appendEvent(a,b,c){
    if(a.attachEvent){a.attachEvent("on"+b,c)}
    else if(a.addEventListener){a.addEventListener(b,c,false)}
    else{a["on"+b]=c}
}

appendEvent(window,"load",function(){if(document.getElementById("inpath").className==("lastitem"||"firstitem")) document.getElementById("inpath").style.backgroundImage="url(sti)"})
</script>

Mht. 13/08-2007 19:22:11:

Problemet er bare at inpath skal se forskelligt ud, alt efter om det står for sig selv, eller om det har class="firstitem" eller class="lastitem" tilknyttet i samme element.

Dvs. der er faktisk 3 forskellige billeder til inpath. Ét til  <a class="lastitem" id="inpath" href="Default.aspx?ID=43"> og ét til <a class="firstitem" id="inpath" href="Default.aspx?ID=43">Test</a>... og så et rent ét, hvor kun id="inpath" er tilstede.

Derudover skal class="firstitem" og class="lastitem" jo også havde andre billede, hvis ikke id="inpath" er tilstede i samme element. Tricky, eh? :)

Mht. Javascript... vil helst undgå det. Kan desværre ikke checke det lige nu, men skal arbejde med det imorgen. Men tak for forslagene!

Hvis din menu er generet dynamisk kan du ikke kommer uden om enten at bruge javascript eller at skulle genre den forskeligt alt efter hvilke underside du er inde under (hvilket link du har trykekt på) - Hvis det er det sidste du vil er det vel egentlig rimelig simpelt.

Der er for mig at se to trin i det.. Dels at skrive css der beskriver alle de forskellige tilstande et link kan have, og så at tildele dette css til de rette elementer når man trykker på dem m.m. - Det sidste kan du gøre med javascript eller på serversdien hvis du generere din menu der.. :-)

w13: "document.getElementById("inpath").style.backgroundImage="url(sti)"})"

Ville det egentlig ikke være mere "korrekt" i stedet bare at skifte ID, eller Class på det element man har fat i og så definere de forskellige baggrundsbilleder i stylesheetet i forskellige classer eller IDer - for på den måde at holde design og funktion adskilt!? (Ikke ment som flueknepperi, men noget jeg selv har spekuleret lidt over :-))

Desværre har jeg ikke de store muligheder for at konfigurere det helt vildt. Nogle muligheder, men ikke mange. Vidste bare ikke om der var en måde at ramme et element via CSS, hvor man henviste til både class og ID indenfor samme element.

Oh well, leger videre med det imorgen :)

Kongknabe, smid et svar som tak for hjælpen!

Kongknabe>> jeg overvejede det, men syntes at have hørt, det er uhensigtsmæssigt at ændre className undervejs i koden, da den vist så skal loade alle classNames igen eller sådan noget. Browserne er vist ikke så gode til det. Man kan jo sagtens, men havde bare hørt et eller andet. Så skulle man måske sætte id i stedet, ja.

Generelt er det en rigtig skidt idé at skifte CSS-klasse på elementer - selvom quirksmode.org godtnok har forsøgt at bevise det modsatte.
I ganske få specialtilfælde har han ganske ret. Som roenving og jeg flere gange har vist, er det dog i langt de fleste realistiske scenarier langt dårligere performende, end at skifte de enkelte properties på elementets style-objekt.
Som oftest bliver 'regnestykket' omkring arv for komplekst - browseren opgiver og genberegner i stedet hele dokumentet.

Det kunne være ganske interessant engang at teste, om ikke det samme skulle være tilfældet, når man skifter ID. Umiddelbart kan jeg ikke se nogen teknisk/teoretisk årsag til, det skulle være anderledes ... specielt ikke, hvis man fjerner et ID på ét element og samtidig sætter det på et andet.

Hvorfor skal den side, man står på overhovedet have et link i menuen? Hvorfor er det ikke bare et stylet span/div? Det er i hvert meget almindeligt at lade serveren afgøre, hvilken side der vises - og så indrette mednuen derefter

Hvorfor skal den side, man står på overhovedet have et link i menuen? Hvorfor er det ikke bare et stylet span/div? Det er i hvert meget almindeligt at lade serveren afgøre, hvilken side der vises - og så indrette mednuen derefter...

Kundens ønsker og CMS-systemets begrænsninger :) Same old...

w13, smid et svar.

Det lykkedes mig (med lidt omskrivning) at få dit JavaScript til at virke.

Ville egentligt helst have klaret det udelukkende via CSS, men i mangel af bedre... :)

Det lyder da godt! :) Her er svar!

Og takker for point!