CODEWITHSUNDEEP
csshtml
user2542424
user2542424

Reputation: 11

DIV's Moving When Zooming in and out

I have just recently created a website which uses multiple divs. I then zoomed in and out, and particular DIV's move to the left corner, whilst the others move to the right corner of the screen.
Below are the codes for my website, if anyone could help me it would be much appreciated. I have left out majority of the body after the header, as it is affected, but was thinking that this error was to do with one of the DIV's such as the "container" div, and not in a detail in each particular DIV.

HTML:

<html>
<head>
     <title> Test Website</title>
     <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
    <div id="container">

        <div id="top_section">
            <div id="logo">
                <img src="images/pbc_WHITE_bg.tif" width="180px" height="168px">
            </div>
        </div>

       <div id="navigation">
          <ul id="nav_menu">
             <li><a href="#">HOME </a></li>
             <li><a href="#"> NEWS</a></li>
             <li><a href="#"> MEDIA </a></li>
             <li><a href="#"> CONTACT</a></li>
          </ul>
       </div>
    </div>

CSS:

{
    position: relative;
    margin: 0;
    padding: 0;
    font-weight: lighter;
}

body {
    padding: 0px;
}

 p {

color: grey;
font-family: "brandon-grotesque",sans-serif;
font-size: 13px;
  }

 h1 {

color: black;
font-weight: lighter;
font-size: 14px;
font-family: "brandon-grotesque",sans-serif;
  }

  a {

font-size: 14px;
color: grey;
font-family: "brandon-grotesque",sans-serif;
  }

  #container {
margin: 0px auto;
/*background: pink;*/
width: 100%;
height: 169px;
border-bottom: 1px solid #F2F2F2;
  }

   #top_section {

width: 400px;
height: 170px;
/*background: black;*/
float: left;
  }

  #logo {
margin-left: 170px;
  }

  #navigation {

position: relative;
background: blue;
margin-top: 70px;
width: 700px;
float: right;
margin-right: 50px;
 }

 ul#nav_menu {

list-style-type: none;
  }

  ul#nav_menu li {

display: inline-block;
padding-right: 5px;
width: 150px;
text-align: right;
position: relative;
float: left;
 }

 ul#nav_menu li a{

    text-decoration: none;
    text-align: right;
}

Upvotes: 1

Views: 5895

Answers (4)

Paramvir Singh Karwal
Paramvir Singh Karwal

Reputation: 616

I have faced the same kind of problem and I was using pixels. Some say that we should use em instead of px. But it was not possible for me at that point to change all the pixels to ems.

I managed to prevent divs from moving on zooming out by making the size of the container div a little extra so that it can accommodate little change that happens on re-sizing the content while zooming. Hope this helps

Upvotes: 0

Reynderke
Reynderke

Reputation: 36

There is something they call responsive design it might help you out ;)

it changes because of the fact that screen width isn't the same on every screen + if you scale down the browser window it also changes or on zoom in-out.

the solution is doing this:

you can fix this by using @media query's and a viewport in your css , and add this meta tag to your html:

 <meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>

and with the @media query's and viewport you declare what size you have per screen width using this media query + viewport in css:

 @media screen and (min-width: 820px) and (max-width: 920px) {
  @viewport { width: 820px; }

// your css for screens between 820 and 920 pixels in width goes here

  }

i mostly use the value's : from 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, @media screen and (min-width: 1200px){ @viewport { width: 1200px; }(this last one will set the size for any screen bigger than 1200 px in width so your code for the biggest version goeds here}

So this means you will have 6 times your css code which is adapted will be adapted to the size.

This is called adaptive or responsive design and is pretty easy to do

For more info you might check this http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

A little tip if there are div's making your design or webpage flow over on the side's you might add overflow:hidden to those div's in the css this should fix that issue.

Upvotes: 0

Naveen Kumar Alone
Naveen Kumar Alone

Reputation: 7668

Use 

overflow: auto;

in you css class where it is needed OR you may also use

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

Upvotes: 1

Ermir
Ermir

Reputation: 1451

The code you pasted is fine, the problem must be somewhere else that you neglected to share. The problems you see are likely a mix of using floats, text-align: right, and a mix of inline and block elements. Take the time to learn how each of these work together for more consistent and easy HTML development.

Upvotes: 1

Related Questions