all html : Le portail des webmaster

liste des forums liste des discussions Participer à la discussion

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!

• participer

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é!

• participer

Message publié le mercredi 11 août 2010 - 23h30 par nours312. 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 ;)

@++

• participer

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; }

• participer

Message publié le samedi 14 août 2010 - 19h33 par nours312. 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é ^^

• participer

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 !

• participer

Message publié le lundi 16 août 2010 - 10h15 par nours312. 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 ?

• participer

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)).

:)

• participer

Message publié le lundi 16 août 2010 - 12h16 par nours312. 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; }
@++

• participer

Message publié le lundi 16 août 2010 - 17h33 par HechMan.

Effectivement... :)

Merci!

• participer

liste des forums liste des discussions Participer à la discussion

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