Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Shivans

Ordenando as div's

Por , em Desenvolvimento frontend

Recommended Posts

Shivans    0

Shivans
Postado

Dae galera to com dificuldades alguem pode me ajudar?

 

meu layout e assim

w = 760px

h = 550px

 

e como eu quero fazer o site...

 

Imagem Postada

 

o meu codigo html ta assim

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  <link href="index.css" rel="stylesheet" type="text/css" />  <title>Creative Mind</title>  </head>  <body>  <div id="tudo">  <div id="topo">	  <div id="logo">LOGO</div>		  <div id="menu">MENU</div>			  <div id="menudireito">menu direito</div>				  <div id="rodape">RODAPE</div>      </div>    <div id="principal">COLUNA PRINCIPAL</div>    <div id="navegacao">COLUNA NAVEGAÇÃO</div>    <div id="rodape1">RODAPE</div>        </div>    </body>  </html>
beleza tem bem mais coisas... mas nao vo implementar agora pq nao to conseguindo nem fazer o topo...

 

o css ta assim!

 

#topo {		margin:10px;	width:750px;	height:195px;	background-color:#9DE700;	border:1px red solid;	}#logo {	width:142px;	height:185px;	float:left;	border:1px red solid;	}#menudireito {	width:480px;	height:154px;	background-color:#CCCCCC;	float:right;		border:1px red solid;		}#menu {		width:100px;	height:185px;	background-color:#000000;	border:1px red solid;	}#rodape {	width:480px;	height:25px;	background-color:#000000;	clear:both;		border:1px red solid;}
a pergunta é...

como fazer ficar exatamenta na posicao do meu layout? o que devo mudar? como devo mudar?

 

obrigado galera!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Bom, pra começar, o código apresentado não tinha nada a ver com a imagem de exemplo... Depois, no CSS, não tínhamos as formatações de áreas existentes no seu HTML... Então, me baseando na sua imagem, criei o seguinte:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		<link href="index.css" rel="stylesheet" type="text/css" />		<title>Creative Mind</title>	</head>	<body>		<div id="tudo">			<div id="area1">Área 1</div>			<div id="area2">Área 2</div>			<div id="area3">Área 3</div>			<div id="area4">Área 4</div>			<div id="area5">Área 5</div>			<div id="area6">Área 6</div>		</div>  	</body></html>
http://forum.imasters.com.br/public/style_emoticons/default/seta.gif CSS:
* {	font: 20px Arial, Helvetica, sans-serif;	font-weight: bold;	color: #f00;}div#tudo {	width: 760px;	height: 550px;	margin: 0 auto;	padding: 5px;}div#area1 {	float: left;	width: 140px;	height: 185px; 	background-color: #9de700;	margin: 5px;}div#area2 {	float: left;		width: 100px;	height: 185px;	background-color: #000;	margin: 5px;}div#area3 {	float: right;	width: 490px;	height: 150px;	background-color: #ccc;	margin: 5px;}div#area4 {	float: right;	width: 490px;	height: 25px;	background-color: #000;	margin: 5px;}div#area5 {	float: left;	width: 140px;  height: 330px; 	background-color: #9de700;	margin: 20px 5px 5px;}div#area6 {	float: right;	width: 600px;	height: 330px;	background-color: #ccc;	margin: 20px 5px 5px;}
Veja este exemplo on-line.

 

Agora basta você analisar os códigos passados... Se você tiver dificuldades em interpretar isso, aí meu amigo... Fica complicado... Quer ajuda melhor que essa? http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Boa sorte!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito