All geek questions in one place

The problem of scaling the navigation bar

I have a problem where my navigation bar seems to scale using .container in CSS. Now, I'm pretty new, but I tried messing around with the values ​​in CSS, but to no avail. Here is the code for HTML and CSS:

* { margin: 0px; padding: 0px; } body { font-family: verdana; background-image: url(images/bg2.jpg); max-width: 100%; max-height: auto; background-position: 0px 100px; background-repeat: repeat-x; background-color: black; background-size: 100%; } #header { background-color: #000000; height: 100px; width: 100%; } .container { background-color: grey; width: 960px; height: auto; margin: 0 auto; color: rgb(200, 200, 200); } #logoArea { width: 300px; height: 100px; background-image: url(images/logo.png); float: left; display: block; } #navArea { height: 50%; float: right; } #nav { list-style: none; margin-top: 5%; } #nav a { color: #C8C8C8; text-decoration: none; width: 75px; height: 50px; display: table-cell; vertical-align: middle; padding: 0; } #nav li { width: 75px; height: 50px; float: left; margin-left: 30px; background-color: #252525; border: 2px solid silver; border-radius: 8px; padding: 0px; text-align: center; display: table-cell; vertical-align: middle; } #nav li:hover { background-color: grey; } .page { background-color: rgba(19, 19, 19, 0.9); padding: 20px; padding-bottom: 1px; } p { margin-bottom: 20px; } .box1 { position: relative; width: 300px; height: 100px; background-image: url(images/logo.png); background-repeat: no-repeat; float: left; } #imageLogo { width: 960px; height: 324px; background-image: url(images/Triicell-logo.png); background-repeat: no-repeat; background-position: center; } 
 <html> <head> <meta charset="UTF-8"> <title>Test site</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body a link="#C8C8C8" vlink="#C8C8C8" alink="#C8C8C8"> <div id="Header"> <div class="container"> <div class="box1"> <a id="logoArea"></a> </div> <div id="navArea"> <ul id="nav"> <li>wp_1 </li> <li>wp_2 </li> <li>wp_3 </li> <li>wp_4 </li> <li>wp_5 </li> </ul> </div> </div> </div> <div id="mainArea"> <div class="container page"> <div id="welcome">Test site</div> </div> </div> </body> </html>

As I said, I'm new, so if there is something painfully obvious that I missed, I would appreciate it if you could point me in the right direction. I’ve been racking my brains all morning trying to figure out what it could be.

Here are some screenshots to link to what I'm talking about:

Before scaling .container: enter image description here

After scaling .container: enter image description here

What I do to scale, I change the width of the .container to 50% ;. Don't worry about anything else - I know what I'm going to do to scale the rest, that is, images, etc., but it's just a navigation bar that seems to be slipping away.

But yes, I would be very grateful if anyone could help me in this matter. Otherwise, at least point me in the right direction.

+5
source share
4 answers

Hey, thanks for making your question much clearer, the fact is that if you make the container 50%, then there is no more space for navigation, because the width of #logoArea will be large so that it pushes nav to the next line, if you want it to work, you must reduce the width of #logoArea and / or #navArea. Hope this helps.

0
source

You need to clear the floats

To do this, you can add the .clear class after #Header .

 .clear{ clear:both; }

Or add the .clearfix class to Header

 #clearfix:after { clear: both; content: ""; display: block; }

Then you can easily control you .container width 50% or something else.

and here is some error in your html code, for example -

  <li>wp_1</a> </li>

It should be like this:

  <li> <a href="">wp_1</a> </li>

I hope this helps to achieve what you want.

0
source

Ah ... I see what is wrong here. There is not enough real estate for the navigation bar so that it can be placed where I wanted it. You see, there should be a logo next to the navigation bar, but since it is removed, the navigation bar is now where I want to be, even after scaling.

The only thing now would be to figure out how to scale the navigation bar itself (that is, to make it so that the bar nav resizes according to what resolution it is displayed on), but I think that the struggle in one day.

Thanks to everyone who contributed to the question. I knew that my stupidity would somehow improve. Thank you nonetheless.

0
source

Since #navArea is nested inside #Header , you need to remove #navArea from the natural page flow in order to achieve what you need.

It will look something like this:

 #navArea { position: absolute; top: 20px; right: 20px; }
0
source

Source: https://habr.com/ru/post/1232978/

More articles:


All Articles