Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Caros amigos do fórum InMasters,
Tenho um menu à direita do meu site que está em uma estrutura de <div> e os botões são <ul>. Vejam o site:
http://ragnacorp.forbrazil.com.br/siteteste/teste.html
Porém, como podem ver na codificação, tive que fazer três estilos diferentes, um para o primeiro botão do menu, outro para os botões do meio e outro para o último botão, definindo margens diferentes para os três estilos, para que não ocorresse um bug.
Eis o código sem bug:
Estilo:
#botao_menu_direita {
padding: 3px 10px;
margin: 1px 17px;
background: #39465A;
height: 14px;
width: 118px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#botao_menu_direita_primeiro {
padding: 3px 10px;
margin: 0px 17px;
background: #39465A;
height: 14px;
width: 118px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#botao_menu_direita_ultimo {
padding: 3px 10px;
margin: 0px 17px;
background: #39465A;
height: 14px;
width: 118px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<div id="menu_direita">
<ul id="menu_direita_sub_1_topo">
</ul>
<ul id="menu_direita_sub_1_meio">
<ul id="botao_menu_direita_primeiro">
Página Principal
</ul>
<ul id="botao_menu_direita">
teste
</ul>
<ul id="botao_menu_direita">
teste
</ul>
<ul id="botao_menu_direita">
teste
</ul>
<ul id="botao_menu_direita_ultimo">
teste
</ul>
</ul>
<ul id="menu_direita_sub_2_topo">
</ul>
<ul id="menu_direita_sub_2_meio">
<ul>
<ul id="botao_menu_direita_primeiro">
teste
</ul>
<ul id="botao_menu_direita">
teste
</ul>
<ul id="botao_menu_direita_ultimo">
teste
</ul>
</ul>
<ul id="menu_direita_sub_3_topo">
</ul>
<ul id="menu_direita_sub_3_meio">
<ul>
<ul id="botao_menu_direita_primeiro">
teste
</ul>
<ul id="botao_menu_direita">
teste
</ul>
<ul id="botao_menu_direita_ultimo">
teste
</ul>
</ul>
</ul>
<ul id="menu_direita_sub_4_topo">
</ul>
<ul id="menu_direita_sub_4_meio">
<ul>
<ul id="botao_menu_direita_primeiro">
teste
</ul>
<ul id="botao_menu_direita">
teste
</ul>
<ul id="botao_menu_direita_ultimo">
teste
</ul>
</ul>
</ul>
<ul id="menu_direita_sub_4_rodape">
</ul>
</div>Vejam como fica o site com um estilo igual para todos:
http://ragnacorp.forbrazil.com.br/siteteste/teste2.html
Estilo:
#botao_menu_direita {
padding: 3px 10px;
margin: 1px 17px;
background: #39465A;
height: 14px;
width: 118px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<div id="menu_direita">
<ul id="menu_direita_sub_1_topo">
</ul>
<ul id="menu_direita_sub_1_meio">
<ul id="botao_menu_direita">
Página Principal
</ul>
<ul id="botao_menu_direita">
teste
</ul>
<ul id="botao_menu_direita">
teste
</ul>
<ul id="botao_menu_direita">
teste
</ul>
<ul id="botao_menu_direita">
teste
</ul>
</ul>
<ul id="menu_direita_sub_2_topo">
</ul>
<ul id="menu_direita_sub_2_meio">
<ul>
<ul id="botao_menu_direita">
teste
</ul>
<ul id="botao_menu_direita">
teste
</ul>
<ul id="botao_menu_direita_">
teste
</ul>
</ul>
<ul id="menu_direita_sub_3_topo">
</ul>
<ul id="menu_direita_sub_3_meio">
<ul>
<ul id="botao_menu_direita">
teste
</ul>
<ul id="botao_menu_direita">
teste
</ul>
<ul id="botao_menu_direita">
teste
</ul>
</ul>
</ul>
<ul id="menu_direita_sub_4_topo">
</ul>
<ul id="menu_direita_sub_4_meio">
<ul>
<ul id="botao_menu_direita">
teste
</ul>
<ul id="botao_menu_direita">
teste
</ul>
<ul id="botao_menu_direita">
teste
</ul>
</ul>
</ul>
<ul id="menu_direita_sub_4_rodape">
</ul>
</div>Pode-se perceber que utilizando o mesmo estilo para todos, o site buga em cada seção do menu. Não sei se o problema é nessa estruturação dos botões ou em seu estilo, ou então na estruturação da div que fica por trás do menu.
Alguma luz gente?
Abraços!
QUe diferença faz além de ser uma marcação incorreta?
Isso corrigirá os bugs?
Não crie vários tópicos para uma mesma dúvida. Você já tem outros abertos relacionados à esse.
Não entendi. :blink: Um link está certo e outro não, mas qual a dúvida?
>
Não crie vários tópicos para uma mesma dúvida. Você já tem outros abertos relacionados à esse.
Não entendi. :blink: Um link está certo e outro não, mas qual a dúvida?
Esse tópico é sobre uma dúvida diferente.
Mas tudo bem, vamos a ela:
A dúvida era sobre como definir só um estilo para os botões sem que aconteça aquele bug da margem superior e inferior.
A solução é criar três estilos diferentes: o estilo do primeiro botão sem margem, o estilo dos botões do meio com margem e o estilo do último botão sem margem.
Eu queria saber como fazer para dar certo usando menos código do que isso.
Na realidade, solucionei o problema, mas acabei tendo que modificar o estilo da div por baixo dos botões, que também tive que fazer estilos diferentes para cada div.
Estão todos me dando dicas de tentar reduzir ao máximo possível os códigos e os estilos em css, é isso que estou tentando fazer.
Mas não estou tendo muito sucesso.
É ruim utilizar, digamos, três códigos diferentes para coisas que são iguais mas estão em posições diferentes?
A dúvida era sobre como definir só um estilo para os botões sem que aconteça aquele bug da margem superior e inferior.
Não conheço esse bug. :blink:
Você pode usar class. Por exemplo:
<ul>
<li class="semMargem">Texto</li>
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
<li class="semMargem">Texto</li>
</ul>É ruim utilizar, digamos, três códigos diferentes para coisas que são iguais mas estão em posições diferentes?
Não. Pense em h1 com cor vermelha, mas em três posições diferentes. Foi um exemplo bobo, mas só para entender. ;)
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Olá,
É ruim utilizar, digamos, três códigos diferentes para coisas que são iguais mas estão em posições diferentes?
>
Não. Pense em h1 com cor vermelha, mas em três posições diferentes. Foi um exemplo bobo, mas só para entender. ;)
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Mas neste caso acho que não é necessário, mas como referiste Thiago Retondar é bem melhor com listas, pois a estrutura é igual apenas tem mais ou menos conteúdo.
Cumprimentos
Olá
Amigo, porque está a utilizar <ul> dentro de <ul> e não <li>?
Você tem que listar, assim é uma marcação incorrecta.
Cumprimentos