Ir para conteúdo

Arquivado

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

Rodrigo Miss

Posicionamento de divs

Por , em Desenvolvimento frontend

Recommended Posts

Rodrigo Miss    1

Rodrigo Miss
Postado

Boa tarde amigos ...

Estou tentando montar um layout assim:

Imagem Postada

 

Oque eu consegui fazer está neste link. O Css esta aqui:

body {
	background-color: #7F7F7F;
   text-align: center;
}

#container {
	margin: 20px auto 20px;	
	width: 769px;
	text-align: justify;
	background: #EAEAEA;	
}

#top {
	height: 100;
	width: 765px;
	background-color: #447093;	
	border: 1px solid #EAEAEA;	
	border-width: 2px 2px 0 2px;
}

#middle {
   text-align: justify;   
	  border-width: 0 2px 0;
	float: left;
}


#menu {
	width: 160px;	
	border: 1px solid red;
	float: left;
}

Se alguem tiver um tempinho e puder me ajudar a montar este layout .... creio que minha deficiencia esta sendo com relacao a propriedade position ...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Pela imagem, basta você posicionar o #menu, com um absolute em vez de usar o float.

E a DIV middle, já está com o background #eaeae, na verdade, ela está pegando essa cor da DIV pai, que está por tras a #container. Para posicionar no centro, use "margin: 0 auto", ou 50%left e uma margem negativa... essa do "text-align: center", é só um "bug" para fazer nos IE5.x

 

o position:absolute, retira o elemento do fluxo, e o posiciona apartir da primeira ancestral com position.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodrigo Miss    1

Rodrigo Miss
Postado

Ola amigo, valeu pela dica ...

dei uma alterada no meu css. agora ele ficou assim:

body {
	 background-color: #7F7F7F;
	text-align: center;
 }
 
 #container {
	 position: relative; /*isso naum tinha antes*/
	 margin: 20px auto;	
	 width: 769px;
	 background: #EAEAEA;
 }
 
 #top {
	 height: 100;
	 width: 765px;
	 background-color: #447093;	
	 border: 1px solid #EAEAEA;	
	 border-width: 2px 2px 0 2px;
 }
 
 #middle {
	 text-align: justify;   
	 border-width: 0 2px 0;
	 margin-left: 200px; /*Isso naum tinha antes*/
	 border: 1px solid red;
 }
 
 #menu {
	 width: 160px;
	 top: 30px;
	left: 30px;	
	 position: absolute; /*Isso naum tinha antes*/
	 border: 1px solid red;
	 background: #000;
	 color: #fff;
 }

Gostaria que desse uma olhada no meu .html neste link para ver um detalhezinho.

Tem alguma forma de fazer com que o #container aumentasse o seu height em relacao ao height do #menu ???

funcionaria legal se eu setasse um height pra #container, so q isso naum seria uma forma interessante, pois todas as paginas variam por causa da diferenca no conteudo ....

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tem alguma forma de fazer com que o #container aumentasse o seu height em relacao ao height do #menu ???

Ah... não sabia desse detalhe :unsure:

Bom, ai vamos ter que mudar o position do #menu... pois com o absolute, ele SAI do container, não empurrando ele.

Fiz as seguinte alterações e funcionou aqui:

#menu {
	float: left; /* para o middle, poder ficar do lado do menu */
	top: -30px; /*agora o posicionamento é outro, fiz negativo pra ele "subir */
	position: relative; /*Isso naum tinha antes, agora relative para que o menu continue no container */
}
#middle {
	float: left; /* vai testando, ai você entende */
	margin-left: 190px; /*agora é 160px+30px */ 
}
#container {
	text-align: left; /*pra corrigir o text align center do body, pois no IE isso alinha elementos tb*/
}
#top {
	 height: 100px; /*faltou a unidade de medida aqui */
}
Ah.. e declara um DOCTYPE ai ^^

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
<head>
Vai substituindo essas coisas que eu postei, e vendo oque acontece... no final, fica certinho, só postei assim separado, pra tentar explicar oque é cada coisa que eu fiz.

Só agora fui ver no FireFox, adiciona isso para rodar certo..

#plataforma {
	clear: both;
}
e no html, antes de fechar o container e depois de fechar o middle:
	  </div><!-- fecha #middle -->
	<div id="plataforma"></div>
   </div><!-- fecha #container -->

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