Markup HTML: SideBar e Footer Layout CSS com 3 colunas
Veja a última parte da criação do layout com css
Content
O Content é a coluna central e que ocupa mais espaço, pois é onde entra o conteúdo do site, normalmente dinâmico, por exemplo, textos, fotos e vídeos.
#content
{
float: left;
width: 500px;
padding: 20px 0;
margin: 0 0 0 30px;
}
#content h2 {
margin: 0;
}
SideBar
O sidebar é a coluna lateral, onde podemos inserir conteúdo. Para o código a seguir colocaremos um texto simples:
#sidebar
{
float: right;
width: 200px;
padding: 20px 0;
margin: 0 20px 0 0;
display: inline;
}
#sidebar h3 { margin: 0; }
Footer
Footer é o rodapé do site, onde podemos colocar informações complementares, como alguns links menos importantes, por se tratar de uma área de pouca visão de leitura.
#footer
{
clear: left;
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}
Markup HTML
A marcação HTML é a estrutura do nosso site de exemplo, onde estão as Tags HTMLs, necessárias pra obtermos o resultado esperado. Cada ID em nosso HTML tem um ID no CSS que mencionamos anteriormente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="container">
<div id="header">
<h1>
Site name
</h1>
</div>
<div id="menuSuperior">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Quem Somos</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#"> Contato</a></li>
</ul>
</div>
<div id="content-container">
<div id="section-menuSuperior">
<ul>
<li><a href="#">Serviços 1</a></li>
<li><a href="#"> Serviços 2</a></li>
<li><a href="#"> Serviços 3</a></li>
<li><a href="#"> Serviços 4</a></li>
</ul>
</div>
<div id="content">
<h2>
Page heading
</h2>
<p>Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut laoreet
</p>
<p>Ut amet, diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.
</p>
<p>Duis exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
</p>
</div>
<div id="sideBar">
<h3>
Aside heading
</h3>
<p>
olore eu feugiat nulla facilisis at vero eros et accumsan.
</p>
</div>
<div id="footer">
Copyright © Site name, 20XX
</div>
</div>
</div>
</body>
</html>
Neste artigo obtemos uma pequena introdução sobre a estrutura HTML para fazer um hot site, que pode ser usada para criar seu primeiro site.
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo