Ir para conteúdo

POWERED BY:

Arquivado

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

ilustrando

Menu com espaços iguais

Por , em Desenvolvimento frontend

Recommended Posts

ilustrando    0

ilustrando
Postado

Olá meus caros amigos do Imasters.

 

Estou com uma dúvida e não sei se a solução é possível apenas com CSS, ou se preciso utilizar Jquery.... sei lá....rsrsrs

 

Seguinte, tenho um menu onde o espeçamento entre eles fique idêntico.

 

Por exemplo, tenho um menu com 5 botões onde o mesmo possui 800px de largura, como poderia fazer com que os botões se encaixem possuindo um tamanho certo para que não sobrem espaços ou que ele fique maior no layout, pois quero fazer de uma forma "automatica" para que caso seja necessário inserir ou retirar mais botões, o layout fique o mesmo sem precisar ficar alterando o código CSS para que os botões se encaixem no tamanho exato do menu.

 

As vezes utilizo a largura dos botões utilizando px, por exemplo 4 botões com 200px de largura resultando em 800px, mas quando vou inserir ou retirar algum botão, tenho que modificar a largura do botão. Outro exemplo que as vezes utilizo é formatar os botões com padding lateral, para que o espaço entre os botões sejam iguais, uma vez que dependendo do nome descrito no botão, utilizando a largura do mesmo em px, pode deixar um espaço lateral maior entre os botões, o problema de utilizar os paddings laterais é que dependendo do conteúdo, ele sobra espaço "no todo" do menu.

 

O que preciso fazer, se possível claro, é uma maneira de deixar os espaços laterais dos botões com tamanho iguais independente do conteúdo(nome) descrito no botão (ex.: Home e Especialidades), mas com a possibilidade de inserir ou retirar botões deste menu sem ter que ficar refazendo a largura e ou o padding lateral destes botões.

 

Não sei se consegui explicar certinho....rsrsrsrsrs

Compartilhar este post

Link para o post
Compartilhar em outros sites

ilustrando    0

ilustrando
Postado

Olá Web_avallon, muito obrigado pela disposição em ajudar.

 

O código é mais ou menos esse:

 

<!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>Menus - Demonstração</title>
<style type="text/css">
*{ margin:0; padding:0;}
.menu_content{ width:1000px; height:48px; display:block; background:#333; border-top:1px solid #515153; border-bottom:1px solid #0c0c0c; }
.menu_content li{float:left; display:block;}
.menu_content ul{ float:left; }
.menu_content a{ display:block;  padding:16px 18px; color:#FFF; font-size:14px; font-family:Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; }
.menu_content a:hover{ background:#00a651; }

.menu_content2{ width:1000px; height:48px; display:block; background:#333; border-top:1px solid #515153; border-bottom:1px solid #0c0c0c; }
.menu_content2 li{float:left; display:block;}
.menu_content2 ul{ float:left; }
.menu_content2 a{ display:block; width:100px;  padding:16px 0; color:#FFF; font-size:14px; font-family:Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; }
.menu_content2 a:hover{ background:#00a651; }
</style>
</head>

<body>
MENU EXEMPLO 1
<br />
<br />
<ul class="menu_content">
    <li><a href="#" >HOME</a></li>
    <li><a href="#" >EMPRESA</a></li>
    <li><a href="#" >NOTÍCIAS</a></li>
    <li><a href="#" >GALERIA</a></li>
    <li><a href="#" >SERVIÇOS</a></li>
    <li><a href="#" >HORARIOS</a></li>
    <li><a href="#" >PLANOS</a></li>
    <li><a href="#" >DICAS</a></li>
    <li><a href="#" >EVENTOS</a></li>
    <li><a href="#" >CONTATO</a></li>
</ul>
<br />
<br />
MENU EXEMPLO 2
<br />
<br />
<ul class="menu_content2">
    <li><a href="#" >HOME</a></li>
    <li><a href="#" >EMPRESA</a></li>
    <li><a href="#" >NOTÍCIAS</a></li>
    <li><a href="#" >GALERIA</a></li>
    <li><a href="#" >SERVIÇOS</a></li>
    <li><a href="#" >HORARIOS</a></li>
    <li><a href="#" >PLANOS</a></li>
    <li><a href="#" >DICAS</a></li>
    <li><a href="#" >EVENTOS</a></li>
    <li><a href="#" >CONTATO</a></li>
</ul>
</body>
</html>

Fiz só um exemplo para ilustrar mais ou menos a ideia que tentei passar na descrição.

 

Será se tem como fazer com que eu consiga tirar ou inserir mais botões no menu sem precisar mexer no css, onde somando todos com espaçamento iguais (exemplo 1) acabem pegando toda a área da do menu(Exemplo 2)?

 

Não sei se tem como fazer, por isso vim perguntar para quem sabe.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Web_avallon    5

Web_avallon
Postado

Por nada meu caro, é sempre um prazer ajudar!

Mas, se vejo e compreendi bem, você já fez exatamente o que quer fazer. Você quer que, indepentedentemente, do tamanho da palavra, a largura da li seja sempre a mesma, correto? Se assim for, já está feito, você definiu a largura do link e pelos testes que fiz, ficou perfeito.

 

Veja esses dois códigos e perceba que não mudei nada no CSS, apenas o conteúdo das li's:

 

<!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>Menus - Demonstração</title>
<style type="text/css">
*{ margin:0; padding:0;}
.menu_content{ width:1000px; height:48px; display:block; background:#333; border-top:1px solid #515153; border-bottom:1px solid #0c0c0c; }
.menu_content li{float:left; display:block; border:1px solid #fff;}
.menu_content ul{ float:left; }
.menu_content a{ display:block;  padding:16px 18px; color:#FFF; font-size:14px; font-family:Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; }
.menu_content a:hover{ background:#00a651; }

.menu_content2{ width:1000px; height:48px; display:block; background:#333; border-top:1px solid #515153; border-bottom:1px solid #0c0c0c; }
.menu_content2 li{float:left; display:block;}
.menu_content2 ul{ float:left; }
.menu_content2 a{ display:block; width:100px;  padding:16px 0; color:#FFF; font-size:14px; font-family:Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; }
.menu_content2 a:hover{ background:#00a651; }
</style>
</head>

<body>
MENU EXEMPLO 1
<br />
<br />
<ul class="menu_content">
    <li><a href="#" >HOME</a></li>
    <li><a href="#" >EMPRESA</a></li>
    <li><a href="#" >NOTÍCIAS</a></li>
    <li><a href="#" >GALERIA</a></li>
    <li><a href="#" >SERVIÇOS</a></li>
    <li><a href="#" >HORARIOS</a></li>
    <li><a href="#" >PLANOS</a></li>
    <li><a href="#" >DICAS</a></li>
    <li><a href="#" >EVENTOS</a></li>
    <li><a href="#" >CONTATO</a></li>
</ul>
<br />
<br />
MENU EXEMPLO 2
<br />
<br />
<ul class="menu_content2">
    <li><a href="#" >HOME</a></li>
    <li><a href="#" >UM</a></li>
    <li><a href="#" >UM</a></li>
    <li><a href="#" >UM</a></li>
    <li><a href="#" >UM</a></li>
    <li><a href="#" >UM</a></li>
    <li><a href="#" >UM</a></li>
    <li><a href="#" >UM</a></li>
    <li><a href="#" >UM</a></li>
    <li><a href="#" >CONTATO</a></li>
</ul>
</body>
</html>

E o outro:

 

<!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>Menus - Demonstração</title>
<style type="text/css">
*{ margin:0; padding:0;}
.menu_content{ width:1000px; height:48px; display:block; background:#333; border-top:1px solid #515153; border-bottom:1px solid #0c0c0c; }
.menu_content li{float:left; display:block; border:1px solid #fff;}
.menu_content ul{ float:left; }
.menu_content a{ display:block;  padding:16px 18px; color:#FFF; font-size:14px; font-family:Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; }
.menu_content a:hover{ background:#00a651; }

.menu_content2{ width:1000px; height:48px; display:block; background:#333; border-top:1px solid #515153; border-bottom:1px solid #0c0c0c; }
.menu_content2 li{float:left; display:block;}
.menu_content2 ul{ float:left; }
.menu_content2 a{ display:block; width:100px;  padding:16px 0; color:#FFF; font-size:14px; font-family:Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; }
.menu_content2 a:hover{ background:#00a651; }
</style>
</head>

<body>
MENU EXEMPLO 1
<br />
<br />
<ul class="menu_content">
    <li><a href="#" >HOME</a></li>
    <li><a href="#" >EMPRESA</a></li>
    <li><a href="#" >NOTÍCIAS</a></li>
    <li><a href="#" >GALERIA</a></li>
    <li><a href="#" >SERVIÇOS</a></li>
    <li><a href="#" >HORARIOS</a></li>
    <li><a href="#" >PLANOS</a></li>
    <li><a href="#" >DICAS</a></li>
    <li><a href="#" >EVENTOS</a></li>
    <li><a href="#" >CONTATO</a></li>
</ul>
<br />
<br />
MENU EXEMPLO 2
<br />
<br />
<ul class="menu_content2">
      <li><a href="#" >HOME</a></li>
    <li><a href="#" >EMPRESA</a></li>
    <li><a href="#" >TRINTA E DOIS</a></li>
    <li><a href="#" >SETE</a></li>
    <li><a href="#" >SERVIÇOS</a></li>
    <li><a href="#" >UM</a></li>
    <li><a href="#" >PLANOS</a></li>
    <li><a href="#" >DICAS</a></li>
    <li><a href="#" >QUATRO</a></li>
</ul>
</body>
</html>

Perceba que, independentemente do tamanho da li, a largura permanece a mesma. Claro, apenas deve-se ter cuidado para que o tamanho não transpasse a largura definida no css.

 

Se eu entendi bem, é isso meu caro! Se não for, peço-lhe que me explique de novo, por gentiliza!

Um abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ilustrando    0

ilustrando
Postado

Web_avallon, muito obrigado pela ajuda, mesmo.

 

O que eu pretendo fazer, não sei se é possível é, deixar os espaços iguais entre os botões, esse é um ponto no qual consegui fazer com o padding mas no caso sobra um espacinho no final do menu, depois do botão de contato. Este é um ponto.

 

Outro ponto é fazer com que todos os botões peguem toda a área do menu, no caso consegui fazer isso no menu onde utilizo o width de 100px e não com o padding lateral de 18px, este é outro ponto.

 

O que busco é tentar juntar os dois resultados porém, o menu possui 10 botões até então eu consigo manter os tamanhos exatos dos botões utilizando o width de 100px para que não sobre espaço no menu mas, fica desproporcional o espaço dos botões, por exemplo, se deixarmos dois botões com 100px de largura onde esta sendo apresentado "home" e "desenvolvimento" o botão "home" ficará com espaçamento maior nas laterais pois ocupa menos espaço na largura de 100px, problema este que consigo resolver com o padding.... sei que é meio confuso de explicar.....rsrsrsrs

 

O que eu estou tentando descobrir é mais confuso ainda....hahahaha, é deixar uma estrutura onde se eu quiser inserir mais botões ou retirar botões eu consiga ter um espaçamento igual entre os botões ao qual a soma total deles ocupem toda a área do menu.

 

Não sei se com % eu consiga fazer isso, e nem sei se é possível ou se sim, se alguém sabe como fazer isso.

 

Não sei se consegui explicar!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Web_avallon    5

Web_avallon
Postado

Ata meu caro! Acho que compreendi mais ou menos o que você quer dizer.

Isso é plenamente resolvível, porém não sem mexer no CSS como você quer. Você terá que ajustar o CSS sempre que ficar desproporcional. Não creio ser possível fazer isso se ajustar automaticamente, mas no caso o que você pode fazer é o seguinte:

 

Creio que será um pouco complicado de eu explicar, vamos lá: o que tem que fazer então é utilizar pseudo-classes. Ao invés de definir uma largura única para todas as li's, defina uma largura específica para cada li, assim você consegue adequar, também, o espaçamento. Vou colocar o código pronto pra você aqui e em seguida, vou explicá-lo.

<!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>Menus - Demonstração</title>
<style type="text/css">
*{ margin:0; padding:0;}
.menu_content2{ width:990px; height:48px; display:block; background:#333; border-top:1px solid #515153; border-bottom:1px solid #0c0c0c; padding-left: 10px; }
.menu_content2 li{float:left; display:block;}
.menu_content2 li:first-child {width: 60px; padding-left:10px; padding-right:10px;}
.menu_content2 li:nth-child(2) {width: 150px;}
.menu_content2 li:nth-child(3) {width: 95px;}
.menu_content2 li:nth-child(4) {width: 92px;}
.menu_content2 li:nth-child(5) {width: 95px;}
.menu_content2 li:nth-child(6) {width: 90px;}
.menu_content2 li:nth-child(7) {width: 85px;}
.menu_content2 li:nth-child(8) {width: 75px;}
.menu_content2 li:nth-child(9) {width: 94px;}
.menu_content2 li:last-child   {width: 100px;}
.menu_content2 ul{ float:left; }
.menu_content2 a{ display:block;  padding:16px 0; color:#FFF; font-size:14px; font-family:Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; }
.menu_content2 a:hover{ background:#00a651; }
</style>
</head>

<body>

<br />
MENU EXEMPLO 2
<br />
<br />
<ul class="menu_content2">
    <li><a href="#" >HOME</a></li>
    <li><a href="#" >EMPREENDIMENTOS</a></li>
    <li><a href="#" >NOTÍCIAS</a></li>
    <li><a href="#" >GALERIA</a></li>
    <li><a href="#" >SERVIÇOS</a></li>
    <li><a href="#" >HORARIOS</a></li>
    <li><a href="#" >PLANOS</a></li>
    <li><a href="#" >DICAS</a></li>
    <li><a href="#" >EVENTOS</a></li>
    <li><a href="#" >CONTATO</a></li>
</ul>
</body>
</html>

Perceba alguns parâmetros do código. Não sei se você tem conhecimento de pseudo-classes, então vou fazer uma breve explicação:

Observe o:

.menu_content2 li:first-child

Isso é uma pseud-classe. Observe que ele está estabelecendo o seguinte: selecionando a first-child (primeira filha) do li que está em .menu_content2. Ou seja, está selecionando a primeira li. Depois que você seleciona uma li em específico, pode fazer qualquer configuração com ela. Então perceba que eu dei a ela uma largura específica, e um padding-left e padding-right para conseguir deixar uma largura e um espaçamento correto até a segunda li.

 

Agora observe o:

.menu_content2 li:nth-child(2) {width: 150px;}

Esse parâmetro seleciona a SEGUNDA li daquela ul (no caso empreendimentos). E fiz a mesma coisa: defini uma largura específica, mas dessa vez não precisei usar o padding porque adequou-se perfeitamente. E fiz isso com as demais li's, até chegar no resultado esperado.

Uma última coisa que se tem a observar é as alterações que fiz em .menu_content2. Perceba que diminui 10px sua largura e adicionei um padding-left: 10px. Fiz isso para centralizar o menu e para que os espaçamentos laterais - ao lado de home e ao lado de contato pudessem ser iguais.

 

Os espaçamentos entre as li's não estão perfeitamente corretos por causa da correria, mas faça com mais calma e chegará ao resultado esperado.

Creio que seja isso amigão, espero ter ajudado. Caso não seja isso, explique-me de novo e a gente chega aonde queremos!

 

Um abraço.

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