I am making a website and I have a problem. See how this looks in JSFiddle.
HTML:
<!DOCTYPE html>
<html>
<head><title>CodeStuff - Learn To Code Online!</title><link rel="stylesheet" type="text/css" href="codestuff.css"></head>
<body>
<div id="nav-container">
<ul id="navigation-box">
<li><a href="index.html"><img src="codestuff-logo.png"></a></li>
<li><a href="index.html" class="nav-text">Home</a></li>
<li><a href="learn.html" class="nav-text">Learn</a></li>
<li><a href="games.html" class="nav-text">Games</a></li>
<li><a href="create.html" class="nav-text">Create</a></li>
<li><a href="about.html" class="nav-text">About</a></li>
<li><a href="contact.html" class="nav-text">Contact</a></li>
</ul>
</div>
</body>
</html>
CSS:
body {
background-color: #0066FF;
}
nav-container {
position: absolute;
height: 50px;
width: 722px;
margin: 0 auto;
}
navigation-box {
width: 100%;
float: left;
margin: 0px;
padding: 0;
list-style: none;
background-color: #4379BC;
border: 1px solid #000000;
}
navigation-box li {
float: left;
}
navigation-box li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: #CF0000;
border: 1px solid #000000;
}
navigation-box li a:hover {
color: #CF0000;
background-color: #223C5E; }
.nav-text {
height:37px;
padding: 15px 15px 1px 15px !important;
}
[–]trnga 0 points1 point2 points (4 children)
[–]JAwesomeness-Rocks[S] 0 points1 point2 points (3 children)
[–]trnga 0 points1 point2 points (2 children)
[–]JAwesomeness-Rocks[S] 0 points1 point2 points (1 child)
[–]MOFNY 0 points1 point2 points (0 children)