centrer plusieurs images

Eléphant du PHP | 54 Messages

23 oct. 2005, 14:00

voici mon probleme:
j'ai besoin de centrer 4 images sur la meme ligne en d'autres mots la premiere doit coller le bord gauche la derniere le bord droit et le deux du millieu doivent etres le plus espaces possible.
je rappelle que mon design est extensible et je ne veux pas de solution où s'il n'ya pas de place l'image descend dans la ligne du dessous
et ca ne me derange pas d'utiliser un tableau mais si on peut faire autrement c'est toujours mieux ;)

merci d'avance a ceux qui reponderont......

Avatar du membre
ViPHP
ViPHP | 3008 Messages

23 oct. 2005, 14:58

avec un tableau, ce genre là t'irait ?

Code : Tout sélectionner

<table align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="image1.gif" border="0" alt="toto"></td> <td align="center"><img src="image2.gif" border="0" alt="toto"></td> <td align="center"><img src="image3.gif" border="0" alt="toto"></td> <td align="right"><img src="image4.gif" border="0" alt="toto"></td> </tr> </table>

Eléphant du PHP | 54 Messages

23 oct. 2005, 15:22

non desole charabia le code que tu m'a donné colle les 4 images ensembles et les centres c'est pas du tout ce que je cherches en fait ce qu'il faudrait c'est un tableau que chaque cellule fasse 25% de la page et a linterieur l'image en centree ca serait bien mais je sais pas pourquoi j'aarive pas j'ai du mal avec les tableaux .......

