Problemas com tabela quando passa codigo CSS para exibir imagem na escrita quebra a mesma!!!

[ssj4bq]

Olá, pessoal fiz o código de uma tabela com barra e que funciona.

Segue código da tabela e como funcionava e foto de como estava, porem ao incluir o css para ao passar o cursor mostrar foto de um item, coloquei como exemplo o action figure que tem na loja, pois bem.

No primeiro código (1) e foto (2) mostra a tabela correta e ajustando como quero.

Porem fiz implementação de um css codigo (3) e imagem (4) e ao passar o nome do produto mostra uma imagem (foto 5), esta dando conflito na tabela, a tabela desapareceu.

Alguém poderia dar uma sugestão como corrigiria isso (a foto 6 seria a barra colorida)?

Desde já agradeço a compreensão e ajuda de todos !

 

 

 

 

 

 

 

 

[Frank K Hosaka]

Para manter o mesmo padrão da primeira imagem, eu exclui o CSS *, e para a imagem não distorcer a tabela, eu defini o tamanho da imagem em width=100px e height=70px. Eu gostei do CSS a span e a:hover span, não sabia que era possível fazer aparecer e desaparecer uma imagem como se fosse um modal. O que eu não consegui foi colocar a sirene do corpo de bombeiros dentro do código fonte. Tem jeito de explicar como você conseguiu isso?

