Entrar Ainda não tem acesso?
4
respostas

Header

Referente ao curso Web Design Responsivo: Páginas que se adaptam do mobile ao desk, no capítulo Mais Design Fluído e atividade Projeto #4

por Rodolfo Luiz
| 10.1k xp | 1 posts

Boa noite meus caros amigos, estou criando um site responsivo seguindo a responsividade e acabei caindo num problema.

O meu header nao tem height e ele nao aparece na vizualização.

segue os codigos do meu html e CSS

<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>    

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


<title>site</title>
</head>
<body>  

     <header>
         <div  class="container">

           <h1 class="logo"><a href="#"><img src="logo.png"></a></h1>

            <nav class="barra-nav">
                <ul class="menu-principal">
                    <li><a href="#"> Sobre </a></li>
                    <li><a href="#"> Produtos</a></li>
                    <li><a href="#">Portifólio</a></li>
                    <li><a href="#">Contato</a></li>

                </ul>
            </nav>
           </div>      
        </header>
    </html>




/* reset */
*,
*:after,
*:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 1em;
}

body{
    max-width: 1400px;
    margin: auto;
    background-color: gray;

}
header {
    background: #fec63e;
    width: 100%;


}

.container{

    margin: 0 auto; 
    max-width: 1400px;

    }


.logo{
    display: block;
    position: relative;
    float: left;
    left: 10%;
    margin-top: 10px;

}

.barra-nav{

    position: relative;
    float: right;
    right: 10%;
    margin-top: 30px;

}

.barra-nav li{
    display: inline-block;
    padding-right: 30px;
    font-size: 1.3em;
    list-style: none;
    text-decoration
}
.logo,
.barra-nav,
.menu-principal {
    display: inline-block;
    vertical-align: middle;
}
.menu-principal li {
    float: left;
}
4 respostas
por Felipe Gomes Bergmann Fortes
| 61.9k xp | 11 posts

Não falta fechar a tag body antes da de fechar a tag html?

por Geverson
| 86.1k xp | 3 posts
Arte Finalista / Designer Gráfico

Acredito que seja devido aos filhos do header > h1, ul, estarem com float, neste caso eles saem do fluxo da pagina.

por Bianca Reis
| 46.4k xp | 6 posts
Moderador Desenvolvedora

Olá Rodolfo!

Quando você usa float em um elemento, ele deixa de ocupar espaço na página. No seu caso, como você usou float nos filhos do header (h1 e nav), o header ficou com height igual a 0 e consequentemente não está sendo exibido, pois é como se não houvesse nenhum elemento dentro dele.

Para resolver isso, você pode adicionar uma div logo abaixo do nav:

(...)
        </ul>
    </nav>        
    <div class="clear"></div>
</div>
(...)

E no CSS, aplique a propriedade clear na div criada:

.clear {
    clear: both;
}

Esta propriedade limpa os elementos que estão "flutuando" ao lado desta div, fazendo com que o header apareça na página.

Espero ter ajudado.

por RAEL REIS
| 107.7k xp | 3 posts

Eu modifiquei o CSS

<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>    

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


<title>site</title>
</head>
    <body>  

        <header>

            <div  class="container">

                <h1 class="logo"><a href="#"><img src="logo.png"></a></h1>

                <nav class="barra-nav">

                    <ul class="menu-principal">

                        <li><a href="#"> Sobre </a></li>
                        <li><a href="#"> Produtos</a></li>
                        <li><a href="#">Portifólio</a></li>
                        <li><a href="#">Contato</a></li>

                    </ul>
                </nav>
            </div>      
        </header>
    </body>
</html>
CSS
/* reset */
*,
*:after,
*:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 1em;
}

body{
    max-width: 1400px;
    margin: auto;
    background-color: gray;

}
header {
    margin-top: 25px;
    background: #fec63e;
    min-width: 1200px;
    padding-top: 20px;
    padding-bottom: 20px;


}

.container{

    margin: 0 auto; 
    max-width: 1400px;

    }



.logo{

   float: left;
   width: 10%;
   position: relative;
   top: -18px;
   left: 5%;

}



li a{

    color: white;
    text-decoration: none;

}

 li{

    display: inline-block;

}

header,
 .barra-nav{

    text-align: center;
    min-width: 368px;

}