Discussoes de Programacao e Tecnologia

[resolvido] Menu CSS não centraliza

28 respostas
D
denisspitfire

Por que o menu não vai pro meio ?

<!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=utf-8" />
<title>engine.html</title>
<style type="text/css">
<!--
#corpo {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	width: 780px;
	padding: 3px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-attachment: fixed;
	background-image: none;
	background-repeat: no-repeat;
	background-position: left top;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-color: #CCCCCC;
}
#corpo #rodape {
	margin-top: 3px;
	border: 2px solid #FFFFFF;
	clear: both;
}
#corpo #cabeçalho {
	padding: 0px;
	height: 115px;
	margin: 0px;
	border: 1px none #FFFFFF;
	width: 780px;
	background-image: url(imagens/topo.jpg);
}
#corpo #coluna_esquerda {
	display: block;
	float: left;
	width: 160px;
	margin-bottom: 3px;
	border: 2px solid #FFFFFF;
}
#corpo #menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	float: left;
	width: 100%;
	background-color:#EDEDED;
	font-family: "Trebuchet MS";
	font-size: 12px;
}
#menu ul li {
	display: inline;
	position: relative;
}
#menu ul li a {
	padding: 2px 10px;
	float:left;
	/* visual do link */
    background-color:#EDEDED;
	color: #333;
	text-decoration: none;
	border-bottom:3px solid #EDEDED;
}
#menu ul li a:hover {
	background-color:#D6D6D6;
	color: #6D6D6D;
	border-bottom:3px solid #0093dd;
}
#corpo #coluna_direita {
	display: block;
	float: right;
	width: 160px;
	margin-bottom: 3px;
	border: 2px solid #FFFFFF;
}
#corpo #conteudo {
	margin-right: 176px;
	margin-left: 178px;
	border: 2px solid #FFFFFF;
}
body {
	background-attachment: fixed;
	background-repeat: repeat-x;
	background-position: left top;
	background-color: #FFFFFF;
	background-image: url(imagens/background.jpg);
}

-->
</style>
</head>

<body>
<div id="corpo">
  <div id="cabeçalho"></div>
  <div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Serviços</a></li>
        <li><a href="#">Quem Somos</a></li>
        <li><a href="#">Loja Virtual</a></li>
        <li><a href="#">Nossos Clientes</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
</div>
  <div id="coluna_esquerda">
    <p>coluna esquerda</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <div id="coluna_direita">
    <p>coluna direita</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <div id="conteudo">
    <p>Conteudo</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <div id="rodape">Rodape</div>
</div>
</body>
</html>
Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

28 Respostas

T
tek

Buenas

Faltou você collocar no css para o texto ficar alinhado no centro

coloque após a linha 48

Acesse: http://www.tiagoek.com.br

D
denisspitfire 
#corpo #menu ul {
	margin: 0px;
	text-align:center;  
	padding: 0px;
	list-style: none;
	float: left;
	width: 100%;
	background-color:#EDEDED;
	font-family: "Trebuchet MS";
	font-size: 12px;
}

Assim? Ainda nao funciona no IE :frowning:

R
rcerullo

Tenta algo do tipo:

<!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=utf-8" />
<title>engine.html</title>
<style type="text/css">
<!--
#corpo {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    width: 780px;
    padding: 3px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-attachment: fixed;
    background-image: none;
    background-repeat: no-repeat;
    background-position: left top;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-color: #CCCCCC;
}
#corpo #rodape {
    margin-top: 3px;
    border: 2px solid #FFFFFF;
    clear: both;
}
#corpo #cabeçalho {
    padding: 0px;
    height: 115px;
    margin: 0px;
    border: 1px none #FFFFFF;
    width: 780px;
    background-image: url(imagens/topo.jpg);
}
#corpo #coluna_esquerda {
    display: block;
    float: left;
    width: 160px;
    margin-bottom: 3px;
    border: 2px solid #FFFFFF;
}
#corpo #menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    float: left;
    width: 100%;
    background-color:#EDEDED;
    font-family: "Trebuchet MS";
    font-size: 12px;
 }
#menu ul li {
    display: inline;
    position: relative;
}
#menu ul li a {
    padding: 2px 10px;
    float:left;
    /* visual do link */
    background-color:#EDEDED;
    color: #333;
    text-decoration: none;
    border-bottom:3px solid #EDEDED;
}
#menu ul li a:hover {
    background-color:#D6D6D6;
    color: #6D6D6D;
    border-bottom:3px solid #0093dd;
}
#corpo #coluna_direita {
    display: block;
    float: right;
    width: 160px;
    margin-bottom: 3px;
    border: 2px solid #FFFFFF;
}
#corpo #conteudo {
    margin-right: 176px;
    margin-left: 178px;
    border: 2px solid #FFFFFF;
}
body {
    background-attachment: fixed;
    background-repeat: repeat-x;
    background-position: left top;
    background-color: #FFFFFF;
    background-image: url(imagens/background.jpg);
}

#menu1, #menu2, #menu3{
	display: inline;
	border: 1px solid blue;
	width: 300px;
}

-->
</style>
</head>

<body>
<div id="corpo">
  <div id="cabeçalho"></div>
  <div id="menu" style="text-align: center;">
	<div id="menu1">teste1</div>
	<div id="menu2">teste2</div>
	<div id="menu3">teste3</div>
<!--
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Serviços</a></li>
        <li><a href="#">Quem Somos</a></li>
        <li><a href="#">Loja Virtual</a></li>
        <li><a href="#">Nossos Clientes</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
-->
  </div>
  <div id="coluna_esquerda">
    <p>coluna esquerda</p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
  </div>
  <div id="coluna_direita">
    <p>coluna direita</p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
  </div>
  <div id="conteudo">
    <p>Conteudo</p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
  </div>
  <div id="rodape">Rodape</div>
</div>
</body>
</html>
R
rcerullo

Criei os styles #menu1, #menu2, #menu3 só para ter uma idéia de como você pode resolver o problema.
Coloquei também um style fixo

Só para dar uma idéia.

D
denisspitfire

ok… voce criou dentro 3 divs… porém, como vou fazer o link dentro dessas divs?? pois, se eu colocar hover nao será possivel pois esta em uma div… certo ou errado?

R
rcerullo 
<div><a href="#">opção1</a></div>

Não costumo ter problemas com hover dentro do DIV

R
rcerullo

Coloquei uma alteração no style logo abaixo dos seletores #menu1, #menu2, #menu3

Veja como costumo fazer:

<!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=utf-8" />
<title>engine.html</title>
<style type="text/css">
<!--
#corpo {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    width: 780px;
    padding: 3px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-attachment: fixed;
    background-image: none;
    background-repeat: no-repeat;
    background-position: left top;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-color: #CCCCCC;
}
#corpo #rodape {
    margin-top: 3px;
    border: 2px solid #FFFFFF;
    clear: both;
}
#corpo #cabeçalho {
    padding: 0px;
    height: 115px;
    margin: 0px;
    border: 1px none #FFFFFF;
    width: 780px;
    background-image: url(imagens/topo.jpg);
}
#corpo #coluna_esquerda {
    display: block;
    float: left;
    width: 160px;
    margin-bottom: 3px;
    border: 2px solid #FFFFFF;
}
#corpo #menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    float: left;
    width: 100%;
    background-color:#EDEDED;
    font-family: "Trebuchet MS";
    font-size: 12px;
 }
#menu ul li {
    display: inline;
    position: relative;
}
#menu ul li a {
    padding: 2px 10px;
    float:left;
    /* visual do link */
    background-color:#EDEDED;
    color: #333;
    text-decoration: none;
    border-bottom:3px solid #EDEDED;
}
#menu ul li a:hover {
    background-color:#D6D6D6;
    color: #6D6D6D;
    border-bottom:3px solid #0093dd;
}
#corpo #coluna_direita {
    display: block;
    float: right;
    width: 160px;
    margin-bottom: 3px;
    border: 2px solid #FFFFFF;
}
#corpo #conteudo {
    margin-right: 176px;
    margin-left: 178px;
    border: 2px solid #FFFFFF;
}
body {
    background-attachment: fixed;
    background-repeat: repeat-x;
    background-position: left top;
    background-color: #FFFFFF;
    background-image: url(imagens/background.jpg);
}

#menu1, #menu2, #menu3{
	display: inline;
	border: 1px solid blue;
	width: 300px;
}

a:link		{text-decoration: none; font-weight: bold; color: #27408B;} /* azul escuro */
a:visited	{text-decoration: none; font-weight: bold; color: #27408B;} /* azul escuro */
a:hover		{text-decoration: none; font-weight: bold; color: #527CC4;} /* azul claro  */
a:active	{text-decoration: none; font-weight: bold; color: #527CC4;} /* azul claro  */
-->
</style>
</head>

<body>
<div id="corpo">
  <div id="cabeçalho"></div>
  <div id="menu" style="text-align: center;">
	<div id="menu1"><a href="#">teste1</a></div>
	<div id="menu2"><a href="#">teste2</a></div>
	<div id="menu3"><a href="#">teste3</a></div>
<!--
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Serviços</a></li>
        <li><a href="#">Quem Somos</a></li>
        <li><a href="#">Loja Virtual</a></li>
        <li><a href="#">Nossos Clientes</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
-->
  </div>
  <div id="coluna_esquerda">
    <p>coluna esquerda</p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
  </div>
  <div id="coluna_direita">
    <p>coluna direita</p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
  </div>
  <div id="conteudo">
    <p>Conteudo</p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
  </div>
  <div id="rodape">Rodape</div>
</div>
</body>
</html>
D
denisspitfire

caraca O.O

<!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=utf-8" />   
<title>engine.html</title>   
<style type="text/css">   
<!--   
#corpo {   
    font-family: "Times New Roman", Times, serif;   
    font-size: 12px;   
    width: 780px;   
    padding: 3px;   
    margin-top: 0;   
    margin-right: auto;   
    margin-bottom: 0;   
    margin-left: auto;   
    background-attachment: fixed;   
    background-image: none;   
    background-repeat: no-repeat;   
    background-position: left top;   
    border-top-style: none;   
    border-right-style: none;   
    border-bottom-style: none;   
    border-left-style: none;   
    background-color: #CCCCCC;   
}   
#corpo #rodape {   
    margin-top: 3px;   
    border: 2px solid #FFFFFF;   
    clear: both;   
}   
#corpo #cabeçalho {   
    padding: 0px;   
    height: 115px;   
    margin: 0px;   
    border: 1px none #FFFFFF;   
    width: 780px;   
    background-image: url(imagens/topo.jpg);   
}
/*  
#corpo #menu ul {
	text-align:center;
	padding: 0px;
	list-style: none;
	float: left;
	width: 100%;
	background-color:#EDEDED;
	font-family: "Trebuchet MS";
	font-size: 12px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 3px;
	margin-left: 0px;
	height: 25px;
}  
#menu ul li {   
    display: inline;   
    position: relative;   
}   
#menu ul li a {   
    padding: 2px 10px;   
    float:left;     
    background-color:#EDEDED;   
    color: #333;   
    text-decoration: none;   
    border-bottom:3px solid #EDEDED;   
}   
#menu ul li a:hover {   
    background-color:#D6D6D6;   
    color: #6D6D6D;   
    border-bottom:3px solid #0093dd;   
}
*/
#menu_sub{
	display: inline;
	border: 1px solid blue;
	width: 100%;
}   
  
