Archief - CSS: java hovers => css hovers

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.
B

Bram

Legacy Member
oke, een tijd geleden had warhead (omfg van op de forums) eens m'n nog altijd imageready hover navigaties omgezet naar pure html/css...

Het had iets te doen met een image file met daarin zowel gewone state als hover state, en dan met css de achtergrond verschuiven enzo, maar ik snap er het fijne niet helemaal van en de voorbeelden zijn ondertss weer offline genomen...

Ik hoop dat er iemand is die snapt wat ik bedoel en of die soms een artikeltje weet staan die dit wat uitlegt, of gewoon een site waar het toepast wordt, waar ik het eens kan bestuderen...

edit: na enig browsen dus een voorbeeld gevonden: ik zou hetzelfde effect willen als http://yoni-web.be/test/new/ (de navigatie) maar dus zonder javascript en met CSS
B

Bram

Legacy Member
thx a bunch, ik veronderstel dak op de verkeerde zoektermen zocht

edit: toch niet precies wat ik zoek... ik heb enkel images, geen tekst die over de buttons zou moeten komen en de buttons zelf zijn van verschillende grootte (twee van 11px breed, en een van 12px breed)
K

KoenDK

Legacy Member
SveltestSword zei:
thx a bunch, ik veronderstel dak op de verkeerde zoektermen zocht

edit: toch niet precies wat ik zoek... ik heb enkel images, geen tekst die over de buttons zou moeten komen en de buttons zelf zijn van verschillende grootte (twee van 11px breed, en een van 12px breed)
Klik om te vergroten...


euhm
die "tekst" die over de buttons komt in het voorbeeld
dat zijn toch gewoon de alt tags van image?
indien je dit niet wilt
=>
PHP: 
alt=""

:oink:

ik stel ook voor dat je alle buttons 12px breed maakt
B

Bram

Legacy Member
problem solved...

HTML: 
		<div id="smallnav">
<ul>
	<li id="home"><a href="#">&nbsp;</a></li>
	<li id="contact"><a href="#">&nbsp;</a></li>
	<li id="sitemap"><a href="#">&nbsp;</a></li>
</ul>
		</div>

en de css:
Code: 
#smallnav ul {
	list-style-type: none;
	padding: 0px 30px 0px 0px;
	margin: 0;
	float: right;
}
#smallnav ul li {
	float: left;
	display: block;
	width: 11px;
	height: 26px;
	margin: 0px 0px 0px 15px;
}
#smallnav ul a {
	text-decoration: none;
	display: block;
	width: 11px;
	height: 26px;
}
#home {
	background: url(images/home.gif);
}
#home:hover {
	background: url(images/home.gif) -11px;
}
#contact {
	width: 12px;
	background: url(images/contact.gif);
}
#contact:hover {
	background: url(images/contact.gif) -12px;
}
#sitemap {
	background: url(images/sitemap.gif);
}
#sitemap:hover {
	background: url(images/sitemap.gif) -11px;
}
mss wel een beetje omslachtig, maar het werkt hier...

moesten er mensen zijn die een beter idee hebben, lemme know


urgh... mouseovers werken wel niet in IE
o

orez

Legacy Member
omdat uw a element een block is met een width etc... en niet uw li element? :/
s

sys4096

Legacy Member
Mja, dat is weer zo'n systeem dat ze hebben uitgevonden dat goed is als uw menu items altijd dezelfde breedte hebben.

Bij een pagina die meertalig moet zijn (bv nl, fr, de, en) kunt ge dus 4 keer al uw knoppen gaan berekenen en 4 aparte CSS maken. Fun fun fun...
B

Bram

Legacy Member
nu rijst bij mij toch de vraag... wat is nu het nut van alles dan toch met CSS te willen doen?

Het lijkt mij vrij duidelijk dat mijn geval gemakkelijker op te lossen is met javascript dan met CSS...

waarom dan toch voor CSS gaan? Semantiek? het feit dat sommige mensen geen javascript hebben?

Er zijn nog altijd meer mensen die met IE surfen denk ik, dan mensen die geen java hebben...
X

Xavez

Legacy Member
Geen images preloaden, mensen die JS hebben uitgeschakeld,... :)
T

Tsjernobyl

Legacy Member
Het gaat wel degelijk, maar je zal wat moeten foefelen.
Ik heb hier een pure css image rollover menu: http://www.matse.be/portfolio/

als je wil leg ik het volledig uit. Het is waarschijnlijk een rare manier... maar het werk


Ik verkies CSS altijd boven JS om de redenen die Xavez al vermelde. Maar bovenal omdat ik dan weet wat ik doe. Ik hou er niet van om een script roekeloos in mijn HTML te kopieren zonder te weten wat al de JS-code betekend. Dan doe ik er liever een volledige dag over om mijn css-menu te laten werken. En dan heb je nog iets geleerd.
B

Bram

Legacy Member
Tsjernobyl zei:
Het gaat wel degelijk, maar je zal wat moeten foefelen.
Ik heb hier een pure css image rollover menu: http://www.matse.be/portfolio/

als je wil leg ik het volledig uit. Het is waarschijnlijk een rare manier... maar het werk


Ik verkies CSS altijd boven JS om de redenen die Xavez al vermelde. Maar bovenal omdat ik dan weet wat ik doe. Ik hou er niet van om een script roekeloos in mijn HTML te kopieren zonder te weten wat al de JS-code betekend. Dan doe ik er liever een volledige dag over om mijn css-menu te laten werken. En dan heb je nog iets geleerd.
Klik om te vergroten...
tis idd een beetje een rare manier, en kheb er wel wa schrik van om mee 3 verschillende classes en al en opnief div's te moeten gaan werken...
T

Tsjernobyl

Legacy Member
Ik ken uw situatie natuurlijk niet, dus je zult het zelf moeten beslissen. Maar laat u niet afschrikken door de lange code, want die bestaat uit 90% uit copy-paste + 1 kleine verandering per menu-knop.
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