How do I stop my divs from moving around while zooming? - css

Question

Good day everyone,
I am working on a website for a local astronomy club that I am doing for free to build up both my portfolio and skill set.
I have a navigation bar within my header at the top of the page. When I zoom out to about 90% the elements within the navigation bar move around and cause the layout to look a little funky.
If it helps, I have a live example at
http://www.JamesRobertCook.com/BCAAS/
Here is the HTML for my navigation bar:
<div id="header_bar">
<div id="nav">
<div id="cssmenu">
<ul>
<li class="active"><span>Home</span></li>
<li class="has-sub"><span>Products</span>
<ul>
<li class="has-sub"><span>Product 1</span>
<ul>
<li><span>Sub Item</span></li>
<li class="last"><span>Sub Item</span></li>
</ul>
</li>
<li class="has-sub"><span>Product 2</span>
<ul>
<li><span>Sub Item</span></li>
<li class="last"><span>Sub Item</span></li>
</ul>
</li>
</ul>
</li>
<li><span>About</span></li>
<li class="last"><span>Contact</span></li>
</ul>
</div>
</div>
And here is the CSS associated:
#header_bar {
background: rgba(44, 44, 44, 0.75);
height: 36px;
margin: 0 auto;
}
#nav {
height: 36px;
margin: 0 auto;
width: 960px;
}
#cssmenu {
height: 36px;
background-color: rgb(44, 44, 44)s;
}
#cssmenu ul {
margin: 0;
padding: 0;
}
#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;
#cssmenu > ul > li > a {
color: rgb(160,160,160);
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 36px;
padding: 15px 85px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
I thought that sticking it inside of a container and giving it a fixed height/width would do the trick, but I tried that locally and had no success.
Thanks for any help! If possible, could you please explain what I was doing wrong? I'd like to learn from my mistakes!
Thanks!
EDIT
I just noticed that when zooming, the content in my three 'featured' boxes, overlaps the respective div it lives in as well! I certainly broke something.

Answer 1

I am sooooooo sorry. I got side-tracked looking at a content div down further on the page and totally lost focus on your true problem. I hope a simple solution to your original problem will help you forgive me.
#header_bar {
background: rgba(44, 44, 44, 0.75);
height: 36px;
margin: 0 auto;
min-width: 960px;
}
That min-width: 960px; (the 960px is 960 pixels which is the same width as the rest of the primary content of the page) means that the <div> with id="header_bar" can not be any smaller than 960px which makes it fit with the rest of your content even if someone views on a super low resolution, resizes the browser window or zooms in really far.
Again, so sorry for totally screwing that one up, but on a side note, I believe I could give you some pointers on a few things if you are interested. Just for example, you seem to overuse <div>'s and <span>'s in your page. Those two elements are not exclusive to receiving some of the styling which you have applied to them and the child elements in some cases or the parent elements of those elements could receive the style and you could eliminate those elements entirely.
If you want more detailed explanation on the tips and hints and such, I love playing sounding board for ideas and discussing programming/development and I think I could show you a few things I've learned over the years that would help you.

Answer 2

Your div elements need to grow taller or you need to set the overflow on them if you don't want the text to run through the borders, but aside from that I don't see where your div elements are doing anything unusual. They are static sized and they don't change size for anything. They "move" because the user is resizing/zooming and they can't stay static during that. You would have to find a way to keep your users from resizing/zooming to prevent anything changing.

Answer 3

Try using % as the unit versus px to assign width for the <li> (list item)
(i.e) if you are using five <li> in ur menu, assign width:20% to <li>