[Resolvido] Centralizar lista

[Thiago Retondar 18]

RafaelWeb,

 

#menu ul li {        display:inline;        line-height:25px}

não considero uma boa prática usar display: inline para deixar os itens do menu na mesma linha... Você não quer que eles sejam elementos de linha, mas sim que fiquem um ao lado do outro. Para isso, use float e margin e/ou padding para far o espaçamento que deseja.

 

 

#menu ul li {        line-height:25px;        float: left;        margin: 0 5px;}

Daniel Filho,

 

era só dar uma pesquisada no :google: =D

 

:seta: http://www.tableless.com.br/css-reset

 

:thumbsup:

[RafaelNMNM 0]

Mas Thiago como fazer para centralizá-lo se ele está com float left (me refiro aos li's e usando o código inicial do Daniel)? Lembrando não quero dar espaçamento com margin ou padding para deixar os itens no meio do menu e sim centralizá-lo.

 

Daniel esse que o Thiago indicou é suficiente.

[Thiago Retondar 18]

Centralizando o seu container, o ul.

 

:thumbsup:

[Daniel Filho 1]

eu pesquisei, mas foruns existem pra isso!

hasuhais

 

=D

 

amo vcs

 

Eu ja tinha tentado como o thiago falo por ultimo, nao deu certo!

[RafaelNMNM 0]

Thiago então centralize o código do Daniel pra mim usando float, vai ser de grande ajuda.

[Thiago Retondar 18]

Oh, of course my friend:

*{    margin: 0;    padding: 0;}#menu {        clear:both;        margin:auto;        width:800px;        height:25px;        background:#035df1;        font-family:Arial, Helvetica, sans-serif;        font-weight:bold;        font-size:12px;        text-align:center;}#menu ul {        list-style-type:none;        width: 620px;        margin: 0 auto;}#menu ul li {        float: left;        line-height:25px}#menu ul li a {        padding:5px 10px 6px 10px;        text-decoration:none;        color:#FFF}#menu ul li a:hover {        background:#2875f3}.link-ativado {        padding:5px 0 6px 0;        background:#2875f3;}

Se tiver dúvidas, estamos aí. O objetivo do fórum é movimentar ideias.

 

:thumbsup:

[RafaelNMNM 0]

Sim, eu também tinha feito assim, até meus sites são com float, mas vamos supor que é um menu dinâmico onde o usuário pode adicionar novos links por um painel de controle, você "limitando" a largura dele em 620px quando o usuário for adicionar outro link por exemplo ele quebra o layout, já do jeito que postei não, mas isso varia muito do projeto do site.

 

Só para você entender melhor, adicione um outro li no menu usando o código que postei e depois o seu para você ver.

 

Por exemplo:

<li><a href="?pagina=teste">TESTE</a></li>

Abraços []’s

[Daniel Filho 1]

Bom, como eu já falei, tinha feito isso que o Thiago disse, funciona, mas só se você não usa um painel de controle onde o administrador ou algo do tipo adicione novos links, como o Rafael falou.

 

Mas eu já consegui fazer aqui, porém, qualquer coisa, posta aew... o fórum serve pra isso³ aiuhsiuah

 

amo vcs =*

[Thiago Retondar 18]

Isso pode gerar uma discussão bem boa (saudável)!

 

O tamanho do ul pode acabar, mas e quando acabar o tamanho da div#menu?

 

Vamos ver se alguém posta um opinião também.

 

:thumbsup:

[Daniel Filho 1]

acho que vai pra baixo, não importanto se a altura ja fora definida... não?

[Thiago Retondar 18]

Sim, exatamente isso, Daniel.

 

Mas sabe, fiquei intrigado com isso aí e resolvi testar algumas outras formas e pesquisar um pouco. Pois bem, pesquisei, pesquisei e testei várias coisas e consegui chegar em uma solução legal aqui. =D

 

Vou postar por amanhãhoje (já passou da meia-noite ) de manhã no meu blog OGordo.com e aqui também.

 

[Daniel Filho 1]

beleza, vou ler

[RafaelNMNM 0]

É quando a div#menu acabar obviamente "quebra" o layout, a não ser que seja planejado sub menus ou outras soluções para isso.

 

Thiago tbm vou ler no seu Blog amanhã a solução (Já leio ), podia me responder lá ou aqui o porquê de usar o "display:inline" para colocar o menu na horizontal não ser uma boa prática, sei que a real função do "display:inline", mas queria saber sua explicação.

 

E só ressaltando, tbm geralmente uso float, mas uma vantagem que vejo no "display:inline" é não ter que usar clear depois em outra div.

 

É só isso rs

 

 

Abraços []s

[Thiago Retondar 18]

Bem, vou te mostrar por que não uso display: inline para fazer este efeito no menu.

 

Sabemos que todos elementos inline não recebem margin/padding no top e bottom, certo? Apenas nos lados ele recebe. Agora eu te dou esse HTML:

<ul id="menu">	<li><a href="#">Menu</a></li>	<li><a href="#">Menu</a></li>	<li><a href="#">Menu</a></li>	<li><a href="#">Menu</a></li>	<li><a href="#">Menu</a></li>	<li><a href="#">Menu</a></li></ul>

E esse CSS:

ul#menu{    width: 600px;    background: #cecece;}ul#menu li{    display: inline;}ul#menu li a{    padding: 50000000000px 20px;}

Quero que de um espaçamento entre as limitações do ul e cada botão.

 

Coloquei o padding e de nada adiantou. E você me responde: "isso é fácil de fazer! Basta colocar padding no ul".

 

Sim, isso daria certo, mas eu também não gosto. Sabe por quê? Por que a acessibilidade vai bem pra baixo (além de algun efeitos que queremos as vezes nos botões). Você colocando no ul, consegue apenas clicar no botão onde está grafado, ou seja, apenas onde está escrito.

 

Não sei se fui muito esclarecedor, qualquer coisa posta aê.

 

Vou escrever o tutorial agora e já posto aqui.

 

:thumbsup:

[Daniel Filho 1]

Beleza, fiquei com algumas dúvidas pra perguntar.

 

Mas posta o tutorial primeiro lá!

[Thiago Retondar 18]

Publiquei:

 

:seta: centralizar menu sem width

 

:thumbsup:

[RafaelNMNM 0]

Sim Thiago, é só colocar o padding no ul, sobre diminuir a acessibilidade é porque diminui a "área clicavel", mas há outras formas de aumentar a acessibilidade nesses casos, varia para cada projeto.

 

Sobre o seu tuto, very nice , agora tenho mais de uma opção, ao meu ver ambas válidas.

 

Abraços[]'s

[Thiago Retondar 18]

sobre diminuir a acessibilidade é porque diminui a "área clicavel"

Exato.

mas há outras formas de aumentar a acessibilidade nesses casos, varia para cada projeto.

Pode citar alguma? Não me veio nenhuma em mente...

 

:thumbsup:

[RafaelNMNM 0]

Colocando uma borda ou um background com cor forte no hover, não vai aumentar a "área clicavel", mas vai dar mais ênfase que ali há um link.

[Thiago Retondar 18]

Ahhh sim... Claro.

 

Pensei que você estava falando da área clicável.

 

:thumbsup: