HTML5 - Section/Article
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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://3.bp.blogspot.com/-4zbjhzFpBZ8/U2onokhAi4I/AAAAAAAACM0/62ta5TpgmPo/s1600/scopo.png&key=28568d5135cdb79b1ba704dbfa318b51da79d5c063b0417846b95fe83bc721f5" alt="scopo.png" />
Porem quando não está ficando do jeito que quero.
/applications/core/interface/imageproxy/imageproxy.php?img=http://1.bp.blogspot.com/-ThcruKZTWgw/U2o6vQxMFwI/AAAAAAAACNM/DHBSaqBjwaM/s1600/como%2Best%25C3%25A1.jpg&key=a4060e09e49631af400bb9ba5097ca166e2d5a50a22d1188a32d5d96ff810771" alt="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;
}/ ==================================================== /
Discussão (4)
Carregando comentários...