a:link
	{
	padding: 2px 10px;
	float:left;
	background-color:#EDEDED;
	color: #333;
	text-decoration: none;
	border-bottom:3px solid #EDEDED;
	display: block;
	position: relative;
	}   
a:hover
	{
	background-color:#D6D6D6;   
    color: #6D6D6D;   
    border-bottom:3px solid #0093dd;
	}
 
#corpo #coluna_esquerda {   
    display: block;   
    float: left;   
    width: 160px;   
    margin-bottom: 3px;   
    border: 2px solid #FFFFFF;   
}   
#corpo #coluna_direita {   
    display: block;   
    float: right;   
    width: 160px;   
    margin-bottom: 3px;   
    border: 2px solid #FFFFFF;   
}   
#corpo #conteudo {
	margin-right: 170px;
	margin-left: 170px;
	border: 2px solid #FFFFFF;
	display: block;
	float: none;
	position: relative;
	margin-top: 28px;
}   
body {   
    background-attachment: fixed;   
    background-repeat: repeat-x;   
    background-position: left top;   
    background-color: #FFFFFF;   
    background-image: url(imagens/background.jpg);
}
  
-->   
</style>   
</head>   
  
<body>   
<div id="corpo">   
  <div id="cabeçalho"></div>   
  <div id="menu"style="text-align: center;">   
    <div id="menu_sub"><a href="#">teste1</a></div>   
    <div id="menu_sub"><a href="#">teste2</a></div>   
    <div id="menu_sub"><a href="#">teste3</a></div>
    
    
    <!--
    <ul>   
        <li><a href="#">Home</a></li>   
        <li><a href="#">Serviços</a></li>   
        <li><a href="#">Quem Somos</a></li>   
        <li><a href="#">Loja Virtual</a></li>   
        <li><a href="#">Nossos Clientes</a></li>   
        <li><a href="#">Contato</a></li>   
    </ul> 
    -->  
</div>  
  <div id="coluna_esquerda">   
    <p>coluna esquerda</p>   
  </div>   
  <div id="coluna_direita">   
    <p>coluna direita</p> 
  </div>   
  <div id="conteudo">   
    <p>Conteudo</p>
  </div>   
  <div id="rodape">Rodape</div>   
</div>   
</body>   
</html>

Seguinte… ele desalinhou tudo, a parte da esquerda ficou no meio e o menu também agora nao vai pro meio… pq quando o menu é simples ele fica normal mas quando eu coloco o estilo que eu quero ele vai pra esquerda? O.o

D
denisspitfire

Sorry esqueci do #menu
porém… mesmo assim o menu nao vai pro meio trocando de li para div.
O.o

<!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=utf-8" />   
<title>engine.html</title>   
<style type="text/css">   
<!--   
#corpo {   
    font-family: "Times New Roman", Times, serif;   
    font-size: 12px;   
    width: 780px;   
    padding: 3px;   
    margin-top: 0;   
    margin-right: auto;   
    margin-bottom: 0;   
    margin-left: auto;   
    background-attachment: fixed;   
    background-image: none;   
    background-repeat: no-repeat;   
    background-position: left top;   
    border-top-style: none;   
    border-right-style: none;   
    border-bottom-style: none;   
    border-left-style: none;   
    background-color: #CCCCCC;   
}   
#corpo #rodape {   
    margin-top: 3px;   
    border: 2px solid #FFFFFF;   
    clear: both;   
}   
#corpo #cabeçalho {   
    padding: 0px;   
    height: 115px;   
    margin: 0px;   
    border: 1px none #FFFFFF;   
    width: 780px;   
    background-image: url(imagens/topo.jpg);   
}
  
#menu{
	text-align:center;
	padding: 0px;
	list-style: none;
	float: left;
	width: 100%;
	background-color:#EDEDED;
	font-family: "Trebuchet MS";
	font-size: 12px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 3px;
	margin-left: 0px;
	height: 25px;
}
/* 
#menu ul li {   
    display: inline;   
    position: relative;   
}   
#menu ul li a {   
    padding: 2px 10px;   
    float:left;     
    background-color:#EDEDED;   
    color: #333;   
    text-decoration: none;   
    border-bottom:3px solid #EDEDED;   
}   
#menu ul li a:hover {   
    background-color:#D6D6D6;   
    color: #6D6D6D;   
    border-bottom:3px solid #0093dd;   
}
*/
#menu menu_sub{
	text-align:center;
	display: inline;
	border: 1px solid blue;
	width: 100%;
}   
  
a:link
	{
	padding: 2px 10px;
	float:left;
	background-color:#EDEDED;
	color: #333;
	text-decoration: none;
	border-bottom:3px solid #EDEDED;
	display: block;
	position: relative;
	}   
a:hover
	{
	background-color:#D6D6D6;   
    color: #6D6D6D;   
    border-bottom:3px solid #0093dd;
	}
 
