Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, estou fazendo um site e comecei criando uma estrutura bem simples de onde vai ficar cada div.
Fiz um html e um css caso alguém tenha algo para melhorar sinta se a vontade para dar a sua opinião.
Arquivo HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/style.css" media="all" type="text/css" rel="stylesheet"/>
<!--[if lt IE 8]>
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
<title>Teste</title>
</head>
<body>
<div id="container">
<div id="topo">
<div id="logo">
</div><!--/logo-->
<div id="menu">
</div><!--/menu-->
</div><!--/topo-->
<div id="esquerda">
<div id="pesquisa">
</div><!--/pesquisa-->
<div id="login">
</div><!--/login-->
<div id="categorias">
</div><!--/categorias-->
</div><!--/esquerda-->
<div id="meio">
<div id="conteudo">
<div id="topImagens">
</div><!--/topImagens-->
<div id="ultimasImagens">
</div><!--/ultimasImagens-->
<div id="topFotografos">
</div><!--/topFotografos-->
</div><!--/conteudo-->
</div><!--/meio-->
<div id="direita">
<div id="assinatura">
</div><!--/assinatura-->
<div id="publicidade1">
</div><!--/publicidade1-->
</div><!--/direita-->
<div style="clear:button;"></div>
<div id="publicidade2">
</div><!--/publicidade2-->
<div id="rodape">
</div><!--/rodape-->
</div><!--/container-->
</body>
</html>Arquivo CSS
body, html
{
margin:0 auto;
font-family:Verdana;
}
#containerwidth:960px;
margin: 0 auto;
}
#topowidth:960px;
height: 130px;
border: 1px solid #696969;
margin-bottom: 10px;
margin-top: 10px;
}
#esquerdafloat:left;
width:200px;
border: 1px solid #696969;
}
#pesquisamargin:8px;
height: 130px;
border: 1px solid #696969;
}
#loginmargin:8px;
height: 150px;
border: 1px solid #696969;
}
#categoriasmargin:8px;
height: 500px;
border: 1px solid #696969;
}
#meiofloat:left;
width:540px;
margin-left:10px;
border: 1px solid #696969;
}
#conteudo}
#topImagens
{
margin:8px;
height: 290px;
border: 1px solid #696969;
}
#ultimasImagensmargin:8px;
height: 290px;
border: 1px solid #696969;
}
#topFotografosmargin:8px;
height: 200px;
border: 1px solid #696969;
}
#direitafloat:left;
margin-left:10px;
width:194px;
border: 1px solid #696969;
}
#assinaturamargin:8px;
height: 439px;
border: 1px solid #696969;
}
#publicidade1margin:8px;
height: 350px;
border: 1px solid #696969;
}
#publicidade2float:left;
margin-top:10px;
width: 960px;
height: 100px;
border: 1px solid #696969;
}
#rodapefloat:left;
margin-top:10px;
margin-bottom:10px;
width: 960px;
height: 60px;
border: 1px solid #696969;
}Carregando comentários...