Primeiro Layout em Tableless

KBR · Janeiro 20, 2011

Galera,

Faço centenas de websites por ano e até então estava desenvolvendo e recortando meus layouts em Tabelas, devido não ter tempo de estudar a tecnologia CSS. Pois bem, fiz meu primeiro layout em CSS, você podem verificar se essa é a maneira correta e se está tudo de acordo?

Endereço do layout

www.shocklan.com.br/layout

Depois de montado testei no IE, FF e Chrome e nada se distorceu, tudo funcionou. Gostaria mesmo que fosse analisado a estrutura que eu criei, se está tudo certo.

Também fiz a validação no W3C

Link aqui

Código HTML da página

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Imobiliária Sonho Meu | 11 4751-5065</title>
<link href="css2.css" rel="stylesheet" type="text/css" />
</head>

<body>

<a name="topo"></a>

<div id="topo">

<div id="topoprincipal">

    <div id="topologotipo"> <a href="/"><img src="_img/logotipo.png" alt="Imobiliária Sonho Meu" width="261" height="111" border="0" title="Imobiliária Sonho Meu" /></a>

   </div>

       <div id="topotelefones">

       	<img src="_img/spacer.gif" height="30" width="30" alt="" /><br /><strong>Imobiliária Sonho Meu</strong>     <strong>Fone</strong> 11 4751-5065     <strong>Fone</strong> 11 4742-6264

	</div>

    <div id="topomenu">
      <img src="_img/spacer.gif" height="11" width="30" alt="" />
      <ul id="menuhor">
<li><a href="/">Página Inicial</a></li>
	        <li><a href="?s=quemsomos">Quem Somos</a></li>
	        <li><a href="?s=busca">Busca por Imóveis</a></li>
    	    <li><a href="?s=cadastrar">Cadastrar Imóvel</a></li>
        	<li><a href="?s=faleconosco">Fale Conosco</a></li>
          </ul>

       </div>

	</div>

</div>

<br />

<div id="corpo">




<div id="corpoprincipal">
 <div id="playerdestaques"><img src="_img/spacer.gif" height="9" alt="" /><br /><iframe width="640" height="233" frameborder="0" scrolling="no" src="player.asp">Player</iframe></div>      
 <br />
 <div id="defaultdestaques"><strong>Imóveis em destaque.</strong><br />
 Em desenvolvimento!</div> 
</div>


 <div id="divisor"> </div>

   <div id="menuprincipal"> <span class="titulomenu">Busca Rápida</span><img src="_img/menu-titulo.jpg" width="293" height="14" alt="" /><br />
     Em desenvolvimento<br />
     <br />
     <br />
<span class="titulomenu">Busca por Referência</span><img src="_img/menu-titulo.jpg" width="293" height="14" alt="" /><br />
 Em desenvolvimento<br />
 <br />
 <br />
 <span class="titulomenu">Ache em 1 Clique</span><img src="_img/menu-titulo.jpg" width="293" height="14" alt="" /><br />
 Em desenvolvimento
 </div>


</div>

<div id="rodape">

<div id="rodapelinha">

<img src="_img/spacer.gif" width="10" height="30" alt="" /><br />
<a href="javascript:history.back(-1)">< Voltar</a>    <a href="javascript:window.print()"># Imprimir</a>    <a href="#topo">^ Topo</a></div>
<div id="rodapeesquerda"> <span class="rodapedestaque"><strong>Sonho Meu Imóveis</strong></span><span class="rodapedestaque2"><strong><br />
 <br />
 Endereço</strong></span><br />
   Rodovia Indio Itibiriçá, 15.908 - Palmeiras de São Paulo<br />
   Suzano - São Paulo - 08630-000<br />
   <span class="rodapedestaque2"><strong>Contatos</strong></span><br />
   Fones: (11) 4751-5065 / (11) 4742-6264<br />
 E-mail: contato@imobiliariasonhomeu.com.br </div>
<div id="rodapedireita"><img src="_img/rodape-logotipo.png" alt="Imobiliária Sonho Meu" title="Imobiliária Sonho Meu" /><br />Todos os direitos reservados<br />All Rights Reserved<br />© <%=year(now())%></div>

</div>



</body>
</html>

Código CSS

