1

Não consigo deixar o menu totalmente preenchido na tela

Meu 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>

Meu css normal:

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;

}

Meu css mobile:

@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

2
  • Acredito que a classe container deveria ter a propriedade width em 100% não vejo em seu css. Cole a url do domínio em questão fica mais facíl para verificar.
    – user77310
    16/01/2018 às 11:52
  • Não tem url do dominio =/ 16/01/2018 às 13:13

1 Resposta 1

1

O seu problema principal está nesse CSS:

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

Porém ao remove-lo o seu Form vai ficar desalinhado e vc vai precisar usar outra classe para alinha-lo novamente.

Se você remover o margin-left: 494px; a sua barra vai funcionar. Mas pelo que vi no seu CSS existem muitos outros pontos a melhor. Esses margin-left que vc usa para alinhas os elementos não é a melhor opção, Estude um pouco sobre FlexBox que vai te ajudar MUITO! https://edsonjunior.com/um-guia-visual-para-flexbox/

Com isso vc vai arrumar a Barra, mas vai ter mais trabalho para realinhar os itens do Form, isso é pq vc usou essa margens. O seu código precisa de muito trabalho para melhorar, mas não é impossível. Comece de cima para baixo e vai alinhando com Text-Aline e Margin: 0 auto; Assim não precisa de FlexBox e vc vai chegar em um resultado razoável.

Segue no Snippet um resultado "Final", sugiro vc revisar todo o código. Nem toda classe precisa repetir dentro do @media! Estude sobre isso também! (pode testar em tamanhos de telas diferentes)

<!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>

2
  • meu codigo ficou assim : header{ width:100%; height:121px; text-align:center; margin:0 auto; } header #logotipo { display:none; } #centro { 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; } } prnt.sc/i1buj8 vou ter que usar flex-box mesmo ou tem alguma outra alternativa, a respeito do menu? 16/01/2018 às 19:37
  • @FranciscoCarlosCarvalhoJr o que acontece é que quando a tela fica pequena vc também tem que tratar o tamanho dos inputs do form, eles estão com width: 368px; porém para o @media (max-width: 480px) vc poderia deixa-los com 80% da largura total, ou uns 240px de width. Vc tem que tratar melhor seu CSS nas telas pequenas. Da uma olhada no Snippet agora que eu fiz uma Edição!
    – hugocsl
    17/01/2018 às 10:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .