Jump to content

  2. →
  3. →

Photo

Primeiro Layout Em Tableless

Started By KBR, 20/01/2011, 15:29

  • Faça o login para participar
3 replies to this topic

#1 KBR

KBR

    kl3b3r

  • Usuários
  • 392 posts
  • Sexo:Não informado
  • Localidade:Mauá - SP
  • Interesses:ASP // DESENVOLVIMENTO WEB // MYSQL // ACCESS // FLASH // FIREWORKS // DREAMWEAVER // REDES

Posted 20/01/2011, 15:29

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&aacute;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&aacute;ria Sonho Meu" width="261" height="111" border="0" title="Imobili&aacute;ria Sonho Meu" /></a>
            
    </div>
	    
        <div id="topotelefones">
        
        	<img src="_img/spacer.gif" height="30" width="30" alt="" /><br /><strong>Imobili&aacute;ria Sonho Meu</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Fone</strong> 11 4751-5065&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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&aacute;gina Inicial</a></li>
		        <li><a href="?s=quemsomos">Quem Somos</a></li>
		        <li><a href="?s=busca">Busca por Im&oacute;veis</a></li>
	    	    <li><a href="?s=cadastrar">Cadastrar Im&oacute;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&oacute;veis em destaque.</strong><br />
  Em desenvolvimento!</div> 
</div>

    
  <div id="divisor">&nbsp;</div>
    
    <div id="menuprincipal"> <span class="titulomenu">Busca R&aacute;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&ecirc;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)">&lt; Voltar</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:window.print()"># Imprimir</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#topo">^ Topo</a></div>
<div id="rodapeesquerda"> <span class="rodapedestaque"><strong>Sonho Meu Im&oacute;veis</strong></span><span class="rodapedestaque2"><strong><br />
  <br />
  Endere&ccedil;o</strong></span><br />
    Rodovia Indio Itibiri&ccedil;&aacute;, 15.908 - Palmeiras de S&atilde;o Paulo<br />
    Suzano - S&atilde;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!

#2 Leonardo Garcia

Leonardo Garcia

    Normal

  • Usuários
  • 110 posts
  • Sexo:Masculino
  • Localidade:Londrina Paraná

Posted 21/01/2011, 23:30

Parabéns!!!
Quando tiver 90% do site concluido me avisa: leogarcia1980@hotmail.com.
Vamos ver se vai estar nos padrões.


abs.
Eu podia tá matando, roubando ou me prostituindo. Mas só quero um ponto.

#3 Leocarpo

Leocarpo

    12 Horas

  • Usuários
  • 160 posts
  • Sexo:Masculino
  • Localidade:Angola - Luanda
  • Interesses:Programação,
    Padrões web.
    Negócios.

Posted 22/01/2011, 08:27

Simples e funcional, esta mesmo bom colega, continue.
O mundo é feito de teórias, as com maior
impacto é que são válidas,e aplicadas nas nossas vidas.
9033 lab

#4 caionalves3

caionalves3

    Novato no fórum

  • Usuários
  • 15 posts
  • Sexo:Não informado
  • Localidade:atibaia
  • Interesses:muito bom este forum, eu vou usar para compartilhar informações sobre criar logotipo e etc!
    Trabalho em um site de criação, como uma agencia online, e tenho designers que terceirizo.
    Sempre que precisar de algum trabalho fale comigo que iremos contacta-lo! :D

Posted 06/07/2011, 15:34

muito legal o código, o logotipo se encaixa bem.
trabalho em uma agência on-line de criação de logotipo e desenvolvimento de papelaria.
Voltar para HTML, CSS e Metodologias


1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → HTML, CSS e Metodologias
  4. Privacy Policy
  5. Regras ·
IPB Skin By Virteq