Ir para o conteúdo

Centralizar Menu Horizontalmente Sem Width


Criado por Thiago Retondar, Out 06 2010 17:29

1 resposta neste tópico
  • Por favor, faça o login para responder

#1 Thiago Retondar

Thiago Retondar
  • Thiago Retondar
  • Colaborador
  • 1 Revisões
  • Localizaçãohttp://127.0.0.1 What about you?

Revisou 06 outubro 2010 - 17:29

HTML
Spoiler

CSS
Spoiler

Considerações finais do CSS:
  • Line #6: aí está o por que de usar a div. Ela vai esconder todo o resto que sobrar. Tire-a e você vai ver o que acontece com menus um pouco mais extensos
  • Line #10: importante deixar o float: left, é ele que também vai causar o efeito de centralizado
  • Line #11 & #12: coloca o elemento posicionado relativamente e “joga” a 50% para a direita. Lembrando que ele “joga” a partir do canto esquerdo superior, então logo vamos ter que quebrar isso
  • Line #16 & #17: coloco todos li posicionado relativemente (importante: não se pode usar o absolute aqui) e quebro aquele left: 50% da linha #12 com um right: 50%
  • Line #24: apenas declarei o display: block para poder dar padding no top e bottom
Fonte: OGordo.com

;)

#2 André Campos

André Campos
  • André Campos
  • Colaborador
  • 1 Revisões

Revisou 16 outubro 2010 - 20:46

Revisão CSS:

* {
	margin: 0;
	padding: 0;
}
#mainnav {
	left: -50%;
	float: right;
	position: relative;
}
#mainnav ul {
	list-style: none;
	left: 50%;
	position: relative;
	_float: left;
}
#mainnav li {
	float: left;
	margin: 0 1px;
}
#mainnav a {
	background: #cecece;
	color: #fff;
	padding: 10px 25px;
	display: block;
}
#mainnav a:hover {
	background: red;
}

O único "contra" deste é a utilização de um hack para o Internet Explorer 6 (e inferiores), que não interpreta de maneira correta valores negativos para o 'left', o que não permite a validação de um arquivos .css.

Porém, fica como uma alternativa ao método do colega. ;)
[]s




1 usuário(s) está(ão) lendo este código

1 membro(s), 0 visitante(s) e 0 membros anônimo(s)