how do I stop my nav links from moving when zooming out on the page?

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

  •  18-10-2022
  •  | 
  •  

Question

I know there are other questions out there similar to this that have been answered but they don't quite fit what I need. My problem is, whenever I zoom out on the page past a certain point (anything below 50% zoom), the 1 or 2 links at the end of my nav bar get pushed down to a second line below the rest of them. But this doesn't occur when the page is at a normal or large size. The links also don't change size or proportion when the window is resized, only when zoom is at 33% or 25%. I've tried all kinds of "position" stuff with both the ".nav-style" and "a" in my CSS but nothing seems to be working.

How can I get the links on the right end of the nav bar to shrink and stay in their relative proportions to the rest of the page when I zoom all the way out?

Here is my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

 <div class="container">

  <div class="div1">
        <h1>ConSynth Corporation</h1>
        <p></p>

    <div class="nav-style">

       <p><a href="#">Home</a>
          <a href="#">About Us</a>
          <a href="#">Project Gallery</a>
          <a href="#">News</a>
          <a href="#">Contact Us</a>
          <a href="#">Resources</a>
       </p>
    </div>

   </div>


    <div class="div2">
        <p></p>
    </div>


    <div class="div3">
        <p></p>
    </div>

    <div id="black-box">

        <div id="black-box-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum enim sem, gravida eu facilisis vel, mollis eget turpis. Morbi dignissim magna eu dui sagittis, ac semper enim ullamcorper. Phasellus scelerisque lobortis libero et laoreet. Vivamus suscipit erat sed quam consequat, pharetra dignissim ligula pharetra. Nulla a dui vel eros viverra rutrum sed at orci. Nullam id aliquam sem, in eleifend lectus. Integer non libero et eros sagittis tincidunt. Nam ornare, est sed dapibus auctor, lectus lorem luctus elit, at semper enim odio ac metus. Aliquam lacinia lacinia turpis et dapibus. 
<br />
<br />
Integer ac magna lobortis, dictum ligula sed, vestibulum urna. Cras eget placerat augue. Sed sit amet purus magna. Sed malesuada, nulla vitae consectetur posuere, diam odio accumsan metus, eget consectetur odio ante at velit. Etiam tincidunt justo at augue porttitor vulputate. Suspendisse hendrerit sit amet sem porta suscipit. Donec porta libero odio, non commodo orci faucibus at. Duis nisl erat, facilisis ut sem adipiscing, luctus scelerisque ante. Vestibulum felis dolor, porta eu nunc vel, sodales semper lorem. Curabitur varius lorem eget accumsan aliquam. Nam sem odio, condimentum et cursus nec, tempor id ipsum. 
<br />
<br />
Duis porttitor lacus a sem lacinia vestibulum nec quis neque.
Fusce sit amet porttitor sem. Nunc a laoreet est. Pellentesque facilisis dolor augue, sit amet aliquam justo vehicula quis. Pellentesque interdum a augue et convallis. Integer augue quam, consectetur at tortor quis, pulvinar gravida dolor. Praesent eu volutpat lacus. Integer risus nisi, venenatis non blandit vitae, feugiat ac ipsum. Etiam eu congue velit. </p></div>

        <div id="grey-login">
            <form id="usn">
                Username: <input type="username" name="usn">
            </form>

            <form id="pwd">
                Password: <input type="password" name="pwd">
            </form>

            <input type="submit" name="submit" value="Log In" id="submit" onclick="alert('Hello world!')"/>

        </div>

    </div>

    </div>

</body>
</html>

And here is my CSS:

@charset "UTF-8";
/* CSS Document */

.container {
    width: 1366px;
    height: 1409px;
    border: 2px solid black;
    border-radius: 10px;
    margin: auto;
    positon: relative;
    }

.div1 {
    width: 1366px;
    height: 253px;
    background-color: black;
    margin-top: -68px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: relative;
    }

.div2 {
    width: 1366px;
    height: 591px;
    background-color: white;
    margin: none;
    }

.div3 {
    width: 1366px;
    height: 550px;
    background-color: #688E23;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    position: absolute;
    z-index: 10;
    }

#black-box {
    width: 1278px;
    height: 437px;
    background-color: black;
    border-radius: 15px;
    position: absolute;
    z-index: 20;
    margin-top: 30px;
    margin-left: 45px;
    }

#black-box-text {
    width: 730px;
    height: 390px;
    position: absolute;
    z-index: 30;
    color: white;
    text-align: justify;
    font-family: Arial,"Arial", Helvetica, sans-serif;
    font-size: 24px;
    margin-left: 470px;
    padding-left: 10px;
    padding-right: 45px;
    overflow: auto;
    }

#grey-login {
    width: 387px;
    height: 382px;
    background-color: #cfcfcf;
    background-image: url('images/login-image.jpg');
    background-repeat: no-repeat;
    background-position: 5% 5%;
    border-radius: 15px;
    margin-left: 30px;
    margin-top: 25px;
    position: relative;
    }

#usn {
    max-width: 175px;
    margin-left: 205px;
    padding-bottom: 10px;
    padding-top: 20px;
    position: relative;
    z-index: 40;
    text-align:center;
    }

#pwd {
    max-width: 175px;
    margin-left: 205px;
    padding-top: 20px;
    padding-bottom: 10px;
    position: relative;
    z-index: 40;
    text-align:center;
    }

input[type=username] {
  border: 1px solid #999;
  border-radius: 7px;
  height: 30px;
  min-width: 150px;
  max-width: 150px; 

  -webkit-appearance: none;
}

 input[type=password] {
  border: 1px solid #999;
  border-radius: 7px;
  height: 30px;
  min-width: 150px;
  max-width: 150px;

  -webkit-appearance: none;
 }

#submit {
    background-color: #353535;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:6px;
    color: #fff;
    font-family: 'Arial';
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    border:none;
    padding: 5px 20px;
    margin-top: 20px;
    margin-left: 150px;
}



#submit:hover {
    border: none;
    background: #DD1900;
    box-shadow: 0px 0px 1px #777;
}

h1 {
    font-family: Baskerville, Georgia, "Times New Roman", Times, serif;
    color: #FFF;
    font-size: 100px;
    font-weight:100;
    text-align:center;
    margin-bottom:85px;
    }

a {
    text-decoration: underline;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    text-align: center;
    margin: 0 35px;
    font-size: 22px;
    padding-left: 50px;
    padding-top: 50px;
}

.nav-style {
    position: relative;
    }

I am a noob at HTML and CSS, and some of the code in here I copied from other people when in a pinch. I need to submit this ASAP to a person I'm trying to get an internship with so a quick response would be very much appreciated. Thank you.

PS: I just discovered that the zoom option only messes up the link position in Chrome, but it did not occur when I tried it in Safari. I have not yet tried zooming in and out on IE to see how it works on there either. Here's a JSFiddle

No correct solution

OTHER TIPS

Large screen and the zooming window are not same. Do not worry dude. Everything is ok..

you can define your width height etc. in terms of percentage or em

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