Ir para conteúdo

POWERED BY:

Arquivado

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

citbr

Centralizar elementos do menu

Por , em Desenvolvimento frontend

Recommended Posts

citbr    0

citbr
Postado

Bom dia,

 

Achei o efeito desse menu bem interessante, mas não estou conseguindo centralizar os elementos. Aliás, cheguei a centralizar mas perdi a formatação. Alguém pode me ajudar? Eis o CSS:

#stylefive{
position:relative;
display:block;
height:26px;
font-size:11px;
font-weight:bold;
background:transparent url(bgOFF.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
border-bottom:3px solid #FF0066;
}

#stylefive ul{
margin:0px;
padding:0;
list-style-type:none;
width:auto;
}

#stylefive ul li{
display:block;
float:left;
margin:0;
}

#stylefive ul li a{
display:block;
float:left;
color:#fff;
text-decoration:none;
padding:7px 20px 0 20px;
height:19px;
background:transparent url(bgDIVIDER.gif) no-repeat top right;
}

#stylefive ul li a:hover,#stylefive ul li a.current{
color:#fff;
background:#131546 url(bgDIVIDER.gif) no-repeat top right;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

citbr    0

citbr
Postado

Obrigado pela resposta. É centralizar tudo na tela. Aí vai o html:

 

<body bgcolor="#131546">
<h1 align="center"><img border="0" src="logotop.png" width="332" height="71"></h1>
<div id="stylefive">
 <ul>
   <li><a href="http://">EMPRESA</a></li>
   <li><a href="http://">LINHAS & HORÁRIOS</a></li>
   <li><a href="http://">SERVIÇOS</a></li>
   <li><a href="http://">NOSSA FROTA</a></li>
   <li><a href="http://">FALE CONOSCO</a></li>
   <li><a href="http://">LINKS</a></li>
   <li><a href="http://">HOME</a></li>
 </ul>
</div>
</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

_Leandro_    0

_Leandro_
Postado

Seu menu é dinâmico (o cliente pode altera o nome dos links), ou é fixo?

 

Se for fixo o mais simples é usar na sua UL um "margin:0 auto;" e definir um valor para o "width" dele. Não testei mas acredito que assim ele vai centralizar.

 

Caso seu menu seja dinâmico, bem, ai responda novamente q te explico.

 

Att

Leandro Rodeghiero

http:://www.maisumpixel.com.br

Compartilhar este post

Link para o post
Compartilhar em outros sites

_Leandro_    0

_Leandro_
Postado

Cara é bem o que te comentei... todos os casos fiz os testes aqui e aproveitei pra dar uma limpada no teu código

 

HTML

<div id="stylefive">
<ul>
<li><a href="http://">EMPRESA</a></li>
<li><a href="http://">LINHAS & HORÁRIOS</a></li>
<li><a href="http://">SERVIÇOS</a></li>
<li><a href="http://">NOSSA FROTA</a></li>
<li><a href="http://">FALE CONOSCO</a></li>
<li><a href="http://">LINKS</a></li>
<li class="last"><a href="http://">HOME</a></li>
</ul>
</div>

 

CSS:

<style type="text/css">
#stylefive{position:relative;display:block;height:26px;font-size:11px;font-weight:bold;background:transparent url(bgOFF.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-bottom:3px solid #FF0066;}

#stylefive ul{margin:0 auto;padding:0;width:713px;border:1px solid;}
#stylefive ul li{float:left;list-style:none;}
#stylefive ul li a{display:block;color:#ff0000;text-decoration:none;padding:7px 20px 0 20px;height:19px;background:transparent url(bgDIVIDER.gif) no-repeat top right;}
#stylefive ul li a:hover,#stylefive ul li a.current{color:#fff;background:#131546 url(bgDIVIDER.gif) no-repeat top right;}
#stylefive ul li.last{background:#131546 url(bgDIVIDER.gif) no-repeat top -999em;}
</style>

 

Espero que seja isso, até mais

 

Leandro Rodeghiero

http://www.maisumpixel.com.br

Compartilhar este post

Link para o post
Compartilhar em outros sites

citbr    0

citbr
Postado
  Em 09/05/2011 at 15:05, _Leandro_ disse:

Posta ai como está o teu código inteiro...

 

Taí o HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="../menu40a/styles2.css" type="text/css" />
</head>
<body bgcolor="#131546">
<h1 align="center"><img border="0" src="logotop.png" width="332" height="71"></h1>
<div id="stylefive"> 
<ul> 
       <li><a href="http://">EMPRESA</a></li> 
       <li><a href="http://">LINHAS & HORÁRIOS</a></li> 
       <li><a href="http://">SERVIÇOS</a></li> 
       <li><a href="http://">NOSSA FROTA</a></li> 
       <li><a href="http://">FALE CONOSCO</a></li> 
       <li><a href="http://">LINKS</a></li> 
       <li><a href="http://">HOME</a></li> 
