Why can’t I create the <div> in the right place?

Asked

Viewed 69 times

0

@media (max-width: 1200px) {
    .navbar-light .navbar-toggler {
        font-size: 30px;
        display: inline !important;
        border: none;
    }
    #menu-exp {
        display: none;
    }
    .navbar-toggler {
        text-align: center;
        position: relative;
        right: -65%;
    }
    .navbar-nav a {
        position: relative;
        color: darkgreen !important;
        font-weight: 800 !important;
        text-align: center;
        left: -80%;
        padding: 3px 0px 5px 0px;
        white-space: nowrap;
    }
    #logo-menu {
        width: 62%!important;
        float: left;
        padding-top: 2%;
        padding-bottom: 3%;
    }
    .navbar-nav {
        padding-top: 6%;
    }
    #menu {
        display: block!important;
    }
}
.bg-light {
    background-color: white!important;
}
#menu {
    display: none;
}
#img-logo {
    padding-left: 23%;
    padding-top: 1%;
    width: 112%;
}
#menu1 {
    position: absolute;
    width: 23.9%;
    left: 98%;
    top: 1%;
    height: 90%;
    padding-left: 2.3%;
    padding-top: 0.7%;
    border-radius: 17px;
}
#menu-header {
    position: relative;
    top: -66px;
    left: -296px;
    font-size: 20px;
}
#menu-header a {
    color: darkgreen!important;
    font-weight: 700;
    margin-left: 50px;
}
#menu-header a:hover {
    border-bottom-style: solid;
    border-bottom-color: darkgreen;
    border-bottom-width: 6px;
}
#menu1 p {
    position: absolute;
    right: -190px;
    top: 10px;
    padding-right: 2%;
}
#menu1 {
    background: darkgreen;
    color: #fff!important;
}
#menu-container {
    position: absolute;
    padding-left: 30%;
}
#imageContainer {
    width: 100%;
    height: 800px;
    background-image: url(Imagens/29170010-Close-up-of-businessmen-shaking-hands-Stock-Photo-business-meeting-handshake.jpg);
    position: absolute;
    left: -0.7%;
}
#h1-img {
    color: white;
    font-size: 70px;
    position: absolute;
    padding-top: 16%;
    word-break: break-all!important;
    padding-left: 10%;
}
#h1-img2 {
    color: white;
    font-size: 70px;
    position: absolute;
    padding-top: 20%;
    word-break: break-all!important;
    padding-left: 12.1%;
}
.imageContainer hr {
    display: block;
    border-style: solid;
    border-color: white;
    border-width: 5px;
    margin: 32em;
    padding: 10;
}

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Home</title>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <link type="text/css" rel="stylesheet" href="../../../OneDrive/Documentos/Site sem nome 2/glyphicons.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="projeto.css">

    <script type="text/jscript" src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body>

    <section id="menu">

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">

                    <img class="img-fluid" src="Imagens/Logo.png" id="logo-menu">

                    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
                        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon" id="hamburger"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                            <div class="navbar-nav">

                                <a> HOME</a>
                                <a> SOBRE NÓS </a>
                                <a> ÁREAS DE ATUAÇÃO </a>
                                <a> ARTIGOS E PALESTRAS </a>
                                <a> CONTATO </a>
                            </div>
                        </div>
                    </nav>

                </div>
            </div>
        </div>

    </section>

    <section id="menu-exp">

        <div class="container-fluid">

            <div class="row align-items-start" style="">

                <div class="col-md-12">

                    <nav class="navbar navbar-light bg-light">
                        <a class="navbar-brand" href="#">
                            <img id="img-logo" src="Imagens/Logo.png">
                        </a>
                    </nav>
                    <div id="menu-container">
                        <nav class="nav" id="menu-header">
                            <a class="nav-link active" href="#">HOME</a>
                            <a class="nav-link" href="#">SOBRE NÓS</a>
                            <a class="nav-link" href="#">ÁREAS DE ATUAÇÃO</a>
                            <a class="nav-link" href="#"> ARTIGOS E NOTÍCIAS </a>
                            <a class="nav-link" href="#">PALESTRAS</a>
                            <a class="nav-link" href="#">CONTATO</a>
                            <a class="nav-link" href="#">
                                <div id="menu1">
                                    <span class="fa fa-facebook"></span> | <span class="fa fa-phone"> </span> Fone: 11 9999-9999

                                </div>
                            </a>
                        </nav>

                    </div>

                </div>

            </div>

        </div>

    </section>

    <section>

        <div class="container-fluid">
            <div class="col-md-12">
                <div id="imageContainer">
                    <h1 id="h1-img"> Conte com uma equipe de advogados especializada</h1>
                    <br>
                    <h1 id="h1-img2"> em Direito da Saúde, Consumidor e Imobiliário </h1>
                    <hr>
                </div>
            </div>
        </div>

    </section>

    <section id="cartoes">

        <div class="container-fluid">
            <br>
            <div class="col-md-12">
                <h1> oi </h1>
            </div>
        </div>

    </section>

</body>

</html>

Whenever I create a <div> in that code, the things I put on top of the image of <div> previous. What did I do wrong? I’m a little confused with these Bootstrap 4 changes.

Imagem

html css twitter-bootstrap div bootstrap-4

  • Where it’s supposed to be situated?

  • Below the image. At the end of the previous div, only anything I put later is as if I put inside the previous div

  • You can show div styles container-fluid?

  • What do you mean? I don’t quite understand the question, but the container-Fluid class is a Bootstrap 4 container.

  • I think that div has position: absolute or one of those middle Ivs has, causing her to stand over any Ivs below, as if she didn’t exist.

  • Is this a template? Because if it is, show the link I investigate better

  • What you said already solved, was the problem of Absolute. THANK YOU!!!

  • I published the answer, you can accept it.

Show 3 more comments

1 answer

0


I think this div has position: Absolute or one of those middle Ivs has, causing it to stand over any Ivs below, as if it did not exist, remove it and it will be right.

Browser other questions tagged html css twitter-bootstrap div bootstrap-4

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