[CSS] Header1 hyperlink neemt kleur hyperlink element over

[Toink]

Omdat ik niet weet met welke specifieke zoekwoorden ik de oplossing kan vinden post ik mijn (wellicht simpele) vraag hier:

Ik heb een pagina met 3 slots (vergelijk met T.net V&A, pricewatch, meuktracker), welke in mijn geval elk een verschillend kleurenpallet hebben. Dit houdt in dat er een H1 element is voor de kop en een A element voor hyperlinks die eronder staan.

Het rotte is alleen dat de H1 van zichzelf ook al een hyperlink is, dus die neemt voortdurend de opmaak van een hyperlink aan terwijl hij toch echt de H1 kleur moet hebben én houden.

code:

#meuktracker_slot {
    color: blue;  
    border: solid 1px blue;    
}
#meuktracker_slot h1 {
    background-color: red;  
    border-bottom: solid 1px blue;        
    color: white;      
}
#meuktracker_slot a, a:hover, a:visited {
    color: green;  
}

Dit is een sterk vereenvoudigd voorbeeld maar de bedoeling is dat de H1 dus wit wordt en niet groen... Ik heb de volgorde al eens veranderd maar dat lijkt niets te doen en in een wanhoopspoging geprobeerd om combinaties te maken (h1.a)??? maar dat ging natuurlijk niet werken. Hoe los ik dit op?

[ Voor 0% gewijzigd door Toink op 30-04-2008 20:53 . Reden: > Was net te vroeg met posten en de titel is niet echt handig gekozen... ]

[Duroth]

De H1 tags binnen de A tags zetten zou al moeten helpen. dus <a><h1>tekst</h1></a> in plaats van andersom. Zonder een stukje HTML kan ik helaas ook niet ruiken of dit het probleem is ;-) Al zou ik, vanuit semantisch oogpunt, nooit meerdere H1 tags op 1 pagina zetten. Dan kan je beter een classname aan de verschillende links hangen, dan is het probleem hoogstwaarschijnlijk ook opgelost.

[DeZzL]

Cascading Stylesheet:

#meuktracker_slot {
    color: #blue;  
    border: solid 1px #blue;    
}
#meuktracker_slot h1 {
    background-color: #red;  
    border-bottom: solid 1px #blue;        
    color: #white;      
}
#meuktracker_slot a, a:hover, a:visited {
    color: #green;  
}

#meuktracker_slot h1 a {
color: fff;
}

Zoiets?

edit:
als je natuurlijk de a bínnen de h1 hebt staan

HTML:

<h1><a href="">kop1</a></h1>

[ Voor 17% gewijzigd door DeZzL op 30-04-2008 21:03 ]

[Verwijderd]

Duroth schreef op woensdag 30 april 2008 @ 20:47:
De H1 tags binnen de A tags zetten zou al moeten helpen. dus <a><h1>tekst</h1></a> in plaats van andersom.

Dat mag niet volgens de HTML 4.01 specificatie. Een inline-level element kan nooit een block-level element bevatten.

Zonder een stukje HTML kan ik helaas ook niet ruiken of dit het probleem is ;-) Al zou ik, vanuit semantisch oogpunt, nooit meerdere H1 tags op 1 pagina zetten. Dan kan je beter een classname aan de verschillende links hangen, dan is het probleem hoogstwaarschijnlijk ook opgelost.

Dat is wel waar. Een H1 is doorgaans de titel die de inhoud van de pagina beschrijft. Geen kopje voor een onderdeel van de site.

In dit geval is meuktracker_slot a, a:hover, a:visited onzin. Dat zou eerder meuktracker_slot a, meuktracker_slot a:hover, meuktracker_slot a:visited moeten zijn.

Ik schrijf selectors altijd per regel. Dat is veel duidelijker.

Cascading Stylesheet:

#meuktracker_slot {
    color: #blue;  
    border: solid 1px #blue;    
}
#meuktracker_slot h1 {
    background-color: #red;  
    border-bottom: solid 1px #blue;        
    color: #white;      
}
#meuktracker_slot a,
#meuktracker_alot a:hover,
#meuktracker_slot a:visited {
    color: #green;  
}

Verder is je volgorde fout. houd altijd de volgorde a [i]niets[/a], a:link, a:visited, a:hover, a:active aan. Dan heb je altijd de verwachte resultaten. Als ik één van de 4 pseudo-selectors nodig heb, schrijf ik ze altijd alle 4 volledig uit, en dus ook onder elkaar.

Waarom je daar color: #green; zet als je ze niet groen wilt hebben is mij trouwens een raadsel.

[Toink]

Verwijderd schreef op woensdag 30 april 2008 @ 20:53:
In dit geval is meuktracker_slot a, a:hover, a:visited onzin. Dat zou eerder meuktracker_slot a, meuktracker_slot a:hover, meuktracker_slot a:visited moeten zijn.

Ik schrijf selectors altijd per regel. Dat is veel duidelijker.

Cascading Stylesheet:

#meuktracker_slot {
    color: #blue;  
    border: solid 1px #blue;    
}
#meuktracker_slot h1 {
    background-color: #red;  
    border-bottom: solid 1px #blue;        
    color: #white;      
}
#meuktracker_slot a,
#meuktracker_alot a:hover,
#meuktracker_slot a:visited {
    color: #green;  
}

Verder is je volgorde fout. houd altijd de volgorde a [i]niets[/a], a:link, a:visited, a:hover, a:active aan. Dan heb je altijd de verwachte resultaten. Als ik één van de 4 pseudo-selectors nodig heb, schrijf ik ze altijd alle 4 volledig uit, en dus ook onder elkaar.

Waarom je daar color: #green; zet als je ze niet groen wilt hebben is mij trouwens een raadsel.

Bedankt voor deze opmerking na "onzin", dat scheelt me al een hoop ellende dus die tip neem ik direct mee. Ik geef de kleur green op omdat de H1 weliswaar wit moet zijn, maar de hyperlinks in de tracker moeten groen worden. Dat is het doel. (maar dan fatsoenlijke kleuren natuurlijk en niet deze)

[Verwijderd]

Toink schreef op woensdag 30 april 2008 @ 20:57:

Bedankt voor deze opmerking na "onzin", dat scheelt me al een hoop ellende dus die tip neem ik direct mee. Ik geef de kleur green op omdat de H1 weliswaar wit moet zijn, maar de hyperlinks in de tracker moeten groen worden. Dat is het doel.

In dat geval moet je ook #meuktracker_slot h1 a etc. opgeven. En dan ook alle varianten met pseudo-selectors die je "zonder" h1 ook gebruikt. Anders overrulen die je regels weer.

[Toink]

Verwijderd schreef op woensdag 30 april 2008 @ 21:02:
[...]

In dat geval moet je ook #meuktracker_slot h1 a etc. opgeven. En dan ook alle varianten met pseudo-selectors die je "zonder" h1 ook gebruikt. Anders overrulen die je regels weer.

Wederom juist . Het probleem is zojuist opgelost en tevens een hele berg andere "onbegrijpelijke" problemen rondom de CSS op mijn site.

[XangadiX]

topic titel aangepast...
at your service