28173 sujets

CSS et mise en forme, CSS3

[Résolu]Affichier des miniatures (photo) sans tableau

Bonjour,

Je cherche à afficher une pages avec des miniatures de photos disposées comme dans un tableau, qui font lien sur les vraies photos. J'ai une largeur de page qui est variable et je désire que ces images soient disposées de manière justifiés, afin d'éviter d'avoir un gros espace d'un côté ou de l'autre. Une difficulté supplémentaire viens du fait que les photos peuvent être en portrait ou en paysage et que je désir pouvoir conserver une mise en page régulière sans avoir à préciser l'orientation à chaque photo.

Pour commencer, je pensais créer une <div> de dimensions fixes plus grande qu'une photo contenant centrée horizontalement et verticalement. Le problème est que si je choisis un display: inline il n'est pas possible de leur fixer une taille (line-height fonctionne, mais pas d'équivalent "line-width"). Et si je choisis block, c'est soit chaque div est l'un en dessous de l'autre, soit j'utilise un float: left, mais alors il n'est plus possible d'avoir mes images justifiées, mais ça reste la meilleure solution que j'ai trouvés jusqu'ici.

Quelqu'un aurait-il une meilleure idée ?
Modifié par Fox (25 Nov 2005 - 16:09)
Salut,

Tu peux déjà commencer par faire un conteneur div d'id gallerie :

<div id="gallerie">


Ensuite, tu crée une CSS


#gallerie {
width:100%; //pas sur de l'utilité
text-align:justify; //pas sur que ça fonctionne avec des images mais qui ne tente rien...
}

#gallerie img { //la on applique un style à TOUTES les images de la gallerie
width:200px;
border:1px solid #000; //je trouve ça jolie une bordure [langue]
}


Je pense qu'avec ça en insérant tes images, elles devraient toutes se mettre à la même taille.
Je te conseille de les écrires de cette façon dans ton code :

<div id="gallerie">
       <img src="photo1.jpg" />
       <img src="photo2.jpg" />
       ....
</div>

Déjà c'est plus clair, ensuite, si tu les colles, j'ai peur qu'il ne fasse qu'une ligne d'image.

