Rechercher : dans
Par :

Panel d'images en HTML / CSS

Dernière réponse le 24 jun 2009 à 14:08:54 Mo0oN, le 24 jun 2009 à 11:26:31 
 Signaler ce message aux modérateurs

Bonjour,

Sur une page de mon site Internet, je souhaite mettre de nombreux logos de sociétés.
Les photos font toutes une hauteur différente mais ont une largeur identique de 250 pixels.
Je voudrais que les photos s'empilent les unes sur les autres plutôt qu'elles soient alignées comme c'est le cas pour l'instant. Voici un schéma rapide de ce que je souhaiterais obtenir :

http://img23.imageshack.us/img23/9107/68208738.png

Merci d'avance !

Configuration: Windows Vista Internet Explorer 7.0

Meilleures réponses pour « Panel d'images en HTML / CSS » dans :
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Enlever la bordure sur une image dans un lien en HTML/CSS VoirVous avez fait une image cliquable en mettant une balise IMG au sein d'un lien et le navigateur vous affiche un cadre ou plus exactement une bordure autour de l'image. Il existe deux façons de supprimer cette bordure...
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Gestion des images en HTML VoirComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement...

1

Dalida, le 24 jun 2009 à 12:45:32

Salut,

il faudrait savoir comment tu l'as balisé mais tu peux faire des essais avec {float:left;}.
[ Mathieu ]
Il y a sûrement des pandas pour ne dépendre de rien

Répondre à Dalida

2

Mo0oN, le 24 jun 2009 à 12:53:22

C'est simple, pour l'instant je n'ai rien balisé :)
Ma page fait 800 pixels de large, j'ai redimmensionné mes images à 150 de large en fait (250 c'était trop), et après tout ce que j'ai fait c'est :

<p>
<center>
<img ................ >
<img ................ >
<img ................ >
<img ................ >
<img ................ >
etc.
</center>
</p>

Après, il faudrait peut-être que je passe par une <table>. Je ne sais pas ^^

Répondre à Mo0oN

3

Dalida, le 24 jun 2009 à 12:56:43

pour l'instant je n'ai rien balisé
heu… <p>, <img/>, c'est des balises, donc t'as balisé !
-:oD

corrige le HTML :

<p id="logos">
<img ................ >
<img ................ >
<img ................ >
<img ................ >
<img ................ >
etc.
</p> 

ajoute comme style :
p#logos{
text-align:center;
}
p#logos img{
float:left;
}

et dis nous ce que ça donne, stp.

il faudrait peut-être que je passe par une <table>
surtout pas malheureux, c'est pas fait pour ça !
-;o) [ Mathieu ]
Il y a sûrement des pandas pour ne dépendre de rien

Répondre à Dalida

4

Mo0oN, le 24 jun 2009 à 13:12:53

Ca ne fonctionne pas malheureusement :x
Ca n'a rien changé en fait ^^

Aussi, au rayon culture gé, quelle est la diff entre p#logos et p.logos ? :)

Merci de l'aide en tous cas !

Répondre à Mo0oN

5

Dalida, le 24 jun 2009 à 13:28:05

T'aurais pas une version en ligne qu'on puisse essayer directement dessus ?

et pour ta question :

+ http://www.alsacreations.com/...
[ Mathieu ]
Il y a sûrement des pandas pour ne dépendre de rien

Répondre à Dalida

6

Mo0oN, le 24 jun 2009 à 13:56:46

Merci pour le lien :)

Et non, malheureusement il ne m'est pas possible d'héberger le site :/

En revanche, j'ai fait une impression d'écran. A vrai dire j'avais mal vu, des choses ont changé, mais c'est bizarre. Je ne saurais pas trop expliquer la logique du truc à vrai dire. J'ai mis des traits rouges pour situer le haut des images. L'alignement vertical a fonctionné sur certaines d'entre elles mais pas toutes, je ne comprends pas :/

http://img197.imageshack.us/img197/9554/images2yxb.jpg

Répondre à Mo0oN

7

Dalida, le 24 jun 2009 à 14:00:18

Si tu retaillais tes images et les posais sur des fonds blancs de même taille tu t'embêterais moins.
[ Mathieu ]
Il y a sûrement des pandas pour ne dépendre de rien

Répondre à Dalida

8

 Mo0oN, le 24 jun 2009 à 14:08:54

Oui je sais, mais vu qu'il y en avait 30, j'avais un peu la flemme :)

Mais bon je pense que je vais être obligé d'y passer au final :x

Répondre à Mo0oN
Collection CommentÇaMarche.net