Um problema já resolvido...

[Bruno Augusto 417]

Resolvi hoje um problema de um menu horizontal, cuja marcação e estilos eu fiz da forma mais simples possível:

 

<ul id="tabs">

   <li>
       <a href="#" class="current">Overview</a>
   </li>

   <li>
       <a href="#">About</a>
   </li>

</ul>

ul#tabs {
   float: left;
   margin: -27px 0 0 10px;
}

   ul#tabs li {
       display: inline;
   }

       ul#tabs li a {
           background: transparent url( 'images/tabs.png' ) no-repeat 0 -35px;
           color: #191003;
           font-weight: bold;
           float: left;
           height: 35px;
           margin-top: -10px;
           line-height: 48px;
           text-align: center;
           text-decoration: none;
           width: 129px;
       }

       ul#tabs li a:hover {
           background-position: 0 -70px;
           cursor: pointer;
       }

       ul#tabs li a.current {
           background-position: 0 0;
           line-height: 35px;
           margin-top: -4px;
       }

O problema em questão é que, para o HTML acima, a margem de -27px em ul#tabs era suficiente para fazer o dito menu posicionar-se acima da DIV pai, considerando que tal lista não poderia estar fora dessa DIV devido à um plano de fundo problemático que não vem ao caso.

 

Ocorreu que ao adicionar mais outros dois itens nessa lista, essa margem negativa se tornou insuficiente, requerendo que eu a alterasse para -45px.

 

Mas, com essa alteração, bagunçou a primeira página, com apenas dois itens, fazendo-os ficar muito para cima.

 

Como @Evandro Oliveira me disse noutro tópico que elementos com float perdem a habilidade de estender sua largura automaticamente ao máximo possível, eu adicionei, em ul#tabs, um width de valor igual à largura de quatro abas, que é o máximo que haverá em todo o site, sempre.

 

Com isso, os -45px perfeitos para quatro abas, também ficou perfeito para uma, duas ou três abas.

 

Mas por quê?

[Henrique Barcelos 290]

O tal do display inline aí junto com o line-height deve ser o problema. Line height centraliza a linha.

[Bruno Augusto 417]

Pelo menos pra mim não faz sentido pois o line-height está sendo aplicado no link e a margem negativa em seu avô, digamos assim.

 

Fora que o line-height foi uma das últimas adicionadas. Enquanto o básico não estava funcionando, o texto continuava lá em cima. Quando resolvi é que adicionei-o.

[André do Vale 76]

Bom, não vejo necessidade de float no link, visto que é filho único dos LI. Passe o "float: left" para o LI, e na UL declare display como inline-block, assim ele assumirá largura e altura de acordo com os filhos (caso não estejam previamentes declaradas). Ah, com isso não precisa declarar "display: inline" pros LI. :thumbsup:

[Bruno Augusto 417]

Valeu André, mas não estou com problemas para criar o menu.

 

De fato eu já o criei. Podem haver tais otimizações e/ou melhores formas de fazê-lo, mas o que me intrigou foi essa questão da largura indefinida encrespar com a margem e quando definida tudo ocorrer bem.

 

Só decidi postar porque nunca havia visto nada parecido.

[William Bruno 1501]

oi @Bruno,

 

o teu caso parece ser uma soma de fatores.

Poste por favor, o link real, com o código completo, assim podemos analisar melhor.