Hallo, ik ben bezig met een site, maar ik heb een probleem. Kijk:
Jullie snappen het denk ik wel. Ze moeten niet onder mekaar maar naast elkaar.
HTML:
CSS:
Alvast bedankt :thumb:
Jullie snappen het denk ik wel. Ze moeten niet onder mekaar maar naast elkaar.
HTML:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Grex - Home</title>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>
<body>
<div class="site">
<div class="menu-bar">
<ul>
<li><div class="menu-button">Home</div></li>
<li><div class="menu-button">Home</div></li>
</ul>
</div>
</body>
</html>CSS:
Code:
@font-face {
font-family:"Orbitron Light";
src:url('../font/orbitron-light.ttf');
}
body {
background-image:url(../images/bg.png);
background-repeat:repeat-x;
background-color:#FFAA00;
margin-top:20px;
}
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
li {
display:inline;
}
.site {
width:1115px;
margin-left:auto;
margin-right:auto;
}
.menu-bar {
background-image:url(../images/menu-bar.png);
background-repeat:no-repeat;
width:958px;
height:61px;
}
.menu-button {
opacity:1.0;
filter:alpha(opacity=100);
background-image:url(../images/menu-button.png);
background-repeat:no-repeat;
width:98px;
height:59px;
margin-left:15px;
text-align:center;
font-family:"Orbitron Light";
font-size:15px;
color:#6FF;
}
.menu-button:hover {
opacity:0.4;
filter:alpha(opacity=40);
background-image:url(../images/menu-button.png);
background-repeat:;
width:98px;
height:59px;
text-align:center;
font-family:"Orbitron Light";
font-size:15px;
color:#6FF;
}Alvast bedankt :thumb:
Wel even in de li css de display in inline-block veranderen en het werkt 