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!