When resizing the browser window...

Question

Hello,

I built a website in HTML and CSS, and whenever I resize the browser window (smaller) it messes with the components of the site, such as the navigation bar. The navigation bar is a series of images linked to their destination using <img src=. Any idea how to fix this annoying thing?

THe code for the navigation bar is below:

<br />
<div id="nav"> 
   <a href="/"><img src="Home.png" /></a> </a>
 <a href="/blog"><img src="=blog.png" /></a> </a>
 <a href="register.php"><img src="adopt.png" /></a> </a>
 <a href="user.php"><img src="useradmin.png" /></a> </a>
 <!-- <a href="login.php"><img src="\logout.png" /></a> </a> -->
 <a href ="places.php"><img src="map.png"/></a> </a>
  <a href ="login.php?logout"><img src="logout.png"/></a> </a>
 <!--- <a href ="login.php"><img src="q.png"/></a> </a> -->
</div>

THanks.

Answer 1

<br /> 
<div id="nav">  
<table border=0 cellpadding=0 cellspacing=0>
<tr><td>
  <a href="/"><img src="Home.png" /></a>
</td><td>
  <a href="/blog"><img src="blog.png" /></a>
</td><td>
  <a href="register.php"><img src="adopt.png" /></a>
</td><td>
  <a href="user.php"><img src="useradmin.png" /></a>
</td><td>
  <a href="places.php"><img src="map.png"/></a>
</td><td>
  <a href="login.php?logout"><img src="logout.png"/></a>
</td></tr>
</table>
</div> 

Answer 2

Set min-width on your container (or nav).

Answer 3

Set a width on your #nav container that is equal to all the widths of your navigation buttons added up. For instance:

#nav {
    padding: 0;
    margin: 0;
    width: 150px;
}

#nav a img {
    width: 25px; /* 6 buttons at 25px = 150px total */
    border: 0;
}

Answer 4

You should give your menu container (#nav) a width in your stylesheet, like so:

#nav { 
width: 500px;
 } 

This way, your menu will never shrink below the specified size, and the layout (of the menu in this case) will not break.

When that is said, you should also have text in your links, and use some image replacement technique to display the links as images/graphics.

You also have syntax-errors in your code; you close all anchor-elements twice.