Ir ao conteúdo
  • Cadastre-se
Jessi1412

RESOLVIDO Tamanho tela usuario

Recommended Posts

Boa Tarde.


tenho o seguinte codigo



<div class="corpo">
<div class="corpo_tabela">
<table border="1" style="width:100%">
<tr>
<td>Registro</td>
<td>Descriçao</td>
<td>Estado</td>

</tr>
<tr>
<td>1111111</td>
<td>Tetjskkdkskjdskjsdhkjsdhj</td>
<td>
<div class="circulo_verde">
<div class="descricao">Passa o mouse e aparece o que conteudo da div, porem essa div
precisa ter o tamanho da tela do usuario</div>
</div>
</td>

</tr>

</table>
</div>
</div>


@charset "utf-8";

*{font-family:Tahoma, Arial, Verdana, Helvetica, sans-serif; font-size:14px; margin:0; padding:0;}

.corpo {
/*background-color:blue;
min-width:1024px;
min-width:1024px;
border-style: solid;
border-color: #CFCFCF;*/
width:100%;
height:100%;
text-align: center;
position: relative;

}

.circulo_verde, .circulo_amarelo, .circulo_vermelho{
border-radius: 100%;
width: 20px;
height: 20px;
margin: auto;
}
.circulo_verde{
background-color:#32CD32;
}
.circulo_amarelo{
background-color:#FFD700;
}
.circulo_vermelho{
background-color:#FF0000;
}

.conteudo{
background-color:#191970;
}

.descricao{
background-color:blue;
display: none;

}
.circulo_verde:hover .descricao{
display: block;
}

Na segunda linha da coluna chamada estado, tenho uma div em verde, quando passo o mouse aparece outra div, porém preciso que essa div que aparecer fique do tamanho da tela do usuario, como posso fazer isso?


 


Obs: Precisa funcionar em todos os navegadores.


Compartilhar este post


Link para o post
Compartilhar em outros sites

http://jsfiddle.net/kt06up34/
 

.descricao{    position: absolute;    left: 0px;    width: 100%;    background-color:blue;    display: none;}

Adicionei as três primeiras propriedades. Entretanto, devo lhe chamar atenção ao fato de que o usuário pode aumentar/diminuir o tamanho do navegador, ou ocorrer algum outro impacto na resolução que possa necessitar intervenção do javascript.. mas veja se o acima é o suficiente..

Editado por Mog.Lucas
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Outra solução seria desta maneira:  http://jsfiddle.net/Lunvr0c1/

No código, veja que retirei o div de dentro do circulo_verde e usei no css a regra de seletor de elementos irmãos adjacentes.

Mas a do @Mog.Lucas já é mais do que suficiente!

 

 

ps: O motivo por eu ter colocado um negrito no "O"  antes da palavra "div"  se dá por que não falamos " A div".. mas sim " O div", pois este é um elemento.. e não "uma elemento" :)

Editado por dif
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia,

 

@Mog.Lucas  e @dif  então os dois resolveria o meu problema, porém nenhum funciona no internet explore. E preciso que funcione nesse navegador, se alguem poder me ajudar fico grata.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Por gentileza, não seja mais uma que odeia o internet explorer sem motivos. Para fazer funcionar no IE, é necessário definir o doctype do arquivo. Não se trata bem de um erro..

Adicione o seguinte na primeira linha do arquivo (ou antes do <html>):

<!DOCTYPE html>
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novos posts.





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×