Hey guys, I’m having trouble with my navigation bar that includes text and images. I’m building a project site of the New Acura NSX to add to my professional portfolio, and I cannot seem to get the div containing the navi bar to resize correctly based on window size. God ive googled the problem so many times, and tried many different things, but its not working with me. Maybe im missing something? Here is a look at what im working with.
This is how the site looks at a higher resolution
This is how the site looks at a lower resolution, resize problem.
Here is my Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styling1.css"/>
<title>Acura NSX</title>
</head>
<body class="mainpage">
<div class="container">
<div class="spacer"></div>
<div class="navibar">
<ul>
<li><a href="index.html">Home</a></li>
<img src="photos/n.png" width="35" height="47" />
<li><a href="gallery.html">Gallery</a></li>
<img src="photos/s.png" width="35" height="47" />
<li><a href="news.html">News</a></li>
<img src="photos/x.png" width="35" height="47" />
<li><a href="forums.html">Forums</a></li>
</ul>
</div>
</div>
</body>
</html>
Here is my CSS
@charset "utf-8";
.mainpage {
background:url(photos/background1.jpg);
background-repeat:no-repeat;
background-size:100%;
}
.headlogo {
width:460px;
float:left;
}
.spacer {
width:60%;
float:left;
height:100px;
}
.navibar {
margin-top:97px;
}
.navibar ul {
list-style-type:none;
margin:0;
padding:0;
}
.navibar li {
display:inline;
margin:5px;
}
.navibar img {
}
.navibar a:link { font-size:18px ; font:"Arial Black", Gadget, sans-serif, Helvetica, serif; font-weight:900 ; text-decoration:none; color:#006;} /* unvisited link */
.navibar a:visited { font-size:18px ; font:"Arial Black", Helvetica, serif; font-weight:900 ; text-decoration:none; color:#006;} /* visited link */
.navibar a:hover { font-size:18px ; font:"Arial Black", Helvetica, serif; font-weight:900 ; text-decoration:none; color:#FFF;} /* mouse over link */
.navibar a:active { font-size:18px ; font:"Arial Black", Helvetica, serif; font-weight:900 ; text-decoration:none; color:#00C;} /* selected link */
/* CSS Document */
ANY help would be apprecitated. THX!