28173 sujets

CSS et mise en forme, CSS3

Bonjour,

j'ai fait une visionneuse de photos (en css+javaScript) à l'aide d'un tutos du site , ça fonctionne tres bien d'ailleurs.
J'ai donc a gauche un div#galerie_mini contenant les vignettes à cliquer qui doivent s'afficher dans #photos dans un "<dl><dt><dd>image</dd></dt></dl>".
Je souhaiterai center l'affichage de l'image dans la div #photos, certaines images sont centrés à l'affichage et d'autres non.

J'applique text-align: center à #photos mais sans effets.

Pour voir la page en question
Merci .
HTML

<div id="galerie">
 
 <div id="photo">       
 <dl>
<dt>Galerie photos de 2005 à 1998</dt>
<dd><img id="big_pict" src="../images/gall00_3.jpg" alt="lebon" /></dd>
 </dl>
  </div>	

	<div id="galerie_mini">
 <img class="minih" src="../images/Galerie_photos.png" alt="Galerie photos" />
<p class="gall">2000</p>
<a href="../images/gall00_1.jpg" title="Titre de la photo 3">
   <img class="minih" src="../images/gall00_1mini.jpg" alt="Le titre de la photo 3" /></a>
 <a href="../images/gall00_2.jpg" title="Titre de la photo 3">
   <img class="minih" src="../images/gall00_2mini.jpg" alt="Le titre de la photo 3" /></a>
</div>


CSS
 	/* GALERIE PHOTOS MINIATURES*/
div#galerie{   
    height: 500px;
	background-color:transparent ;
    padding: 10px ;
	margin: auto auto ;
    font: 0.9em Georgia, serif ;
	background:url(./images/fondgall.png);background-repeat: no-repeat;}

div#galerie_mini{  
     background: url(./images/fond_vignettes.png) ;
	 float:left;
	 border-width: thin;
	 border-style: solid; 
	 border-color: #666600;
	 border-size: 1px;
     overflow:auto;
	 width:276px; 
	 height: 453px;
	 margin: 81px 15px 0px 2px ;
	 padding: 4px ;}

div#galerie_mini a{ padding:0 ;margin: 0;}

div#galerie_mini a img {margin:0 ;padding:0;}
div#galerie_mini a     {margin:0 ;padding:0;}

div#photo{ position:absolute; 
           left: 310px;
           top:100px;
		   height: 480px;
           text-align:center; 
           margin:0 auto; 
           display:inline; 
		   background: url(./images/tracesdepneus.png);}		

div#photo h1{font: italic 1em/1em Georgia, serif ;
            padding:0; text-align:center;
			margin:0px 15px 0px 0px;
            color: #dcb ;}

div#photo p        { top:0px; margin: 0; height:480px ;text-align:center;}

div#photo img  {  padding:0 ;margin:0 auto;}

dd { padding:0; margin: 0 auto;}
dt { padding:0; margin: 0 auto; }

dl { text-align:center; padding:0; margin: 0 auto;}
div#galerie_mini a img.minih {margin: 0px 3px 0px 0px; padding:0; text-align:center;}

Modifié par Hum (08 Feb 2006 - 15:26)
Salut !
Merci. Mais c'est sans résultats. J'avais essayé déja.
Modifié par Hum (08 Feb 2006 - 14:44)
Salut,

Il manquerait pas la taille en largeur de ton div#photo ?
Parce que je ne vois pas comment il peut centrer la photo si ton div fait la largeur de la photo !?

Moi j'aurai laissé le div#photo dans le flux, et je lui aurais donné une marge à gauche (afin d'y mettre le div#galerie_mini). Comme ca il fait toute la largeur du div#galerie (moins la marge) et tu centre ton image...

(Je suis peut être pas clair... peut être... Smiley smile )