Archief - HTML/CSS: Images als buttons

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

Retro.Johnson

Legacy Member
Hallo,

Ik ben bezig aan een klein project, en moet buttons laten bestaan uit 2 images, alles naast elkaar (tabblad off/hover/geselecteerd).

De buttons behoren tot het menu, en zijn gelist in de xhtml.

HTML: 
<div id="menu">
		<ul>
			<li id="start" title="Startpagina"><a href="#">Startpagina</a></li>
			<li id="serv_ond" title="Service"><a href="#">Service en ondersteuning</a></li>
			<li id="bedrijf" title="Bedrijf"><a href="#">Bedrijf</a></li>
			<li id="investor" title="InvestorRelations"><a href="#">Investor Relations</a></li>
		</ul>
</div>

Het menu komt in een smalle balk die in de css wordt aangepast

Code: 
#menu {
	float: left;
	background-color: #001e4d;
	width: 780px;
	height: 21px;
}

Dan worden de menu-opties naast elkaar geplaatst door

Code: 
#menu ul {
	list-style: none;
}

Code: 
#menu li {
	display: inline;
}

Vervolgens voeg ik de afbeeldingen van de knoppen toe (hier maar voor 1 button gegeven)

Code: 
li#start a {
	background: url(../images/startuit.gif);
	
}

li#start a:hover {
	background-image: url(../images/startpagina.gif);
}

Nu is de "uit" afbeelding transparant, en de normale afbeelding vol van kleur.

Mijn probleem :

De afbeelding van de uit/aan button wordt niet volledig weergegeven, en de tekst van de links is niet weg te krijgen met een texthack ( text-indent: -5000px;). Wanneer er gehoverd wordt gebeurt er hetzelfde.

Wanneer ik deze methode nu gebruik voor alle knoppen, wordt elke knop half weergegeven, en niet zoals het moet.

voorbeeld

Ik heb al ongelofelijk veel dingen geprobeerd, maar ik kom niet tot een uitkomst. Hopelijk kan iemand hier helpen.
R

Retro.Johnson

Legacy Member
als je de code bekeken had zag je dat het zo gedaan wordt.
Z

Zero Grav

Legacy Member
Als ge op example 2 kijkt ziet ge hoe ge het tegoei moet integreren en als ge kijkt naar het artikel ziet ge ook dat ge het fout doet door 2 afbeeldingen te gebruiken.
R

Retro.Johnson

Legacy Member
Zero Grav zei:
Als ge op example 2 kijkt ziet ge hoe ge het tegoei moet integreren en als ge kijkt naar het artikel ziet ge ook dat ge het fout doet door 2 afbeeldingen te gebruiken.
Klik om te vergroten...

Wilde daarmee zeggen dat er een afbeelding van de button in de xtml moet gestoken worden, en de andere in css moet aangehaald worden. Want ik heb wel degelijk 2 afbeeldingen nodig...
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