Archief - xHTML/CSS: class + id combineren

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
[

[DZM]TheOne

Legacy Member
Ik combineer id="cur" en class="colorX".

M'n bedoeling is ervoor zorgen dat een geselecteerd item (id="cur") hetzelfde uiterlijk heeft als zijn "hover"-state. ECHTER, ik wil dat elk item een apart kleur heeft.

Het werkt momenteel enkel in FF, niet in IE.

Iemand een idee hoe dit op te lossen?

HTML:
Code: 
<body>
	<div id="wrapper">
		<div id="barWrap">
			<ul id="tabBar" title="Choose a category">
				<li class="color1"><a href="#" accesskey="1">Taming your lists</a></li>
				<li class="color2" id="cur"><a href="#" accesskey="2">is a challenge.</a></li>
				<li class="color3"><a href="#" accesskey="3">But easily done</a></li>
				<li class="color4"><a href="#" accesskey="4">when it's done correctly</a></li>
			</ul>
		</div>
	</div>
</body>

CSS:
Code: 
<!--
/* {	margin:0;padding:0; }*/
body, #tabBar {	margin:0;padding:0; }
#wrapper { width:100%;border:.2em solid #ddd;padding:.5em;margin:1em auto;text-align:left;background:#fff;height:2em; }
div#barWrap { float:left; }
ul#tabBar { font-family:verdana,serif;font-size:.8em;list-style:none;border-bottom:1px solid #333; }
ul#tabBar li { float:left;background:#820606;padding:.4em .4em .4em .2em;border-left:.1em solid #fff; }
ul#tabBar li a { color:white;text-decoration:none;display:block; }
ul#tabBar li a:hover { color:#fff; }
ul#tabBar li.color1 { background: #f047ac; }
ul#tabBar li.color1:hover, ul#tabBar li.color1#cur  { background:#b547ac url(img/ar1.gif) 50% 2em no-repeat;padding:.4em .4em 1.5em .2em; }
ul#tabBar li.color2 { background: #f08946; }
ul#tabBar li.color2:hover, [COLOR="Red"]ul#tabBar li.color2#cur[/COLOR]  { background: #d58946 url(img/ar2.gif) 50% 2em no-repeat;padding:.4em .4em 1.5em .2em; }
ul#tabBar li.color3 { background: #f04758; }
ul#tabBar li.color3:hover, ul#tabBar li.color3#cur { background: #d74758 url(img/ar3.gif) 50% 2em no-repeat;padding:.4em .4em 1.5em .2em; }
ul#tabBar li.color4 { background: #af4e0e; }
ul#tabBar li.color4:hover, ul#tabBar li.color4#cur { background: #8a4e0e url(img/ar4.gif) 50% 2em no-repeat;padding:.4em .4em 1.5em .2em; }
/*ul#tabBar li#cur{ background:#620505 url(img/arcur.gif) 50% 2em no-repeat;padding:.4em .4em 1.5em .2em; }*/
-->

url: http://brunovermeeren.be/tabmenu/tabmenu.html
[

[DZM]TheOne

Legacy Member
dank voor de interessante link

maar m'n
Code: 
ul#tabBar li.color2#cur
rule, om het geselecteerde item aan te duiden, zou toch wél moeten werken of kan ik dit niet op deze manier doen?

met name een tag met een id (cur) opmaken die al een bepaalde class (color2 bvb) heeft
o

orez

Legacy Member
dit zal enkel werken indien je dynamisch met php of iets dergelijks een variabele gaat bijhouden die zegt wat er moet geselecteerd zijn, en dat die variabele dan ook de CSS waarde bijhoudt.

Puur met html/css werkt die methode niet xbrowser...

een id & class mengen dacht ik dat da ook wa moeilijk gaat in 1 en dezelfde tag. Er bestaan trouwens meer achterzetsels op een link.

nl.
:active
:focus
:visited
:link
:hover
:first-letter

...

Ik stel voor dat je eens wat googled, en nog wa verder uw gebruik van css bestudeerd

btw, Rvl --> :hover werkt wel op andere elementen behalve <a> ;) enkel IE laat het werken op <a> .. :p
[

[DZM]TheOne

Legacy Member
tnx orez

ik heb weet van de zaken die je aanhaalt

misschien wil ik het gewoon te proper doen (daarmee bedoel ik liefst zonder behavior files of server-side taal)


http://www.w3.org/TR/REC-CSS2/selector.html bracht me geen uitsluitsel of dit zo kan of niet en ik google me keer op keer te pletter maar ik zoek voort

misschien zoek ik toch best een alternatieve oplossing mbv server-taal
R

Rvl

Legacy Member
Ik stel voor dat je eens wat googled, en nog wa verder uw gebruik van css bestudeerd

btw, Rvl --> :hover werkt wel op andere elementen behalve <a> enkel IE laat het werken op <a> ..
Klik om te vergroten...
Hij vroeg het dan ook specifiek voor ie é ;). En uiteindelijk als het in ie niet werkt is het nie goe
K

Kn0t

Legacy Member
Aangezien :hover toch enkel in alle browsers op het <a> element werkt,
kan je de id="cur" bij je <a>'s zetten ipv bij je <li>'s

en dan in je css zoiets:

ul#tabBar li.color2 a:hover, ul#tabBar li.color2 a#cur { ... }

En je kan ook, zoals orez zei, eens met die :active experimenteren.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan