I can’t leave the menu bar properly

Asked

Viewed 152 times

1

Não consigo deixar o menu totalmente preenchido na tela

My html:

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>Ensintech</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">    
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style-mobile.css">

</head>

<body>
    <header>

        <div class="container">
            <div class="row">
                <nav id="menu">
                    <ul>
                        <li><a class="adm" placeholder href="#">Área administrativa / Docente</a></li>
                        <li><a class="aluno" href="#">Área do Aluno</a></li>
                    </ul>
                </nav>
            </div>
        </div>  
        <img id="logotipo" src="img/ensintech.png" alt="Logotipo">

    </header>

    <div class="container">
        <div class="intro">
            <img src="img/Egrande.png" id="centro">
            <p id="acesso" style="font-size:32px">
                Acesso Aluno
            </p>
            <p id="subtitulo">
                Digite seus dados de login para acessar o sistema
            </p>
            <form action="act_login.cfm" method="post" target="escondido">
                <div class="form-group">
                    <input type="email" class="form-control " id="email" placeholder="E-mail">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="password" placeholder="Senha">
                </div>
            </form>
            <button id="entrar" type="submit" class="form-control">Entrar </button>
        </div>
    </div>
    <center><p class="copyright">&copy; 2018 - Ensintech - Todos os direitos reservados</p></center>
    <div id="rodape"></div>

    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

My normal css:

html{
    font-family: sans-serif;    
}

header{
    width:100%;
    height:58px;
    background-color: #693;
    border-bottom: 6px solid #487f1e; 
}

 header #logotipo{
    margin-left: 50px;
    margin-top: -50px;
    position:absolute; 
 }
body{
    display: block;
    width: 100vw;
    height: 100vh;
    background:url(../img/Testing-banner2.jpg) no-repeat;
    background-size:cover;
    background-attachment: fixed;   
    font-size:16px;
    overflow-x:hidden;
    margin:0;
    padding:0;  
}
#centro {
    position:absolute;
    top:18%;
    left: 50%;
}
nav#menu {
    display:inline;
}
#menu ul {
    padding:12px;
    margin-left: 240px;
    background-color:#693;
    list-style:none;
    position:relative; 
}
#menu ul li { 
    display: inline; 
}
#menu ul li a {
    color:#fff;
    padding: 2px 10px;
    display: inline-block;
    text-decoration: none;
    background:#693; 
}   
#menu  li a:hover { 
   background-color:#487F1E;   
}
header #logotipo:hover {
     background-color:#487F1E;
}
#entrar:hover{
    background-color:#487F1E;
    border-bottom: 4px solid #2c4d12;
}
div .intro{
    margin-left: 494px;
    margin-top: 258px;
}
.container p {
    text-align:center;
    margin-left: -378px;
    color:#fff;
    font-weight: bold;
}
form {
    width:29%;
    margin-left: -51px;
}
.form-control {
    width: 94%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    }
#entrar {
    font-size:18px;
    width: 368px;
    margin-left: -50px;
    height: 42px;
    border-radius: 0;
    border-bottom: 4px solid #487f1e;
    background-color: #693;
    color: #fff;
}
#email {
    width:368px;
    border-radius:0;    
}
#password {
    width:368px;
    border-radius:0;
}
#rodape {
    margin-top: 250px;  
}
p.copyright{
    color:#666;
    margin-left: 115px;
    margin-top: 40px;
}
#subtitulo {
    font-weight:normal;

}

My mobile css:

