• imprimer
  • aide

Forum de discussions « XHTML - HTML - CSS »

Retrouvez les publications relatives à ces discussions dans nos rubriques CSS, HTML, XHTML.

Alignement d'une serie d'image

liste des forums liste des discussions Participer à la discussion

Photo de HechMan Message publié le mardi 10 août 2010 - 15h09 par HechMan.
Bonjour,

Je recherche un moyen d'aligner plusieurs images horizontalement.

Schéma de 3 images centré au mileu de la page (ou d'un div):
________________
| |
|>>[1] [2] [3]<<|
|_______________|

Si il n'y avais que 2 images ou alors 4, je voudrais qu'elles soient toutes 2 ou 4 également alignées en millieu de page/div.
Une idée pour réaliser ceci ?
Merci!
Photo de HechMan Message publié le mardi 10 août 2010 - 15h12 par HechMan.
Hum...
Mon schéma s'est fait tuer pas la mise en page mais je pense que cela reste clair...
Et je ne vois pas de bouton "éditer mon post" :^/

Désolé!
Photo de nours312 Message publié le mercredi 11 août 2010 - 23h30 par nours312. modérateur nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
hello

tu fais un div de dimension variable (width:auto) et tu lui place l'attribut css
margin:auto
bien évidement, tu places tes images dans ce div ;)

@++
Photo de HechMan Message publié le jeudi 12 août 2010 - 10h08 par HechMan.
Bonjour,

Merci de ta réponse mais cela ne marche malheureusement pas...

Mon code CSS:
.vignettes { margin:auto; } /* On ne peut plus simple :) */

Mon code HTML:
<div class="vignettes">
<img class="images" src="image1.jpg" />
<img class="images" src="image2.jpg" />
<img class="images" src="image3.jpg" />
</div>

À savoir, ma classe "images" à pour code CSS:
.images { height:80px; opacity:0.4; }
.images:hover { opacity:1; }
Photo de nours312 Message publié le samedi 14 août 2010 - 19h33 par nours312. modérateur nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
Oups !... en faite il faut que tu attribut une largeur à ta div.vignettes (contrairement à ce que j'avais dis plus haut !... :$ désolé ^^
Photo de HechMan Message publié le lundi 16 août 2010 - 09h47 par HechMan.
Bonjour et merci,

Avec:
.vignettes
{
width:400px;
margin:auto;
}

Cela marche... relativement. :/

Le fait est que le nombre d'images évolue dynamiquement! Or la valeur de "width" reste fixe.
Ici 400px convient pour 4 images, l'hypothétique 5ème "saute une ligne".

Soit je me fait ch*er en PHP à mettre un:
[...]
$monWidth = $nombreImages * 100; /* 100px */
[...]
<div class="vignettes" style="'.$monWidth.'">
[...]
</div>
[...]

Soit la divinité du CSS m'apparaît et me souffle la solution miracle...
Comment faire (en CSS) ?
Merci !
Photo de nours312 Message publié le lundi 16 août 2010 - 10h15 par nours312. modérateur nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
peux tu nous faire parvenir une page en ligne, histoire que l'on se rendent mieux compte de ta problématique !? stp ?
Photo de HechMan Message publié le lundi 16 août 2010 - 11h16 par HechMan.
Voilà M'sieux!

http://lqqt.site11.com/exemple/

À noter j'ai hébergé ça où je pouvais, le site n'a pas de rapport avec cette question (mise à part le fait que je l'ai codé (avec un copain)).

:)
Photo de nours312 Message publié le lundi 16 août 2010 - 12h16 par nours312. modérateur nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
Ha ... ben c'est bien plus simple que ce que j'avais envisagé :D

.vignettes { border:1px solid #00FF00; text-align:center; }
@++
Photo de HechMan Message publié le lundi 16 août 2010 - 17h33 par HechMan.
Effectivement... :)

Merci!

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

ACCÉS COMMUNAUTÉ

Rejoignez ALL HTML

Publiez vos articles, actualités, communiqués ... Donnez votre avis, partagez votre réseau, rencontrez d'autres membres et participez à la vie de la communauté.

Les 5 dernières discussions