LeonLatex Posted April 10, 2023 Share Posted April 10, 2023 (edited) On a page that I have put together, I have two DIVs at the top. One is for the background image at the top of the web page and is made scalable with CSS, and the 2nd is for a navigation bar. The problem is with the navigation bar. I want these two DIV's to nest inside each other. They do this as well, as long as the window is not minimized. Therefore. It is displayed correctly as long as the window is full size. When you minimize or scale down the resolution, these two DIVs slide apart so that there is a gap and a space is created between them. I don't want it. What have I done wrong? HTML and CSS are below. HTML Dokument <body> <HEADER> <NAV> <MAIN> <div class="big_div"> <NAV> <div class="nav_div"> <a id='nav-members' href='<?=$HOST?>index.php' class='w3-bar-item w3-button'>Hjem</a> <a id='nav-members' href='<?=$HOST?>index.php' class='w3-bar-item w3-button'>Registrering</a> <a id='nav-members' href='<?=$HOST?>index.php' class='w3-bar-item w3-button'>Medlemmer</a> <a id='nav-members' href='<?=$HOST?>index.php' class='w3-bar-item w3-button'>Båtplass</a> <a id='nav-members' href='<?=$HOST?>index.php' class='w3-bar-item w3-button'>Faktura</a> </div> </HEADER> </NAV> </MAIN> </body> <html> CSS Document .big_div { position: fixed; margin: auto; margin-top:0px; width: 100%; height: 250px; background:url("../images/topbg.png") no-repeat; background-size: contain; /*Makes the background scaling*/ padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; font-size: 14pt; } .nav_div { position: fixed; background-color: #fefefe; margin: auto; margin-top: 250px; width: 100%; height: 40px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; vertical-align: middle; font-size: 12px; text-align: center; color: blue; } Edited April 10, 2023 by LeonLatex Quote Link to comment Share on other sites More sharing options...
maxxd Posted April 11, 2023 Share Posted April 11, 2023 If that's the actual html you're using it's a mess. You open a <nav> element twice but only close it once and nest it incorrectly. If main is actually a semantic main element it's also nested incorrectly, and you open big_div and nav_div divs but only close one of those. In the CSS both your nested divs are position fixed, which really doesn't serve a purpose; beyond that neither of the fixed divs have a top value, so the fixed won't take effect. And it's a small thing but lowercase has been recommended for html tags for quite some time now. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.