Ir para conteúdo

POWERED BY:

Arquivado

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

Wanderson Valerio

Criar menu que ocupa a tela inteira com listas

Por , em Desenvolvimento frontend

Recommended Posts

Wanderson Valerio    102

Wanderson Valerio
Postado

Olá nobres desenvolvedores, muito bom dia a todos.

 

Estou criando um portal de notícias para minha região, e tem um menu drop down (ainda irei criar), e eu queria que esse menu ocupasse a tela inteira (960px somente), venho pedir-lhes ajuda para esse menu.

 

Um menu com listas que ocupe a tela inteira (960px somente), é possível? Se sim, ajudem-me por favor. Porque tipo, se eu der uma margin-left:; o menu já não fica colado, sacam, quero que fique colado até o fim, inicio e no fim colocado, independente do espaço que os centrais irão ter.

 

Vejam uma exemplo

 

Desde já, agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pablo Gates    10

Pablo Gates
Postado

Bom dia wanderson

 

Entendi o que você quer ...

 

Se procede desta maneira ...

 

Seu box total do site tem 960px certo ? então vamos lá

 

o lance do menu não é algo programatico é apenas um bg com repetição você vai fazer o seguinte

 

no HTML


<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo de Menu preencher tela</title>
</head>

<body>
     <div id="seu_conteudo_de_960px">
          <!-- todo seu site está aqui dentro desse limite de 960 px certo... -->
     </div>
</body>
</html>

 

no CSS

     body{
       background:#e4e4e4 url('images/bg.png')fixed top repeat-x;
     }

 

No background você vai setar a cor em que termina seu background no meu caso foi #e4e4e4 e na url você vai inserir a

imagem com posicionamento fixado ao topo, e o repeat-x é para repetir o bg.png ou jpg tanto faz na horizontal.

 

assim você pode usar uma imagem de 1px de largura pelo necessário de px de altura.

 

no meu portfólio uso esse esquema www.pabloworks.com.br mas minha repetição é um pouquinho abaixo do menu

 

só você medir no layout a altura do topo para o começo do menu e fazer a repetição do BG...

 

Espero ter ajudado, se resolver seu problema só assinar o tópico

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wanderson Valerio    102

Wanderson Valerio
Postado

Olá Pablo, primeiramente agradeço pela resposta, mas ainda não foi resolvido, o que eu preciso é o seguinte:

Um menu que ocupe a tela inteira (960px) em largura, mas que não fique margens do primeiro item da lista e o último item da lista do limite da tela, no exemplo que passei, veja o menu ocupa a tela inteira, e o primeiro item e o último item da lista não fique com margem referente ao limite da tela, tanto left quanto right, não tem espaço, entende?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Wanderson Valerio, se você olhar atentamente vai perceber que sobra um pequeno espaço depois da li de contato, veja imagem: http://d.pr/i/Twb7 o ul#nav está setado com um width:1000px.

 

Sobre a sua dúvida ou você faz a largura do ul / número de li's e seta esse valor a eles ou cria uma classe pra cada um com um tamanho definido :upset: ou vai equilibrando no padding

 

:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafael-tdc    13

rafael-tdc
Postado

Tenta assim:

 

#holder-menu{
width:100%;
height:30px;
background:#CCC;
}
#menu{
width:960px;
height:30px;
margin-left:auto;
margin-rigth:auto;
}

 

no HTML poe dessa forma:

 

<div id="holder-menu">
<div id="menu">
 <ul>
   ....
 </ul>
</div>
</div>

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