#corpo #coluna_esquerda {   
    display: block;   
    float: left;   
    width: 160px;   
    margin-bottom: 3px;   
    border: 2px solid #FFFFFF;   
}   
#corpo #coluna_direita {   
    display: block;   
    float: right;   
    width: 160px;   
    margin-bottom: 3px;   
    border: 2px solid #FFFFFF;   
}   
#corpo #conteudo {
	margin-right: 170px;
	margin-left: 170px;
	border: 2px solid #FFFFFF;
	display: block;
	float: none;
	position: relative;
	margin-top: 28px;
}   
body {   
    background-attachment: fixed;   
    background-repeat: repeat-x;   
    background-position: left top;   
    background-color: #FFFFFF;   
    background-image: url(imagens/background.jpg);
}
  
-->   
</style>   
</head>   
  
<body>   
<div id="corpo">   
  <div id="cabeçalho"></div>   
  <div id="menu" style="text-align: center;">   
    <div id="menu_sub"><a href="#">teste1</a></div>   
    <div id="menu_sub"><a href="#">teste2</a></div>   
    <div id="menu_sub"><a href="#">teste3</a></div>
    
    
    <!--
    <ul>   
        <li><a href="#">Home</a></li>   
        <li><a href="#">Serviços</a></li>   
        <li><a href="#">Quem Somos</a></li>   
        <li><a href="#">Loja Virtual</a></li>   
        <li><a href="#">Nossos Clientes</a></li>   
        <li><a href="#">Contato</a></li>   
    </ul> 
    -->  
</div>  
  <div id="coluna_esquerda">   
    <p>coluna esquerda</p>   
  </div>   
  <div id="coluna_direita">   
    <p>coluna direita</p> 
  </div>   
  <div id="conteudo">   
    <p>Conteudo</p>
  </div>   
  <div id="rodape">Rodape</div>   
</div>   
</body>   
</html>
D
denisspitfire

agora… outro problema que eu percebi é o seguinte. Se ao invés de ele ser centralizado. Ele poderia ser distribuido… e ai? rs

R
rcerullo

Desculpa, mas não consegui dar manutenção no seu código… tinham códigos a mais… acredito que pegou de outro código e estava um pouco confuso.
Refiz o seu código com o menu centralizado, aproveitando parte do seu código… segue o código abaixo.

Não entendi o que você quis dizer com menu distribuído…

<!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=utf-8" />
		<title>engine.html</title>
		<style type="text/css">
			a:link {
				padding: 2px 10px;
				background-color:#EDEDED;
				color: #333;
				text-decoration: none;
				border-bottom:3px solid #EDEDED;
			}

			a:hover {
				background-color:#D6D6D6;
				color: #6D6D6D;
				border-bottom:3px solid #0093dd;
			}

			#corpo {
				font-family: "Times New Roman", Times, serif;
				font-size: 12px;
				width: 780px;
				padding: 3px;
				margin-top: 0;
				margin-right: auto;
				margin-bottom: 0;
				margin-left: auto;
				background-attachment: fixed;
				background-image: none;
				background-repeat: no-repeat;
				background-position: left top;
				border-top-style: none;
				border-right-style: none;
				border-bottom-style: none;
				border-left-style: none;
				background-color: #CCCCCC;
			}

			#cabeçalho {
				padding: 0px;
				height: 115px;
				margin: 0px;
				border: 1px none #FFFFFF;
				width: 780px;
				background-image: url(imagens/topo.jpg);
			}

			#menu {
				border: 0px solid red;
				text-align: center;
				height: 25px;
			}

			#menu_opcao {
				border: 0px solid blue;
				display: inline;
			}

			#coluna_esquerda {
				display: inline;
				float: left;
				width: 160px;
				height: 30px;
				margin-bottom: 3px;
				border: 2px solid #FFFFFF;
			}

			#conteudo {
				display: inline;
				float: none;
				width: 448px;
				height: 30px;
				border: 2px solid #FFFFFF;
				position: absolute;
			}

			#coluna_direita {
				display: inline;
				float: right;
				width: 160px;
				height: 30px;
				margin-bottom: 3px;
				border: 2px solid #FFFFFF;
			}

			#rodape {
				margin-top: 3px;
				border: 2px solid #FFFFFF;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="corpo">

			<div id="cabeçalho"></div>

			<div id="menu">
				<div id="menu_opcao"><a href="#">teste1</a></div>
				<div id="menu_opcao"><a href="#">teste2</a></div>
				<div id="menu_opcao"><a href="#">teste3</a></div>
			</div>

			<div id="coluna_esquerda">
				coluna esquerda
			</div>

			<div id="conteudo">
				Conteudo
			</div>

			<div id="coluna_direita">
				coluna direita
			</div>

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

		</div>
	</body>
</html>
R
rcerullo

Desculpa !!!

Esqueci do background color do menu… aí vai o código completo:

