28173 sujets

CSS et mise en forme, CSS3

[RESOLU]hauteur de ul pour défilement miniature dans galerie photos

Bonjour,
j'ai fait une galerie de photos avec aperçus miniatures via ce tuto et ça marche très bien.
J'ai arrangé le truc en plaçant les miniatures a gauche, et les images s'affichent à droite.
Maintenant ayant beaucoup de miniatures , je souhaiterai qu'elles soient contenues dans un "bloc" qui ferait a peu pres 500px de hauteur et 380px de largeur avec un scroll vertical pour le defilement.
Pour la largeur j'ai visiblement réussi, mais la hauteur y'a rien à faire.

Merci d'avance.

Html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  
       
<head>
<!--Page travaux persos -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="keywords" lang="fr" content="memoire" />
<title>Galerie photos de motos à courroies</title>
<style type="text/css">
 @import url(../text1.css);
 </style>
<script type="text/javascript" src="../galerie.js">
</script>

</head>
 
        <body>

<div id="headergal">
  <div id="menugeneral"> <a class="menu" href="../index.html">.::&nbsp;&nbsp;Accueil&nbsp;</a> 
    &nbsp;|&nbsp; <a class="menu" href="inscription.html">&nbsp;Inscription ballade&nbsp;</a>&nbsp;|&nbsp; 
    <a class="menu" href="historique05.html">&nbsp;Historique&nbsp;</a>&nbsp;|&nbsp; 
    <a class="menu" href="mailto:mailcourroies@yahoo.fr"> &nbsp;Contactez nous&nbsp;&nbsp;::.</a> 
  </div>
</div>

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

<ul id="galerie_mini">
    <li><a href="../images/gall00_1.jpg" title="Titre de la photo 2"><img src="../images/minitest.jpg" alt="Le titre de la photo 2" /></a></li>
    <li><a href="../images/gall00_2.jpg" title="Titre de la photo 3"><img src="../images/minitest.jpg" alt="Le titre de la photo 3" /></a></li>
    <li><a href="../images/gall05_2.jpg" title="Titre de la photo 4"><img src="../images/minitest.jpg" alt="Le titre de la photo 4" /></a></li>
    <li><a href="../images/gall00_3.jpg" title="Hi JackX"><img src="../images/minitest.jpg" alt="Le titre de la photo 5" /></a></li>
    <li><a href="../images/gall00_4.jpg" title="Titre de la photo 6"><img src="../images/minitest.jpg" alt="Le titre de la photo 6" /></a></li>
    <li><a href="../images/gall00_5.jpg" title="Titre de la photo 7"><img src="../images/minitest.jpg"alt="Le titre de la photo 7" /></a></li>
    <li><a href="../images/gall05_6.jpg" title="Titre de la photo 8"><img src="../images/minitest.jpg" alt="Le titre de la photo 8" /></a></li>
    <li><a href="../images/gall05_7.jpg" title="Titre de la photo 9"><img src="../images/minitest.jpg" alt="Le titre de la photo 9" /></a></li>
    <li><a href="../images/gall05_8.jpg" title="Titre de la photo 10"><img src="../images/minitest.jpg" alt="Le titre de la photo 9" /></a></li>
    <li><a href="../images/gall05_9.jpg" title="Titre de la photo 11"><img src="../images/minitest.jpg" alt="Le titre de la photo 9" /></a></li>
    <li><a href="../images/gall00_1.jpg" title="Titre de la photo 2"><img src="../images/minitest.jpg" alt="Le titre de la photo 2" /></a></li>
    <li><a href="../images/gall00_2.jpg" title="Titre de la photo 3"><img src="../images/minitest.jpg" alt="Le titre de la photo 3" /></a></li>
    <li><a href="../images/gall05_2.jpg" title="Titre de la photo 4"><img src="../images/minitest.jpg" alt="Le titre de la photo 4" /></a></li>
    <li><a href="../images/gall00_3.jpg" title="Hi JackX"><img src="../images/minitest.jpg" alt="Le titre de la photo 5" /></a></li>
    <li><a href="../images/gall00_4.jpg" title="Titre de la photo 6"><img src="../images/minitest.jpg" alt="Le titre de la photo 6" /></a></li>
    <li><a href="../images/gall00_5.jpg" title="Titre de la photo 7"><img src="../images/minitest.jpg"alt="Le titre de la photo 7" /></a></li>
    <li><a href="../images/gall05_6.jpg" title="Titre de la photo 8"><img src="../images/minitest.jpg" alt="Le titre de la photo 8" /></a></li>
    <li><a href="../images/gall05_7.jpg" title="Titre de la photo 9"><img src="../images/minitest.jpg" alt="Le titre de la photo 9" /></a></li>
    <li><a href="../images/gall05_8.jpg" title="Titre de la photo 10"><img src="../images/minitest.jpg" alt="Le titre de la photo 9" /></a></li>
    <li><a href="../images/gall05_9.jpg" title="Titre de la photo 11"><img src="../images/minitest.jpg" alt="Le titre de la photo 9" /></a></li>
    <li><a href="../images/gall05_voiturebleu.jpg.jpg" title="Titre de la photo 12"><img src="../images/minitest.jpg" alt="Le titre de la photo 9" /></a></li>
    <li><a href="../images/gall05_voiturebleu.jpg.jpg" title="Titre de la photo 12"><img src="../images/minitest.jpg" alt="Le titre de la photo 9" /></a></li>
    <li><a href="../images/gall05_voiturebleu.jpg.jpg" title="Titre de la photo 12"><img src="../images/minitest.jpg" alt="Le titre de la photo 9" /></a></li>
    <li><a href="../images/gall05_voiturebleu.jpg.jpg" title="Titre de la photo 12"><img src="../images/minitest.jpg" alt="Le titre de la photo 9" /></a></li>
    <li><a href="../images/gall05_voiturebleu.jpg.jpg" title="Titre de la photo 12"><img src="../images/minitest.jpg" alt="Le titre de la photo 9" /></a></li>
    <li><a href="../images/gall05_voiturebleu.jpg.jpg" title="Titre de la photo 12"><img src="../images/minitest.jpg" alt="Le titre de la photo 9" /></a></li>
    <li><a href="../images/gall05_voiturebleu.jpg.jpg" title="Titre de la photo 12"><img src="../images/minitest.jpg" alt="Le titre de la photo 9" /></a></li>
    <li><a href="../images/gall05_voiturebleu.jpg.jpg" title="Titre de la photo 12"><img src="../images/minitest.jpg" alt="Le titre de la photo 9" /></a></li>
    <li><a href="../images/gall05_voiturebleu.jpg.jpg" title="Titre de la photo 12"><img src="../images/minitest.jpg" alt="Le titre de la photo 9" /></a></li>
  </ul>
	
