menu probleem ie + ff + positie link
Ook tevens zou ik graag willen dat bij de hoover de linknaam precies op dezelfde plek blijft staan (10px vanaf de linkerkant) nu verspringt die daar de hele tijd heen en met margin/padding verspringt de hoover kleur buiten de div aan de rechterkant.
Code (php)
1
2
3
4
2
3
4
#left { float: left; width: 180px; background: #CFDDFF; margin-bottom: 10px; margin-top: 20px;}
#left ul { margin: 0; background-color: #ccc; }
#left ul li a { padding: 5px 10px 10px 10px; }
#left ul li a:hover { display:block; padding: 0px 0px 0px 0px; width: 100%; background-color: #000; text-decoration: none; }
#left ul { margin: 0; background-color: #ccc; }
#left ul li a { padding: 5px 10px 10px 10px; }
#left ul li a:hover { display:block; padding: 0px 0px 0px 0px; width: 100%; background-color: #000; text-decoration: none; }
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id="left">
<ul>
<li><a href="#">1 link</a></li>
<li><a href="#">2 links</a></li>
<li><a href="#">3 links</a></li>
</ul>
</div>
<ul>
<li><a href="#">1 link</a></li>
<li><a href="#">2 links</a></li>
<li><a href="#">3 links</a></li>
</ul>
</div>
Dit moet je al doen bij de a zelf.
En waarom heeft de hover een andere padding dan de link zonder hoverstatus?
Onderstaande is beter
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#left ul li a {
display: block;
padding: 5px 10px 10px 10px;
}
#left ul li a:hover {
background-color: #000;
text-decoration: none;
}
display: block;
padding: 5px 10px 10px 10px;
}
#left ul li a:hover {
background-color: #000;
text-decoration: none;
}
Een block element heeft standaard een width van 100%. Dus die kan er ook uit.
De hover neemt alles over van de normale a. Dus in de hover kun je alles zetten wat je wilt wijzigen bij een hoverstatus.
Probeer altijd wel te achterhalen waarom iets wel of niet goed gaat, daar laar je best wel wat van
http://www.sceneone.nl/positionering/positie.php
Het kan geen kwaad de volledige site door te nemen; je zal op bijna alle vragen een antwoord vinden.