Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, pessoal
Sou péssimo em design (entenda-se css) e nem sei direito como pesquisar para encontrar o que preciso. Tentei procurar por "menu infinito" e afins, mas isso retorna praticamente só programação de menus em árvore :lol:
Direto ao ponto: tenho um layout centralizado na página. Está tudo ok, mas preciso de um detalhe específico: as bordas do menu devem se estender lateralmente ao infinito.
Vejam o esboço do layout:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<style type="text/css">
body
{
margin: 0;
}
/* Div que contém todo o conteúdo do site */
#wrapper
{
width: 800px;
text-align: left;
margin: 0 auto;
}
/* Topo */
#wrapper #top
{
margin: 0 0 20px 0;
padding: 0;
border: solid 1px red;
}
/* Menu */
#wrapper #top #menu
{
margin: 20px 0 0 0;
padding: 0;
font-size: 11pt;
text-align: center;
border-top: solid 1px blue;
border-bottom: solid 1px blue;
}
#wrapper #top #menu ul
{
list-style: none;
margin: 0;
padding: 0;
}
#wrapper #top #menu ul li
{
display: inline;
text-align: center;
margin: 0;
padding: 7px;
}
#wrapper #top #menu ul li a
{
margin: 0;
padding: 0;
text-decoration: none;
}
/* Conteúdo */
#wrapper #content
{
margin: 0;
padding: 0;
border: solid 1px green;
}
/* Rodapé */
#wrapper #footer
{
margin: 30px 0 0 0;
padding: 0;
text-align: center;
font-size: 12pt;
border: solid 1px black;
}
</style>
<title>Template</title>
</head>
<body>
<div id="wrapper">
<div id="top">
<h1>topo</h1>
<div id="menu">
<ul>
<li>
<a href="#">INÍCIO</a>
</li>
<li>
<a href="#">Página 1</a>
</li>
<li>
<a href="#">Página 2</a>
</li>
<li>
<a href="#">Página 3</a>
</li>
<li>
<a href="#">Página 4</a>
</li>
<li>
<a href="#">Página 5</a>
</li>
<li>
<a href="#">Página 6</a>
</li>
<li>
<a href="#">Página 7</a>
</li>
<li>
<a href="#">Página 8</a>
</li>
<li>
<a href="#">Página 9</a>
</li>
</ul>
</div> <!-- fim div "menu" -->
</div> <!-- fim div "top" -->
<div id="content">
<h2>Conteúdo</h2>
</div> <!-- fim div "content" -->
<div id="footer">
<h3>rodapé</h3>
</div> <!-- fim div "footer" -->
</div> <!-- fim div "wrapper" -->
</body>
</body>As bordas do menu acabam nos limites da div "top", obviamente. Mas o cliente quer que essas bordas se estendam "infinitamente" (até as bordas do navegador).
Isso seria fácil se não fosse a div "wrapper", que centraliza o site :(
Como posso fazer isso?
Obrigado
Abraços
Carregando comentários...