[Resolvido] Estender bordas do menu lateralmente ao ifinito

Beraldo · Julho 24, 2012

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

Wanderson Valerio · Julho 24, 2012

#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;
   border-left: 1px solid blue;
   border-right: 1px solid blue;
}

Beraldo · Julho 24, 2012

Não é isso, Wanderson Valerio. Quero só as bordas superior e inferior. Preciso que elas se estendam até os limites do navegador, em vez de parerem nos limites da div "top". Entendeu?

Wanderson Valerio · Julho 24, 2012

Você quer, que a #menu tenha uma borda, mas que essa borda ocupe 100% da tela?

William Bruno · Julho 24, 2012

Oi Beraldo, oque eu geralmente faço:

=> é colocar essa borda do teu menu, como background do body;

=> ou então, isso aqui: http://wbruno.com.br/2011/10/18/como-iniciar-um-recorte-tableless-ensinando-pensar/

Beraldo · Julho 24, 2012

Você quer, que a #menu tenha uma borda, mas que essa borda ocupe 100% da tela?

Isso. Veja o exemplo que o cliente me passou:

Oi Beraldo, oque eu geralmente faço:

=> é colocar essa borda do teu menu, como background do body;

=> ou então, isso aqui: http://wbruno.com.br/2011/10/18/como-iniciar-um-recorte-tableless-ensinando-pensar/

Obrigado, William. Vou ler o seu link e ver o que funciona melhor

Talvez colocar a imagem como background do body seja uma boa saída. Se eu fixar a altura dos elementos do topo, não deve gerar problemas

Wanderson Valerio · Julho 24, 2012

O que eu faço, é fatiar um pequeno pedaço do bg, e depois repeti-lo com CSS.

rafael-tdc · Julho 24, 2012

Só um detalhe: você fechou 2 vezes o body :P

<html>
<head>
   	<style type="text/css">
		#holder-topo{
			width:100%;
			height:100px;
			background:#0F0;	
		}
		#topo{
			width:960px;
			height:100px;
			background:#F00;
			margin-left:auto;
			margin-right:auto;	
		}
		#holder-menu{
			width:100%;
			height:30px;
			background:#00F;	
		}
		#menu{
			width:960px;
			height:30px;
			background:#FF0;
			margin-left:auto;
			margin-right:auto;
		}
	</style>
</head>
<body>
   	<div id="holder-topo">
       	<div id="topo">
           </div>
       </div>
       <div id="holder-menu">
       	<div id="menu">
           </div>
       </div>
</body>
</html>

Eu fiz um modelinho básico

da uma olhada na ideia, que você consegue adaptar no seu...

Dai, como o Wanderson Valerio disse, você usa uma imagem para repetir no eixo x infinitamente no #holder-menu.

Espero que você entenda isso, senão pergunta ai que eu explico melhor :thumbsup:

Beraldo · Julho 24, 2012

Obrigado pela dica, rafael-tdc. Testei aqui rapidamente e parece que vai dar certo.

Vou mexer com isso só de tarde. Depois testo as soluções e vejo qual fica melhor

valeu, pessoal :)

André do Vale · Julho 24, 2012

Ao "#wrapper #top #menu", acrescente:

position: absolute;
width: 100%;
display: inline-block;
left: 0;

Beraldo · Julho 24, 2012

Muito bom, André Campos! :clap:

Resolveu o problema sem firula de imagem! Melhor pra mim, que nem precisarei abrir um editor de imagens! :P

Obrigado a todas as contribuições

Arquivado

[Resolvido] Estender bordas do menu lateralmente ao ifinito

Recommended Posts

Beraldo 864

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wanderson Valerio 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beraldo 864

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wanderson Valerio 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beraldo 864

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wanderson Valerio 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafael-tdc 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beraldo 864

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beraldo 864

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Fóruns

Tempo Real

Informação importante