Bonjour,
 
  Voila, j'ai un tableau qui contient plusieurs types d'éléments, tel que des images, du textes, des formulaires, ... Malheureusement, j'ai constaté qu'en XHTML l'attribut align="" n'existait plus. Alors pour le texte pas de problèmes, il y a text-align en CSS, mais pour les autres types de données, comment faut-il faire?
 

Avec les CSS :  
 

 
ça devrait centrer tout ce qui est texte/images/champs d'un formulaire (autres valeurs : left ou right)

merci    
 
et pour ce qui est de l'attribut align sur la balise <img>?

Toujours avec les CSS :
 

ou left

et une petite dernière pour la route (promis après je te fous la paix pendant au moins 15 minutes   ).
 
Quand je met un CSS display: block sur une image, le text-align: center n'a pas d'influence sur l'élément. Tu as une solution a proposé (et peut-être une explication du phénomène?)
Le problème ne se pose pas dans IE qui l'interprète correctement, mais mozilla/Netscape ne le font pas.
Hard de passer du HTML au XHTML strict   , mais ça fait du bien  
 
En tout cas, tu es un chefv  

Non, c'est IE qui se plante. Si ton image est un bloc elle n'est plus concernée par text-align, qui comme son nom l'indique aligne  du texte et pas des blocs (et les images par défaut sont considérés comme du texte, display: inline)
 
Donc il faut utiliser autre chose. Par exemple le positionnement absolu, mais après ça dépend comment est conçue ta mise en page...

Merci, j'ai essayer avec float et ça marche. Je m'en doutais un peu que c'était IE qui était dans le faux.
 
Tu es vraiment un as, avec toi dans le coin, on comprend mieux les dessous du xhtml.
 
Encore merci      
 
Bon il me reste plus qu'à le faire fonctionner sous IE 5, NS 6 et NS 7.

Bon voila, presque 1 heure sans t'emmerdé.
 
J'ai un petit soucis avec IE5.
 
Dans une cellule d'un tableau en plein milieu de la page, j'affiche une image que j'aligne avec float: right. Sur cette image, j'y applique aussi display: block. Mais voila, avec les autres navigateurs (IE6, NS6, NS7, Mozilla), ça fonctionne. Mais pas dans IE5, j'ai un espace entre le bord gauche de la cellule et l'image. J'ai essayer en appliquand margin-right: 0px, padding-right: 0px, right: 0px ainsi qu'avec différente système de positions, mais rien à faire cet espace reste   . Aurais-tu une idée?    
 
Voici la partie du code incriminé (entre autre car ce le fait à d'autres endroits).
 

euh... je comprend pas bien pourquoi tu fais une table si ce n'est que pour mettre deux images. Pourquoi tu ne les mets pas simplement côte à côte?

Je confirme, dans 99% des situations on peut se passer de tableaux...

Au fait concernant IE5 qui a du mal à floater à fond une image à gauche ou à droite : c'est un bug connu et reconnu... perso je contourne cela en employant pas la balise <img> mais un <div> dont on définit les propriétés CSS ainsi (c un exemple, à toi d'indiquer de bonnes valeurs) :
 
div#img{
border-style:none;
float:left;
width:55px;
height:32px;
background-image:url(img/truc.gif);
}
 
Et curieusement, ça marche...
 

En fait IE se débrouille bien avec les flottants mais à la condition d'indiquer dans le CSS la largeur du bloc. Dans le cas d'une image, il faut donc répéter la largeur de celle-ci dans le style.

Pourquoi j'utilise un tableau? Parce que là, c'est un ancien design que je récupère qui fonctionnait avec ce tableau et que je n'ai pas voulu me casser le cul    
 
Puis aussi, une veille habitude du html  

Avec les attributs qu'il a ton tableau il passera pas la validation en XHTML 1.1

Ah pas de pot   , il y est passé à la validation xhtml 1.1: http://guillaume.lesur.free.fr/generation-nt/. Mais je sais que l'utilisation des tableaux que je fait est abusive, mais le design vient d'un truc fait avec DreamWeaver et comme l'optimisation du code urge un peu, je fait au plus vite.
 
Sur le prochain design, je compte eviter le plus possible l'utilisation des tableaux pour le design et seulement les utiliser pour afficher des tables, comme ça devrait l'être.
 
Mais bon comme je l'ai déjà dit, ça fait 3-4 ans que je travaille en HTML et j'ai pris les mauvaises habitudes de la liberté laisser. Donc la transistion au niveau de réflexion HTML->XHTML n'est pas évidente et ne se fait pas en un jour       . Il faut se remettre en question complètement.

Heu... oui c'est moi qui ai bu, j'ai cru voir des attributs dépréciés dans ton code
 
Bon sinon c'est dans cette page que tu as un problème d'espace avec IE 5 ? Tu peux faire un screenshot parce que je n'ai pas d'IE 5 sous la main là....
 
Sinon quelque conseils :
 
- évite de mettre les styles dans un attribut style="..." utilise des classes dans un fichier CSS séparé plutôt
 
- un élément qui a la propriété float: right|left obtient automatiquement la propriété display: block; donc pas la peine de la rajouter.

Oui mais pour les width et height, je fais comment, car j'en pratiquement pas deux les mêmes, je ne dois quand même pas faire une classe pour toutes les possibilités rencontrés?
 
Au fait, est-il possible d'appliquer plusieurs classe à un même élément? Parce que sinon, le css va faire 3 km de long   .
 
Au fait, tu penses que mettre un float: left est nécessaire si l'image se trouve déjà au bon endroit?
 
Et une petite dernière, est-il possible de faire une page aux normes compatibles avec Opera?
 
le screenshot, je te l'envois pas mail?

Oui :
 
class="classe1 classe2 classe3"
 
Donc effectivement dans une première classe tu peux mettre tout ce qui est aspect (couleurs, fond, bordures) et dans l'autre tout ce qui est dimensions.
 
