Hallo!
Ik heb via een css generator een menu gemaakt omdat ik dit zelf allemaal niet zo goed kan.
Maar de plaatsing is niet zoals ik wil.
Hier een afbeelding hoe hij nu is:
[smallimg]http://i48.tinypic.com/wwbwat.png[/smallIMG]
En dit is het voorbeeld hoe ik hem wil hebben.
Dat wil zeggen helemaal links en bovenaan zoals op het voorbeeld hieronder
Website
Hier is mijn HTML
Hier is mijn CSS
Hopelijk kan iemand mij vertellen hoe ik dit ga aanpassen want ik snap momenteel vrij weinig van css!
mvg Grumbkow
Ik heb via een css generator een menu gemaakt omdat ik dit zelf allemaal niet zo goed kan.
Maar de plaatsing is niet zoals ik wil.
Hier een afbeelding hoe hij nu is:
[smallimg]http://i48.tinypic.com/wwbwat.png[/smallIMG]
En dit is het voorbeeld hoe ik hem wil hebben.
Dat wil zeggen helemaal links en bovenaan zoals op het voorbeeld hieronder
Website
Hier is mijn HTML
HTML:
<body>
<ul class="menu">
<li><a href="index.php" class="active" target="_self"><span>Home</span></a></li>
<li><a href="about.php" target="_self"><span>About</span></a></li>
<li><a href="onair.php" target="_self"><span>On Air</span></a></li>
<li><a href="http://www.am-forum.nl" target="_blank"><span>AM Forum</span></a></li>
<li><a href="contact.php" target="_self"><span>Contact</span></a></li>
</ul>
</body>
</html>Hier is mijn CSS
Code:
body
{
background-color: #bdd6ff;
}
.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; padding:0; height:30px; width:100%; display:block; background:url("../images/topMenuImages.png") repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url("../images/topMenuImages.png") 0px -30px no-repeat; outline:none;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url("../images/topMenuImages.png") 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url("../images/topMenuImages.png") 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span, .menu li a.active:hover span{background:url("../images/topMenuImages.png") 100% -90px no-repeat;}Hopelijk kan iemand mij vertellen hoe ik dit ga aanpassen want ik snap momenteel vrij weinig van css!
mvg Grumbkow
Laatst bewerkt door een moderator:
