Probleme avec balise <img/>

Probleme avec balise <img/> - HTML/CSS - Programmation

Marsh Posté le 24-10-2010 à 00:33:01    

Bonjour, j'ai un soucis bien ciblé que je n'arrive pas a régler !
 
j'ai un site ou je montre une bank d'images exemple ici --> http://www.geekclan.net/expo/gallerie/pc/pc.php
 
tous marche bien , quand je met mon pointeur sur une petite image, une grande apparait a droite !
le probleme c'est que quand j'arrive a la derniere, l'image est caché elle apparait en dessous ! :s
 
donc existe t'il un code pour que l'image reste dans le cadre du navigateur ?
 
voila les codes qui sont pour les images
 
 
 
#retour
{
 position:relative;
 float:left;
}
#vignette {
 width: 40%;
 float:left;
}
#vignette a {
 display: block;
 float: left;
 margin: 0 0 30px 20px;
 width: 70px;
 height: 70px;
 color:white;
 border: 0px solid #000;
}
#vignette a img {
 width: 70px;
 height: 70px;
 border: 0;
 }
#vignette a:hover img {
 position: absolute;
 width: 480px;
 height:360px;
 left:50%;
 border: 1px solid #333;
}
 
    </style>
   
   </head>
 
   <body>
   
   <div id="baniere"><a href="../../../index.php"><img src="../../../img/baniere.png" alt="Baniere" /></a>
   
   <div id="retour">
  <a class="retour" href="../../../expogallerie.php"><img src="../../../img/retour.png" alt="Retour"/></a>
   
 </div>
 
      <div id="cadre">
   <div id="vignette">
   
        <a><img src="photo/t1.jpg" title="" alt="1" />Mc Intosh</a>  
     
        <a><img src="photo/t2.jpg" title="" alt="2" />Math</a>
     
        <a><img src="photo/t3.jpg" title="" alt="3" />Dogviper</a>

Reply

Marsh Posté le 24-10-2010 à 00:33:01   

Reply

Marsh Posté le 25-10-2010 à 14:38:01    

Il faudrait gérer le dépassement, avec la propriété overflow en CSS.
 
Par défaut, les blocs sont en overflow:visible; ce qui implique :

Citation :

The overflow is not clipped. It renders outside the element's box. This is default
 
(source http://www.w3schools.com/css/pr_pos_overflow.asp )


En plus du lien précité, voir http://www.zonecss.fr/style_css/fe [...] low_y.html

Reply

Marsh Posté le 25-10-2010 à 14:40:54    

ok cool merci , ca va bien m'arranger pour mon site :p

Reply

Marsh Posté le 25-10-2010 à 14:46:51    

je test , je voi le concept mais en faite l'image ne reste pas dans le "cadre" du navigateur.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed