Ir para conteúdo

POWERED BY:

Arquivado

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

André Treiero

Layout com menu estático e conteúdo fluído de um jeito diferente

Por , em Desenvolvimento frontend

Recommended Posts

André Treiero    0

André Treiero
Postado

Olá pessoal, já pesquisei nessa internet inteira e na metade da outra e não consegui encontrar um tópico que vi uma vez por aí sobre fazer layout fluído mas com menu lateral estático.

 

Em vez de usar width:100%, o cara usava position:(acho q é absolute) right:0 e left:200px, com isso a div começava em 200px e terminava sempre no fim da página, independente da resolução e do tamanho da janela e ainda, deixando esses 200px para inserir o menu.

 

Resumindo: você especifica a distância do canto direito e do canta esquerdo que o navegador estica a div.

 

A dificuldade é que (pra variar), o IE não estica a div, então o cara usava uma outra div por fora com alguma propriedade específica para funcionar no IE e eu não lembro exatamente o que era.

 

Eu já fiz isso uma vez mas não me lembro como e também não encontrei em meus backups.

 

#central{		background:#CCCCCC;		position:absolute;		left:200px;		right:0;		top:0;		bottom:0;	}

Estou precisando urgente da solução pra isso e ficaria muito grato se alguém puder me ajudar!

Agradeço desde já!

 

Abraço a todos!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado

Vê se este código resolve:

<!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" xml:lang="pt-br" lang="pt-br">
<head>
<title>Forum iMasters</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"  media="all">
* {
margin:0;
padding:0;
}
#menu {
border:1px solid #f00;
width:200px; 
}
#principal {
border:1px solid #00f; 
position: absolute;
left:210px;
top:0;
}
</style>
</head>
<body>
<div id="menu">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, 
purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue. </p>
</div>
<div id="principal">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, 
purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem 
eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, 
commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. 
Duis vitae ipsum. Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium 
accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. 
Duis posuere odio sed velit vulputate venenatis. 
Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.
</p>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Treiero    0

André Treiero
Postado

Vê se este código resolve:

<!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" xml:lang="pt-br" lang="pt-br"><head><title>Forum iMasters</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css"  media="all">* {	margin:0;	padding:0;	}#menu {	border:1px solid #f00;	width:200px; 	}#principal {	border:1px solid #00f; 	position: absolute;	left:210px;	top:0;	}</style></head><body><div id="menu"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue. </p></div><div id="principal"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum. Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p></div></body></html>
Nesse caso aí, alguma coisa (no caso, o texto) tem que empurrar a div para ela crescer. Eu preciso que ele fique colado na margem direita mesmo que não tenha nada dentro dele. É que na verdade, eu quero que ele fique assim na vertical também. O código é praticamente esse aqui em baixo, só que tem que fazer alguma coisa pra funcionar no IE que eu não to lembrando o que é.
<!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" xml:lang="pt-br" lang="pt-br"><head><title>Forum iMasters</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css"  media="all">* {    margin:0;    padding:0;    }#menu {    border:1px solid #f00;    width:200px;    }#principal {    border:1px solid #00f;    position: absolute;    left:210px;	right:0;    top:0;    }</style></head><body><div id="menu"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend,purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue. </p></div><div id="principal"><p>xxdasfasfd</p></div></body></html>
Valew pela atenção!

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