Ir para conteúdo

POWERED BY:

Arquivado

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

NgM_Me_KuRtE

[Resolvido] Centralizar menu

Por , em Desenvolvimento frontend

Recommended Posts

NgM_Me_KuRtE    0

NgM_Me_KuRtE
Postado

Boas pessoal.... é o seguinte eu fiz uma barra daquelas que agora se usam nos sites.... a minha dúvida é que eu não consigo centrar.... aqui fica o link....

 

 

Barra Link:

Barra

 

 

Se poderem ajudar agradecia muito :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

Scaico    0

Scaico
Postado

falta um <ul> na sua lista.

Dai você pode centralizar seu <ul>

 

no caso:

<ul>
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
<li>Texto</li>
</ul>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Troca:

<div id="nav">
<li>EnoviPixel Network:</li>
Por

<ul id="nav">
<li>EnoviPixel Network:</li>
Lembrando de fechar o UL no fim, no lugar do </div>

Define um width para esse elemento #nav, e usa um:

margin: 0 auto; assim as margens laterais serão automáticas, criando o efeito de centralização.

Compartilhar este post

Link para o post
Compartilhar em outros sites

NgM_Me_KuRtE    0

NgM_Me_KuRtE
Postado

continua a não dar.....

 

Aqui fica o código que tenho... podem ver também online aqui.

 

 

<!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>Untitled Document</title>

<style type="text/css">


.wwww {padding-left: 50px;}
#nav {
width: 100%;
height:26px;
background-image: url('http://www.fp-design.org/barracima2/fundo.png');
background-repeat:repeat-x;
font-family:Verdana,Arial, Helvetica, sans-serif;
font-size:10px;
color:#E3762B;
text-align:center;
font-weight: bold;
top: 0px;
margin: 0 auto;
right: 0px;
position: fixed }


#nav li {
display: block;
float: left;
fonte-size : 10 px;
height: 26px;
text-align:center;
line-height: 25px;
color:#E3762B;
text-decoration: none;
}

#nav li a {
display: block;
padding-left: 15px;
padding-right: 15px;
line-height: 25px;
color:#c1c1c1;
text-decoration: none;
}
#nav li a:hover { color:#E3762B;}
	</style>

</head>
<body>


<ul id="nav">
<li>EnoviPixel Network:</li>
<li><a href="http://www.enovipixel.pt" title="Envovipixel" target="_blank">ENOVIPIXEL PORTAL</a></li>
<li><a href="http://www.enovipixel.pt/forum/" title="Envovipixel Forum" target="_blank">ENOVIPIXEL FORUM</a></li>
<li><a href="http://www.enovipixel.net" title="Envovipixel Hosting" target="_blank">ENOVIPIXEL HOSTING</a></li>
<li><a href="http://www.enovipixel.com" title="Envovipixel Pub" target="_blank">ENOVIPIXEL PUB</a></li>
<li class="wwww">Rede de Blogs:</li>
<li><a href="http://www.enovipixel.pt" title="Envovipixel" target="_blank">ENOVIPIXEL</a></li>
<li><a href="http://www.foradecena.com" title="Fora de Cena" target="_blank">FORA DE CENA</a></li>
<li><a href="http://www.meninasfamosas.com" title="Meninas Famosas" target="_blank">MENINAS FAMOSAS</a></li>
<li><a href="http://www.telemovelonline.com" title="Telemovel Online" target="_blank">TELEMOVEL ONLINE</a></li>

</ul>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Veja este exemplo que montei uma vez para ajudar um outro colega nosso:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.geocities.com/x_ptfm/ws_topic_322765/teste_aba.htm

 

Veja o CSS dele e adapte para suas necessidades. O segredo está no uso da propriedade display:inline-block.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tenta assim:

* {
	margin: 0;
	padding: 0;
}
#nav {
	margin: 0 auto;
	max-width: 1350px;
	min-width: 1350px;
	width: 100%;
	height:26px;
	background-image: url('http://www.fp-design.org/barracima2/fundo.png');
	background-repeat:repeat-x;
	font-family:Verdana,Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#E3762B;
	text-align:center;
	font-weight: bold;
}
O IE não reconhece muito bem o position:fixed..se você quiser simular o fixed para o IE... leia esse tópico:

http://forum.imasters.com.br/index.php?showtopic=252392

Ai basta você centralizar com margin e left 50%...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

E não é isso que você quer ??

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Sim uai... a minha resolução é 1440x900. Como é que você queria??

Eu pensei que fosse assim que você quizesse.. está centralizado... explica qual é o resultado que você deseja... ou posta um screen de como deveria ser.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Mas então Paulo pela quantidade de itens, ela precisaria quebrar para não gerar rolagem em menores resoluções.

O problema agora, é saber ONDE ele queria que ela quebrasse...

 

Centralizado está... tanto na minha resolução(1440 de largura), qnto na dele(a da Screen Shot), mas não entendi qual é o efeito que ele quer...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Tá grande demais essa barra, dá dando rolagem horizontal aqui em 1280x800:

Imagem Postada

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Mas ela está centrada.. o problema é que tem itens demais para não gerar rolagem em resoluções menores que 1440!!

Eu já disse isso.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Amigo, o que você precisa fazer é escolher uma das opções:

 

1 - Diminuir a quantidade de itens

2 - Diminuir o tamando da fonte

3 - Reduzir o espaçamento entre cada item

 

[]'s

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