Jump to content

Recommended Posts

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 by LeonLatex
Link to comment
https://forums.phpfreaks.com/topic/316117-moving-and-div-when-scaling-down/
Share on other sites

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.