Op zich werkt dit wel grotendeels, maar het kan korter:
css:
Code:
#foto {
width: 318px;
height: 242px;
background-image: url(foto.jpg);
}
.menu {
cursor: pointer;
margin-left: 20px;
margin-top: 15px;
font-weight: bold;
text-decoration: none;
}
.menu a {
font-size: 12px;
color: #f00;
font-weight: bold;
text-decoration: none;
}
HTML:
<div id="foto">
<p class="menu"><a href="link.html">Home</a></p>
<p class="menu"><a href="link.html">Varia</a></p>
<p class="menu"><a href="link.html">Linken</a></p>
</div>
De align="left" in de html is niet nodig, omdat dit de standaard-instelling is. Bovendien is dit 'n verouderd attribuut, dat al zo'n tien jaar wordt afgeraden, dus beter niet meer gebruiken. Als zoiets nodig is, is text-align: left; in de css beter.
De position: absolute (en dus left en top) bij #foto zijn niet nodig om de tekst op de foto te krijgen.
De z-index is niet nodig, want wat later komt in de code komt normaal genomen altijd al boven wat eerder komt te staan.
cursor: pointer; bij .menu is alleen nodig als de cursor in 'n handje moet veranderen boven de héle <p>, dus niet alleen boven de tekst in de link. Boven de tekst in de link verandert hij automatisch al in 'n handje.
text-decoration: none; (tegen het onderstrepen in de link) werkt niet als je het bij .menu zet, dat moet bij .menu a. Anders 'wint' de text-decoration van de <a> het van de text-decoration van .menu.
Omdat .menu a toch nodig was in de css, heb ik daar gelijk de lettergrootte, kleur en font-weight neergezet. Dat houdt het overzichtelijk bij elkaar. Al deze dingen kun je volledig wijzigen.
