18073 sujets

Questions générales et questions de débutants

[résolu] Tuto galerie photo js : pb IE

Bonjour mimimoda et bienvenue parmi nous !

Pour commencer, je t'invite à consulter l'aide de ce forum et plus particulièrement celle concernant les conseils de mise en page de ton post, à savoir : baliser ton code à l'aide des boutons "code" appropriés : Voici comment faire

Smiley smile
dslée fausse manip'
donc voici mon pb :
J'ai un pb avec la galerie photo en JS et IE.
- j'ai modifié l'ordre d'affichage, sur un mouseover, la photo apparait suivie de son titre
- sous FF pas de pb
- mais IE fait bouger la liste contenant les vignettes selon la taille de l'image agrandie. ( idem ac le onmouseclick)
Du coup ma div "galerie" bouge alors que je lui ai indiqué une taille et une hauteur.
C pas très joli et très agaçant.

Merci d'avance pr votre gentilesse! 

[#green]
<body>
  <div id="global">
      <div id="menu1">
       </div>
      <div id="conteneur">
         <div id="galerie">
             <dl id="photo">
             <dd><img id="big_pict" src="Photo1.jpg" alt="carthage"                title="carthage"/></dd>
             <dt>carthage</dt>
             </dl>

             <ul id="galerie_mini">
                 <li><a href="Photo1.jpg" title="carthage"><img src="mini/logo_vif.jpg" alt="carthage" /></a></li>
                  <li><a href="logo-vigneron.jpg" title="mouton"><img src="mini/logo-vigneron.jpg" alt="mouton" /></a></li>
                 <li><a href="Photo1.jpg" title="Titre de la photo 1"><img src="mini/logo_vif.jpg" alt=" Le titre de la photo 1" /></a></li>
                 <li><a href="Photo1.jpg" title="Titre de la photo 2"><img src="mini/logo-vigneron.jpg " alt="Le titre de la photo 2" /></a></li>
              </ul>

           </div><!--fin galerie--> 
       </div><!--fin conteneur-->
    <div id="footer">
 © 2006 - All rights reserved
     </div>

</div><!--fin global-->
</body>
</html>


Euh, oui ...

Tu peux éditer à nouveau ton message si tu fais une fausse manip ... inutile de le poster en triple exemplaire ...

Smiley ohwell

<edit>Posts en doublon supprimés </edit>
Modifié par Vero (04 Apr 2006 - 16:30)
Bonjour,

Après un peu de repos, j'ai adopté une solution un peu barbare mais qui fonctionne :
- j'ai ajouté une cellule de tableau dans ma liste de définition
- ledit tableau s'est vu définir un alignement centré


<div id="conteneur">
			
			<div id="galerie">
				
					<dl id="photo" >
						<dd >
							<table id="photoBox">
								<tr>
									<td><img id="big_pict" src="Photo1.jpg" alt="carthage" title="carthage" />
									</td>
								</tr>
							</table>
						</dd>
						<dt>carthage</dt>
						</dl>
					
						<ul id="galerie_mini">
							<li><a href="Photo1.jpg" title="carthage"><img src="mini/logo_vif.jpg" alt="carthage" /></a></li>
							<li><a href="logo-vigneron.jpg" title="mouton"><img src="mini/logo-vigneron.jpg" alt="mouton" /></a></li>
							<li><a href="mini/logo-vigneron.jpg" title="Titre de la photo 1"><img src="mini/logo_vif.jpg" alt="Le titre de la photo 1" /></a></li>
							<li><a href="Photo1.jpg" title="Titre de la photo 2"><img src="mini/logo-vigneron.jpg" alt="Le titre de la photo 2" /></a></li>
							<li><a href="Photo1.jpg" title="Titre de la photo 1"><img src="mini/logo_vif.jpg" alt="Le titre de la photo 1" /></a></li>
							<li><a href="Photo1.jpg" title="Titre de la photo 2"><img src="mini/logo-vigneron.jpg" alt="Le titre de la photo 2" /></a></li>
							<li><a href="Photo1.jpg" title="Titre de la photo 1"><img src="mini/logo_vif.jpg" alt="Le titre de la photo 1" /></a></li>
							<li><a href="Photo1.jpg" title="Titre de la photo 2"><img src="mini/logo-vigneron.jpg" alt="Le titre de la photo 2" /></a></li>
							<li><a href="Photo1.jpg" title="Titre de la photo 1"><img src="mini/logo_vif.jpg" alt="Le titre de la photo 1" /></a></li>
							<li><a href="Photo1.jpg" title="Titre de la photo 2"><img src="mini/logo-vigneron.jpg" alt="Le titre de la photo 2" /></a></li>
						</ul>
				
			</div><!--fin galerie-->
		</div><!--fin conteneur-->


et voici la css



#galerie {
width: 600px;
height:370px;
margin:auto;
margin-bottom :0;
text-align:center;
position:relative;

}
#photoBox {
width: 600px;
height:280px;
left:0;
margin-bottom :10px;
text-align:middle;
position:absolute;

	}


ul#galerie_mini
{
width: 400px;
margin: auto ;
margin-bottom:0;
list-style-type: none ;
display : inline;

}

ul#galerie_mini li
{
margin-bottom:0;
display : inline;
margin-top : 10px;
}

ul#galerie_mini li a img
{
margin: 2px 1px ;
border: 0;
height:25px;
margin-bottom:0;

}

dl#photo
{
width: 600px;
height:300px;
text-align:center;
clear: both ;
margin: auto ;
margin-bottom:20px;

}

dl#photo dt
{
width: 600px;
height:15px;
margin:auto;
margin-top:0;
text-align: center;
margin-bottom :0px;
font-family: Arial;

color: #607080;

font-size: xx-small;
}

dl#photo dd
{

width: 600px;
height:280px;
margin:auto;

margin-bottom :10px;
text-align:center;

display: block;
}

dl#photo img
{
margin:auto;
border: 0;

}


voilà à bientôt

mimi
Modifié par mimimoda (07 Apr 2006 - 18:41)
Sujet clos
Aller à