<!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=utf-8" />
		<title>engine.html</title>
		<style type="text/css">
			a:link {
				padding: 0px 10px 4px;
				background-color:#EDEDED;
				color: #333;
				text-decoration: none;
				border-bottom:3px solid #EDEDED;
			}

			a:hover {
				background-color:#D6D6D6;
				color: #6D6D6D;
				border-bottom:3px solid #0093dd;
			}

			#corpo {
				font-family: "Times New Roman", Times, serif;
				font-size: 12px;
				width: 780px;
				padding: 3px;
				margin-top: 0;
				margin-right: auto;
				margin-bottom: 0;
				margin-left: auto;
				background-attachment: fixed;
				background-image: none;
				background-repeat: no-repeat;
				background-position: left top;
				border-top-style: none;
				border-right-style: none;
				border-bottom-style: none;
				border-left-style: none;
				background-color: #CCCCCC;
			}

			#cabeçalho {
				padding: 0px;
				height: 115px;
				margin: 0px;
				border: 1px none #FFFFFF;
				width: 780px;
				background-image: url(imagens/topo.jpg);
			}

			#menu {
				border: 0px solid red;
				text-align: center;
				height: 25px;
				background-color:#EDEDED;
			}

			#menu_opcao {
				border: 0px solid blue;
				display: inline;
			}

			#coluna_esquerda {
				display: inline;
				float: left;
				width: 160px;
				height: 30px;
				margin-bottom: 3px;
				margin-top: 3px;
				border: 2px solid #FFFFFF;
			}

			#conteudo {
				display: inline;
				float: none;
				width: 448px;
				height: 30px;
				border: 2px solid #FFFFFF;
				position: absolute;
				margin-top: 3px;
			}

			#coluna_direita {
				display: inline;
				float: right;
				width: 160px;
				height: 30px;
				margin-bottom: 3px;
				margin-top: 3px;
				border: 2px solid #FFFFFF;
			}

			#rodape {
				margin-top: 3px;
				border: 2px solid #FFFFFF;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="corpo">

			<div id="cabeçalho"></div>

			<div id="menu">
				<div id="menu_opcao"><a href="#">teste1</a></div>
				<div id="menu_opcao"><a href="#">teste2</a></div>
				<div id="menu_opcao"><a href="#">teste3</a></div>
			</div>

			<div id="coluna_esquerda">
				coluna esquerda
			</div>

			<div id="conteudo">
				Conteudo
			</div>

			<div id="coluna_direita">
				coluna direita
			</div>

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

		</div>
	</body>
</html>
D
denisspitfire

vlwww vou analisar agora pra ver como voce fez. vlw mesmo

D
denisspitfire

Vamos lá, foi trocado pra Div o que era Li dentro de UL. Blz, esta tudo certo porém o conteudo nao cresce o corpo no conteudo… oque eu fiz…
no #conteudo
coloquei

#corpo #conteudo {
	display: inline;
	float: none;
	width: 300px;
	height: auto;
	border: 2px solid #FFFFFF;
	margin-top: 3px;
	margin-right: 130px;
	margin-left: 180px;
	clear: none;
            }

Tentei assim também e nao resolveu

#corpo conteudo

Ele nao obedece o conteudo… pq? sera que ele esta inline??? por isso nao desce?

D
denisspitfire

Consegui.

<!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=utf-8" />   
        <title>engine.html</title>   
    <style type="text/css">   
            a:link {   
                padding: 0px 10px 4px;   
                background-color:#EDEDED;   
                color: #333;   
                text-decoration: none;   
                border-bottom:3px solid #EDEDED;   
            }   
  
            a:hover {   
                background-color:#D6D6D6;   
                color: #6D6D6D;   
                border-bottom:3px solid #0093dd;   
            }   
  
            #corpo {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 780px;
	padding: 3px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-attachment: fixed;
	background-image: none;
	background-repeat: no-repeat;
	background-position: left top;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-color: #FFFFFF;
            }   
  
            #cabeçalho {   
                padding: 0px;   
                height: 115px;   
                margin: 0px;   
                border: 1px none #FFFFFF;   
                width: 780px;   
                background-image: url(imagens/topo.jpg);   
            }   
  
            #menu {   
                border: 0px solid red;   
                text-align: center;   
                height: 25px;   
                background-color:#EDEDED;   
            }   
  
            #menu_opcao {   
                border: 0px solid blue;   
                display: inline;   
			}
			#corpo #coluna_esquerda {
	display: block;
	float: left;
	width: 160px;
	margin-bottom: 3px;
	border: 2px solid #FFFFFF;
	margin-top: 3px;
}  
			#corpo #coluna_direita {
	display: block;
	float: right;
	width: 160px;
	margin-bottom: 3px;
	border: 2px solid #FFFFFF;
	margin-top: 3px;
}   
#corpo #conteudo {
	margin-right: 170px;
	margin-left: 171px;
	border: 2px solid #FFFFFF;
	margin-top: 3px;
}
  
            #rodape {   
                margin-top: 3px;   
                border: 2px solid #FFFFFF;   
                clear: both;   
            }   
        </style>   
</head>   
    <body>   
        <div id="corpo">   
  
            <div id="cabeçalho"></div>   
  
            <div id="menu">   
                <div id="menu_opcao"><a href="#">Home</a></div>   
                <div id="menu_opcao"><a href="#">Quem Somos</a></div>
                <div id="menu_opcao"><a href="#">Nossos Clientes</a></div>   
                <div id="menu_opcao"><a href="#">Contato</a></div>   
            </div>   
  
<div id="coluna_esquerda">   
    <p>coluna esquerda</p>      
  </div>   
  <div id="coluna_direita">   
    <p>coluna direita</p>     
  </div>   
  <div id="conteudo">   
    <p>Conteudo</p>     
  </div>
  
            <div id="rodape">Rodape</div>   
  
        </div>   
    </body>   
</html>

Troquei toda a estrutura de baixo para oque era antes. VLW pessoal pela ajuda

R
rcerullo

Por nada !!!

Não… o inline serve para colocar os DIV’s na mesma linha… um do lado do outro…

Quando você quiser usar dois seletores juntos, precisa separá-los por vírgula, exemplo: #menu, #conteudo {…

Mas no seu caso o div do conteúdo não está descendo por ter uma altura fixa no #conteudo :arrow: height: 30px;

:arrow: Se for usar altura fixa, recomendo aumentá-la e usar o overflow: auto; para a página gerenciar a necessidade ou não do scrollbar (vertical no caso).
:arrow: Ou retirar height: 30px; para que ele fique crescendo na medida em que o texto for aumentando.

R
rcerullo

Exemplo de estrutura base para o seu projeto.

Se você colocar bastante texto no Centro, num determinado momento o browser colocar o scroll automaticamente.

<html>
	<head>
		<title></title>
	<style>
		*{
			font-family: arial;
			font-size: 12px;
		}

		body{
			margin: 0px;
			overflow: auto;
			text-align: center;
		}

		#base{
			width: 70%;
			height: 90%;
			background-color: #CCCCCC;
		}

		#cabecalho{
			width: 100%;
			height: 20%;
			border: 1px solid blue;
		}

		#menu{
			width: 100%;
			height: 10%;
			border: 1px solid blue;
			background-color:#EDEDED;
		}

		#conteudo{
			width: 100%;
			height: 65%;
			overflow: auto;
			border: 1px solid blue;
		}

		#lateral_esquerda, #lateral_direita{
			width: 20%;
			height: 100%;
			border: 1px solid red;
			display: inline;
		}

		#centro{
			width: 60%;
			height: 100%;
			border: 1px solid red;
			display: inline;
		}

		#rodape{
			width: 100%;
			height: 5%;
			border: 1px solid blue;
			display: inline;
		}
	</style>
	</head>
	<body>
		<div id="base">

			<div id="cabecalho">
				Cabeçalho
			</div>

			<div id="menu">
				Menu
			</div>

			<div id="conteudo">

				<div id="lateral_esquerda">
					Lateral Esquerda
				</div>
				<div id="centro">
					Centro
				</div>
				<div id="lateral_direita">
					Lateral Direita
				</div>

			</div>

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

		</div>
	</body>
</html>
R
rcerullo

Exemplo de estrutura do site sem altura fixa no conteúdo, ou seja, a medida que o texto central for aumentando o rodapé será “empurrado” para baixo

<html>
	<head>
		<title></title>
	<style>
		*{
			font-family: arial;
			font-size: 12px;
		}

		body{
			margin: 0px;
			overflow: auto;
			text-align: center;
		}

		#base{
			width: 70%;
			background-color: #CCCCCC;
		}

		#cabecalho{
			width: 100%;
			height: 100px;
			border: 1px solid blue;
		}

		#menu{
			width: 100%;
			height: 40px;
			border: 1px solid blue;
			background-color:#EDEDED;
		}

		#conteudo{
			width: 100%;
			overflow: auto;
			border: 1px solid blue;
		}

		#lateral_esquerda, #lateral_direita{
			width: 20%;
			border: 1px solid red;
			display: inline;
		}

		#centro{
			width: 60%;
			border: 1px solid red;
			display: inline;
		}

		#rodape{
			width: 100%;
			height: 30px;
			border: 1px solid blue;
			display: inline;
		}
	</style>
	</head>
	<body>
		<div id="base">

			<div id="cabecalho">
				Cabeçalho
			</div>

			<div id="menu">
				Menu
			</div>

			<div id="conteudo">

				<div id="lateral_esquerda">
					Lateral Esquerda
				</div>
				<div id="centro">
					Centro [telefone removido] [telefone removido] [telefone removido] [telefone removido] [telefone removido] [telefone removido] [telefone removido] [telefone removido] [telefone removido] [telefone removido] [telefone removido] [telefone removido] [telefone removido] [telefone removido] [telefone removido]
				</div>
				<div id="lateral_direita">
					Lateral Direita
				</div>

			</div>

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

		</div>
	</body>
</html>
D
denisspitfire

Duvida… se eu quiser encostar tanto as laterais do topo como as laterais do menu para os cantos da janela??
tipo o site da imasters http://imasters.com.br/

Nao posso ter corpo no site para poder fazer isso? tentei isso e só deu nhaca rs

D
denisspitfire

\o/ to começando a pegar o jeito

<!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=utf-8" />     
        <title>engine.html</title>     
    <style type="text/css">     
            a:link {     
                padding: 0px 10px 4px;     
                background-color:#EDEDED;     
                color: #333;     
                text-decoration: none;     
                border-bottom:3px solid #EDEDED;     
            }     
     
            a:hover {     
                background-color:#D6D6D6;     
                color: #6D6D6D;     
                border-bottom:3px solid #0093dd;     
            }     
     
            #corpo {   
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;   
    font-size: 12px;   
    width: 780px;   
    padding: 3px;   
    margin-top: 0;   
    margin-right: auto;   
    margin-bottom: 0;   
    margin-left: auto;   
    background-attachment: fixed;   
    background-image: none;   
    background-repeat: no-repeat;   
    background-position: left top;   
    border-top-style: none;   
    border-right-style: none;   
    border-bottom-style: none;   
    border-left-style: none;   
    background-color: #FFFFFF;   
            }     
     
            #cabeçalho {
	padding: 0px;
	height: 115px;
	margin: 0px;
	border: 1px solid #CCCCCC;
	width: 100%;
	background-image: url(imagens/topo.jpg);
	text-align: center;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            }     
     
            #menu {
	border: 0px solid red;
	text-align: center;
	height: 29px;
	background-color:#EDEDED;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            }     
     
            #menu_opcao {     
                border: 0px solid blue;     
                display: inline;     
            }   
            #corpo #coluna_esquerda {   
    display: block;   
    float: left;   
    width: 160px;   
    margin-bottom: 3px;   
    border: 2px solid #FFFFFF;   
    margin-top: 3px;   
}     
            #corpo #coluna_direita {   
    display: block;   
    float: right;   
    width: 160px;   
    margin-bottom: 3px;   
    border: 2px solid #FFFFFF;   
    margin-top: 3px;   
}     
#corpo #conteudo {   
    margin-right: 170px;   
    margin-left: 171px;   
    border: 2px solid #FFFFFF;   
    margin-top: 3px;   
}   
     
            #rodape {     
                margin-top: 3px;     
                border: 2px solid #FFFFFF;     
                clear: both;     
            }     
        </style>     
