18073 sujets

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

[résolu] Galerie photo JS - Pb d'alignement des miniatures.

J'ai utilisé la galerie photo proposée par Alsacréations (loué soit-ils) mais j'ai un p'tit blem.
Les miniatures s'affichent en escalier. Pour comprendre, voir directement sur http://marschuppphoto.blogspot.com/2006/05/60m.html .
Je n'ai pas modifié le JS, non plus le code html. J'ai un peu touché au CSS :
div#galerie {
	/* width: 700px;
	background: #eed;
	border: 1px solid #dcb;*/
	padding: 15px;
	margin: 15px 30px;
	text-align: center;
	font: 0.9em Georgia, serif;
}

ul#galerie_mini {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul#galerie_mini li {
	float: left;
}

ul#galerie_mini li a img {
	margin: 2px 1px;
	border: 1px solid #dcb;
        height: 75px;
}

dl#photo {
	clear: both;
	margin: 0 auto;
}

dl#photo dt {
	font: italic 2.5em/1.5em Georgia, serif;
	color: #dcb;
}

dl#photo dd {
	margin: 0;
}

dl#photo img {
	border: 1px solid #dcb;
        width:600px;
}

Mais rien de bien méchant.
Y a-t-il une explication ? Smiley lol
Modifié par marschupp (22 May 2006 - 16:17)
Modérateur
bonjour,

oui, un <br /> qui se glisse entre chaque item de liste .

++

<edit >tu peut les sortir du flux comme ceci: 
div#galerie br {position:absolute;}

pour t'en convaincre Smiley cligne , le mieux c'est de nae pas les avoir dans le html ...
Modifié par gcyrillus (12 May 2006 - 01:36)
gcyrillus a écrit :
tu peut les sortir du flux comme ceci:
div#galerie br {position:absolute;}

Donc j'ai juste rajouté la ligne dans mon CSS et ca marche.
Mais pourquoi, je ne comprend pas ? Smiley eek
Modifié par marschupp (12 May 2006 - 13:30)
Modérateur
bonsoir,

dans le source de la page tu avais cette configuration:
<ul>
<li>ton lien , ton image </li>  <br />
<li>ton lien , ton image </li>  etc ,...
</ul>

le <br /> est en trop !, c'est ce qu'il faut enlever. Comme le "css" le simule en les sortant du flux. Bien entendu la solution n'est pas le "css" , mais de les enlever du code "html", vu que tu n'en as pas besoin.
Garde le display:inline; dans le css pour cette liste (li.mini_img ... je crois de memoire) et enleve le float:left; la liste de petite image sera en ligne et centrée comme tu semblait le souhaiter .
(ton lien est mal indiqué dans le premier post et ta page n'existe plus aujourd'hui !? .)

++
C marrant, cause dans le code initial de ma page, il n'y a pas de "<br />" mais l'astuce CSS fonctionne. Spé. Merci blogger.
Sinon, la page n'existait plus, mais c'est juste moi qui est fait une p'tite erreur de manip, sorry. C'est de retour.
Pour ceux qui passerait par ici dans les prochains jours (mai 2006), si la page est toute bizarre, c'est normal, je bosse encore dessus.
Modérateur
C'est etonnant ce que tu dis , car voila le source de ta liste en ligne: 
<ul id="galerie_mini"><br>  <li><a href="http://photos1.blogger.com/blogger/2112/1333/1600/pict0036.jpg" title="Up in the tower"><img src="http://photos1.blogger.com/blogger/2112/1333/320/pict0036.jpg" alt="Up in the tower"></a>
</li><br>  <li><a href="http://photos1.blogger.com/blogger/2112/1333/1600/pict0033.jpg" title="Happy Johannes"><img src="http://photos1.blogger.com/blogger/2112/1333/320/pict0033.jpg" alt="Happy Johannes"></a></li><br>  <li><a href="http://photos1.blogger.com/blogger/2112/1333/1600/pict0034.jpg" title="Camera and security"><img src="http://photos1.blogger.com/blogger/2112/1333/320/pict0034.jpg" alt="Camera and security"></a></li><br>  <li><a href="http://photos1.blogger.com/blogger/2112/1333/1600/pict0035.jpg" title="Tower"><img src="http://photos1.blogger.com/blogger/2112/1333/320/pict0035.jpg" alt="Tower"></a></li><br>  <li><a href="http://photos1.blogger.com/blogger/2112/1333/1600/pict0040.jpg" title="way down"><img src="http://photos1.blogger.com/blogger/2112/1333/320/pict0040.jpg" alt="Way down"></a></li><br></ul>


il y a bien un <br> entre chaque item de liste ... si le css n'interfere pas dans d'autre pages, tu as alors une solution provisoire .

bonne continuation.
J'ai compris d'où vient le <br />. Et effectivement, merci blogger...
Dans mon code source (celui que j'ai écris), j'ai :
<li><a ...><img ...></a></li>
<li><a ...><img ...></a></li>

Et dans la page générée, on obtient : Smiley ohwell 
<li><a ...><img></li><br /><li><a ...><img></li>


Par contre, si je tape comme ca, ca marche (pas de <br /> ajouté) : Smiley biggrin 
<li><a ...><img></li><li><a ...><img></li>


Donc l'astuce CSS marche, ms maintenant je sais aussi comment m'en passer. Smiley cligne
Sujet clos
Aller à