Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17684
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Layout de 3 colunas

13-06-2009 23:26

Para quem precisa de um layout de 3 colunas, segue abaixo um exemplo

http://www.htmlgoodies.com/img/3_column.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">   <head>           <meta name="WT.qs_dlk" content="U8RbZgrIZ3IAAGDMOb4AAAA2"/>           <meta name="WT.qs_shmv" content="hv20140623-rays.sf.quinstreet.net"/>           <meta name="inject_params" content="WT.qs_dlk=U8RbZgrIZ3IAAGDMOb4AAAA2&"/>           <meta http-equiv="Set-Cookie" content="inject_params=WT.qs_dlk=U8RbZgrIZ3IAAGDMOb4AAAA2&; path=/;  domain=htmlgoodies.com;"/>         <meta http-equiv="Set-Cookie" content="WMUUID=U8RbZgrIZ3IAAGDMOb4AAAA2; path=/;  domain=htmlgoodies.com;"/>     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />   <title>3 Column XHTML and CSS Layout Test</title>   <style type="text/css">   body {                 font-family:arial,helvetica,sans-serif;                 font-size:12px;         }   #wrapper {                 width:900px;                 margin:0px auto;                 border:1px solid #bbb;                 padding:10px;         }   #header {                 border:1px solid #bbb;                 height:80px;                 padding:10px;         }         #content {                 margin-top:10px;                 padding-bottom:10px;         }         /* applies to all divs within the content div */   #content div {                 padding:10px;                 border:1px solid #bbb;     float:left;         }   #content-left {         width:180px;         }   #content-main {                 margin-left:10px;                 width:500px;         }   #content-right {                 margin-left:10px;                 width:134px;         }   #footer {                 float:left;                 margin-top:10px;                 margin-bottom:10px;     padding:10px;     border:1px solid #bbb;     width:878px;         }   #bottom {                 clear:both;                 text-align:right;         }   </style>   </head>   <body>   <div id="wrapper">     <div id="header">Header</div>     <div id="content">     <div id="content-left">                         <p>Left Column text here. This could be your site menu...</p>                         <p>Menu Item</p>                         <p>Menu Item</p>                         <p>Menu Item</p>                         <p>Menu Item</p>                         <p>Menu Item</p>                         <p>Menu Item</p>                 </div>     <div id="content-main">                         <p>Main Content goes here...</p>                         <p>More text here. Text text text text text text text text text text text...</p>                         <p>More text here. Text text text text text text text text text text text...</p>                         <p>More text here. Text text text text text text text text text text text...</p>                         <p>More text here. Text text text text text text text text text text text...</p>                 </div>     <div id="content-right">         <p>Right Column. This can hold related links and advertisements...</p>                 </div>   </div>     <div id="footer">Footer text and links can go all the way along here... text text text text text text...</div>   <div id="bottom"><a title="Acuras Web Development" href="http://www.acuras.co.uk">Acuras Web Development</a></div>   </div>   </body> </html>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado