menu Probleem
Ik was bezig een menu te fixen voor een friend. maar ik kom er niet uit. dit is het probleem: http://www.habbospeed.nl/knoppenmenu2.php
Alls staat onder elkaar.
homepage
games
actueel
fancenter
Habbo gidsen
Leden
maar de bedoeling is dat alles zo staat:
homepage games actueel fancenter Habbo gidsen Leden
weet iemand hoe ik dit moet oplossen. hier is het menu:
<style type="text/css">
.menu_balk {
background-image:url(http://www.algemeenhabbo.nl/images/V3.1/menubalk.PNG);
width:932px;
height:25px;
float:left;
}
#menu {
background-image:url(http://www.algemeenhabbo.nl/images/V3.1/menubalk.PNG);
width:922px;
height:27px;
padding:0;
margin:0;
}
.menu {
padding:0 0 0 4px;
margin:0;
list-style:none;
height:27px;
position:static;
z-index:500;
font-family:arial, verdana, sans-serif;
font-weight:bold;
}
.menu li a.top_link {
display:block;
float:left;
height:25px;
line-height:24px;
color:#FFF;
text-decoration:none;
font-size:11px;
font-weight:bold;
padding:0 0 0 0px;
height:25px;
cursor:pointer;
background: url('http://www.algemeenhabbo.nl/images/V3.1/menu_blank.PNG');
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 15px 0 15px;
height:25px;
background:url('http://www.algemeenhabbo.nl/images/V3.1/menu_blank.PNG') right top;
}
.menu li a.top_link:hover {
color:#FFF;
background: url('http://www.algemeenhabbo.nl/images/V3.1/menu_hover.PNG') no-repeat; height:25px;
}
.menu li:hover > a.top_link {
color:#FFF;
background: url('http://www.algemeenhabbo.nl/images/V3.1/menu_hover.PNG') no-repeat; height:25px;
}
.menu li:hover > a.top_link span {
background:url('http://www.algemeenhabbo.nl/images/V3.1/menu_hover.PNG') no-repeat right top;
height:25px;
}
.menu table {
border-collapse:collapse;
width:0;
height:0;
position:absolute;
top:0;
left:0;
}
a {
color:#069;
text-decoration:none;
}
a:hover {
font-weight:bold;
text-decoration:none;
}
</style>
<div class="menu_balk">
<ul class="menu">
<li class="top"><a href="index.php" class="top_link"><span>Homepage</span></a></li>
<li class="top"><a href="games.php" class="top_link"><span>Games</span></a></li>
<li class="top"><a href="actueel.php" class="top_link"><span>Actueel</span></a></li>
<li class="top"><a href="fancenter.php" class="top_link"><span>Fancenter</span></a></li>
<li class="top"><a href="about.php" class="top_link"><span>Habbo gidsen</span></a></li>
<li class="top"><a href="leden.php" class="top_link"><span>Leden</span></a></li>
</ul>
</div>
Gewijzigd op 01/01/1970 01:00:00 door Janniek
Hij staat goed, toch? Anders moet je de li display:inline; geven.
Zo als u kunt zien op de pagina. staat alles schuin onder elkaar. het is de bedoeling dat alles naast elkaar komt te staan op een regel.
Dit staat wel goed in FF, maar niet op IE.
Code (php)
1
2
3
4
2
3
4
div#nav {}
div#nav ul {overflow: hidden; width: 100%}
div#nav ul li {float: left; display: inline;}
div#nav ul li a {display: block; padding: 5px 10px;}
div#nav ul {overflow: hidden; width: 100%}
div#nav ul li {float: left; display: inline;}
div#nav ul li a {display: block; padding: 5px 10px;}
hierna kun je nog CSS maken voor de hovers natuurlijk.