NL Computer Forum
Maak het zelf => Homepages en websites => Topic gestart door: iforczz op 22 februari 2014, 16:35:31
-
Hallo allemaal,
ik ben bezig met een website voor school,
en ik ben niet de beste er in,
en nu ben ik bezig met het menu en een soort knop doormiddel van div's en css,
nu heb ik deze css code:
#knop {
height:25px;
width:300px;
float:left;
margin-top:7px;
margin-left:7px;
padding-top:4px;
padding-left:5px;
background-color:#CCC;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-top-color:#0;
border-right-color:#0;
border-bottom-color:#0;
border-left-color:#0;
border-top-width:2px;
border-right-width:2px;
border-bottom-width:2px;
border-left-width:2px;
text-align:left;
}
En de in de body heb ik dit neergezet
<a style="display:block" href="#index">
<div id="knop">Home</div>
</a>ik gebruik dit html type
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
En nu wil ik dus de kleur van de link die op deze div zit een andere kleur geven,
ik heb wel voor elkaar gekregen als ik over de knop hover dat de kleur binnenin anders wordt met behulp van deze code
#knop:hover {
background-color:#999;
text-color:#A40000;
}
Maar ik kon dit dus niet werkent zien te krijgen ik heb
#knop:link {geprobeert, dit werkte niet
#knop a:link {En dit werkte ook niet,
kan iemand mij helpen met dit probleem
alvast bedankt.
-
Probeer eerst eens met
#knop {
height:25px;
width:300px;
float:left;
margin:7px 0 0 7px;
padding:4px 0 0 5px;
background-color:#CCC;
border:2px solid #000;
text-align:left;
}
en met
#knop:hover {
background-color:#999;
color:#A40000;
}
margin en padding kan je met de klok mee lezen dus : top - right - bottom - left.
#0 is geen kleur.
"text-color" heb ik nooit van gehoord en zal denk ik "color" moeten zijn.
-
En om een antwoord op je vraag te geven.
De CSS:
#knop {
height:25px;
width:300px;
float:left;
margin:7px 0 0 7px;
padding:4px 0 0 5px;
background-color:#CCC;
border:2px solid #000;
text-align:left;
}
#knop:hover {
background-color:#999;
}
#knop a:link, #knop a:visited{color:#A40000;text-decoration:none;display:block;}
#knop a:hover{colorrange;text-decoration:underline;}
#knop a:active{color:black;text-decoration:none;}
en de HTML:
<div id="knop"><a href="#index">Home</a></div>
Met de link binnen de div...
En zo kan je de link apart en de knop apart stylen.