/*##### Id's #####**/
body{
text-align:center;
font-family:Arial;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background: url(_img/fundo-topo.jpg);
background-repeat: repeat-x;
}
#topo{
margin:0 auto;
width: 100%;
border-bottom:1px #CCCCCC solid;
}
#topoprincipal{
margin:0 auto;
width: 980px;
height: 111px;
background: url(_img/fundo-topo.jpg);
background-repeat: repeat-x;
}
#topologotipo{
float: left;
width: 261px;
height: 111px;
}
#topotelefones{
float: right;
width: 719px;
height: 77px;
text-align: right;
font: 8pt Arial, Helvetica, sans-serif;
color: #C49A00;
}
#topomenu{
float:right;
width: 719px;
height: 34px;
background:url(_img/fundo-menu.png);
text-align:center;
overflow:hidden;
}
#corpo{
margin:0 auto;
width: 980px;
overflow: hidden;
}
#corpoprincipal{
float: left;
width: 666px;
padding-bottom:1000em;
margin-bottom:-999.5em;

}
#divisor{
float: left;
width: 21px;
}
#menuprincipal{
float: right;
width: 293px;
padding-bottom:1000em;
margin-bottom:-999.5em;
text-align:left;
}
#rodape{
margin:0 auto;
width: 980px;
clear:both;
}
#rodapelinha{
width: 100%;
height: 60px;
background:url(_img/rodape-linha.png);
background-repeat:no-repeat;
background-position:bottom;
text-align:right;
font: 8pt Arial, Helvetica, sans-serif;
color:#000;
font-weight:bold;
}
#rodapelinha a{
text-decoration:none;
font: 8pt Arial, Helvetica, sans-serif;
color:#000;
font-weight:bold;
}
#rodapeesquerda{
float:left;
width: 813px;
text-align:left;
font: 8pt Arial, Helvetica, sans-serif;
color:#333;
line-height:1.5;
height:170px;
overflow:hidden;
}
#rodapedireita{
float:right;
width: 167px;;
text-align:center;
font: 8pt Arial, Helvetica, sans-serif;
color:#333;
line-height:1.3;
height:170px;
overflow:hidden;
display:table-cell;
vertical-align:bottom;
}
#playerdestaques{
width: 658px;
height:251px;
background:url(_img/playerdestaque.jpg);
margin:0 auto;

}
#defaultdestaques{
width: 620px;
height:250px;
background:url(_img/defaultdestaques.jpg);
background-repeat:repeat-x;
padding:10px;
margin:0 auto;
text-align:left;
}
/*##### Classes #####**/
.rodapedestaque{
font: 10pt Arial, Helvetica, sans-serif;
color:#C49A00;
}
.rodapedestaque2{
font: 10pt Arial, Helvetica, sans-serif;
color:#333;	
}
.titulomenu{
font: 22pt arial narrow;
letter-spacing:-1px;
color:#C49A00;
font-weight:bold;
}
/*##### Menu Horizontal #####**/
#menuhor {
margin: 0;
padding:0;
font: 8pt arial;
}
#menuhor li {
list-style: none; 
display: inline;
padding:0;
}
#menuhor li a {
text-decoration:none;
margin-left:28px;
margin-right:28px;
}
#menuhor li a:link {
color: #000;
text-decoration:none;
}
#menuhor li a:visited {
color: #000;
text-decoration:none;
}
#menuhor li a:hover {
border-bottom:2px solid #FFD62F;
color: #666; 
text-decoration:none;
}
#menuhor li a:active {
color: #666; 
text-decoration:underline;
}

Valeu pessoal, abraços!

William Bruno · Janeiro 20, 2011

Evite a DivMania:

http://maujor.com/tutorial/divmania.php

por exemplo essa div:

<div id="topologotipo">

é completamente inutil, e você poderia ter aplicado o id na tag <img /:

<a href="/"><img height="111" width="261" border="0" title="Imobiliária Sonho Meu" alt="Imobiliária Sonho Meu" src="_img/logotipo.png" id="topologotipo" /></a>

-> existem vários outros elementos, como <ul>,<li>,<h3>...

não precisa se limitar apenas à div.

A palavra mestre aqui, é semântica: http://revolucao.etc.br/archives/introducao-a-semantica-web/

-> esqueça os spacers, isso não deve ser usado. Essa era uma péssima prática do recorte em <table>, fazendo Tableless, você não precisa mais disso.

-> <div id="rodapelinha"> desnecessária também, se você tivesse trabalhado melhor o Box Model

http://maujor.com/tutorial/csscaixa.php

não precisaria dela.

-> indentação é importante.

-> existe margin!! isso aqui é inaceitável: ...

Por enqnto é isso cara, você está indo bem.

Mas sempre há algo a melhorar.

Sucesso ai!

KBR · Janeiro 21, 2011

William,

Fiz as alterações que você citou.

Realmente a DIV #topologotipo e #rodapelinha estavam totalmente inúteis, assim como os famosos , onde pode ser utilizados listas.

Só uma coisa que ainda não consegui fazer > Remover os spacers. Eu preciso centralizar verticalmente o conteúdo do menu e o conteúdo do cabeçalho, onde estão os telefones. Ontem pesquisei durante horas e não consegui achar nada concreto para que seja feito a centralização. Creio que a estrutura que eu montei o layout tenha que fazer algo diferente do que achei sobre.

Você tem alguma idéia?

O layout modificado está em

Link

Quanto à montagem em si da estrutura, está correta?

Abraços.

Entrar

Arquivado

Primeiro Layout em Tableless

Recommended Posts

KBR 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

KBR 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Remover formatação ao colar um texto em uma textarea

USER CASE NO WHERE

Problema com Laravel

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante