How do I stop a CSS layout from distorting when zooming in/out?

StackOverflow https://stackoverflow.com//questions/9709125

  •  14-12-2019
  •  | 
  •  

Question

I've set up a very basic site with a #container div that includes the #navbar and #content. However, when I zoom in or out, the #navbar distorts, if I zoom in the links get pushed down below each other instead of being inline. If I zoom out, too much padding is added between the links. How can I stop this?

HTML: 

<div id="navbar">
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="top.html">Top</a></li>
    <li><strong><a href="free.html">FREE</a></strong></li>
    <li><a href="photo.html">Photo</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact Us</a></li>
</ul>
</div>

<div id="content">

<p>Some sample text.<p>

</div>


</div>

CSS:

#container {

    position: static;
    background-color: #00bbee;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 7%;
    margin-bottom: 15%;
    border: 2px solid red;


}

#navbar  ul{

    list-style: none;



}

#navbar  li{

    display: inline;

}

#navbar li a{

    text-decoration: none;
    color: #11ff11;
    margin: 3%;
    border: 1px dotted orange;
    padding-left: 4px;

}

#navbar li a:hover {

    background-color: white;
    color: green;

}

#navbar {

    background-color: #eeeeee;
    padding-top: 2px;
    padding-bottom: 5px;
    border: 1px solid yellow;

}

How can I stop it from distorting?

Also, I'm still pretty new to CSS, I was taught to use % instead of px. Is that right? Also anything else you've got to point out, please let me know.

Thanks in advance!

Was it helpful?

Solution 2

As this question still gets constant views, I'll post the solution I use currently.

CSS Media Queries:

@media screen and (max-width: 320px) { 

/*Write your css here*/

}

@media screen and (max-width: 800px) { 

}

Check out: CSS-Tricks + device sizes and Media Queries

OTHER TIPS

I had a similar problem that I fixed by adding an extra div around my navigation menu. I then added the following 

#menu-container {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;

}

This prevented it from wrapping. Hope it works.

To fix the problem with zooming in, try adding the min-width attribute to your outer countainer (#container or #navbar?). Setting min-width prevents the webpage from trying to shrink down beyond the specified width (i.e. 300px). If you zoom in too far, instead of the elements inside the <div> jumping down onto the next line, your navbar will stop shrinking and a scrollbar will appear at the bottom of the page.

Example (in your stylesheet):

#navbar {min-width:300px;}

Another good way of achieving this is to apply the min-width attribute to the page body.

Example (in your stylesheet):

body {min-width:300px;}

Finally, if you want to make your navbar span the full width of the page, use {clear:both;} in the stylesheet.

Hmm....have you tried adding in min-width/min-height properties yet? You could just include those properties on your #container div. That might just do the trick.

Different browsers user different techniques for zoom. All of them have faults. Using percentages will introduce rounding errors. There are no easy answers.

See: http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html

I would just set absolute heights and widths to all elements/divs on the page.

id {height: 250px; width: 500px}

Or you could also use min/max-width/hight to adjust the page layout on different screen sizes or when resizing the browser window.

It is mainly because u have set your width or margin properties in percentage. If you do so make sure u provide maximum width to such element

Here you go, this is a lot like the above suggestions but its got a fixed width content area, if you were looking for full width I'm sorry (;_;)

<style>
body {
    margin:0px;
}
#container {
    width:990px;
    background-color: #00bbee;
    margin:0 auto;
    border: 2px solid red;
}
#navbar ul {
    list-style: none;
}
#navbar li {
    display: inline;
}
#navbar li a {
    text-decoration: none;
    color: #11ff11;
    margin: 3%;
    border: 1px dotted orange;
    padding-left: 4px;
}
#navbar li a:hover {
    background-color: white;
    color: green;
}
#navbar {
    background-color: #eeeeee;
    padding-top: 2px;
    padding-bottom: 5px;
    border: 1px solid yellow;
}
</style>

<div id="container">
  <div id="navbar">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="top.html">Top</a></li>
      <li><strong><a href="free.html">FREE</a></strong></li>
      <li><a href="photo.html">Photo</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>
  </div>
  <div id="content">
    <p>Some sample text.
    <p> 
  </div>
</div>

You're going to want to use a css media query to set break points for different styles in your css. Which if used correctly will fix any distortion issues.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top