LeonLatex Posted April 13, 2023 Share Posted April 13, 2023 (edited) I'm posting this here on CSS, although some probably think it should be posted on HTML. Regardless... I have a problem with two DIV boxes. One is a top DIV containing background images, and the other is a DIV box with a navigation bar. They are set inside <HEADER> and <NAV> These two DIV boxes are controlled by CSS. Both HTML and CSS are pasted below. Otherwise, the background image is scaled with CSS and: background:url("../images/topbg.png") no-repeat; background-size: contain; /*Makes the background scaling.*/ The problem is that the navigation bar is placed at the very top of the page and behind the background image so that it does not appear where it should; below top DIV and the background image. No matter what I do, it doesn't help. So I wonder: What am I doing wrong? /* CSS Document */ .big_div { margin: auto; position: fixed; width: 100%; height: 249px; background:url("../images/topbg.png") no-repeat; background-size: contain; /*Makes the background scaling.*/ } .nav_div { margin: auto; background-color: #fdfdfd; width: 100%; height: 40px; font-size: 15px; text-align: center; color: blue; } <body class="body_main"> <HEADER class="big_div"> <div class="big_div"></div> </HEADER> <NAV> <div class="nav_div"> <a id='nav-members' href='<?=$HOST?>index.php' class='w3-bar-item w3-button'>Hjem</a> <a id='nav-register' href='<?=$HOST?>register.php' class='w3-bar-item w3-button'>Registrering</a> <a id='nav-members' href='<?=$HOST?>members.php' class='w3-bar-item w3-button'>Medlemmer</a> <a id='nav-members' href='<?=$HOST?>index.php' class='w3-bar-item w3-button'>Hjem</a> <a id='nav-invoice' href='<?=$HOST?>invoice.php' class='w3-bar-item w3-button'>Faktura</a> <a id='nav-login' href='<?=$HOST?>login.php' class='w3-bar-item w3-button w3-right'><?=$log_btn?></a> </div> <div><?php include '../templates/welcome.html.php'; ?></div></MAIN> <FOOTER> <div><?php include '../templates/footer.html.php'; ?></div> </FOOTER> </body> </html> Edited April 13, 2023 by LeonLatex Quote Link to comment https://forums.phpfreaks.com/topic/316134-css-and-2x-positioning-problem/ Share on other sites More sharing options...
requinix Posted April 13, 2023 Share Posted April 13, 2023 Can you throw something up in a JSFiddle so we can see it in action? 1 Quote Link to comment https://forums.phpfreaks.com/topic/316134-css-and-2x-positioning-problem/#findComment-1607313 Share on other sites More sharing options...
LeonLatex Posted April 14, 2023 Author Share Posted April 14, 2023 Nothing more is happening than described Requinix. The body-text and the navigation bar (in a div bar) are hidden behind the background image (in a div) at the top of the site. Everything should be below the top div. It should be ranged like this: <DIV>top div</DIV> <DIV>navigation bar</DIV> <DIV>body with text</DIV> But are ranged like this: top bar - Navigation bar - body with text Navigation bar in the upper left corner, below that in the left margin, the body with text. I have now removed the BG image from visualization, so just the DIV for the top BG image is showing. If I read the source it is like I have set it up. Read my HTML and my CSS and you will understand. put it in a HTML and CSS file and you will see in your nrowser. All three chrome, edge and opera is the same. Quote Link to comment https://forums.phpfreaks.com/topic/316134-css-and-2x-positioning-problem/#findComment-1607316 Share on other sites More sharing options...
kicken Posted April 14, 2023 Share Posted April 14, 2023 position: fixed Setting the position to fixed takes the element out of the normal document flow. That means it does not actually take up space, and instead acts as a separate floating layer. Since it doesn't take up space, your nav bar then becomes the "first" thing in the document, thus showing at the top below your top bar "layer". What you need to do then, is create some space where your top bar should be, such as by giving your body element a top margin (or maybe padding) the same height as your top bar. 1 Quote Link to comment https://forums.phpfreaks.com/topic/316134-css-and-2x-positioning-problem/#findComment-1607321 Share on other sites More sharing options...
maxxd Posted April 14, 2023 Share Posted April 14, 2023 Also, you're opening a <nav> element but closing it as a <main> element, so the structure is broken from the get-go. 1 Quote Link to comment https://forums.phpfreaks.com/topic/316134-css-and-2x-positioning-problem/#findComment-1607323 Share on other sites More sharing options...
LeonLatex Posted April 14, 2023 Author Share Posted April 14, 2023 7 hours ago, kicken said: position: fixed Setting the position to fixed takes the element out of the normal document flow. That means it does not actually take up space, and instead acts as a separate floating layer. Since it doesn't take up space, your nav bar then becomes the "first" thing in the document, thus showing at the top below your top bar "layer". Some other times when I change the CSS config What you need to do then, is create some space where your top bar should be, such as by giving your body element a top margin (or maybe padding) the same height as your top bar. I saw that and have tried different things to solve it. to. The problem is when I try to change it (fixed), then the background image is changing size. I also get problems with the scaling of the background image in the top div. The top div and the navigation bar are is drifting apart when scaling down the resolution when I remove or change the fixed. I tried padding before, but it changed nothing. 6 hours ago, maxxd said: Also, you're opening a <nav> element but closing it as a <main> element, so the structure is broken from the get-go. I saw that after posting and changing it. I looked over it and checked all was right set up, so the structure is ok. I am sure the problem is with the CSS, and not the HTML. Because I have checked and double-checked and gone through that part of the site over and over again. I feel stuck and try so much without anything helping. I have done so much different changes, so now, i can't see the forest because of all the trees again. Quote Link to comment https://forums.phpfreaks.com/topic/316134-css-and-2x-positioning-problem/#findComment-1607325 Share on other sites More sharing options...
kicken Posted April 14, 2023 Share Posted April 14, 2023 padding-top: 250px; Try that on your .nav_div 1 Quote Link to comment https://forums.phpfreaks.com/topic/316134-css-and-2x-positioning-problem/#findComment-1607327 Share on other sites More sharing options...
LeonLatex Posted April 14, 2023 Author Share Posted April 14, 2023 OK, after much troubling I found the missing link, called error. I had a CSS class in my body tag + I have misunderstood the use of <HEADER>, <NAV>, <MAIN> and <FOOTER>, like some of you have tried to make me understand. I can't put the header inside the main tag f.ex. Now everything is OK, so far. I hope I don't meet more problems like this. It makes so much more problems, and makes me use so much unnecessary use of time. Thank you for trying and helping me with advice and solutions😊👍 Quote Link to comment https://forums.phpfreaks.com/topic/316134-css-and-2x-positioning-problem/#findComment-1607338 Share on other sites More sharing options...
maxxd Posted April 15, 2023 Share Posted April 15, 2023 Take a look at this: https://uselessdivs.com/blog/a-short-guide-to-help-you-pick-the-correct-html-tag/ I haven't read through the full article, but the image toward the top is correct and could be helpful. 1 Quote Link to comment https://forums.phpfreaks.com/topic/316134-css-and-2x-positioning-problem/#findComment-1607339 Share on other sites More sharing options...
LeonLatex Posted April 15, 2023 Author Share Posted April 15, 2023 7 minutes ago, maxxd said: Take a look at this: ... Great Maxxd. This will be useful 😊 Thanks 👍 Quote Link to comment https://forums.phpfreaks.com/topic/316134-css-and-2x-positioning-problem/#findComment-1607340 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.