</head>     
<body>  
    <div id="cabeçalho"></div>     
<div id="menu">     
   	<div id="menu_opcao"><a href="#">Home</a></div>
    <div id="menu_opcao"><a href="#">Serviços</a></div>
    <div id="menu_opcao"><a href="#">Quem Somos</a></div>
    <div id="menu_opcao"><a href="#">Loja Virtual</a></div>  
    <div id="menu_opcao"><a href="#">Nossos Clientes</a></div>
    <div id="menu_opcao"><a href="#">Contato</a></div>
</div>    
        <div id="corpo">         
<div id="coluna_esquerda">     
    <p>coluna esquerda</p>         
  </div>     
  <div id="coluna_direita">     
    <p>coluna direita</p>       
  </div>     
  <div id="conteudo">     
    <p>Conteudo</p>       
  </div>   
     
            <div id="rodape">Rodape</div>     
     
        </div>     
    </body>     
</html>

Porém… eu queria que o botao home ficasse no canto esquerdo alinhado com o conteudo. e o contato tabém alinhado, no canto direito do conteudo do site. E os outros botoes, distribuidos por distancia… como faço a distancia e como faço as extremidades alinharem no conteudo??

D
denisspitfire

alguem pls

R
rcerullo

Acho que hoje eu consigo dar uma olha no seu problema… estava meio enrolado nos outros dias…

Se eu conseguir alguma coisa, nem que seja algum caminho, eu posto aqui.

Abraço.

R
rcerullo

Fiz um código e não sei se o resultado é o que você está precisando… dê uma olhada e depois posta aqui para sabermos se está certo ounão com o que você precisa.

Deixei algumas bordas para facilitar a sua visualização da divisão da tela… depois você tira.

Tem um problema de alinha que está comentado no código na parte dos styles
:arrow: se alinhar para a esquerda, o início do conteúdo fica alinhado com a opção HOME, mas não alinha com a opção CONTATO
:arrow: se alinhar para a direita, o início do conteúdo não alinha com a opção HOME, mas alinha com a opção CONTATO

<html>
	<head>
		<title></title>
	<style>
		*{
			font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
			font-size: 13px;
		}

		body{
			margin: 0px;
			overflow: auto;
		}

		a:link{
			padding: 0px 10px 4px;
			background-color:#EDEDED;
			color: #333;
			text-decoration: none;
			border-bottom:3px solid #EDEDED;
		}

		a:hover{
			background-color:#D6D6D6;
			color: #6D6D6D;
			border-bottom:3px solid #0093dd;
		}

		#cabecalho{
			border: 1px solid #CCCCCC;
			height: 115px;
			background-image: url(imagens/topo.jpg);
			text-align: center;
		}

		#base_menu{

		}

		#menu_vago{
			width: 15%;
			display: inline;
			text-align: center;
			height: 29px;
			background-color:#EDEDED;
		}

		#base_menu_opcoes{
			border: 1px solid blue;
			width: 70%;
			display: inline;
			text-align: left;	/* Problema de alinhamento: se for para a esquerda, o conteúdo fica alinhado com a opção HOME, mas não alinha com a opção CONTATO */
								/* Problema de alinhamento: se for para a direita, o conteúdo não alinha com a opção HOME e alinha com a opção CONTATO */
			height: 29px;
			background-color:#EDEDED;
		}

		#menu_opcao{
			border: 1px solid red;
			display: inline;
			width: 16.6%; /* 100% dividido pela qtd. de opções do menu */
			height: 29px;
		}

		#base_conteudo{
			margin-top: 3px;
		}

		#conteudo_vago{
			width: 15%;
			display: inline;
		}

		#conteudo{
			border: 1px solid blue;
			width: 70%;
			display: inline;
		}

		#rodape{
			border: 1px solid blue;
			margin-top: 3px;
		}
	</style>
	</head>
	<body>
		<!-- -->
		<div id="cabecalho">
			Cabeçalho
		</div>
		<!-- -->
		<div id="base_menu">
			<div id="menu_vago">
				&nbsp;  <!-- vago -->
			</div>
			<div id="base_menu_opcoes">
				<div id="menu_opcao"><a href="#">Home</a></div>
				<div id="menu_opcao"><a href="#">Serviços</a></div>
				<div id="menu_opcao"><a href="#">Quem Somos</a></div>
				<div id="menu_opcao"><a href="#">Loja Virtual</a></div>
				<div id="menu_opcao"><a href="#">Nossos Clientes</a></div>
				<div id="menu_opcao"><a href="#">Contato</a></div>
			</div>
			<div id="menu_vago">
				&nbsp;  <!-- vago -->
			</div>
		</div>
		<!-- -->
		<div id="base_conteudo">
			<div id="conteudo_vago">
				&nbsp;  <!-- vago -->
			</div>
			<div id="conteudo">
				Conteúdo
			</div>
			<div id="conteudo_vago">
				&nbsp;  <!-- vago -->
			</div>
		</div>
		<!-- -->
		<div id="rodape">
			Rodapé
		</div>
		<!-- -->
	</body>
