Images qui dépassent de leur contenu

Bonjour,

je viens de réaliser une galerie de photo présentant les réalisations d'une entreprise. Voici la page : http://www.energies-renouvelables-49.fr/test/realisations.php

J'ai mis à chaque réalisation 5 images sur une ligne avec mon navigateur et ma résolution pas de problème mais dès que je passe sur une résolution d'écran plus petite, la dernière image de la ligne passe en dessous de la réalisation suivante. je n'arrive pas à adapter de manière automatique. Pourriez-vous SVP m'y aider ?

Voici le code HTML correspondant :

	<div id="photo">
		
		<p> Chauffe-eau solaire en capteurs sous vide avec appoint chaudi&egrave;re gaz geminox. Juin 2009. </p>
		<div id="photo1">
		<ul class="topic">
		<li><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>

			<li><a href="realisations/solaires/saintjean/1a.jpg"><img src="realisations/solaires/saintjean/1.png" alt="Chauffe-eau solaire" title="Chauffe-eau solaire" /></a></li>
			<li><a href="realisations/solaires/saintjean/2a.jpg"><img src="realisations/solaires/saintjean/2.png" alt="Chauffe-eau solaire" title="Chauffe-eau solaire" /></a></li>
			<li><a href="realisations/solaires/saintjean/3a.jpg"><img src="realisations/solaires/saintjean/3.png" alt="Chaudi&egrave;re gaz, ballon d'accumulation et r&eacute;gulation de chauffe-eau solaire" title="Chaudi&egrave;re gaz, ballon d'accumulation et r&eacute;gulation de chauffe-eau solaire" /></a></li>
			<li><a href="realisations/solaires/saintjean/4a.jpg"><img src="realisations/solaires/saintjean/4.png" alt="Chauffe-eau solaire" title="Chauffe-eau solaire" /></a></li>
			<li><a href="realisations/solaires/saintjean/5a.jpg"><img src="realisations/solaires/saintjean/5.png" alt="Chaudi&egrave;re gaz, ballon d'accumulation et r&eacute;gulation de chauffe-eau solaire" title="Chaudi&egrave;re gaz, ballon d'accumulation et r&eacute;gulation de chauffe-eau solaire" /></a></li>
				
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		</ul>
		</div>
		</div>

et le css

#photo {margin: auto;  text-align: center;}

#photo ul.topic {padding:0; margin:0; list-style:none; width:100%; height:auto; position:relative; z-index:10;}

#photo ul.topic li {display:block; width:125px; height:155px;}

#photo ul.topic li.active a {color:#000; background:#bbb;}

#photo ul.topic li a:hover, #photo ul.topic li:hover a {color:#fff; background:#aaa;}

#photo ul.topic li ul {
display:block; position:absolute; left:0; list-style:none; 
padding:0; margin:0; height:auto; background:#ddd; width:100%; z-index:1;}

#photo ul.topic li a:hover ul, #photo ul.topic li:hover ul {
display:block; position:absolute; left:0; List-style:none; padding:0; 
margin:0; height:auto; background:#ddd; width:100%; z-index:100;}

#photo ul.topic li ul li {display:inline; width:172px; height:auto; float:left; border:1px solid #fff; margin:10px;}

#photo ul.topic li ul li a {
display:block; width:170px; height:auto; cursor:default; float:left; 
text-decoration:none; background:#444; border:1px solid #888;}

#photo ul.topic li ul li a img {display:block; width:160px; height:120px; border:5px solid #eee;}

#photo ul.topic li a:hover ul li a:hover, #photo ul.topic li:hover ul li a:hover {white-space:normal; position:relative;}

#photo ul.topic li a:hover ul li a:hover img, #photo ul.topic li:hover ul li a:hover img 
{position:absolute; left:-50px; top:-32px; width:320px; height:240px; border-color:#fff;}

#photo1{display:block;overflow : visible; background:#ddd; margin-top:20px; margin-bottom:40px;}

#photo2, #photo3, #photo4 ,#photo5 ,#photo6 ,#photo7 ,#photo8{display:block;overflow : visible; background:#ddd; margin-top:15px; margin-bottom:40px;}

Salut,

Dès l'instant ou tu fixe un height: 155px à ton cadre gris, et plus précisément quand tu fixe une hauteur à un quelconque élément d'une page, il faut s'attendre à ce que le contenu disparaisse ou dépasse selon les cas. Quand tu fais un site, s'il est opportun de fixer des largeurs il vaut mieux généralement éviter de fixer des hauteurs pour cette raison.

Bonjour
Je ne pense pas que tu ai un problème de résolution, mais taille de navigateur. Je suis en 1280 x 1024 (résolution plutôt standard) mais j'ai mon navigateur qui ne fait que la moitié de mon écran, du coup je vois trois photos sur une ligne, et deux en dessous. Le gros souci pour moi n'est pas tant de n'avoir pas les 5 sur une ligne, mais le fait que celles du dessous soient "cachées" par celles du dessus.

Par contre je trouve que tu te compliques la vie pour rien. Je ne comprend pas pourquoi tu mets les images dans des li alors qu'il suffit de les laisser se mettre les unes a coté des autres (à la rigueur dans des spans) dans le flux. (Bon sauf si tes li sont indispensables pour des raisons de plugin/jquery/cms, dans ce cas j'ai rien dit ^^)

Pour les avoir toujours en une seul ligne quelque soit la taille du navigateur, tu peux essayer de redimensionner les images en fonction de la taille de ton navigateur. Tu peux utiliser les media queries @media et cibler la taille de ton navigateur mais tu vas t'amuser à faire pleins de tests et la fonctionnalité n'est pas encore supportée par IE7 et 8 il va falloir ruser avec du script
ça te donnerais un code du genre :

@media all and (min-width: 1024px) {
img {
width: xxx px;
}
}

@media all and (max-width: 900px) {
img {
width: xxx px;
 }
}

... etc

Bonjour,

Merci pour vos réponses. Effectivement, si je définis un height de 155 px, il est logique que le cadre ne s'adapte pas sur la hauteur. j'ai donc essayé de remplacer :

#photo ul.topic li {display:block; width:125px; height:155px;}

par

#photo ul.topic li {display:block; width:125px; height:auto;}

mais j'obtiens le résultat suivant :



Par ailleurs, la structure est effectivement trop compliquée mais jusqu'ici elle me semblait fonctionner pour l'agrandissement des images au passage de la sourie et je préfèrerais ne pas y toucher.

merci.

Salut,

Je ne suis pas sûr d'avoir compris ce que tu veux obtenir mais, si tu veux que tes photos surnuméraires passent à la ligne et soient visibles dans le cadre gris (c'est à dire que celui-ci s'agrandisse), il te faut une propriété

clear:left

appliquée à un élément qui suit les photos, celles-ci étant en flottant.

Le plus logique est sans doute d'appliquer cette règle au P qui suit la UL. Bien sûr, tu dois également dans ce cas débrider la hauteur de l'UL.

(sinon, tu garde une hauteur de 155px, tu rajoute

overflow:auto

et tu auras un défilement vertical, ce qui n'est peut-être pas le plus naturel dans ton site mais qui maintiendrait ton design fixe)

Bonjour,

Ton design est fluide, pourquoi ne pas simplement lui donner une largeur fixe de 960 voire 990 px ce qui permettras de gérer parfaitement l'emplacement de tes images et cela sera parfaitement visible dans la majeur partie des résolutions.

Sinon là ce n'est qu'un avis personnel j'ai horreur d'avoir des images qui me sautent à la tête quand ma souris rencontre une vignettes surtout si je ne l'est pas demandé.

Re-Bonjour,

Merci toujours pour les réponses. Pour clarifier, voici une première impression d'image de ce que j'obtiens sur une petite résolution d'écran (et que je souhaite éviter)



Et voici ce que j'aimerais obtenir de façon automatique (j'ai fixé une hauteur plus grande pour que ce soit parlant)



j'ai essayé le

 clear:left 

sur le p :

 <p class="clear"> 

et

 #photo  p.clear {clear:left;} 

Mais j'obtiens un blanc entre mes séries de photo de la même hauteur que celles-ci. Ce qui n'est pas souhaitable.

Concernant la fixation de la suggestion de largeur fixe. je travaille depuis le début en largeur variable et souhaite le conserver...

Qui dit mieux ?

Merci.

a écrit :
Concernant la fixation de la suggestion de largeur fixe. je travaille depuis le début en largeur variable et souhaite le conserver...

Une demande particulière du client ?

Parce que là à part casser l'esthétique et l'unité de ta galerie (retour à la ligne des images), je vois pas l'intérêt technique à vouloir absolument garder un site fluide.

En plus vu qu'il n'y a semble t-il aucun max-width sur de très hautes résolutions cela risque d'être visuellement assez particulier.

Bonjour,

Merci pour vos réponses. Après réflexion, j'ai opté pour une galerie de diaporama pour chaque réalisation. C'est beaucoup plus simple à gérer :

http://www.energies-renouvelables-49.fr/realisations.php

A +