Problem with div resize of both TEXT and IMG

HTML & CSS
1

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! :slight_smile:

2

You have a few choices there. You could either set a fixed width on the container so that it can’t get any narrower, or use @media queries to set different styles at lower screen widths. For example, on narrow screens you could put the navigation under the logo.

Either way, you need to redo the menu, as it’s not legal HTML to have images between the LIs like that. A better option is to set them as BG images on the menu items themselves.