[ résolu] Images alignées horizontalement

Bonjour

J' essaie de mettre en place une série d' images alignées horizontalement, je l'ai réalisé à l' aide d'un tableau http://www.larressore.net/essai.html

Je souhaite le faire avec les css

J'ai trouver plusieurs réponses en parcourant le forum alsacreations et d'autres sites (pompage..) Je dois dire que j'ai un peu de mal à m'y retrouver, faut il utiliser des div, une classe ..? Quelle est la meilleure solution, la plus simple et la plus correcte ?

Si vous avez un site qui utilise un tel placement d' images, pouvez vous me donner l' adresse, je me débrouillerai avec le code...

(Cet ensemble d' images est situé dans une div à la suite d'un paragraphe...)

Merci

Bonne journée
Modifié par africa (14 Jun 2007 - 20:12)

Hello,

Plusieurs images mises les unes à la suite des autres restent naturellement sur une ligne lorsqu'on ne fait rien. Ce sont des éléments de type 'inline'.

Cela dit, vu ce que tu cherches à faire, tu as au moins deux possibilités... Soit mettre ces images dans un paragraphe :

<p>
   <img src="..." width="..." height="..." alt="..." />
   <img src="..." width="..." height="..." alt="..." />
   <img src="..." width="..." height="..." alt="..." />
   <img src="..." width="..." height="..." alt="..." />
</p>

soit, de manière plus courante, sous forme de liste :

<ul>
   <li><img src="..." width="..." height="..." alt="..." /></li>
   <li><img src="..." width="..." height="..." alt="..." /></li>
   <li><img src="..." width="..." height="..." alt="..." /></li>
   <li><img src="..." width="..." height="..." alt="..." /></li>
</ul>

auquel cas, tu peux réaligner les images avec un float: left ou un display: inline;
Modifié par koala64 (14 Jun 2007 - 15:11)

koala64 a écrit :
Hello,

Plusieurs images mises les unes à la suite des autres restent naturellement sur une ligne lorsqu'on ne fait rien. Ce sont des éléments de type 'inline'.

Cela dit, vu ce que tu cherches à faire, tu as au moins deux possibilités... Soit mettre ces images dans un paragraphe :

<p>
   <img src="..." width="..." height="..." alt="..." />
   <img src="..." width="..." height="..." alt="..." />
   <img src="..." width="..." height="..." alt="..." />
   <img src="..." width="..." height="..." alt="..." />
</p>

soit, de manière plus courante, sous forme de liste :

<ul>
   <li><img src="..." width="..." height="..." alt="..." /></li>
   <li><img src="..." width="..." height="..." alt="..." /></li>
   <li><img src="..." width="..." height="..." alt="..." /></li>
   <li><img src="..." width="..." height="..." alt="..." /></li>
</ul>

auquel cas, tu peux réaligner les images avec un float: left ou un display: inline;

Merci

J'ai réussi à aligner les images avec la seconde méthode, malheureusement comme j' utilise 2 listes sur la page, cela m'a mis le "souk" ...


Dégats :

- Sur explorer c'est centré, sur firefox, pas centré
- Ma barre de menu en haut (verte) contenant les liens acceuil et contact s' est rétrécie
- La liste dans l' encart droit en haut s' est agrandi et les liens qui étaient verticaux, se sont mis à l' horizontal ...

http://www.larressore.net/essai.html

Je sais qu'il faudrait différencier les 2 listes, mais ....

Pour résumer, je pense que je dois utiliser 2 listes avec des "réglages différents", mais je ne sais pas comment les différencier dans le code css et html.

Bonne soirée


code css de la liste du haut à droite

#bloccadre ul {
margin: 1em 10px 0px 0px; 
padding-top: 0px; 
padding-right: 10px; 
padding-left: 8px; 
padding-bottom: 0px; 
}
#bloccadre li {
margin: 0px;
list-style-type: none;
background-image: url(puce.gif);
background-repeat: no-repeat;
background-position: -8% 75%;
padding-left: 15px;
}

Code css que j'ai rajouté dans la page pour aligner et centrer les images:

<style type="text/css">
ul {
margin: 1em 10px 0px 0px; 
padding-top: 0px; 
padding-right: 10px; 
padding-left: 8px; 
padding-bottom: 0px; 
display: inline; 
}
li {
margin: 0px;
display: inline; 
}

Bonne soirée
Modifié par africa (14 Jun 2007 - 16:48)

africa a écrit :
Pour résumer, je pense que je dois utiliser 2 listes avec des "réglages différents", mais je ne sais pas comment les différencier dans le code css et html.

Tu as correctement identifié le problème que tu rencontres :
en effet, tu appliques les réglages donnés par koala64 sur ... tes deux listes !

Pour contourner cela, il te suffit de placer un identifiant ou une classe sur ta nouvelle liste, comme par exemple :

<ul id="liste_photos>...</ul>

Après, il ne te reste plus qu'à pointer cette liste-ci en indiquant que les instructions ne doivent s'appliquer qu'à elle et à leur éléments de liste :

#liste_photos{
margin: 1em 10px 0px 0px; 
padding-top: 0px; 
padding-right: 10px; 
padding-left: 8px; 
padding-bottom: 0px; 
display: inline; 
}

#liste_photos li {
margin: 0px;
display: inline; 
}

De plus, si je peux me permettre, tu devrais éviter de surcharger ton code avec des balises lorsque ce n'est pas nécessaire.
Par exemple ton <div> blocadre ne contient qu'un seul élément : une liste.
Or, toutes les propriétés que tu lui appliques pourraient directement être appliquées à ta liste ...

merci Koala64, merci sygnus,