Par contre, j'ai pas tester donc je te laisse l'honneur de le faire.
Modifié par trigun (24 Nov 2005 - 17:20)
Salut,
pourquoi ne pas utiliser un tableau puisqu'il répond à toutes les attentes et que son emploi n'est pas contre nature ?
(ou bien je n'ai pas compris le but recherché)

Sinon, utiliser une liste semble être la meilleure solution de rechange

<ul>
<li><img /></li>
...
</ul>

avec une hauteur fixe égale au max des hauteurs de tes photos, et une largeur en pourcentage ou en valeur fixe suivant que tu autorises les passages à la ligne de certaines imagette ou non.
Modifié par Olivier (24 Nov 2005 - 17:22)
Merci pour vos deux propositions.

En ce qui concerne la première, j'arrive a avoir un aspect qui se rapproche de celui désiré en utilisant un center au lieu d'un justify. Malheureusement du fait de la largeur fixe des images, certaines (les portraits) sont déforméesée. Il faudrait qu'elles gardent leur taille d'origine, mais avec des marges entre les photos plus grande. (l'idée est vraiment que les centres des photos soient alignés).

Pour le tableau, le problème vient du fait qu'on doit fixer au départ le nombre d'images par ligne, alors que je désire quelque chose qui s'adapte à la résultion. Par exemple 2 images sur une résolution basse et 6 sur une élevée. En plus c'est plus difficile à générer automatiquement en php, comme il y a des <tr> et des <td>. Et avec la liste j'ai le problème de conserver l'alignement d'une ligne à l'autre si les photos sont de taille différente.

La seule piste que j'aie trouvé, qui est à mon avis un peu bricolage, est pour le moment de remplir mes <div> avec un première image faisant la taille voulue, mais hidden ou en gif transparent afin de forcer la taille du <div>. Et ensuite je met la bonne imagette par dessus. Mon idée de base est vraiment de n'avoir pour chaque image que du code similaire, afin de pouvoir générer tout ça très facilement en php.
Hello, tu peux essayer ça sinon:

le css :
a écrit :
/* -------------card-------------- */


.card-l, .card-r { font-size: 75%; background: #cc9966; text-align: center; margin: 0 10px 10px 0; padding: 10px; width: 160px; float: left; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc }
.card-r {
float: right;
margin: 0 0 15px 15px;
}

.card-title {
margin: 0 0 5px 0;
font-size: 130%;
color: #000099;
}
.card-photo {
margin: 0 auto; padding:0;
border: none;
}
.card-desc {
margin: 5px 10px; padding:0;
text-align: left;
font-size: 100%;
color: #000099
}
.card-info {
margin: 5px 10px 0 10px; padding:0;
text-align: right;
font-size: 90%;
color: #666;
}



et l'html:

a écrit :
<div class="card-l">
<h3 class="card-title">titre</h3>
<p class="card-photo"><img src="images/image.jpg" width="150" height="150" alt="a remplir" /></p>
<p class="card-desc">a remplir</p>
<p class="card-info">a remplir</p>
</div>




<div class="card-r">
<h3 class="card-title">a remplir</h3>
<p class="card-photo"><img src="images/image.png" width="150" height="150" alt="a remplir" /></p>
<p class="card-desc">a remplir</p>
<p class="card-info">a remplir</p>

</div>






Je l'ai trouvé sur un site de tutos, mais ne peut pas te dire lequel...?
Merci, mais ça ne corresponds toujours pas à ce que je veux. Cet exemple met en fait une photo à gauche et une à droite avec un cadre autour. Mais si on répète le code html, ça ne donne rien et tous le reste s'aligne n'importe comment.

Il s'agit de parvenir à remplir de div carrées de taille fixe 160 x 160 px centrées et avec un nombre par ligne dépendant de la résolution.
il faut repeter le code de la facon suivante:

toutes les card-L en premier et ensuite toutes tes card-R,
dans le genre 3 L + 3 R, ainsi de suite.....


<edit> Tu as un exemple en ligne??!!</edit>
Modifié par Maxwell (25 Nov 2005 - 10:00)
une autre possibilité est la méthode que Eric Meyer propose dans son livre "Css par Eric Meyer". Ainsi les images remplissent toute la largeur de l'écran.

html:
<div class="pic ls"><a href="img01.jpg" class="tn"><img src="thumb01.jpg"></a></div>
<div class="pic pt"><a href="img02.jpg" class="tn"><img src="thumb02.jpg"></a></div>
<div class="pic ls"><a href="img03.jpg" class="tn"><img src="thumb03.jpg"></a></div>
<div class="pic ls"><a href="img04.jpg" class="tn"><img src="thumb04.jpg"></a></div>
<div class="pic ls"><a href="img05.jpg" class="tn"><img src="thumb05.jpg"></a></div>
<div class="pic pt"><a href="img06.jpg" class="tn"><img src="thumb06.jpg"></a></div>
<div class="pic ls"><a href="img07.jpg" class="tn"><img src="thumb07.jpg"></a></div>
<div class="pic ls"><a href="img08.jpg" class="tn"><img src="thumb08.jpg"></a></div>
<div class="pic ls"><a href="img09.jpg" class="tn"><img src="thumb09.jpg"></a></div>
<div class="pic pt"><a href="img10.jpg" class="tn"><img src="thumb10.jpg"></a></div>
<div class="pic ls"><a href="img11.jpg" class="tn"><img src="thumb11.jpg"></a></div>
<div class="pic ls"><a href="img12.jpg" class="tn"><img src="thumb12.jpg"></a></div>


css:

body {background: #EED; margin: 1em;}
div#footer {clear: both; padding-top: 3em;
  font: 85% Verdana, sans-serif;}
div.pic {float: left; height: 128px; width: 128px;
  margin: 5px 3px; background: white;
  border: 1px solid black;}
div.pic img {border: none;}

Tout le code cité plus haut provient du site du livre:
http://more.ericmeyeroncss.com/projects/02/
Modifié par hannah (25 Nov 2005 - 10:27)
ou alors utiliser deux classes différentes, une pour les images en paysage et une autre pour les images en portrait. Tu définis les largeur et hauteur des deux classes et tu leur donnes des marges différentes. Puis tu mets le tout en float, (voir plus haut)

par exemple

div.ls img {height: 100; width: 134; margin: 17px 0;}
div.pt img {height: 134; width: 100; margin: 0 17px;}
En effet, ça me semble une bonne solution pour le centrage en hauteur et en largeur, par contre toujours le problème du centrage de l'ensemble des photos horizontalement sur la page.
Pour le centrage horizontal, tu peux eglober le tout dans un conteneur que tu places avec 
margin-left:auto;
margin-right:auto;


Ca ferait l'affaire?
Merci à tous, avec tout ça j'ai eu pas mal de pistes, dont j'ai pu m'en inspirer. Le principal problème venait des div et sur le fait de leur imposer une taille et pour le centrage (en hauteur principalement). On ne peut leur fixer une taille qu'en absolute ou en float, donc alignement à gauche ou à droite et ça ne résoud toujours pas le problème du l'alignement en hauteur. Et si on est en positionnement relative, impossible d'imposer une taille en hauteur (sauf en jouant sur le padding) et les photos peuvent aller jusqu'à dépasser des div dans le sens de la hauteur

La solution qui après tout ça me semble la meilleure consiste à utiliser un container global pour l'alignement horizontal, et à ensuite de n'utiliser que des balises img avec un padding de 17px en haut et en bas pour les paysage et un padding identique mais à gauche et à droite pour les images portrait. Les marges permettent ensuite de définir l'espacement entre les images. Et au besoin on peut même ajouter un cadre autour et un couleur de fond en utilisant un padding plus élevé, mais augmenté de 2x

Voici le code:


html, body {
margin: 0;
background-color: #000000;
color: #FFFFFF;
font-family: verdana, arial, sans-serif;
font-size: 12px;
height: 100%;
width: 100%;
}

#gallerie {
text-align: center;
margin-left: auto;
margin-right: auto;
}

img.ls {
height: 100px;
width: 134px;
margin: 20px;
padding: 17px 0;
}

img.pt {
height: 134px;
width: 100px;
margin: 20px;
padding: 0 17px;
}


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

<html>
<head>
<link rel="stylesheet" type="text/css" href="style3.css" />
<title>photos</title>
</head>
<body>
<div id="gallerie">
    <img src="tn1.jpg" alt="a" class="ls" />
    <img src="tn1.jpg" alt="a" class="ls" />
    <img src="tn2.jpg" alt="a" class="pt" />
    <img src="tn1.jpg" alt="a" class="ls" />
    <img src="tn2.jpg" alt="a" class="pt" />
    <img src="tn1.jpg" alt="a" class="ls" />
    <img src="tn1.jpg" alt="a" class="ls" />
    <img src="tn1.jpg" alt="a" class="ls" />
    <img src="tn1.jpg" alt="a" class="ls" />
    <img src="tn2.jpg" alt="a" class="pt" />
    <img src="tn2.jpg" alt="a" class="pt" />
    <img src="tn2.jpg" alt="a" class="pt" />
    <img src="tn1.jpg" alt="a" class="ls" />
    <img src="tn1.jpg" alt="a" class="ls" />
    <img src="tn2.jpg" alt="a" class="pt" />   
</div>
</body>
</html>


Et pour voir ce que ça donne:
http://www.jeunesselignerolle.com/test/test2.php
http://www.jeunesselignerolle.com/test/test3.php
Modifié par Fox (25 Nov 2005 - 16:22)
Bonjour à tous,

je reviens sur le sujet, mais mon problème est légèrement différent.

Je suis parti sur la base du livre "CSS par Eric Meyer" et l'affichage me convient parfaitement.
Mais je voudrais pouvoir utiliser, au lieu d'un masque type diapositive, directement la photo réduite reprise avec un effet "droplet" de photoshop.
Maheureusement, je n'arrive pas à supprimer le cadre bleu entourant la photo et les coins arrondis disparaissent.
Sujet clos
Aller à