[CSS]Twee stukjes menu-opmaak overrulen elkaar onbedoeld.

[Vunzz]

Op http://www.d66rotterdamdelfshaven.nl/WIP heb ik twee menu's gemaakt aan de hand van een unnumbered list (UL). De twee menu's hebben een ander uiterlijk en dus ook een eigen stukje CSS. Nu is het probleem dat op de een of andere manier beide stukjes CSS op beide menu's van toepassing blijken en dat browsers random lijken te bepalen welk stukje er "wint".

De header:

Ziet er op het eerste gezicht goed uit, maar de letters horen blauw te zijn.
Bij het hoveren wordt wel de juiste kleur gepakt

Linker kolom:

Ziet er goed uit, maar met met de web developer tool van Firefox zie ik dat ook hier twee concurrerende stukjes CSS van toepassing zijn.

Wat op de header van toepassing zou moeten zijn:

code:

#header {
    margin:0;
    height: 135px;
    background: url(./pics/header.jpg);
    background-repeat: no-repeat;
    border:0px;
    padding:10px 0px 0px 8px;
    background-color:WHITE;
    font:bold 14px verdana, arial, helvetica, sans-serif;
    }

#header ul {
    padding-left:5em;
    padding-top: 8em;
    margin:0;
    }
    
#header ul li {
    display:inline;
    background-color: #CFE7CF;
    font:11px/20px verdana, arial, helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    padding-left:2em;
    padding-right:2em;
    margin:0.5em;
    border: 2px dotted #CCCCCC;
    }
    
#header a:link,:visited,:active {
    text-decoration: none;
    color: #00007f;
}

#header a:hover {
    color: #7f0000;
}

Wat op de linker kolom van toepassing zou moeten zijn:

code:

#links {
    float:left;
    width:150px;
    }
    
#links ul{
    list-style-image: url(pics/pijl.gif);
}
    
#links ul li{
    font:11px/20px verdana, arial, helvetica, sans-serif;
    font-weight: bold;
    }
    
#links a:link,:visited,:active {
    text-decoration: none;
    color: darkgreen;
}

#links a:hover {
    color: #00AA66;
}

Ik doe ongetwijfeld iets harstikke fout of onhandig, maar hoe moet het dan
Het lukt me namelijk niet op het met een class selector te doen, al lijkt me dat wel de oplossing.

[ Voor 2% gewijzigd door Vunzz op 26-09-2005 19:02 . Reden: typo in URL ]

[TheBorg]

Ik denk dat je het beste je javascript dubbel kan uitvoeren, 1x voor header en 1x voor links.

[Vunzz]

TheBorg schreef op maandag 26 september 2005 @ 19:04:
Ik denk dat je het beste je javascript dubbel kan uitvoeren, 1x voor header en 1x voor links.

Het enige javascript dat ik gebruik is om het als HTML4 strict te kunnen valideren en toch links in een nieuw venter te kunnen openen. De opmaak is puur HTML en CSS.

[TheBorg]

Ik praat weer poep voor ik denk. I.v.m. de UL's dacht ik dat je het over fancy uitklap menu's had.

[Verwijderd]

Cascading Stylesheet:

#header a:link,:visited,:active {
}
#links a:link,:visited,:active {
}

Schrijf dit duidelijker op, en je krijgt:

Cascading Stylesheet:

#header a:link,
:visited,
:active {
}
#links a:link,
:visited,
:active {
}

En dat zou dus beter kunnen worden:

Cascading Stylesheet:

#header a:link,
#header a:visited,
#header a:active {
}
#links a:link,
#links a:visited,
#links a:active {
}

[Vunzz]

Verwijderd schreef op maandag 26 september 2005 @ 19:11:
En dat zou dus beter kunnen worden:

Cascading Stylesheet:

#header a:link,
#header a:visited,
#header a:active {
}
#links a:link,
#links a:visited,
#links a:active {
}

Dat ziet er niet alleen netter uit, het lost ook mijn probleem nog op...
Was alles maar zo simpel!

[ Voor 1% gewijzigd door Vunzz op 26-09-2005 19:17 . Reden: typo ]

[Jrz]

wat goor zeg die javascript om je target aan te geven.
waarom niet gewoon target="xxx"

[Vunzz]

Jrz schreef op maandag 26 september 2005 @ 19:18:
wat goor zeg die javascript om je target aan te geven.
waarom niet gewoon target="xxx"

Het enige javascript dat ik gebruik is om het als HTML4 strict te kunnen valideren en toch links in een nieuw venter te kunnen openen. De opmaak is puur HTML en CSS.

Ik heb de validatieregels ook niet verzonnen

[Jaap-Jan]

Vunzz schreef op maandag 26 september 2005 @ 19:21:
[...]


[...]

Ik heb de validatieregels ook niet verzonnen

Doe het dan gewoon niet validerend zou ik zeggen, want je bent nu gewoon het idee achter het afschaffen van het target- attribuut aan het omzeilen.

Het idee is namelijk dat de gebruiker zelf wel kiest of hij een nieuw venster wil of niet. Vind ik ook veel logischer, aangezien ik vaak zelf bepaal of ik doorklik in de pagina (ik kom dan toch niet meer terug op de hoofdsite denk ik dan) of ik kies voor een nieuw tabblad omdat de hoofdsite wel nuttig is.

Kortweg: je bent wel de validator aan het omzeilen, maar je maakt geen site die strookt met de ideëen achter HTML .

Hmm, ik kijk eens verder en zie dat in CSS3 een attribuut target-new is, om precies datgene te doen wat ze in HTML eruit gesloopt hebben: het openen van een pagina in een nieuwe tab of window: http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/.

[ Voor 24% gewijzigd door Jaap-Jan op 26-09-2005 19:33 ]

[Jrz]

Ja ok, maar dat is leuk en aardig, maar als jij ECHT strict gaat doen, dan hoort je browser ook helemaal niets op je target="xxx" property gaan doen... dat is gewoon precies hetzelfde doen, op een ranzige manier, om een deprecated (= niet invalid) property

[Vunzz]

Ben ik op zich met jullie eens.
Ik ben het ooit gaan gebruiken nadat een site niet valideerde doordat ik op de colofon-pagina twee externe linkjes had naar de MySQL en de PHP site.
Maar ik geef toe, het is een beetje

[sjaakaq]

BTW, als je zo'n brede broodtekst hebt, vul 'm dan netjes uit Zo'n springerige kantlijn staat zo lelijk vind ik.

[Vunzz]

leokennis schreef op maandag 26 september 2005 @ 19:55:
BTW, als je zo'n brede broodtekst hebt, vul 'm dan netjes uit Zo'n springerige kantlijn staat zo lelijk vind ik.

Je bedoeld het middelste venster? Hier moet ik sowieso nog aan werken. Linker en rechterkolom zijn ook nog niet klaar.