HTML/CSS : difficulté de coordination hover/overflow

Fermé

LisyNila Messages postés 3 Date d'inscription dimanche 3 janvier 2016 Statut Membre Dernière intervention 4 janvier 2016 - 3 janv. 2016 à 21:04
LisyNila Messages postés 3 Date d'inscription dimanche 3 janvier 2016 Statut Membre Dernière intervention 4 janvier 2016 - 4 janv. 2016 à 19:35

Bonjour,

Alors voilà, je préviens d'entrée, je suis une parfaite novice, et autodidacte qui plus est. Ce qui fait que j'ai sûrement de grosses lacunes pour les bases, donc si vous voyez des erreurs qui vous semblent flagrantes, je m'en excuse d'avance.

Donc, j'ai essayé de faire un code avec un élément "déroulant" au passage de la souris. Le problème est qu'une fois qu'il est ouvert, et bien il dépasse de l'écran de mon navigateur et je n'arrive pas à appliquer l'overflow correctement du coup.

Si jamais vous voyez des choses à améliorer et avez envie/le temps, n'hésitez pas à me l'indiquer.

Voici le code.


<!DOCTYPE html>
<html>
<head>
<title>Pokédex de Lisy</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    
<style type="text/css">
 
      /* Structure */
  #page  {overflow: auto;;
       }
  
  
  #effet {background-image:url(http://www.aht.li/2802428/cran_red.png);
          background-repeat:no-repeat;
          background-position:center;
          overflow:hidden;
          height:402px;
          width:100%;
          margin:auto;
          position:fixed;
          top:0;
          z-index:1;
         }
  
  #effet:hover {height:902px;
               -webkit-transition : ease 1s;
               -moz-transition : ease 1s;
               }
  
  #haut { height:201px;
          width:100%;
          margin:auto;
          position:absolute;
          top:0;
          left:0;
          z-index:3;
        }
  
  #centre {height:201px;
          width:100%;
          margin:auto;
          position:absolute;
          top:140px;
          left:0;
          z-index:4;
          }
  
  #text { height:600px;
          width:450px;
          margin:auto;
          margin-left: auto;
          margin-right: auto;
          position: relative;
          top:205px;
          z-index:3;  
          
        }
  
  #bas {  height:201px;
          width:100%;
          margin:auto;
          position:absolute;
          bottom:0;
          left:0;
          z-index:4;
       }
  
</style>          
</head>

    <body id="page">

      <center><div id="effet">
        
        <center><span id="haut">
          <img src="https://sd-g1.archive-host.com/membres/images/96fca1f8ad096eef966026df6bb4d68055b7866c/Pokedex/haut_red.png"/>
        </span></center>
        
        <center><span id="centre">
          <img src="https://sd-g1.archive-host.com/membres/images/96fca1f8ad096eef966026df6bb4d68055b7866c/Pokedex/centre_red.png"/>
        </span></center>
        
        <center><span id="text">
          <br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
          TEXTE<br/>
        </span></center>
        
        <center><span id="bas">
          <img src="https://sd-g1.archive-host.com/membres/images/96fca1f8ad096eef966026df6bb4d68055b7866c/Pokedex/bas_red.png"/>
        </span></center>

        </div></center>
    </body>  
</html>