</ul> 
</div>

</body>
</html>

E aqui o CSS:

<style type="text/css"> 
#stylefive{position:relative;
          display:block;
          height:26px;
          font-size:11px;
          font-weight:bold;
          background:transparent url(bgOFF.gif) repeat-x top left;
          font-family:Arial,Verdana,Helvetica,sans-serif;
          border-bottom:3px solid #FF0066;}  
#stylefive ul{margin:0 auto;
             padding:0;
             width:713px;} 
#stylefive ul li{float:left;
                list-style:none;} 
#stylefive ul li a{display:block;
                  color:#ff0000;
                  text-decoration:none;
                  padding:7px 20px 0 20px;
                  height:19px;
                  background:transparent url(bgDIVIDER.gif) no-repeat top right;} 
#stylefive ul li a:hover,#stylefive ul li a.current{color:#fff;
                  background:#131546 url(bgDIVIDER.gif) no-repeat top right;} 
#stylefive ul li.last{background:#131546 url(bgDIVIDER.gif) no-repeat top -999em;} 
</style>

Compartilhar este post

Link para o post
Compartilhar em outros sites

_Leandro_    0

_Leandro_
Postado

Não consegui entender qual o problema que você está tendo....

Todo caso, acho desnecessário o uso das propriedades "position:relative;display:block;" nesta classe #stylefive.

 

Dá uma conferida pra ver se está tudo correto por ai, tipo classes com .minhaclasse e id's com #meuid no arquivo css.

 

Att

Leandro Rodeghiero

http://www.maisumpixel.com.br

Compartilhar este post

Link para o post
Compartilhar em outros sites

citbr    0

citbr
Postado

Simplesmente a formatação da div não é considerada de jeito algum. Tive que fazer isso para dar certo. Passar a formatação para a UL. Mas agora a logo descentralizou. Eu tinha aqui um código para ela como h1 mas de tanto mexer no CSS perdi. :angry: 

<style type="text/css"> 
#stylefive{}
#stylefive ul{height:26px;
             font-size:11px;
             font-weight:bold;
             font-family:Arial,Verdana,Helvetica;
             background:transparent url(bgOFF.gif) repeat-x top left;
             border-bottom:3px solid #FF0000;
		  margin:0 auto;
             padding:0;
             width:715px;} 
#stylefive ul li{float:left;
                list-style:none;} 
#stylefive ul li a{display:block;
                  color:#fff;
                  text-decoration:none;
                  padding:7px 20px 0 20px;
                  height:19px;
                  background:transparent url(bgDIVIDER.gif) no-repeat top right;} 
#stylefive ul li a:hover,#stylefive ul li a.current{
                  color:#ff0000;
                  background:#131546 url(bgDIVIDER.gif) no-repeat top right;}
</style>

Compartilhar este post

Link para o post
Compartilhar em outros sites

_Leandro_    0

_Leandro_
Postado

Cara vê se resolve:

 

HTML

<h1 class="marca"><img border="1" src="marca.jpg" width="332" height="71"></h1>
<div id="stylefive"> 
<ul> 
<li><a href="http://">EMPRESA</a></li> 
<li><a href="http://">LINHAS & HORÁRIOS</a></li> 
<li><a href="http://">SERVIÇOS</a></li> 
<li><a href="http://">NOSSA FROTA</a></li> 
<li><a href="http://">FALE CONOSCO</a></li> 
<li><a href="http://">LINKS</a></li> 
<li><a href="http://">HOME</a></li> 
</ul> 
</div>

 

CSS

.marca{text-align:center;}
#stylefive{background:url(menu.jpg) repeat-x 0 0;}
#stylefive ul{height:30px;font-size:11px;font-weight:bold;font-family:Arial,Verdana,Helvetica;background:url(sep.jpg) no-repeat 0 -1px;margin:0 auto;padding:0 0 0 2px;width:715px;} 
#stylefive ul li{float:left;list-style:none;} 
#stylefive ul li a{display:block;color:#fff;text-decoration:none;padding:7px 20px 0 20px;height:19px;background:url(sep.jpg) no-repeat right 0;} 
#stylefive ul li a:hover,#stylefive ul li a.current{color:#ff0000;background:#131546 url(sep.jpg) no-repeat right 0;}

 

Só te atenta para os nomes e caminhos das imagens no css que eu troquei para poder visualizar aqui.

 

Att

Leandro Rodeghiero

http://www.maisumpixel.com.br

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