Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal aqui estou eu mais uma vez... mal consigo terminar uma coisa e ja me aparece outra
rsrsrs
bem é o seguinte estou com uma grande fificuldade com o ie e firefox... fiz um menu em div rollover, mas o posicionamento dele no firefox fica certinho ja no IE fica diferente, completamente errado o que faço???
rsrsrs
<div class="menulinhacima"><img src="imagens/linha.jpg" /> </div>
<div class="menu">
<a href="empresa.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','imagens/bts/bt_empresa_over.jpg',1)"><img src="imagens/bts/bt_empresa.jpg" name="Image26" width="75" height="20" border="0" id="Image26" /></a>
<a href="produtos.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','imagens/bts/bt_produtos_over.jpg',1)"><img src="imagens/bts/bt_produtos.jpg" name="Image27" width="75" height="20" border="0" id="Image27" /></a>
<a href="portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image28','','imagens/bts/bt_portfolio_over.jpg',1)"><img src="imagens/bts/bt_portfolio.jpg" name="Image28" width="75" height="20" border="0" id="Image28" /></a>
<a href="clientes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image29','','imagens/bts/bt_clientes_over.jpg',1)"><img src="imagens/bts/bt_clientes.jpg" name="Image29" width="75" height="20" border="0" id="Image29" /></a>
<a href="area_de_atuacao.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image30','','imagens/bts/bt_area_atuacao_over.jpg',1)"><img src="imagens/bts/bt_area_atuacao.jpg" name="Image30" width="120" height="20" border="0" id="Image30" /></a>
<a href="contato.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image31','','imagens/bts/bt_contato_over.jpg',1)"><img src="imagens/bts/bt_contato.jpg" name="Image31" width="75" height="20" border="0" id="Image31" /></a></div>
<div class="menulinhabaixo"><img src="imagens/linha.jpg" /> </div>e esse é o css
.menulinhacima{
top:40px;
position:absolute;
margin-left:170px;
}
.menu{
top:50px;
position:absolute;
margin-left:200px;
}
.menulinhabaixo{
top:75px;
position:absolute;
margin-left:170px;
}e isso que esta acontecendo:
no ie/applications/core/interface/imageproxy/imageproxy.php?img=http://img682.imageshack.us/img682/1821/80353229.jpg&key=7e678a7bcdc6f5353f65797befab0d287c1dbc3b8ff9e72d6af6f0e511c9c0ca" alt="Imagem Postada" />
e no firefox/applications/core/interface/imageproxy/imageproxy.php?img=http://img297.imageshack.us/img297/218/96779938.jpg&key=8352458e3ffb5c06a0194ef71250fbf1c5cc95b667b109e1f27deaa388de63f5" alt="Imagem Postada" />
obrigada
se eu tiro o position o menu vai para baixo... e eu não consigo colocar ele em cima novamente... por mais que eu mude o top...
/applications/core/interface/imageproxy/imageproxy.php?img=http://img504.imageshack.us/img504/3037/75579904.jpg&key=6ae74181c7bafddd2422d1de9aaddb246163c0f238ddb091b53c3115592cf937" alt="Imagem Postada" />
O top só funciona com position.
Não trabalhe com position para esta finalidade, use float e margin para posicionar os elementos. Depois disso, volte a postar caso tenha dúvidas.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Acho que seia melhor utilizar tags ul e li pra fazer esse menu com rollover, usando só css, sem utilizar java. Ai utilizaria background-position pra fazer o rollover, e utilizaria float no li para alinhar.
Exemplo:
CSS:
.menu
width: ??
height: ??
float: ??
.menu ul
display:block
.menu li
float:left
width: ??
height: ??
background-image: ??
.menu li:hover
background-position: 0 -44
HTML
<div class="menu">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>Espero que tenha intendido, evite usar position.
Mais informações. http://www.maujor.com/
não sei se sou burra...
rsrsrsrs
mas não deu certo....
usei o float no IE o espaçamento fica completamente errado... e no firefox... funcionou... mas o conteudo de baixo clou no menu...
e não teve o que mandasse para baixo não sei o que fazer rsrsrs
Olá Vanessa,
Sugiro mudar um pouco a maneira como faz a montagem do menu, pois há formas mais simples e eficazes de fazer um menu com rollover.
Para fazer o efeito de rollover no menu, utilize texto mesmo (com a pseudo-classe :hover do link) ou então a técnica CSS Sprites (substituir o texto por uma imagem).
http://www.alistapart.com/articles/sprites
O exemplo abaixo não utiliza a substituição por imagem, para simplificar.
Ex. de HTML do menu:
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Empresa</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>CSS:
div#menu {
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
float: right;
}div#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
float: right;
}div#menu li {
float: left;
}div#menu a {
display: block;
float: left;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
width: 100px;
padding: 3px 0;
text-align: center;
}div#menu a:hover {
text-decoration: underline;
}Talvez precise de mais alguns ajustes, mas este código fará um menu horizontal da mesma forma que o que você está fazendo.
Utilizar links no menu como você fez, soltos, é mais cômodo, pois os tags <a> automaticamente vão ficar um do lado do outro. Porém, você não tem controle sobre o layout dessa forma, e mudanças entre os navegadores vão com certeza acontecer.
Minhas sugestões para minimizar diferenças entre os navegadores:
1. Utilize um CSS reset no seu arquivo de CSS. Eu apenas uso *{margin:0;padding:0;}
2. Como já disse acima, não confie em elementos inline, como o tag <a>, para fazer o seu layout. Sempre use display:block; e outras propriedades CSS para ter melhor controle da situação.
obrigada pelas dicas...
eu ja fiz da forma que você comentou... mas tenho um problema o layout tem que passar por aprovação interna da empresa... e meu chefe não aprovou como escrito, mandou usar imagem... longa história...
rsrsrs
eu encontrei um rack funcionou no IE 6 mas não funcionou no IE 7 =(
ta dificil...
rsrsrsrsrs
o rack fala pra colocar um _ na frente de um novo top com os valores pro ie... mas como disse funcionou no 6 e no 7 ainda esta o mesmo problema!
.menu{
top:48px;
position:absolute;
margin-left:200px;
_top:62px;
}be não sei se é a forma mais certa mas encontrei a solução...
rsrsrsrrss
usei mais um rack... e tudo funcionou...
=D
.menu{
top:48px; /*para todos os navegadores;*/
position:absolute;
margin-left:200px;
_top:62px; /*para IE 6;*/
*top:62px; /*para IE 7;*/
}Não é a melhor solução...
O melhor seria usar float e margin.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
é eu li bastante sobre isso... mas nossa não sei o por que não funcionou aqui...
rsrsrsrs
mas o próximo irei fazer assim desde o começo... pelo menos vou tentar rsrsrs
obrigada a todos
Há necessidade de position? Usou CSS Reset?
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif