Problemas no menu com rollover imagem.
Olá pessoal tudo bem?
Faz mais ou menos uma semana que eu não posto aqui neh... Pois é, o motivo é um site que estou desenvolvendo diretamente com o cliente. Todos os dias eu falo com ele no msn e as veses por telefone, é um cliente exigente e estou fazendo de acordo com que ele me pede.
Para ter mais liberdade de desenvolvimento decidi fazer o layout no Fireworks, o cliente me pediu um menu igual aquele antigo website do Windows Vista, Eu consegui copiar mais ou menos igual, e fiz algumas modificações que ele me pediu, como uma área de login, um topo com o logo dele e etc.. Pois bem.. após deixar o site do jeito que ele queria resolvi exportar as imagens , partes por partes e começar a programar pelo Dreamweaver. E ai que começaram os problemas.
Para poder explicar melhor os meus problemas eu resolvi coloca-lo em um host.
http://paginas.terra.com.br/relacionamento...phycorporation/
Observando o menu e o código fonte vocês perceberam que o topo, sistemas, downloads, imagens e contato foram feitos utilizando listas não ordenadas, já o Login e Parceiros foram feitos utilizando Divs, pois terá mais conteúdo dentro deles.
Eu não sei se esse foi o procedimento correto, mas foi a unica maneira que eu consegui. e ainda tive que usar hacks.
Já o conteudo eu terei que usar muito mais, pois no FF ele está no centro certinho, no IE ele fica alinhado a esquerda colado com o menu e no Ie7 ele fica na direita..
Eu queria umas dicas ou alguma luz se pelo menos estou no caminho certo..
Eu poderia muito bem exportar pelo Fw e deixar no Dw com tabelas que o cliente nem perceberia, mas eu não quero mais isso nem morto. mesmo que eu tenho que enxer de hacks todo o código fonte.
Vou mostrar o código CSS, e vocês vejam como está ficando, lembrando que tudo isso foi idéia do meu cliente. eu só apenas passo para o papel.
body { background:#FFF url(imagens/background.jpg) no-repeat; margin:0; padding:0;}#menu { float:left; width:195px; margin:0; padding:0; width:195px;}#menu ul { margin:6px 0 0 27px; list-style:none; width:195px;}#topo { background:url(imagens/bt_topo.jpg) no-repeat; width:195px; color:#FFFFFF; text-decoration:none; height:141px; display:block;}#sistemas { background:url(imagens/bt_sistemas.jpg) no-repeat; width:175px; font-family:"Trebuchet MS"; font-size:17px; padding:5px 0 0 20px; color:#FFFFFF; text-decoration:none; height:53px; display:block;}#downloads { background:url(imagens/bt_downloads.jpg) no-repeat; width:175px; font-family:"Trebuchet MS"; font-size:17px; padding:5px 0 0 20px; color:#FFFFFF; text-decoration:none; height:53px; display:block;}#imagens { background:url(imagens/bt_imagens.jpg) no-repeat; width:175px; font-family:"Trebuchet MS"; font-size:17px; padding:5px 0 0 20px; color:#FFFFFF; text-decoration:none; height:53px; display:block;}#contato { background:url(imagens/bt_contato.jpg) no-repeat; width:175px; font-family:"Trebuchet MS"; font-size:17px; padding:5px 0 0 20px; color:#FFFFFF; text-decoration:none; height:53px; display:block;}#login { margin:0 0 0 67px; _margin:0 0 0 27px; background:url(imagens/bg_login.jpg) no-repeat; width:175px; font-family:"Trebuchet MS"; font-size:17px; padding:5px 0 0 20px; color:#FFFFFF; text-decoration:none; height:139px; display:block;}#parceiros { margin:0 0 0 67px; _margin:0 0 0 27px; background:url(imagens/bg_parceiros.jpg) no-repeat; width:175px; font-family:"Trebuchet MS"; font-size:17px; padding:5px 0 0 20px; color:#FFFFFF; text-decoration:none; height:115px; display:block;}#topo:hover { background:url(imagens/bt_hovertopo.jpg) no-repeat;}#sistemas:hover { background:url(imagens/bt_hoversistemas.jpg) no-repeat;}#downloads:hover { background:url(imagens/bt_hoverdownloads.jpg) no-repeat;}#imagens:hover { background:url(imagens/bt_hoverimagens.jpg) no-repeat;}#contato:hover { background:url(imagens/bt_hovercontato.jpg) no-repeat;}#conteudo { float:right; width:500px; margin:200px 205px 0 0px; _margin:200px 175px 0 0px;}#rodape { clear:both;}Ps: Eu decidi deixar o código assim para poder mexer individualmente em casa coisa, foi uma opção não abreviar por enquanto.Obrigado.
Discussão (1)
Carregando comentários...