@media only screen and (max-width: 480px)/*smartphone*/{


*{
    box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
font-family: Arial, Tahoma, sans-serif;
}
body{
    background-image:url(../img/Testing-banner2.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    font-size: 16px;
    margin: 0;
    padding: 0;
}
header{
    width:100%;
    height:121px;
    background-color: #693;
    border-bottom: 6px solid #487f1e; 
}
header #logotipo {
    /*margin-left: 111px;*/
    text-align:center;
    display:none;
    margin-top: -95px;
    position: absolute;
}
.row {
    margin-right: -3px;
    margin-left: -15px;
}
#centro {
    position: absolute;
    top: 25%;
    left: 35%;
}
#menu ul{
    width: 100%;
    padding: 12px;
    margin-left: 12px;
    margin-top: 15px;
    background-color: #693;
    list-style: none;
    position: relative;
}
#menu ul li a {
    color: #fff;
    padding: 2px 10px;
    display:block;
    text-decoration: none;
    background: #693;
}
a.adm{
    margin-bottom: 11px;
    margin-top: -9px;
    margin-left: 72px;
}
a.aluno{
    margin-bottom: 11px;
    margin-top: 22px;
    margin-left: 130px;
}
#acesso {

    margin-top:-130px;

}
.container p {
    text-align: center;
    margin-left: -595px;
    color: #fff;
    font-weight: bold;
}
form {
    margin-left:-450px;
}
#email {
    width: 300px;
    border-radius: 0;
}
#password {
    width: 300px;
    border-radius: 0;
}
#entrar{
    width: 300px;
    margin-left: -450px;
}
p.copyright {
    color: #666;
    margin-left: 6px;
    margin-top: 22px;
}

}

Creio que tenha algo impedindo

html css

  • I believe that the container class should have the width property at 100% not see in its css. Paste the url of the domain in question is easier to check.

  • There is no domain url =/

1 answer

1


Your problem leading is in that CSS:

div .intro{
    margin-left: 494px;
    margin-top: 258px;
}

But when removing it your Form will be misaligned and you will need to use another class to align it again.

If you remove the margin-left: 494px; your bar will work. But from what I’ve seen in your CSS there are many other points to best. These margin-left that you use to align the elements is not the best option, Study a little about Flexbox that will help you MUCH! https://edsonjunior.com/um-guia-visual-para-flexbox/

With this you will fix the Bar, but you will have more work to realign the Form items, this is why you used these margins. Your code needs a lot of work to improve, but it’s not impossible. Start from top to bottom and align with Text-Aline and Margin: 0 auto; So don’t need Flexbox and you will arrive at a reasonable result.

Snippet follows a "Final" result, I suggest you review all the code. Not every class needs to repeat within @media! Study about it too! (can test on different screen sizes)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>

html{
    font-family: sans-serif;    
}

header{
    width:100%;
    height:58px;
    background-color: #693;
    border-bottom: 6px solid #487f1e; 
}

 header #logotipo{
    margin-left: 50px;
    margin-top: -50px;
    position:absolute; 
 }
body{
    display: block;
    width: 100vw;
    height: 100vh;
    background:url(http://placecage.com/600/600) no-repeat;
    background-size:cover;
    background-attachment: fixed;   
    font-size:16px;
    overflow-x:hidden;
    margin:0;
    padding:0;  
}
#centro {
    position:absolute;
    top:18%;
    left: 50%;
}
nav#menu {
    display:inline;
}
#menu ul {
    padding:12px;
    margin-left: 240px;
    background-color:#693;
    list-style:none;
    position:relative; 
}
#menu ul li { 
    display: inline; 
}
#menu ul li a {
    color:#fff;
    padding: 2px 10px;
    display: inline-block;
    text-decoration: none;
    background:#693; 
}   
#menu  li a:hover { 
   background-color:#487F1E;   
}
header #logotipo:hover {
     background-color:#487F1E;
}
#entrar:hover{
    background-color:#487F1E;
    border-bottom: 4px solid #2c4d12;
}
div .intro{
    /* margin-left: 494px; */
    margin-top: 258px;
}
.container p {
    text-align:center;
    color:#fff;
    font-weight: bold;
}
form {

}
.form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    }
#entrar {
    font-size:18px;
    width: 368px;
    height: 42px;
    border-radius: 0;
    border-bottom: 4px solid #487f1e;
    background-color: #693;
    color: #fff;
    margin: 0 auto;
}
#email {
    width:368px;
    border-radius:0;   
    margin: 0 auto; 
}
#password {
    width:368px;
    border-radius:0;
    margin: 0 auto;
}
#rodape {
    margin-top: 250px;  
}
p.copyright{
    color:#666;
    margin-left: 115px;
    margin-top: 40px;
}
#subtitulo {
    font-weight:normal;

}

