HTML/CSS : difficulté de coordination hover/overflow

LisyNila Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
LisyNila Messages postés 3 Date d'inscription Statut Membre Dernière intervention - 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.

Afficher la suite

A voir également:

Hover overflow
Editeur html - Télécharger - HTML
Espace en html ✓ - Forum HTML
Espace html ✓ - Forum Webmastering
Html download - Télécharger - HTML
/Var/www/html/index.html ✓ - Forum Linux / Unix

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 Statut Membre Dernière intervention

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 Statut Membre Dernière intervention

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

Votre réponse

Discussions similaires