Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;
}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>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
O menu é fixo sim. Na figura mostra como ele fica e abaixo como eu gostaria que ele ficasse.
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.busbrasil.com/hob/menu.jpg&key=075fb688f7b0eeba86ec7f61a4135a43276cf52017d5278c8613ceddbfe263cb" alt="menu.jpg" />
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
Eu fiz aqui e centralizou, porém está desconsiderando a formatação da DIV. :(
Posta ai como está o teu código inteiro...
>
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;}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
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;} color:#ff0000;
background:#131546 url(bgDIVIDER.gif) no-repeat top right;}
</style>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
Opa, poste também a tua estrutura html
Não entendi bem como é o efeito que você quer, você quer centralizar o texto em cada um dos links ou quer centralizar tudo na tela?
Att
Leandro Rodeghiero
http://www.maisumpixel.com.br