</html>
D
denisspitfire

é entao… mas o pior é, alinhar os dois ao mesmo tempo, e depois ainda deixar os botoes do centro centralizados proporcionalmente…
é como se fosse um distribute to canvas manja?

D
denisspitfire

depois de muita olhada em diversos sites…
nao achei NENHUM que tenha isso… sera que é padrao w3c?

M
Marcio_Nogueira

Se você tiver um estilo definido entre as tags e estes terão precedência sobre qualquer estilo definido como inline.
O ideal é utilizar estilos em um arquivo a parte (separado). :wink:

R
rcerullo

Segue o código abaixo… não sei se é o que você estava esperando / precisando.

Dá uma olhadinha quando possível e me diga se está no caminho certo?

Abraço.

<html>
	<head>
		<title></title>
	<style>
		*{
			font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
			font-size: 13px;
		}

		body{
			margin: 0px;
			overflow: auto;
		}

		a:link{
			padding: 0px 10px 4px;
			background-color:#EDEDED;
			color: #333;
			text-decoration: none;
			border-bottom:3px solid #EDEDED;
		}

		a:hover{
			background-color:#D6D6D6;
			color: #6D6D6D;
			border-bottom:3px solid #0093dd;
		}

		#cabecalho{
			border: 1px solid #CCCCCC;
			height: 115px;
			background-image: url(imagens/topo.jpg);
			text-align: center;
		}

		#base_menu{

		}

		#menu_vago{
			width: 15%;
			display: inline;
			text-align: center;
			height: 29px;
			background-color:#EDEDED;
		}

		#base_menu_opcoes{
			border: 0px solid blue;
			width: 70%;
			display: inline;
			text-align: left;
			height: 29px;
			background-color:#EDEDED;
		}

		#menu_opcaoL{
			border: 1px solid red;
			display: inline;
			width: 16%; /* 100% dividido pela qtd. de opções do menu */
			height: 29px;
			text-align: left;
		}

		#menu_opcaoC{
			border: 1px solid red;
			display: inline;
			width: 17%; /* 100% dividido pela qtd. de opções do menu */
			height: 29px;
			text-align: center;
		}

		#menu_opcaoR{
			border: 1px solid red;
			display: inline;
			width: 16%; /* 100% dividido pela qtd. de opções do menu */
			height: 29px;
			text-align: right;
		}

		#base_conteudo{
			margin-top: 3px;
		}

		#conteudo_vago{
			width: 15%;
			display: inline;
		}

		#conteudo{
			border: 0px solid blue;
			width: 70%;
			display: inline;
			background-color: #EDEDED;
		}

		#rodape{
			border: 1px solid blue;
			margin-top: 3px;
		}
	</style>
	</head>
	<body>
		<!-- -->
		<div id="cabecalho">
			Cabeçalho
		</div>
		<!-- -->
		<div id="base_menu">
			<div id="menu_vago">
				&nbsp;  <!-- vago -->
			</div>
			<div id="base_menu_opcoes">
				<div id="menu_opcaoL"><a href="#">Home</a></div>
				<div id="menu_opcaoC"><a href="#">Serviços</a></div>
				<div id="menu_opcaoC"><a href="#">Quem Somos</a></div>
				<div id="menu_opcaoC"><a href="#">Loja Virtual</a></div>
				<div id="menu_opcaoC"><a href="#">Nossos Clientes</a></div>
				<div id="menu_opcaoR"><a href="#">Contato</a></div>
			</div>
			<div id="menu_vago">
				&nbsp;  <!-- vago -->
			</div>
		</div>
		<!-- -->
		<div id="base_conteudo">
			<div id="conteudo_vago">
				&nbsp;  <!-- vago -->
			</div>
			<div id="conteudo">
				Conteúdo
			</div>
			<div id="conteudo_vago">
				&nbsp;  <!-- vago -->
			</div>
		</div>
		<!-- -->
		<div id="rodape">
			Rodapé
		</div>
		<!-- -->
	</body>
</html>
D
denisspitfire

é isso ai cara… vlw mesmo. Muito obrigado.

Criado 15 de novembro de 2011
Ultima resposta 30 de nov. de 2011
Respostas 28
Participantes 4

Topicos relacionados

Acessar mainframe a partir do Java 9 respostas Stefanini , vale a pena? 20 respostas Hospedagem Java + Jboss barata? Alguém indica algum host? 5 respostas Essa visão de arquitetura já dá um startups em Java 2.0 10 respostas Custo x Benefício - FIES 12 respostas
Alura O que é Python? — um guia completo para iniciar nessa linguagem de programação Acesse agora o guia sobre Python e inicie sua jornada nessa linguagem de programação: o que é e para que serve, sua sintaxe e como iniciar nela!
Fiap Graduacao em Tecnologia — FIAP Analise e Desenvolvimento de Sistemas, Engenharia de Software e mais
Casa do Codigo Casa do Codigo — Livros de tecnologia Livros de programacao, infraestrutura e inovacao