Et en bonus un lien vers le résultat actuel : http://forum-test.forums-rpg.com/h8-pokedex-lisy
(j'utilise un forum pour héberger mes pages html =$ )

Merci d'avance pour votre attention.

A voir également:

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38391 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 janvier 2025 4 731
3 janv. 2016 à 21:08

Bonjour,

QU'est-ce qui "dépasse" de ton écran ?
Moi je n'ai aucun souci visiblement....

Mais... as tu vu que tu utilisais des tailles "fixes" pour les hauteurs ?
As tu essayé de les modifier pour voir le résultat ??

Réponse 2 / 3

LisyNila Messages postés 3 Date d'inscription dimanche 3 janvier 2016 Statut Membre Dernière intervention 4 janvier 2016
Modifié par LisyNila le 3/01/2016 à 21:19

Et bien en fonction de la taille des écrans, ça ne rentre tout simplement pas dans la page internet, le mien fait 14.0". Donc je penses à ceux qui auraient un écran aussi/plus petit, et voudrais appliquer un overflow:auto.

Et oui, j'utilise des tailles fixes, je penses que le rendu est mieux ainsi... Maintenant rien n'empêche que j'essai autrement avec des tailles en %, je verrai. Mais dans le cas présent, le problème demeure. =$

Merci de ton aide et la rapidité de réponse.

Réponse 3 / 3

LisyNila Messages postés 3 Date d'inscription dimanche 3 janvier 2016 Statut Membre Dernière intervention 4 janvier 2016
Modifié par LisyNila le 4/01/2016 à 20:05

J'ai testé une V2 en appliquant une hauteur en %, mais le problème d'adaptation à l'écran reste présent.

Je voudrais en fait que le "cadre1" s'adapte au même titre que le reste. Là j'ai mis une hauteur fixe, mais si je mets "auto" ou un pourcentage, j'obtiens ceci.
https://sd-g1.archive-host.com/membres/images/96fca1f8ad096eef966026df6bb4d68055b7866c/Pokedex/Capture_2.PNG

Voici le nouveau code, plus avancé (je suis allé jusqu'au contenu pour que cela illustre bien) et le nouveau lien :
- http://forum-test.forums-rpg.com/h9-pokedex-lisy-v2

<!DOCTYPE html>
<html>
  
<head>
    
<title>Pokédex de Lisy</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link href='https://fonts.googleapis.com/css?family=Dancing+Script:400,700|Merienda:400,700' rel='stylesheet' type='text/css'/>
  
  
<style type="text/css">
 
      /* Structure */

  #page  { overflow-y: auto;
           overflow-x: hidden;
         }
  
  
  #effet {background-image:url(http://www.aht.li/2802428/cran_red.png);
          background-repeat:no-repeat;
          background-position:center;
          overflow:hidden;
          height:402px;
          width:100%;
          margin:auto;
          position:fixed;
          top:0;
          z-index:2;
         }
  
  #effet:hover {height:100%;
               -webkit-transition : ease 1s;
               -moz-transition : ease 1s;
               }

  
  #haut { height:201px;
          width:100%;
          margin:auto;
          position:absolute;
          top:0;
          left:0;
          z-index:3;
        }
  

  #centre {height:119px;
          width:100%;
          margin:auto;
          position:absolute;
          top:140px;
          left:0;
          z-index:4;
          }
  

  #text { width:500px;
          position: relative;
          overflow: auto;
          top: 205px;
          z-index:1;
        }
  

  #cadre1{height: 300px;
          width: 460px;
          position: relative;
          top: 235px;
          display:inline-block;
          padding-top: 5px;
          border: 1px solid #3d2d0f;
          overflow-y: auto;
          overflow-x: visible;
         }
  

  #cadreg{background: rgba(47, 140, 209, 0.6);
          height:70px;
          width:230px;
          position: absolute;
          left: 0px;
          z-index: 1;
          display:inline-block;
          border-top: 1px solid #a5dcff;
          border-radius: 0 20px 0 0;
          padding-top: 5px;
         }
  

  #cadred{background: rgba(47, 140, 209, 0.6);
          height:70px;
          width:230px;
          position: absolute;
          right: 0px;
          z-index:1;
          display:inline-block;
          border-top: 1px solid #a5dcff;
          border-radius: 20px 0 0 0;
          padding-top: 5px;
         }
  

  #teams{width: 480px; 
           height:200px; 
           position: absolute;
           top: 90px;
           left: -10px;
           z-index:1;
           display:block;
          }
  

  #favoris{width: 480px; 
           height:200px; 
           position: absolute;
           top: 200px;
           left: -10px;
           z-index:1;
           display:block;
          }
  

  #bas {  height:201px;
          width:100%;
          margin:auto;
          position:absolute;
          bottom:0;
          left:0;
          z-index:4;
       }
  

      /* Texte */
  
  
  p {  font-family: Arial;
       text-align:left;
       font-size: 14px;
       color: #002c61;
       display: inline;
    }
  
  
  h1 { text-align: left;
       text-decoration: overline underline;
       margin-left: 0px;
       margin-right: 75px;
       font-family: Arial;
       font-size: 20px;
       color: rgba(0, 49, 100, 0.7);
       display: inline;
      }
  
  
  h2 { text-align: right;
       text-decoration: overline underline;
       margin-left: 75px;
       margin-right: 0px;
       font-family: Arial;
       font-size: 20px;
       color: rgba(0, 49, 100, 0.7);
       display: inline;
      }
  
  
  h3 { font-family: Arial;
       text-align:left;
       font-size: 14px;
       color: #a5dcff;
       display: inline;
    }
  
 
</style>          
  
</head>

    <body id="page">

      <div id="effet">
        
        
        <center><div id="haut">
          <img src="https://sd-g1.archive-host.com/membres/images/96fca1f8ad096eef966026df6bb4d68055b7866c/Pokedex/haut_red.png"/>
        </div></center>
        
        
        <center><div id="centre">
          <img src="https://sd-g1.archive-host.com/membres/images/96fca1f8ad096eef966026df6bb4d68055b7866c/Pokedex/centre_red.png"/>
        </div></center>
        
        
        <center><div id="text"><br/>
          <h1>Dresseur</h1> <h2>NILA Lisy</h2>
        </div></center>
        
        
        <center><div id="cadre1">
          
          <center><div id="cadreg">
            <h3><u>Types favoris :</u><br/>
            <img src="http://www.pokepedia.fr/images/b/b7/Type_miniat_acier.png"/><img src="http://www.pokepedia.fr/images/8/8e/Miniat_type_dragon_6x.png"/></h3>
          </div><div id="cadred">
            <h3><u>Régions accessibles :</u></h3><br/>
          <p>Kanto-Johto, Hoenn, Unys, Kalos, Almia.</p>
          </div></center>
          
          <center><iframe id="teams" src="http://forum-test.forums-rpg.com/h12-pokedex-lisy-teams" frameborder="no" scrolling="no"></iframe></center>
          <center><iframe id="favoris" src="http://forum-test.forums-rpg.com/h11-pokedex-lisy-favoris" frameborder="no" scrolling="no"></iframe></center>
          
        </div></center>
        
        
        <center><div id="bas">
          <img src="https://sd-g1.archive-host.com/membres/images/96fca1f8ad096eef966026df6bb4d68055b7866c/Pokedex/bas_red.png"/>
        </div></center>
        
      </div>
    </body>  
    
</html>

Encore merci à ceux qui pourront m'aider. =$

Discussions similaires