Problemas Com Menu Horizontal
Started By brmaster, 17/03/2010, 12:28
6 replies to this topic
#1
Posted 17/03/2010, 12:28
Pessoal to com um probleminha e gostaria de pedir a ajuda de vocês.
To iniciando agora com css e nao entendo muito, mas no site que estou desenvolvendo
uso um menu que achei na net e o mesmo nao funciona corretamente no ie, ele funciona
numa boa no firefox, mas no ie ele fica vertival e nao horizontal.
Segue o codigo da pagina:
<ul id="topnav">
<li><a href="o-programa.asp">O Programa</a></li>
<li><a href="videos.asp">Vídeos</a></li>
<li><a href="noticias.asp">Notícias</a></li>
<li ><a href="#">Conselhos Empresariais</a></li>
<li><a href="promocao.asp">Promoções</a></li>
<li><a href="fale-conosco.asp">Fale Conosco</a></li>
</ul>
e o css
ul#topnav {
margin: 0;
padding: 0;
font-size: 1.1em;
float: left;
list-style: none;
position: relative;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden; /*--Important - Masking out the hover state by default--*/
float: left;
height:40px;
font: 11px "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
color: #ffffff;
list-style: none;
}
ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span> will be a duplicate of the <a> tag--*/
padding: 10px 20px;
float: left;
text-decoration: none;
color: #ffffff;
background: url(a_bg.gif) repeat-x;
clear: both;
width: 100%;
height: 20px;
line-height: 20px;
text-align: left;
}
ul#topnav a{ /*--This is basically the hover state of navigation--*/
color: #ffffff;
background-position: left bottom;
}
ul#topnav span{ /*--Default state of navigation--*/
background-position: left top;
}
Alguem pode me ajudar dizendo o que há de errado pra nao funcionar no ie?
vlw galera..
aguardo ajuda!
To iniciando agora com css e nao entendo muito, mas no site que estou desenvolvendo
uso um menu que achei na net e o mesmo nao funciona corretamente no ie, ele funciona
numa boa no firefox, mas no ie ele fica vertival e nao horizontal.
Segue o codigo da pagina:
<ul id="topnav">
<li><a href="o-programa.asp">O Programa</a></li>
<li><a href="videos.asp">Vídeos</a></li>
<li><a href="noticias.asp">Notícias</a></li>
<li ><a href="#">Conselhos Empresariais</a></li>
<li><a href="promocao.asp">Promoções</a></li>
<li><a href="fale-conosco.asp">Fale Conosco</a></li>
</ul>
e o css
ul#topnav {
margin: 0;
padding: 0;
font-size: 1.1em;
float: left;
list-style: none;
position: relative;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden; /*--Important - Masking out the hover state by default--*/
float: left;
height:40px;
font: 11px "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
color: #ffffff;
list-style: none;
}
ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span> will be a duplicate of the <a> tag--*/
padding: 10px 20px;
float: left;
text-decoration: none;
color: #ffffff;
background: url(a_bg.gif) repeat-x;
clear: both;
width: 100%;
height: 20px;
line-height: 20px;
text-align: left;
}
ul#topnav a{ /*--This is basically the hover state of navigation--*/
color: #ffffff;
background-position: left bottom;
}
ul#topnav span{ /*--Default state of navigation--*/
background-position: left top;
}
Alguem pode me ajudar dizendo o que há de errado pra nao funcionar no ie?
vlw galera..
aguardo ajuda!
#3
Posted 17/03/2010, 14:35
Simples, o IE não entende o pseudo-seletor ul#topnav
mas preciso saber em qual versão do IEca você está tentando rodar.
o ie 6
vlw
#5
Posted 17/03/2010, 15:11
exatamente. o IEca 6 não entende pseudo-seletores.
Esqueça ele e programe pra Firefox, IE7 pra cima
o IE 6 até já teve seu enterro merecido XD
Como nao tenho ie7 aki no servico e eles nao me permitem baixar
acesse por favor www.visaoempreendedora.net e se der o erro em seu IE que com certeza nao é o 6
por favor me ajude a concerta-lo.
obrigado.
aguardo.
#6
Posted 17/03/2010, 18:47
Se voce tiver o IE8 e for acessar algum site, ao lado da barra de endereços tem um botao verde de compatibilidade, voce clicando 'transforma' se IE8 em IE7.
E como o Dark Sign falou, nao programe mais nada para IE6 é percade de tempo. Tanto que o IE9 já está sainda
Sobre os pseudoelementos, é o que voce escreveu depois do #
O ul é o elemento pai, e o pseudo é o #id que delemita aquela formatação para a ul#id
E como o Dark Sign falou, nao programe mais nada para IE6 é percade de tempo. Tanto que o IE9 já está sainda
Sobre os pseudoelementos, é o que voce escreveu depois do #
O ul é o elemento pai, e o pseudo é o #id que delemita aquela formatação para a ul#id
#7
Posted 27/03/2010, 01:31
Não, não, calma gente, se tem bug aí, não é a seleção por id não!
Primeiro que ele pode perfeitamente utilizar ul#topnav no ie6 sem ter bugs. Isso é uma ID, e ele compreende. Uma pseudo-class seria p:first-letter por exemplo, que é selecionar somente a primeira letra de um texto em um <p>.
Maiores referências sobre o assunto: http://www.w3schools...udo_classes.asp
Se o #topnav após o ul fosse o problema, ele poderia simplesmente escrever #topnav. Dá na mesma. Ainda mais sendo uma id, e ids são únicas. ;]
Vamos à solução
Olha, este tutorial que você pegou não é muito bom. O código está estranho, e dá voltas desnecessárias, tá com uns <span> fantasmas no css, etc. Poderia colocar o link de onde o tirou para eu dar uma olhada e ter certeza do que você quer?
O problema: width:100% para o "ul#topnav a, ul#topnav span".
Ele entende que pode ocupar 100% do espaço disponível, e como não há nenhuma largura nos elementos pais, ele ocupa 100% da largura do body. Somente removendo isso funciona... MAS..
Se você quer fazer algo com um código melhorzinho, mantenha o mesmo código html, mas altere O CSS:
Um bom tutorial de navegação por imagens e CSS:
http://www.sohtanaka...ss-navigations/ - Todos os tutoriais dele são maravilhosos, dê uma olhada sempre que puder.
P.s.: Por favor, da próxima vez que postar trechos de códigos, utilize a tag [code=auto:0].
Primeiro que ele pode perfeitamente utilizar ul#topnav no ie6 sem ter bugs. Isso é uma ID, e ele compreende. Uma pseudo-class seria p:first-letter por exemplo, que é selecionar somente a primeira letra de um texto em um <p>.
Maiores referências sobre o assunto: http://www.w3schools...udo_classes.asp
Se o #topnav após o ul fosse o problema, ele poderia simplesmente escrever #topnav. Dá na mesma. Ainda mais sendo uma id, e ids são únicas. ;]
Vamos à solução
Olha, este tutorial que você pegou não é muito bom. O código está estranho, e dá voltas desnecessárias, tá com uns <span> fantasmas no css, etc. Poderia colocar o link de onde o tirou para eu dar uma olhada e ter certeza do que você quer?
O problema: width:100% para o "ul#topnav a, ul#topnav span".
Ele entende que pode ocupar 100% do espaço disponível, e como não há nenhuma largura nos elementos pais, ele ocupa 100% da largura do body. Somente removendo isso funciona... MAS..
Se você quer fazer algo com um código melhorzinho, mantenha o mesmo código html, mas altere O CSS:
/* CSS reset - zerando todas essas propriedades, para que nada padrão de browser interfira - insira no início do seu arquivo CSS */ * { border:0; margin:0; padding:0; background:none; } ul { list-style-type:none; } a { text-decoration:none; } h1, h2, h3, h4, h5, h6 { font-weight:normal; } /* CSS reset end */ body { font-family:"Trebuchet MS",Verdana, Arial, Helvetica, sans-serif; font-size:11px; } /* Menu CSS */ ul#topnav { height:40px; /* Altura desejada da navegação */ float:left; /* flutuando para a esquerda */ font-size: 1.1em; font-weight:bold; } ul#topnav li{ height:40px; /* Altura desejada da navegação */ float:left; /* Necessário para fazer a navegação horizontal */ } ul#topnav a { height:40px; /* Altura desejada da navegação */ float:left; /* Esse é o truque, junto como o "display:block" */ display:block; background:url(a_bg.gif) repeat-x; background-position:top left; padding:0 20px; /* espaço horizontal entre os elementos */ line-height:40px; /* Necessário para centralizar verticalmente o texto - deve ser igual à altura */ color:#fff; /* COR DO TEXTO AQUI */ } ul#topnav a:hover { background-position:bottom left; /* Somente altero a posição do bg, e funcionará como mágica */ }
Um bom tutorial de navegação por imagens e CSS:
http://www.sohtanaka...ss-navigations/ - Todos os tutoriais dele são maravilhosos, dê uma olhada sempre que puder.
P.s.: Por favor, da próxima vez que postar trechos de códigos, utilize a tag [code=auto:0].
Edição feita por: Vielmond, 27/03/2010, 01:34.
Camila Vielmond
vielmond.deviantart.com | Portfólio em breve
Hmmm, postei algo útil? Então retribua: Me recomende!
vielmond.deviantart.com | Portfólio em breve
Hmmm, postei algo útil? Então retribua: Me recomende!
1 user(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)