<style type=text/css>
::-webkit-scrollbar{width:1.5rem}
::-webkit-scrollbar-track{background-color:#ccc;box-shadow:inset 1px 1px 4px rgba(black,.2);width:1rem}
::-webkit-scrollbar-thumb{background-image:linear-gradient(red,black);box-shadow:inset 1px 1px 2px white;border-radius:1px}
ul{margin:20px 0 0 20x;list-style:none;}
a{position:relative;display:block;width:400px;padding:1px 0;background-color:#FFFFFF;text-decoration:none;color:#000000}
a:hover{background-color: #999999;}
a span{display:none}
a:hover span{display:block;position:absolute;top:0px;left:100%;border:1px #CCCCCC solid} 
</style>

<table border=1 style="height:839px;display:block;overflow-x:hiden;width:100%">
<tr>
<th width=100% bgcolor=D9D9D9><center><b>PRODUTOS</b></center></th>
<th style="padding:0 55px" bgcolor=F4CCCC><center><b>VALOR</b><center></th>
<tr>
<td bgcolor=00FFFF><center><b>A</b></center></td>
<td>
<tr>
<td><font size=5><center><a href=#>Action Figure Sword Art O. CR Wedding Sinon<br><span><img src="gato.jpg" alt="gato" width=100px height=70px></span></a>LINK</center></font></td>
<td><font sinze=5><center>R$ 200,00<br><a href="https://www.americanas.com.br/produto/4083026862" target="_blank">NOS SITES</a></center></font></td>
</table>

 

Editado Março 25, 2023 por Frank K Hosaka

[ssj4bq]

Em 25/03/2023 em 07:06, Frank K Hosaka disse:

Para manter o mesmo padrão da primeira imagem, eu exclui o CSS *, e para a imagem não distorcer a tabela, eu defini o tamanho da imagem em width=100px e height=70px. Eu gostei do CSS a span e a:hover span, não sabia que era possível fazer aparecer e desaparecer uma imagem como se fosse um modal. O que eu não consegui foi colocar a sirene do corpo de bombeiros dentro do código fonte. Tem jeito de explicar como você conseguiu isso?

<style type=text/css>
::-webkit-scrollbar{width:1.5rem}
::-webkit-scrollbar-track{background-color:#ccc;box-shadow:inset 1px 1px 4px rgba(black,.2);width:1rem}
::-webkit-scrollbar-thumb{background-image:linear-gradient(red,black);box-shadow:inset 1px 1px 2px white;border-radius:1px}
ul{margin:20px 0 0 20x;list-style:none;}
a{position:relative;display:block;width:400px;padding:1px 0;background-color:#FFFFFF;text-decoration:none;color:#000000}
a:hover{background-color: #999999;}
a span{display:none}
a:hover span{display:block;position:absolute;top:0px;left:100%;border:1px #CCCCCC solid} 
</style>

<table border=1 style="height:839px;display:block;overflow-x:hiden;width:100%">
<tr>
<th width=100% bgcolor=D9D9D9><center><b>PRODUTOS</b></center></th>
<th style="padding:0 55px" bgcolor=F4CCCC><center><b>VALOR</b><center></th>
<tr>
<td bgcolor=00FFFF><center><b>A</b></center></td>
<td>
<tr>
<td><font size=5><center><a href=#>Action Figure Sword Art O. CR Wedding Sinon<br><span><img src="gato.jpg" alt="gato" width=100px height=70px></span></a>LINK</center></font></td>
<td><font sinze=5><center>R$ 200,00<br><a href="https://www.americanas.com.br/produto/4083026862" target="_blank">NOS SITES</a></center></font></td>
</table>

 

Cara obrigado pelo seu código, quanto a sirene eu coloquei assim:

<table border="1" style=" height: 839px; display: block; overflow-x: hidden; width: 100%;">
    <thead>
      <tr>
         <th width="100%" bgcolor="D9D9D9"><center><b>PRODUTOS</b></center></th>
           <th style="padding: 0 55px;" bgcolor="F4CCCC"><b>VALOR</b></center></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td bgcolor="00FFFF"><center><b>A</b></center></td>
        <td></td>       
      </tr>
      <tr>
        <td><font size=5><center><a href=#>Action Figure Sword Art O. CR Wedding Sinon<br><span><img src="images/gato.jpg" alt="gato" width=230px height=230px></span></a>🚨LINK🚨</center></font></td>
        <td><font size=5><center>R$ 200,00<br><a href="https://www.americanas.com.br/produto/4083026862" target="_blank">NOS SITES</a>🚨</center></font></td>
      </tr>

</tbody>

  </table >

Voltando ao seu código eu refiz ele, porem esta dando erro no meu site, acredito por eu estar usando outros codigos na mesma pagina, pois testei sem e não dava o erro, alguns erros estranhos e mesmo eu mexendo no seu codigo essa linha que é a para inserir as fotos ao passar o mouse da algum erro divergencia com meu codigo:

a{position:relative;display:block;width:200px;padding:1px 0;background-color:#FFFFFF;text-decoration:none;color:#000000}

Desse css:

<style type=text/css>

    ::-webkit-scrollbar{
      width: 1.5rem;
    }

    ::-webkit-scrollbar-track {
      background-color: #ccc;
      box-shadow: inset 1px 1px 4px rgba(black, .2);
      width: 1rem;
    }

    ::-webkit-scrollbar-thumb {
      background-image: linear-gradient(red, black);
      box-shadow: inset 1px 1px 2px white;
      border-radius: 1px;
    }

    ul{margin:20px 0 0 20x;list-style:none;}

      a{position:relative;display:block;width:200px;padding:1px 0;background-color:#FFFFFF;text-decoration:none;color:#000000}
      a:hover{background-color: #999999;}
      a span{display:none}
      a:hover span{display:block;position:absolute;top:0px;left:100%;border:1px #CCCCCC solid}

</style>

O css original meu era esse:

<style>
  

    ::-webkit-scrollbar {
      width: 1.5rem;
    }

    ::-webkit-scrollbar-track {
      background-color: #ccc;
      box-shadow: inset 1px 1px 4px rgba(black, .2);
      width: 1rem;
    }

    ::-webkit-scrollbar-thumb {
      background-image: linear-gradient(red, black);
      box-shadow: inset 1px 1px 2px white;
      border-radius: 1px;

    }

  </style>

Vou deixar link do meu site como esta sem seu código que você mexeu o com a{position:relative;display:block;width:400px;padding:1px 0;background-color:#FFFFFF;text-decoration:none;color:#000000}

https://tesourostore.com.br/

Estou fazendo uma lista de prioridades para mexer no site devagar estou criando tudo sozinho ou as vezes tirando uma ou outra duvida kkkk não esta ainda muito otimizado para mobile.

Enfim com seu código quebra, vide fotos em anexo.

Tiver alguma outra sugestão para testar seguindo sua ideia.

Obrigado.

 

 

[Frank K Hosaka]

Obrigado pela sirene. O site é bem grande, lamento por não poder ajudar. O css que trabalha com o webkit afeta muita coisa, e eu não tenho nenhuma ideia de como isolar, só posso desejar sorte e persevarança.

[ssj4bq]

13 horas atrás, Frank K Hosaka disse:

Obrigado pela sirene. O site é bem grande, lamento por não poder ajudar. O css que trabalha com o webkit afeta muita coisa, e eu não tenho nenhuma ideia de como isolar, só posso desejar sorte e persevarança.

Certo disseram isso:

"use class <ul class="classe"> e dai tu usa o selector ul.classe"

"Claro que da problemas. Estas a escrever css de forma errada. o elemento (a) puro e pai se depois queres fazer alguma instancia de (a) tens de colocar um selector tipo a span, ou a texto e por ai vai"

"Outro erro é misturar tipos de escrita de css. Css em linha é uma coisa em blocos é outra."

"O teu elemento (a) esta completamente errado"

O que teria fazer com base no que ele disse, voce saberia dizer?

[Frank K Hosaka]

12 minutos atrás, ssj4bq disse:

Certo disseram isso:

"use class <ul class="classe"> e dai tu usa o selector ul.classe"

"Claro que da problemas. Estas a escrever css de forma errada. o elemento (a) puro e pai se depois queres fazer alguma instancia de (a) tens de colocar um selector tipo a span, ou a texto e por ai vai"

"Outro erro é misturar tipos de escrita de css. Css em linha é uma coisa em blocos é outra."

"O teu elemento (a) esta completamente errado"

O que teria fazer com base no que ele disse, voce saberia dizer?

CSS ainda é coisa nova para mim, eu estou no nível básico, ou seja, vou usando na base da tentativa e erro.