Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Wilherme

HTML5 - Section/Article

Por , em Desenvolvimento frontend

Recommended Posts

Wilherme    0

Wilherme
Postado

Bom dia galera,

 

Estou fazendo meu site mas de forma correta agora com o HTML5 porém não estou entendendo certo o que esta acontecendo.

 

Abaixo segue imagem de como quero:

 

scopo.png

 

 

 

Porem quando não está ficando do jeito que quero.

 

como+est%C3%A1.jpg

 

 

o <article id="up"> esta colado em cima da <section>

 

Gostaria que ele ficasse fixo tanto o up quanto o below nas posições como está na primeira imagem.

 

 

 

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    <header>
        <nav id="menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="contato.html">Contato</a></li>
            </ul>
        </nav>
    </header>

    <section id="corpo">
	
       <article id="up">
	   
	   </article>
	   
	   <article id="below">
	   
	   </article>

    </section>

    <footer>

    </footer>



</body>
</html>

css

html {
    background-color: #1E361F;
    width: 100%;
}

header {
    width: 100%;
    height: 20px;
}

/* =================== MENU =========================== */

nav#menu {
    display: block;
	background-color: #1E361F;
}

nav#menu ul {
    list-style: none;
    text-transform: uppercase;
    position: fixed;
    top: -20px;
    left: 600px;
}

nav#menu li {
    display: inline-block;
    padding: 10px;
    margin: 2px;
}

nav#menu li:hover {
    background-color: #dddddd;
}

nav#menu a {
    color: #B8860B;
    text-decoration: none;
}

/* ==================================================== */

/* =============== SECTION ============================ */

section#corpo {
    background-color: #dddddd;
	width: 1000px;
	height: 2000px;
	margin: 20px auto;


}

/* ==================================================== */

/* =============== ARTICLE UP ========================= */

article#up { 
	background-color: #CD853F;
	display: block;
	width: 900px;
	height: 400px;
	margin: 50px auto;
		}

/* ==================================================== */

/* =============== ARTICLE below ====================== */

article#below{
background-color: #000080;
	display: block;
	width: 900px;
	height: 400px;
	margin: 50px auto;
	}
/* ==================================================== */

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wilherme    0

Wilherme
Postado

Não sei se pode resolver, é só uma suposição, mas tenta colocar no #section um padding: 0;

 

Não deu certo

Compartilhar este post

Link para o post
Compartilhar em outros sites

lokaodomau    61

lokaodomau
Postado

Olha o que eu fiz pra resolver:

section#corpo {
  background-color: #dddddd;
  width: 1000px;
  height: 2000px;
  margin: 20px auto;
  padding-top: 1px;
}

Com padding 0 não funciona mesmo, então coloquei 1px para dizer que tem algo la dentro...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wilherme    0

Wilherme
Postado

Olha o que eu fiz pra resolver:

section#corpo {
  background-color: #dddddd;
  width: 1000px;
  height: 2000px;
  margin: 20px auto;
  padding-top: 1px;
}

Com padding 0 não funciona mesmo, então coloquei 1px para dizer que tem algo la dentro...

 

 

Obrigado

Deu certinho aqui, mancada minha esquecer deste detalhe.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito