Dieguinhu Web 0 Denunciar post Postado Maio 29, 2008 Gente to com um menuzinho de aba puxando conteudo dinamico só ta flatando um negocinho e não consigo fazê-lo é deixar o hover dele com uma imagem mas não tá funcionando segue meu código CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head> <link rel="stylesheet" type="text/css" href="estilo.css" /> <title>Ordem de Solicitação</title> <style type="text/css"> <!-- a:link { color: #FFFFFF; text-decoration: none; } a:visited { width:200px; height:22px; text-decoration: none; } a:hover { width:200px; height:22px; text-decoration: none; } a:active { width:200px; height:22px; text-decoration: none; } --> .unsel { width:200px; height:22px; background-image: url("Imagens/menu001.gif"); } .unsel:hover { // aki que não está funcionando width:200px; height:22px; background-image: url("Imagens/menu002.gif"); } .sel { width:200px; height:22px; background-image: url("Imagens/menu002.gif"); } .divsel { display:block; left: 10px;<!-- distância do conteúdo em relação à esquerda do browser--> top: 57px;<!-- distância do conteúdo em relação ao topo--> height: 520px;<!-- altura do conteúdo--> width: 984px;<!-- largura do conteúdo--> background-color: #66CCFF;<!-- cor de fundo do conteúdo--> right: 10px; bottom: 10px; color:black; } .divunsel { display:none; color:black; } --> #box { font: 0.9em Arial, Helvetica, sans-serif; width:100%; height:100%; color:#333; margin: 0; } #box1 { width:100%; height:100%; color:#333; margin: 0; } #dados{ margin-left:490px; } .fixo { margin: 0 auto; width: 25em; background: url(Imagens/canto-inf-dir.jpg) no-repeat 100% 100%; font-size: 100%; z-index:20; } .titulo { background: url(Imagens/canto-sup-dir.jpg) no-repeat 100% 0; margin: 0; padding: 0; text-align: center; z-index:21; } .titulo h6 { background: url(Imagens/canto-sup-esq.jpg) no-repeat 0 0; margin: 0; /*padding: 45px 20px 5px;*/ color: #333; font-weight: bold; font-size: 1.4em; line-height: 1.0em; } /** html .titulo h6 {height: 1%;} /* Hack para IE5 PC */ .conteudo { background: url(Imagens/canto-inf-esq.jpg) no-repeat 0 100%; color:#fff; margin: 0; /*padding: 5px 45px 45px;*/ } .conteudo q{ color:#333; } .conteudo b{ margin-left:200px; } #boxes .conteudo p { margin:0.7em; line-height:1.2em; } .elastico { width:100%; height:100%; background: url(Imagens/canto-inf-dir.jpg) no-repeat 100% 100%; font-size: 100%; } .GridRow { background-color: Transparent; } .GridRowAlternate { background-color: #E5EDF6; } .GridHeader { background-color: #5182BC; } </style> </head> <body leftmargin="50px" > <img src="Imagens/logo.jpg"><span style="font-weight:bold;font-size:20px">ORDEM DE SERVIÇO - 126.456 </span> <br> <div id="dados"> <span style="font-family: arial, verdana, sans-serif;font-size:10px;font-weight:bold;color:black">Consolidadora:</span><span style="font-family: arial, verdana, sans-serif;font-size:10px;font-weight:bold;color:#1447B0">Grupo Accor</span> <br> <span style="font-family: arial, verdana, sans-serif;font-size:10px;font-weight:bold;color:black;margin-left:12px">Empresa:</span><span style="font-family: arial, verdana, sans-serif;font-size:10px;font-weight:bold;color:#1447B0">Ticket Serviços</span> <br> <span style="font-family: arial, verdana, sans-serif;font-size:10px;font-weight:bold;color:black;margin-left:50px">Base:</span><span style="font-family: arial, verdana, sans-serif;font-size:10px;font-weight:bold;color:#1447B0">Piraporinha</span> <br> <span style="font-family: arial, verdana, sans-serif;font-size:10px;font-weight:bold;color:black;margin-left:35px">Gestor:</span><span style="font-family: arial, verdana, sans-serif;font-size:10px;font-weight:bold;color:#1447B0">Plínio Freitas</span> </div> <br> <br> <span style="font-family: arial, verdana, sans-serif;font-size:12px;font-weight:bold;color:#1447B0;margin-right:590px"><img src="Imagens/seta.gif"> Dados do Veículo</span> <div id="box"> <div class="elastico"> <div class="titulo"> <H6> </H6> </div> <div class="conteudo" style="padding: 5px 8px 6px;"> <table width="700" border="0" cellspacing="2" cellpadding="0"> <tr> <td width="140" align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Fabricante</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;">Chevrolet</span></td> <td width="140" align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Modelo</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">Vectra </span></td> <td width="140" align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Versão</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">GT</span></td> <td width="140" align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Motor</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">2.0</span></td> <td width="140" align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Ano de Fabricação</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">2007</span></td> </tr> <tr> <td height="62" align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Ano do Modelo</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:2px;">2007</span></td> <td align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Placa</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">BNR-6620</span></td> <td align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Tipo do Veículo</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">Leve</span></td> <td align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Renavam</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">612042619</span></td> <td align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Chassi</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">30SSP41BO125441</span></td> </tr> </table> </div> </div> </div> </div> <br> <span style="font-family: arial, verdana, sans-serif;font-size:12px;font-weight:bold;color:#1447B0;margin-right:615px"><img src="Imagens/seta.gif"> Dados da OS</span> <div id="box"> <div class="elastico"> <div class="titulo"> <H6> </H6> </div> <div class="conteudo" style="padding: 5px 2px 20px;"> <table width="700" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="350"> <span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;margin-right:200px;font-weight:bold">Número da Solicitação <span style="color:black;">1001</span></span> <br><br><span style="font-family: arial, verdana, sans-serif; font-size: 10px; color: #2A437B;margin-right:200px;font-weight:bold">Número do Orçamento <span style="color:black;">2202</span></span> <br><br><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;margin-right:238px;font-weight:bold">Número da OS <span style="color:black">2322</span></span><br> <br><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;margin-right:215px;font-weight:bold">Status da OS <span style="color:black">Encerrada</span></span> </td> <td width="350" style="margin-right:500px" align="left"> <img src="Imagens/seta_azul.gif"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold"> Aberta - por <span style="color:black">Maximiliano Porta</span> 23/04/2008 11:58:00</span><br><br> <img src="Imagens/seta_azul.gif"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold"> Veículo Recebido - de <span style="color:black">Tim Maia</span> 23/04/2008 16:25:00</span><br><br> <img src="Imagens/seta_azul.gif"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold"> Serviço Terminado -25/04/2008 10:12:35</span><br><br> <img src="Imagens/seta_azul.gif"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold"> Veículo Retirado - por <span style="color:black">Maximiliano Porta</span> 25/04/2008 16:30:00</span><br><br> <img src="Imagens/seta_azul.gif"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold"> Encerrada - por <span style="color:black">Maximiliano Porta</span> 26/04/2008 04:25:02</span> </td> </tr> </table> </div> </div> </div> </div> <br> <span style="font-family: arial, verdana, sans-serif;font-size:12px;font-weight:bold;color:#1447B0;margin-right:540px"><img src="Imagens/seta.gif"> Dados do Estabelecimento</span> <div id="box"> <div class="elastico"> <div class="titulo"> <H6> </H6> </div> <div class="conteudo" style="padding: 5px 10px 20px;"> <table width="700" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="140" height="30" align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Nome</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">Ticket Auto Peças</span> </td> <td width="140" align="left"><span style="font-family: arial, verdana, sans-serif; font-size: 10px; color: #2A437B;">Código</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">0001</span></td> <td width="140" align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Logradouro</span><span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">Av. Paulista </span></td> <td width="140" align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Número</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">2313 </span></td> </tr> <tr> <td height="30" align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Bairro</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">Cerqueira Cézar</span></td> <td align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Município</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">São Paulo </span></td> <td align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">UF</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">SP</span></td> <td align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Fabricante</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">Chevrolet</span></td> </tr> <tr> <td height="31" colspan="4" align="left"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#2A437B;font-weight:bold">Tipo de Estabelecimento</span> <span style="font-family: arial, verdana, sans-serif;font-size:12px;color:black;margin-left:1px;">Concessionária</span> </td> </tr> </table> </div> </div> </div> </div> <br> <span style="font-family: arial, verdana, sans-serif;font-size:12px;font-weight:bold;color:#1447B0;margin-right:513px"><img src="Imagens/seta.gif"> Descrição Materiais e Serviços</span> <div id="box"> <div class="elastico"> <div class="titulo"> <H6> </H6> </div> <div class="conteudo"> <div align="left" id="aba"> <script language="JavaScript"> function sel(idaba){ var aba=document.getElementById(idaba); var nAbas="4"; <!-- colocar o número de abas 1--> for(var i="1";i<nAbas;i++){ var id="aba"+i; document.getElementById(id).className="unsel"; } aba.className="sel"; for(var u="1";u<nAbas;u++){ var idt="textaba"+u; document.getElementById(idt).className="divunsel"; } var iddiv="text"+idaba; document.getElementById(iddiv).className="divsel"; } </script> <table width="600px" border="0" cellspacing="0" id="t_abas" style="margin-left:20px"> <tr id="tr_abas"> <td id="aba1" width="23,3%" class="sel" onClick="sel(this.id)" align="center"><a href="#item1" name="item1">Suspensão / Amortecedor</a></td><!-- colocar as abas aqui. Cuidado para não mudar as id das abas: formata: aba+número. ver exemplo--> <td id="aba2" width="23,3%" class="unsel" onClick="sel(this.id)" align="center"><a href="#item2" name="item2"> Rodas / Disco de Freio</a></td> <td id="aba3" width="23,3%" class="unsel" onClick="sel(this.id)" align="center"><a href="#item3" name="item3">Motor / Coxim</a></td> </tr> </table> </div> <div id="textaba1" class="divsel" style="margin-right:115px"> <table width="580" border="0" cellspacing="1" cellpadding="0" > <img src="Imagens/seta_azul.gif"><span style="font-family: arial, verdana, sans-serif;font-size:12px;font-weight:bold;color:#1447B0"> Materiais</span> <tr class="Font Bold White GridHeader"> <td style="height: 18px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:white">Cód Item</span></td> <td style="height: 18px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:white">Descrição</span></td> <td style="height: 18px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:white">Procedência</span></td> <td style="height: 18px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:white">Garantia(Dias/KM)</span></td> <td style="height: 18px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:white">Valor Unit</span></td> <td style="height: 18px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:white">Qtde</span></td> <td style="height: 18px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:white">Desconto</span></td> <td style="height: 18px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:white">Cortesia</span></td> <td style="height: 18px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:white">Valor Total</span></td> </tr> <tr class="Font GridRow"> <td style="height: 20px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:12px">126.456</span></td> <td style="height: 20px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#0044aa">Suspensão Cofap</span></td> <td style="height: 20px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#0044aa">Original</span></td> <td style="height: 20px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#0044aa">30 dias/100 km</span></td> <td style="height: 20px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#0044aa">R$ 120,00</span></td> <td style="height: 20px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#0044aa">2</span></td> <td style="height: 20px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#0044aa">10%</span></td> <td style="height: 20px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#0044aa"><input name="" type="checkbox" value="" disabled></span></td> <td style="height: 20px" align="center"><span style="font-family: arial, verdana, sans-serif;font-size:10px;color:#0044aa">R$226,00</span></td> </tr> </table> Compartilhar este post Link para o post Compartilhar em outros sites
programador php 0 Denunciar post Postado Maio 30, 2008 tem um exemplo on-line! não esqueça da order LoVeHAte Link Visited Hover Active abraço Compartilhar este post Link para o post Compartilhar em outros sites
webflex 0 Denunciar post Postado Maio 30, 2008 Boa técnica essa do LoVeHAte xD. Não me esquecerei :P. Cumps \o/ Compartilhar este post Link para o post Compartilhar em outros sites
William Bruno 1501 Denunciar post Postado Maio 30, 2008 Qnta resposta "util" hein?! .unsel:hover { // aki que não está funcionando width:200px; height:22px; background-image: url("Imagens/menu002.gif"); }o efeito "hover", só se aplica na tag A para o internet explorer.então faça: .unsel a:hover Bom, isso fora outras diversas coisas "erradas" no teu HTML, como o uso de tabelas para dados não tabulares, estilizações inline... Compartilhar este post Link para o post Compartilhar em outros sites
