Panel d'images en HTML / CSS

Résolu/Fermé

Mo0oN Messages postés 59 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 26 janvier 2012 - 24 juin 2009 à 11:26
Mo0oN Messages postés 59 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 26 janvier 2012 - 24 juin 2009 à 14:08

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 !

A voir également:

Panel d'images en HTML / CSS
Control panel - Télécharger - Divers Utilitaires
Amazon shopper panel - Accueil - Guide confidentialité
Editeur html - Télécharger - HTML
Des images - Guide
Br html ✓ - Forum Webmastering

8 réponses

Réponse 1 / 8

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
24 juin 2009 à 12:45

salut,

il faudrait savoir comment tu l'as balisé mais tu peux faire des essais avec {float:left;}.

Réponse 2 / 8

Mo0oN Messages postés 59 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 26 janvier 2012 2
24 juin 2009 à 12:53

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éponse 3 / 8

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
24 juin 2009 à 12:56

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)

Réponse 4 / 8

Mo0oN Messages postés 59 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 26 janvier 2012 2
24 juin 2009 à 13:12

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 !

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
24 juin 2009 à 13:28

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

et pour ta question :

+ https://www.alsacreations.com/article/lire/535-Quelle-est-la-difference-entre-une-classe-et-un-id.html

Réponse 6 / 8

Mo0oN Messages postés 59 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 26 janvier 2012 2
24 juin 2009 à 13:56

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éponse 7 / 8

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
24 juin 2009 à 14:00

si tu retaillais tes images et les posais sur des fonds blancs de même taille tu t'embêterais moins.

Réponse 8 / 8

Mo0oN Messages postés 59 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 26 janvier 2012 2
24 juin 2009 à 14:08

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

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)

Bonjour,
j'ai fait un programme python qui donne les nombres des pixels "noir" a partir d'un image (noir/blanc), mais malheureusement le compteur ("print i") n'affiche pas le résultat (nombre des pixels noir) , voila mon programme , ou est le problème !

merci pour m'aider ^^

la balise <br> ou <br />

Bonjour,

Quelle est la difference entre la balise
et
?

Pourquoi utiliser l'un et pas l'autre ?

Merci d'avance,

Bonjour,

Comme on lit un peu tout et son contraire sur internet, je voudrais savoir quelle est la balise que l'on doit utiliser pour un retour à la ligne en HTML5.

Merci. :)

Configuration: Windows 7 / Chrome 22.0.1229.79

Balise </br>

Bonjour,

Je viens de créer un site web, et je me suis rendu sur W3C afin d'obtenir le www. mais le site m'affiche une erreur "End tag BR" (pour la balise
), ce que je ne comprends pas vu que le balise
n'existe pas (il me semble...)

Pouvez-vous m'aider svp ?
Merci d'avance et bonne journée !

Espace en HTML

En HTML, les espaces consécutifs sont ignorés par les navigateurs, au même titre que les retours chariots ou les tabulations. Pour insérer plusieurs espaces consécutifs, il est nécessaire d'utiliser une entité HTML spécifique, appelée espace insécable, dont le code HTML est le suivant : Pour faire des tabulations ou des mises en forme avancées, on peut recourir à la propriété CSS {white-space} . Cette propriété permet de définir si les espaces seront affichés ou pas. La valeur { white-space: pre } affiche tous les espaces. Voir la spécification du W3C et sa traduction en français