@media only screen and (max-width: 480px)/*smartphone*/{


*{
    box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
font-family: Arial, Tahoma, sans-serif;
}
body{
    background-image:url(http://placecage.com/500/500);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    font-size: 16px;
    margin: 0;
    padding: 0;
}
header{
    width:100%;
    height:121px;
    background-color: #693;
    border-bottom: 6px solid #487f1e; 
}
header #logotipo {
    /*margin-left: 111px;*/
    text-align:center;
    display:none;
    margin-top: -95px;
    position: absolute;
}
.row {
    margin-right: -3px;
    margin-left: -15px;
}
#centro {
    position: absolute;
    top: 25%;
    left: 35%;
}
#menu ul{
    width: 100%;
    padding: 12px;
    margin-left: 12px;
    margin-top: 15px;
    background-color: #693;
    list-style: none;
    position: relative;
}
#menu ul li a {
    color: #fff;
    padding: 2px 10px;
    display:block;
    text-decoration: none;
    background: #693;
}
a.adm{
    margin-bottom: 11px;
    margin-top: -9px;
    margin-left: 72px;
}
a.aluno{
    margin-bottom: 11px;
    margin-top: 22px;
    margin-left: 130px;
}
#acesso {

    margin-top:-130px;

}
.container p {
    text-align: center;
    color: #fff;
    font-weight: bold;
}

p.copyright {
    color: #666;
    margin-left: 6px;
    margin-top: 22px;
}

#entrar {
    width: 80%;
}
#email {
    width:80%;
}
#password {
    width:80%;
}

}

</style>
</head>
<body>
    
    
        <header>

                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                        <nav id="menu">
                            <ul>
                                <li><a class="adm" placeholder href="#">Área administrativa / Docente</a></li>
                                <li><a class="aluno" href="#">Área do Aluno</a></li>
                            </ul>
                        </nav>
                    </div>
                    </div>
                </div>  
                <img id="logotipo" src="img/ensintech.png" alt="Logotipo">
        
            </header>
        
            <div class="container">
                <div class="intro">
                    <img src="img/Egrande.png" id="centro">
                    <p id="acesso" style="font-size:32px">
                        Acesso Aluno
                    </p>
                    <p id="subtitulo">
                        Digite seus dados de login para acessar o sistema
                    </p>
                    <form action="act_login.cfm" method="post" target="escondido">
                        <div class="form-group">
                            <input type="email" class="form-control " id="email" placeholder="E-mail">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" id="password" placeholder="Senha">
                        </div>
                    </form>
                    <button id="entrar" type="submit" class="form-control">Entrar </button>
                </div>
            </div>
            <center><p class="copyright">&copy; 2018 - Ensintech - Todos os direitos reservados</p></center>
            <div id="rodape"></div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

  • my code looks like this: header{ width:100%; height:121px; text-align:center; margin:0 auto; } header #logo { display:None; } #center { position: Absolute; top: 25%; left: 35%; } #menu ul{ width: 100%; text-align:center; margin:0 auto; margin-top: 15px; } #menu ul li a { display:block; } p.copyright { text-align:center; margin:0 auto; margin-top: 10px; } } https://prnt.sc/i1buj8 I will have to use flex-box even or have some other alternative, regarding the menu?

  • @Franciscocarloscarvale what happens is that when the screen gets small you also have to treat the size of inputs of form, they’re with width: 368px; but for the @media (max-width: 480px) vc could leave them at 80% of the total width, or 240px of width. You have to better handle your CSS on small screens. Take a look at the Snippet now that I’ve made an Edit!

Browser other questions tagged html css

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