</div>

<p class="floatright"><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> 
  <a href="http://validator.w3.org/check?uri=referer"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="CSS2 valide" height="31" width="88" /></a> 
</p>

	</body>
</html>


CSS:
  /* GALERIE PHOTOS MINIATURES*/
div#galerie{   
    width: 100% ;
	height: 600px;
	background-color:transparent ;
    padding: 10px ;
	margin: auto auto ;
	text-align: center ;
	font: 0.9em Georgia, serif ;}

ul#galerie_mini{   
    width:380px; 
	height: 500px;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;}

ul#galerie_mini li{float: left ; padding: 0;margin: 0;}

ul#galerie_mini li a img {margin: 1px 1px 1px 1px ;}

dl#photo{float:right; margin: 0 auto ;}

dl#photo dt{font: italic 1em/1em Georgia, serif ;
            padding:0;
			margin:0 15px 0 0;
            color: #dcb ;}

dl#photo dd{ top:0px;
             margin: 10px auto 0px auto ; 
             height: 480px; }

dl#photo img{margin:0;}

dd {text-align:center;}

Modifié par Hum (07 Jun 2011 - 10:40)
Bonjour,

Essaye :
ul#galerie_mini{   

    width:380px; 

	[b]line-[/b]height: 500px;

        [b]display:block;[/b]

	margin: 0 ;

	padding: 0 ;

	list-style-type: none ;}


(il me semble...).

A vérifier si le "display" est ou non indispensable.
Modifié par jcm (28 Jan 2006 - 15:18)
Modérateur
bonjour,
ul n'est pas vraiment pas adapter pour ce genre de comportement, un div conteneur de la liste serait plus adapté et plus "passe-partout".
pour obtenir ton resultat , au moins dans firefoxe, il faut adjoindre un overflow:auto; (de plus tes images (tes <li> ) sont placées en float , tout ce qu'il faut pour perturber l'affichage de ul Smiley smile ).
exemple de css a appliqué a ul:
ul#galerie_mini{   
    
	width:150px; 
	height: 500px;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
overflow:auto;}

<edit>UL est en pricipe un element block, mais avec des comportements legerement differents</edit>
Le mieux est peut-etre un conteneur.

aplus
Modifié par gcyrillus (28 Jan 2006 - 15:26)
Salut,

JCM : ça n'a pas fonctionné. Merci quand meme.

GCYRILLUS : Ca fonctionne, j'en suis donc là mais tu pourrait dévelloper un peu s'il te plait quand tu dis (de plus tes images (tes <li> ) sont placées en float , tout ce qu'il faut pour perturber l'affichage de ul smile ). tu me fais peur.

Un div aves des images dedans avec des <br /> pour créer des lignes de trois miniatures? et le javascript il va etre heureux avec ça? Bon. Je suis parti a rebidouiller...
EDIT : je viens d'essayer, ça me fait sauter le js...j'ai donc remplacé gallerie mini et photos par des div et ajuster ds la feuille de style (changé les ul#galerie en div#gallerie. Puis j'ai beau regarder le fichier js je m"en sort pas.

Merci
Modifié par Hum (07 Jun 2011 - 10:41)
Modérateur
heu, desole, j'etais pas la

je voulais simplement rappeler que des element flottant depassent de leur conteneur (pas dans IE) si on n'y prend pas garde, et puis <ul> est une balise qui est affiché, "interpreté" differement par les navigateurs, elle sert basiquement bien a determiner le "genre de liste (ex :<ol> une des soeur) et surtout a ouvrir et fermer la liste .
Quand je parlais de div conteneur je ne voulais pas dire de te defaire de ta liste qui me semble appropriée, mais de l'englober dans un conteneur auquel tu applique ensuite les dimensions.
Ta liste ensuite prendra place dans le conteneur et le conteneur affichera normalement la barre de scroll, le "overflow:auto; risque de devoir rester necessaire pour empecher IE de readdapter la hauteur du conteneur.

D'ailleurs, bizarrement ta liste ce trouve sous la grande 'image dans mon IE, peut-etre le margin:0 auto; a dl#photo qui ejecte la liste (ul#galerie_minil)en dessous .
Peut-etre qu'un float pour ces 2 zones , plus une dimension en largeur fixe et un margin:auto; a "div#galerie" permettrais de garder l'ensemble aligner cote a cote dans IE ...

Desole de ce quiproquo.

a plus
Modifié par gcyrillus (29 Jan 2006 - 01:19)
Sujet clos
Aller à