[html/css] width en height niet goed weergegeven

[andriesf]

hey,

ik heb een probleem, want in het menu van de site word nu niet de hele background image weergegeven omdat hij de width en de height niet pakt.

CSS-code

#menu ul li {
	width: 76px;
	height: 29px;
	float: left;
}

#menu a {
	width: 76px;
	height: 21px;
	text-align: center;
	padding-top: 8px;
	color: #C0C0C0;
	text-decoration: none;
}

#menu a:hover {
	background-image: url("images/hover.png");
	width: 76px;
	height: 21px;
	padding-top: 8px;
	text-align: center;
}

HTML-code

				<div id="menu">

					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#">Contact</a></li>
						<li><a href="#">Hulp</a></li>
						<li><a href="#">FAQ</a></li>
						<li><a href="#">Aanmelden</a></li>
						<li><a href="#">Registreren</a></li>
					</ul>

				</div>

is hier misschien iemand die ziet, wat ik hele tijd over het hoofd zie?

alvast bedankt,

Andries Fikkert

 

[Goeroeboeroe]

Hallo,

'n <a> is 'n inline-element. Die kun je geen breedte, hoogte en nog 'n aantal dingen geven. Daarvoor moet je er eerst 'n blok-element van maken.
Als je bij #menu a in je css toevoegt:

display: block;

werken breedte e.d. wel. Dan moet je waarschijnlijk nog wel 'n hele hoop aanpassen, maar dat zie je vanzelf.

 

[andriesf]

oke bedankt, maar dan vind ik het raar dat hij het bij mijn andere site wel deed.

 

[Goeroeboeroe]

Als breedte en hoogte echt bij die <a> hoorden op die andere site, dan kan het niet anders of die <a> was op een of andere manier in een blok-element veranderd.
Zelfs Internet Eplorer 6 geeft geen breedte, hoogte, en nog zo wat dingen weer bij 'n inline-element (en dat wil wat zeggen...).

 

[ErikBooy007]

Je kunt er waarschijnlijk beter een inline-block element van maken. Dan blijft het wel in je regel staan, maar dan kun je toch een width + height opgeven.

 

[Goeroeboeroe]

Volgens mij is dat niet nodig. Omdat de <a>'s in 'n <li> staan die wordt gefloat, blijven ze toch al op een regel staan.
Op zich is die inline-block prima, maar 't geeft nogal problemen in (grote verrassing) Internet Explorer 6 en 7.

 

[ErikBooy007]

Ah, ik had niet goed gekeken. Had niet gezien dat ze in een <li> stonden. Never mind then.

 

[csshunter]

beetje liquid erbij ...

Hoi!
Als vervolg op Goeroeboeroe ("Dan moet je waarschijnlijk nog wel 'n hele hoop aanpassen, maar dat zie je vanzelf") had ik in de tussentijd deze gebakken:

#menu ul li {
    float: left;
    list-style: none;
    margin-right: 5px;
    margin-bottom: 5px;
    background: #FFFFC0;
}
 
#menu a {
    width: 6em; /* aanpassen op langste link-woord */
    display: block;
    padding: 3px 0 5px 0;
    text-align: center;
    color: #C0C0C0;
    text-decoration: none;
}
 
#menu a:hover {
    background-image: url("images/hover.png");
}

Op deze manier staan er geen absolute breedte-maten in, zodat een bezoeker naar hartelust zijn lettergrootte kan aanpassen zonder dat alles uit elkaar valt.

Groetjes,
CSShunter