(j'utilise du xhtml css)

Invité
Invité n'ayant pas de compte PHPfrance

23 oct. 2005, 17:50

personne pour m'aider ????? :(

(moi qui croyait que c'etait tout simple.....)

Eléphant du PHP | 55 Messages

23 oct. 2005, 19:26

et si tu met 25% à chaque td et tu centre l'image à l'interieur?

Code : Tout sélectionner

<table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="25%" align="center"><img src="image1.gif" /></td> <td width="25%" align="center"><img src="image2.gif" /></td> <td width="25%" align="center"><img src="image3.gif" /></td> <td width="25%" align="center"><img src="image4.gif" /></td> </tr> </table>
Modifié en dernier par fred6012 le 23 oct. 2005, 19:36, modifié 1 fois.

Eléphant du PHP | 54 Messages

23 oct. 2005, 19:27

c'est exactement ce que j'ai fait et ca marche

(c'est pour ca que sur le titre du sujet ya un [resolu])

merci quand meme

Eléphant du PHP | 357 Messages

24 oct. 2005, 11:26

je me permet juste une petite remarque ... enfin si je peux :roll:
même si je suis pas fan du tout de tableau ... afin de coder un peu plus w3c, il est préférable, si on entre pas ces paramètre dans un CSS ( ce qui éviterai de se répéter 3fois de faire quelque chose comme:

Code : Tout sélectionner

<td style='width:25%' align="center"><img src="image1.gif" /></td>
voili voilou
:wink:

Avatar du membre
ViPHP
ViPHP | 3008 Messages

24 oct. 2005, 11:35

ce qui éviterai de se répéter 3fois de faire quelque chose comme:

Code : Tout sélectionner

<td style='width:25%' align="center"><img src="image1.gif" /></td>
voili voilou
:wink:
Bé dans ton cas seayoung tu devras quand même le répéter autant qu'il y a de <td> non :roll: ? Si un jour tu fais une modification, tu dois quand même revenir sur cette page et modifier tous les style='width:25%'

Il faut faire appel à une style externe pour ne pas avoir à corriger X fois mais une seule ;)

Modérateur PHPfrance
Modérateur PHPfrance | 6037 Messages

24 oct. 2005, 11:53

Je sais que c'est résolu mais pour ma part, j'aurais utilisé la balise <col />


HTML :

Code : Tout sélectionner

<table width="100%" border="1" cellpadding="0" cellspacing="0"> <col class="quartdepage" /><col class="quartdepage" /><col class="quartdepage" /><col class="quartdepage" /> <tr> <td><img src="image1.gif" /></td> <td><img src="image2.gif" /></td> <td><img src="image3.gif" /></td> <td><img src="image4.gif" /></td> </tr> </table>
Feuille de style CSS

Code : Tout sélectionner

.quartdepage{ width : 25%; text-align : center; }

Avatar du membre
ViPHP
ViPHP | 3008 Messages

24 oct. 2005, 12:04

La balise COL est appliquée uniquement à l'intérieur de l'élément COLGROUP, au sein d'une TABLE
C'est pas moi qui l'ai dit d'abord :-"

Code : Tout sélectionner

<table width="100%" border="1" cellpadding="0" cellspacing="0"> <colgroup> <col class="quartdepage" /> <col class="quartdepage" /> <col class="quartdepage" /> <col class="quartdepage" /> </colgroup> <tr> <td><img src="image1.gif" /></td> <td><img src="image2.gif" /></td> <td><img src="image3.gif" /></td> <td><img src="image4.gif" /></td> </tr> </table>
Très bien vu mere-teresa ;)

Eléphant du PHP | 357 Messages

24 oct. 2005, 12:04

charabia relis bien mon post, je recommande :
1- evitez les tableaux (tant que faire se peux)
2- distinguer le style et le code

et je disais que si, soit qu'il ne veut ou ne peux faire autrement qu'il mette style="width:25%;"
plutot que le width direct dans le td en gros :

Code : Tout sélectionner

<td style='width:25%' align="center"><img src="image1.gif" /></td>
vaut mieux que :

Code : Tout sélectionner

<td width="25%" align="center"><img src="image1.gif" /></td>
même si l'un et l'autre ne sont pas top l'un vaut mieux que l'autre au niveau validité w3c :wink:

Toutefois il est paussible que je me suis mal exprimer dans mon dernier post.
enfin peu etre dans celui là aussi :roll:

Avatar du membre
ViPHP
ViPHP | 3008 Messages

24 oct. 2005, 12:08

Oui j'ai bien lu ton post seayoung ;)

Si tu voulais dire ce que tu as mis dans ton dernier post, je suis tout à fait d'accord :)

J'avais juste tilté sur le "ce qui éviterai de se répéter 3 fois" que tu as dis ;)

Modérateur PHPfrance
Modérateur PHPfrance | 6037 Messages

24 oct. 2005, 12:41

La balise COL est appliquée uniquement à l'intérieur de l'élément COLGROUP, au sein d'une TABLE
C'est pas moi qui l'ai dit d'abord :-"
Ok, ben c'est faux !
Relis donc la DTD....du W3C pour XHTML Strict 1.0
<!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
<!ELEMENT caption %Inline;>
<!ELEMENT thead (tr)+>
<!ELEMENT tfoot (tr)+>
<!ELEMENT tbody (tr)+>
<!ELEMENT colgroup (col)*>
<!ELEMENT col EMPTY>
<!ELEMENT tr (th|td)+>
<!ELEMENT th %Flow;>
<!ELEMENT td %Flow;>
La première ligne indique que l'élément table peut prendre comme enfant col ou colgroup (entre autres)...

L'élément COL permet aux auteurs de rassembler les spécifications d'attributs pour les colonnes de la table. L'élément COL ne rassemble pas les colonnes de manière structurelle (c'est le rôle de l'élément COLGROUP). Les éléments COL sont vides et ne servent que de support pour les attributs. Ils peuvent apparaître à l'intérieur comme à l'extérieur d'un groupe de colonnes explicite (i.e., l'élément COLGROUP).

source : http://www.la-grange.net/w3c/html4.01/s ... l#edef-COL
Cela dit...on peut quand même utiliser colgroup, si cela permet de regrouper des colonnes qui doivent avoir la même largeur. Non ?

Avatar du membre
ViPHP
ViPHP | 3008 Messages

24 oct. 2005, 13:27

Oki je m'en vais dire deux mots à môsieur http://www.startyourdev.com... :lol:

Eléphant du PHP | 54 Messages

24 oct. 2005, 14:09

seayoung tinkiet j'ai un css externe et c'est exactement ce que j'ai fait j'essai toujours d'etre au max avec le w3c ;)