Ir para conteúdo

POWERED BY:

Arquivado

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

robson cavalcante

Posicionamento de DIVS.

Por , em Desenvolvimento frontend

Recommended Posts

robson cavalcante    0

robson cavalcante
Postado

Bom dia!!!!

 

Estou com algumas dificuldades em Tableless quando vou posicionar DIVS. A minha dúvida reladiona-se quando tenho a seguinte semântica:

 

Exemplo de div com posicionamento:

<div id="geral">

<div id="topo"></div>

<div id="meio">

<div id="menu_cima"><img src="imagens/topo.jpg" alt="ABREED" width="764" height="344" /></div>

<div id="lateral_esquerda">esquerda</div>

<div id="lateral_direita">direta</div>

<div id="rodape">rodape</div>

</div>

<div id="baixo"></div>

</div>

O problema está no posicionamento da DIV ID= lateral_esquerdo com a DIV ID=lateral_direita, eu já usei o seguinte CSS:

 

CSS do Layout:

body{

background:#F7F7F7;

font-family:Helvetica, Arial, sans-serif;

}

#geral{

width: 776px;

margin:0 auto;

background-image:url(../imagens/fundo_geral.jpg);

}

#topo{

background:#F8C300;

height:20px;

}

#meio{

background:#FFFFFF;

width:764px;

margin:0 auto;

}

#menu_cima{

width:764px;

}

#lateral_direita{

width:150px;

margin:5 auto;

float:right;

}

#lateral_esquerda{

width:500px;

margin: 5 auto;

float:left;

}

#rodape{

height:50px;

clear:both;

}

#baixo{

height:5px;

}

Usei a condição float: right e float: left mais não consigo fazer a DIV separar e cada uma ficar no seu canto. Alguém poderia me ajudar?

 

Agradeço a força e segue abaixo os meus contatos:

MSN: robson_cavalcantebr@hotmail.com

Skype: robson_cavalcante

 

Grande abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Perfect Lion    10

Perfect Lion
Postado

Kra fiz o teste aqui e está correto o que você fez... :S cada um está no lado que você disse. abaixo da img ;) sendo que o lado esquerdo tem uma largura maior que o da direita.. ;) posta o que você quer ai ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

http://forum.imasters.com.br/public/style_emoticons/default/devil.gif Já que todo mundo posta códigos monstruosos, chegou minha vez http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif 

<!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>Untitled Document</title>			<style type="text/css">			<!--			body{			background:url(images/layout_grid.gif);			font-family:Helvetica, Arial, sans-serif;			text-align: center;			}			#geral{			width: 776px;			margin: 20px auto;			background-image:url(images/bg_cont.gif);			border: 1px solid #000;			padding: 5px;			text-align: left;			}			#topo, #baixo{			background:#FC0;			height:30px;			border: 1px solid #000;			text-align: left;			}			#topo{ background: url(images/logo.gif) no-repeat #FFF; }			#meio{			background:#FFF;			border: 1px solid #000;			width:764px;			margin: 5px auto;			text-align: left;			}			#menu_cima{			display: block;			text-align: left;			border: 1px solid #000;			margin: 5px;			background: url(images/logo.jpg) no-repeat;			height: 30px;			}			#lateral_esquerda,			#lateral_direita{				width:150px;				margin:5px;				border: 1px solid #000;				text-align: center;				height: 200px;				color: #FFF;				font-weight: bolder; 			}			#lateral_esquerda{float:left; background: #CCC;}			#lateral_direita{ float:right; background: #069;}			#rodape{				height:50px;				clear:both;				margin: 5px;				border: 1px solid #000;				text-align: center;				font-weight: bolder; 			}		//-->			</style>					</head>		<body>			<div id="geral">				<div id="topo"></div>				<div id="meio">					<div id="menu_cima"></div>					<div id="lateral_esquerda">:. Esquerda .:</div>					<div id="lateral_direita">:. Direita .:</div>					<div id="rodape">:. Rodape .:</div>				</div>				<div id="baixo"></div>			</div>		</body>	</html>

 

Sugestão, de amigo, tire a imagem do menu cima e use no background como eu fiz ai pra você, so n passo a url...oxe,.... pq n to afim ahruahruahrua flow veja se deu certo e de um retorno aqui mesmo no fórum para ajudar os demais http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif http://forum.imasters.com.br/public/style_emoticons/default/joia.gif http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

 

P.S: reduza também o número de divs, mas como sei q você é novo...sei que aprende heheheheh http://forum.imasters.com.br/public/style_emoticons/default/devil.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

robson cavalcante    0

robson cavalcante
Postado

Boa tarde.

 

Pessoal, valew a força mais já consegui o resultado que eu queria.

 

Abraços.

 

Segue abaixo:

 

Página:

<style type="text/css">

<!--

@import url("css/geral.css");

-->

</style>

</head>

<body>

<div id="geral">

<div id="topo"></div>

<div id="meio">

<div id="menu_cima"><img src="imagens/topo.jpg" alt="ABREED" width="764" height="344" border="0" usemap="#Map" />

<map name="Map" id="Map"><area shape="poly" coords="335,222" href="#" /></map></div>

<div id="lateral_esquerda">esquerda</div>

<div id="lateral_direita">direta</div>

<div id="rodape">rodape</div>

</div>

<div id="baixo"></div>

</div>

</body>

</html>

CSS:

/* CSS Document */

body{

background:#F7F7F7;

font-family:Helvetica, Arial, sans-serif;

font-size:12px;

}

#geral{

width: 776px;

margin:0 auto;

background-image:url(../imagens/fundo_geral.jpg);

}

#topo{

background:#F8C300;

height:20px;

}

#meio{

background:#FFFFFF;

width:764px;

margin:0 auto;

}

#menu_cima{

width:764px;

}

#lateral_direita{

width:550px;

margin:5 auto;

float:right;

padding:2px;

}

#lateral_esquerda{

width:200px;

margin: 5 auto;

float:left;

padding:2px;

}

#rodape{

height:50px;

clear:both;

}

#baixo{

height:5px;

}

Abraços.

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