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

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"><a href="index.html"><span>Home</span></a></li>
                   <li class="has-sub"><a href="#"><span>Products</span></a>
                      <ul>
                         <li class="has-sub"><a href="#"><span>Product 1</span></a>
                            <ul>
                               <li><a href="#"><span>Sub Item</span></a></li>
                               <li class="last"><a href="#"><span>Sub Item</span></a></li>
                            </ul>
                         </li>
                         <li class="has-sub"><a href="#"><span>Product 2</span></a>
                            <ul>
                               <li><a href="#"><span>Sub Item</span></a></li>
                               <li class="last"><a href="#"><span>Sub Item</span></a></li>
                            </ul>
                         </li>
                      </ul>
                   </li>
                   <li><a href="#"><span>About</span></a></li>
                   <li class="last"><a href="#"><span>Contact</span></a></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.

I usually just let my sites explode when people mess with zoom. If you want to try to prevent zoom, check this out: http://stackoverflow.com/questions/14050841/disable-zooming-of-the-page-in-desktop-web-browsers-using-javascript-jquery — Kai Qing, Jun 18 '13 at 17:44
@KaiQing have you ever run into issues on say, mobile devices? My concern with this is that iPad/Smart Phone users would otherwise be left in the dust. Thoughts? — MrS1ck, Jun 18 '13 at 17:46
Thanks for the info! A quick Google provided all I need to know about meta zoom. Still looking for a solution to my issue though, it must be something silly that's causing it. It's always something silly. — MrS1ck, Jun 18 '13 at 17:49
@KaiQing - what about the people who need their font size a tad bigger? Sucksforthem? — Ryan B, Jun 19 '13 at 20:07
@Ryan B - Yup. Straight up sucks for them. There are solutions for sure so it's not like the overall attitude is to say screw them to everyone, but mostly this kind of support is considered additional in the scope of work. Argumentatively no different than supporting display perfection for old blackberry devices or new windows phones. You can do it, but by default it is kind of low on the scale of priority and when the budget is limited, this kind of thing generally goes unaddressed. Sucksforthem. Yes. Impossible? no. — Kai Qing, Jun 19 '13 at 21:12
@RyanB - I do all the time. Many times it is in the budget and some times it is the purpose of the job. But the nature of client work can often mean we have to work with what we're given, which can mean not being allowed to alter things beyond the scope of the project. Everyone wants to argue that accessibility is part of good design and so on, but it's not always an option. Some people say - hey, I need a mobile menu on my site. I have a budget of $40. That might give them enough time for one basic media query and some html. Not enough time for cross platform or 508c for sure. — Kai Qing, Jun 20 '13 at 01:30

score 1 · Answer 1 · answered Jun 18 '13 at 19:08

1

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.

answered Jun 18 '13 at 19:08

txpeaceofficer09

161
6

Thanks! I guess I'm off to find an effective way to prohibit zoom! – MrS1ck Jun 18 '13 at 19:19
1

You may want to double check me on this, but I don't think that is actually possible except with mobile devices. Just a thought though, perhaps with JavaScript you could capture zoom iteration and modify it or modify the content of the page so it appears the same and restricts zoom. Just a thought to google for without an guarantees it will work either. You should be able to resize your divs and make content fit. Zooming doesn't affect your page for me except everything appears larger. Your text is just as much outside the div at 100% as 500%. Google Chrome Version: 27.0.1453.110 m. – txpeaceofficer09 Jun 19 '13 at 16:56
1

@MrS1ck don't prohibit zoom, just shows bad development skills. A layout should be usable if you zoom in, some people say 150% others 200% – Ryan B Jun 19 '13 at 20:09
1

I have to agree with @RyanB. You _shouldn't_ try to fit your user's browser to your layout, but rather the reverse. That being said, it is up to you if you pursue that and if your target audience doesn't care and keep coming back then...do what you like. Personally, I like to think my target audience doesn't have to zoom at all, but I try not to do anything that would make the layout mess up if they do . I wasn't suggesting prohibiting zoom as a good idea (just to clarify). – txpeaceofficer09 Jun 20 '13 at 01:06

score 1 · Answer 2 · edited Jun 19 '13 at 20:14

1

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>

edited Jun 19 '13 at 20:14

Ryan B

3,364
21
35

answered Jun 19 '13 at 04:20

Tamilarasan. R

17
1
2

txpeaceofficer09 · Accepted Answer · 2013-06-19T20:00:24.540

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.

@MrS1ck, I had some time to play with it and rebuilt the layout with CSS3/HTML5, just as an example. I used less HTML tags which means less for your users' browsers to download and faster page loads. Streamlining your code is always a good thing and, though you didn't ask for it, I was hoping you still might find it useful and learn a few tricks from it. http://www.trap-nine.com/bcaas/ Oh, and also you put BCASS, which I'm pretty sure you meant to put BCAAS, on your page. — txpeaceofficer09, Jun 20 '13 at 01:10
Thanks! I just came back to this project and your follow up helped me IMMENSELY! — MrS1ck, Jul 12 '13 at 22:58

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

3 Answers3