Sinon, pour alléger ton code :
valign -> vertical-align (style s'appliquant aux TD)
cellspacing -> border-spacing
cellpadding -> padding (au niveau des TD)
 

Je dirais non, mais attention la différence sera qu'avec une propriété float le texte ira se mettre autour de l'image, alors que sans l'image sera alignée sur la ligne de base du texte (comme les smileys ici)

Heu oui, en faisant des pages aux normes Bon il y a quelques trucs à vérifier mais si tu n'en dit pas plus...

le screenshot, tu peux pas le mettre sur ton site ?

chut c pas mon site , je squatte de l'espace web.
 
voila, le screenshot est dispo sur http://guillaume.lesur.free.fr/generation-nt/ie5.jpg. Dessus il y a le test avec le tableau et sans le tableau pour les deux petites images.
 
Le problème est exactement le même en bas de page.

Pour ton problème d'espace, vire les différents attributs styles que tu a placé sur tes éléments <td> et <img> et pour la cellule de droite contente toi de lui appliquer le style text-align: right;
 
Donc au final, on a :
 

 
Avec :
 

 
Indiquer les dimensions pour les cellules est ici inutile vu que tu les as déjà indiqué pour le tableau (bien que je pense que la hauteur soit superflue) et les images.

Maintenant ca fonctionne sous IE, mais plus sous Mozilla car dans la classe design, je transforme l'image en block et non pas en texte. Donc à part faire un CSS pour chaque browser, tu vois une autre solution?

Mais tu n'as aucune raison de mettre cette image en bloc...

Celle là non, mais le problème va se poser pour une image qui se trouve plus bas et qui doit être collé au bord haut d'une cellule. Donc, pour celle là, le problème est résolu, mais pas pour celle d'en bas. Et donc par soucis d'uniformité, je préfere toutes les mettres en block.

Je répète tu n'as aucune raison de mettre tes images en block. Si tu veux les aligner à droite tu as 2 solutions :
 
- Avec float: right; ce qui, implicitement, met l'image en block
- Avec text-align: right; (qui ne marche pas avec les blocks)
 
Le fait que ton image d'en-bas doit être collé au bord haut d'une cellule n'a rien à voir avec le fait qu'elle soit un block ou non. De quelle image parles-tu ?

Si tu vas sur le lien que je t'ai donnée et que tu scrolls jusqu'en bas, tu trouveras le texte "Ce site est la propriété exclusive de www.generation-nt.com © 2001-2002. Pour tout contact: Webmaster" et juste au dessus de la cellule qui contient le texte, il y a 2 images qui marquent les arrondis et il y a aussi les deux dernier grand arrondis qui complète le design. Si elle ne sont pas en block, je me retrouve avec un espace en dessous de l'image, donc pour l'alignement c ok mais alors le design est quand même peter à cause de ça    
 
résultat dans Mozilla: http://guillaume.lesur.free.fr/gen [...] -casse.jpg

Et pourquoi tu veux pas les foutre en "display:block"   J'ai du mal à te suivre...

Bon essaye ça :
 
Tu vires tout ton bazar de tableau et tu mets tes 2 images dans un DIV :
 

 
(tous les éléments doivent être collés)
 
Avec les styles suivants :
 

 
ET LES IMAGES NE DOIVENT PAS ETRE DES BLOCS !
 
Le "position relative; left 610px;" a pour but de pousser le coin de droite... à droite de 610 pixels, vu que ta cellule conteneur fait 640 pixels.
 
Ca devrait marcher aussi pour les petits coins du bas.

A ton avis, si je supprime tous les tableaux et que je les remplaces par des <div>, ca a plus de chance de fonctinner?

Salut pluton      
On bosse bien ?    

C'est comme tu veux mais il vaut mieux repartir de zéro là... donc plus de travail... Mais la solution que j'ai donnée fonctionne...

Tu ne m'aides pas beaucoup je constate surtout        

gm_superstar, tu vas rire.
 
J'ai essayé et ça fonctionne.. mais à moitié. Pour IE6, NS6, NS7 et mozilla, j'ai du mettre 606px au lieu de 610px. Et pour IE5, je dois mettre 607px.
 
Au fait, tu dis que les images ne doivent pas être des blocks, je veux bien te croire. Mais si elle ne sont pas des blocks, mon design se casse la gueule. Comment dois-je faire alors?
 
EDIT: ca va j'ai compris, il faut qu'elles soient dans un div et pas dans un tableau.

Ben un <div> qui floate à droite, et un autre qui floate à gauche, et c réglé non ?  

J'ai testé à 610 pixels et ça marche pour tous les navigateurs Par contre n'hésite pas à virer les largeurs superflues, vu que les largeurs de tes colonnes sont déterminées par tes 3 images du haut, pas la peine de spécifier 162, 640, 162 partout... Mieux vaut laisser le navigateur se dévrouiller à ce niveau.

de toute façon, il y a toujours le problème de l'espace en dessous de l'image qui casse tout   . Franchement, je comprends plus rien. Avec les div, c pas demain la veille que j'aurais fini. Non, je pense qu'il me reste le suicide, adieu monde cruel      

'tain c pourtant pas compliqué... je vois pas ce qui te bloque dans toutes les solutions qui t'ont été proposées plus haut...

C'est peut-être pas compliqué, mais dans les solutions, soit ca passe pas sous IE5, soit ca passe pas sous Mozilla. Mais bon, c'est surement du au mélange table-div

tu as essayé en mettant tout en position absolue, ca en général ca passe partout

 
Un bon <div style="float:left;width:gnagna;height:gnagna;background-image:url(truc);"></div>
<div style="float:right;width:gnagna;height:gnagna;background-image:url(bidule);"></div>
 
Normalement ca passe sous IE5, Mozilla...