div under the contents

Asked

Viewed 33 times

-1

Hello

i have two Divs one which is the carousel and the other which is the side-menu but even though both are in display block the carousel div is over the div of the secondary-Manu, I wanted to know why and how to solve this.

Code:

.menu-secundario {
        background-color: rgba(45, 189, 129, 0.438);
        width: auto;
        height: 60px;
        display: block;
        position: relative;
    }

    .header-1 {
        display: none;
    }
    .carrossel {
        margin-top: 0px;
    }
    .menu-secundario li {
        float: none;
        margin-left: 5px;
        margin-right: 5px;
        height: 40px;
        width: 81vw;
        padding-top: 20px;
        text-align: center;
        text-transform: uppercase;
    }
    .menu-principal {
        background: none;
    }
    .carrossel .b-V-A {
        display: none;
    }
    main {
        width: 100vw;
    }
    .menu-burguer {
        display: block;
        width: 100%;
        position: relative;
        align-items: center;
        text-align: center;
    }
    .menu-principal .menu-burguer img {
        width: 50px;
        height: auto;
        margin: 10px;
        display: block;
    }
    .carrossel img {
        width: 100vw;
        height: auto;
    }
<div class="menu-secundario">
                <nav>
                    <ul>
                        <li><a href="">Historias</a></li>
                        <li><a href="">Linha temporal</a></li>
                        <li><a href="">Impacto da poluição</a></li>
                        <li><a href="">Percurso do rio</a></li>
                        <li><a href="">Jogo</a></li>
                    </ul>
                </nav>
            </div>
            
            <div class="carrossel">
            <div class="img1 img" id="img1">
                <div class="seta-down">
                    <img src="../img/seta-down-conti-branco.png" alt="seta-down">
                </div>
                <div class="b-V-A">
                    <button class="b1"><a href="#img3">Voltar</a></button>
                    <button class="b2"><a href="#img2">Avançar</a></button>
                </div>
                <img src="../img/img_1_car.png" alt="img1">
            </div>
            <div class="img2 img" id="img2">
                <div class="b-V-A">
                    <button class="b1"><a href="#img1">Voltar</a></button>
                    <button class="b2"><a href="#img3">Avançar</a></button>
                </div>
                <img src="../img/img_2_car.jpg" alt="img2">
            </div>
            <div class="img3 img" id="img3">
                <div class="b-V-A">
                    <button class="b1"><a href="#img2">Voltar</a></button>
                    <button class="b2"><a href="#img1">Avançar</a></button>
                </div>
                <img src="../img/img_3_car.jpg" alt="img3">
            </div>

        </div>

html css

  • It is because the menu is with a fixed heigth of 60px.

  • @Sam tried to switch to auto and I changed the width to 100vw but it’s still the same... I change the height to what for it to work?

  • 1

    No need to declare auto, this value is already the default value of the property. And also no need to put 100vw width, as the div already occupies all width by default. In my view, just delete the height that is already one thing below the other in the layout.

  • @Sam’s probably right, but I just took the height off the div and it’s still under the other div...

1 answer

1


Speak David, all right? (:

The content of your menu is being overlaid because you set a height for it, which in this case was a height:60px. To solve your problem then it is simple, just remove the property height of your CSS and ready! But if it is important to have a predefined size in fact, you can use the property min-height. Example:

.menu-secundario {
    background-color: rgba(45, 189, 129, 0.438);
    width: auto;
    display: block;
    position: relative;

    /**************************/

    min-height: 60px;
}

This way, you will ensure that your menu will not be less than 60px, and at the same time it will not break your layout if the menu items are of different sizes. : D

I hope I helped, hugging!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.