Ir para conteúdo

POWERED BY:

Arquivado

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

Thiago Salles

Bloco com largura fixa para um menu lateral

Por , em Desenvolvimento frontend

Recommended Posts

Thiago Salles    0

Thiago Salles
Postado

Olá pessoal...estou com uma dúvida na hora de montar minhas páginas...Geralmente se usa um menu na lateral do site, e é assim que eu tenho feito. Na maioria das vezes a página tem uma largura fixa (776px por exemplo) eu nao tenho problema pra fazer o menu.Vamos dizer que eu queira fazer um menu com 200px de largura. Minha página ficará com 200px pro menu e mais 576px pro resto da página (usando como exemplo uma página com 776px de largura).É aí que vem a minha dúvida... e se eu quiser fazer uma página que ocupe 100% da tela? como eu faço pro bloco do menu ter 200px e o outro bloco que vem ao lado ocupar o resto, já que eu não tenho predefinida a largura que a página terá?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

você pode usar porcentagem:

#menu {width:10%;}#conteudo {width:90%;}
essa eh a logica http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

Eu entendi a sua dúvida Thiago e eu tenho a solução por aqui. Vou dar uma procurada e já posto!

 

Só pra reforçar:

 

Você quer fazer um menu com tamanho absoluto (em pixels) e quer que o corpo tome o resto da página, correto?

 

Tipo:

 

<div>
<div id="menu_esquerdo">
</div>
<div id="corpo">
</div>
</div>

 

#menu_esquerdo {width: 150px;}#corpo {width: X%}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

É melhor ensinar a pescar do que dar o peixe pronto, mas eu não achei a matéria do Position Is Everything, depois eu volto aqui e posto um comentário explicando o passo a passo e isso já vira um tutorial.

 

Ah, o mais importante, funciona em todos os navegadores!

 

<!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">
<!--
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
#posicionador {
width: 780px;
text-align: left;
margin-top: 10px;
margin: 0 auto;
}
#conteudo_centro {
width: 780px;
float: left;
}
#menu {
width: 120px;
background: #CCCCCC;
float: left;
}
#corpo {
width: auto;
background: #FFFFCC;
}
-->
</style>
</head>

<body>
<div id="posicionador">
<div id="conteudo_centro">
<div id="menu">ss</div>
<div id="corpo">ss</div>
</div>
</div>
</body>
</html>

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