DIV is hanging on minimize.

[LeonLatex]

nav_div remains in the same place when I minimize and scale. It should follow the div above, but doesn't. The width and height scale, but it does not move accordingly. What and where is wrong?

CSS:

.big_div {
    margin: auto;
    width: 100%;
    height: 201px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 14pt;
}
.img_div {
    width: 100%;
    height: 203px;
    background: url("../images/logo.png") no-repeat;
    background-size: contain;
}
.nav_div {
    background-color: #ff0000;
    margin: auto;
    width: 100%;
    height: 40px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 13pt;    
    text-align: center;
    vertical-align: middle;
}

HTML:

<div class="big_div"><div class="img_div"></div></div>
<div class="nav_div">
    <a id='nav-hjem' href='<?=$HOST?>index.php' class='w3-bar-item w3-button'>Hjem</a>
    <a id='nav-jeg' href='<?=$HOST?>index.php' class='w3-bar-item w3-button'>Jeg</a>
    <a id='nav-meg' href='<?=$HOST?>index.php' class='w3-bar-item w3-button'>Meg</a>
    <a id='nav-deg href='<?=$HOST?>index.php' class='w3-bar-item w3-button'>Deg</a>
    <a id='nav-du' href='<?=$HOST?>index.php' class='w3-bar-item w3-button'>Du</a>
</div>

Edited July 12, 2023 by LeonLatex
spelling error

[kicken]

I don't understand what it is you're saying is wrong.  You should create a fiddle that reproduces the problem and post the link.  Then re-describe the problem, optionally with screenshots if you can't describe it well.

Your HTML is currently invalid due to a missing quote, you should fix that as well.

 

[LeonLatex]

18 hours ago, kicken said:

I don't understand what it is you're saying is wrong.  You should create a fiddle that reproduces the problem and post the link.  Then re-describe the problem, optionally with screenshots if you can't describe it well.

Your HTML is currently invalid due to a missing quote, you should fix that as well.

 

It is the background image that is scaling, but the two div's is not. I have removed the img_div so I have just big_div and nav_div left. I thought that maybe this would help. I discovered that it is not the nav_div that is not scaling when I minimize the browser window. It doesn't follow the background picture with the logo and graphic. Because the background picture is scaling as it should. The problem occurs when I minimize the browser window, and the two div's are not scaling like the background image. The background image is scaling because of this one:

background: url("../images/topbg.png") no-repeat;
background-size: contain; /*Makes the background scaling.*/ 

First (like in my first posting) I thought that the nav bar was hanging on the same place and the other two div's was scaling. But that wasn't the problem. The problem occurs when the background image is scaling, but the div's is not. How to make this work I don't have a clue, but I hope someone here has and can help. Please, tell me how to solve this problem.

I hope this is enough information when I include the screenshots 😊 The CSS is the same as in my opening posting minus the img_div and I also corrected the quoting that was missing👍

Maximized

Minimized

CSS:

.big_div {
    margin: auto;
    width: 100%;
    height: 203px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 14pt;    
    background: url("../images/topbg.png") no-repeat;
    background-size: contain; /*Makes the background scaling.*/
}
.nav_div {
    background-color: #ff0000;
    margin: auto;
    width: 100%;
    height: 40px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 13pt;    
    text-align: center;
    vertical-align: middle;
}

HTML:

<div class="big_div"></div>
<div class="nav_div">
    <a id="nav-hjem" href="<?=$HOST?>index.php" class="w3-bar-item w3-button">Hjem</a>
    <a id="nav-jeg" href="<?=$HOST?>index.php" class="w3-bar-item w3-button">Jeg</a>
    <a id="nav-meg" href="<?=$HOST?>index.php" class="w3-bar-item w3-button">Meg</a>
    <a id="nav-deg" href="<?=$HOST?>index.php" class="w3-bar-item w3-button">Deg</a>
    <a id="nav-du" href="<?=$HOST?>index.php" class="w3-bar-item w3-button">Du</a>
</div>

Edited July 13, 2023 by LeonLatex

[LeonLatex]

I found the solution my self.

- I had to remove the hight on big_div and change it to min-height.

- Set the position property of .nav_div to absolute, and position it at the bottom of .big_div.

- And I had to remove this line: background-size: contain; /*Makes the background scaling.*

 

Both .big_div and .nav_div is scaling in proportion to the background image in .big_div, and .nav_div  stays at the bottom of .big_div when it scales.

Case closed.

Edited July 14, 2023 by LeonLatex