28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

voilà j'ai insérer dans une cellule de tableau plusieurs images que je voudrais positionner différement au niveau vertical.

Pour cela j'ai placer mes images dans des balises <div> auquelles j'ai ajouté un attribut style modifiant la position.

Cela donne cela :




<td>        
        
      
        <div style=" position: relative;top: 150px;"><img src="test3_files/bureau-labofan.jpg" alt="bureau laboratoire FAN" vspace="4" align="right"></div>
        <div style=" position: relative;top: 450px;"><img src="test3_files/fibrage.jpg" alt="fibrage" vspace="4" align="right"></div>

        
              </td>  




Sous Mozilla je n'ai aucun problème les images se positionnent bien à un niveau vertical différent smile.gif .

Par contre sous IE, les images ne se déplacent pas et sont positionnées l'une au dessus de l'autre .

Est-ce mon code qui ne convient pas ?? Est-ce que l'un d'entre vous à déjà rencontrer ce problèmes et pourrais m'aider please ?

Je vous remercie d'avance pour votre aide.
Bonjour jack,
<td>        
        <div style=" position: relative;top: 150px;"><img src="test3_files/bureau-labofan.jpg" alt="bureau laboratoire FAN" vspace="4" align="right"></div>

        <div style=" position: relative;top: 450px;"><img src="test3_files/fibrage.jpg" alt="fibrage" vspace="4" align="right"></div>
              </td>  


Pour commencer, si tu as ta page en XHTML, le attributs align et vspace sont obsolète et invalide.
Ensuite les tableaux ne devraient être utiliser que pour mmetre en forme des données tabulaire, des collonages et dans d'autres cas plus rare...

Le choix de la position relative et des div n'est pas approprié dans ton cas.
Pour centrer un contenu vericalement dans un cellule, tu dois utiliser la propriété vertical-align que tu dois appliquer à tes cellules sachant que tu as la possibilité d'utiliser en plus des valeurs existantes (top, bottom...) des valeurs en chiffres négatif et bien sûr positif.
Si tu souhaites monter ou descendre ton autre image alors utilise les marges verticales.
Administrateur
Hermann a écrit :
Pour commencer, si tu as ta page en XHTML, le attributs align et vspace sont obsolète et invalide.

Attention à ne pas faire de l'Ayatollisme Smiley smile
align et vspace sont parfaitement valides dans les doctypes (HTML et XHTML) transitionnels.
Ils sont effectivement invalides en doctypes stricts et sont déconseillés car la mise en page ne devrait pas avoir lieu dans le document HTML.

Par contre, ne jouons pas aux intégristes : un concepteur web a parfaitement le droit de choisir un doctype XHTML transitionnel Smiley cligne
Bonjour Raphael,
a écrit :
align et vspace sont parfaitement valides dans les doctypes (HTML et XHTML) transitionnels.
Ils sont effectivement invalides en doctypes stricts et sont déconseillés car la mise en page ne devrait pas avoir lieu dans le document HTML.


Oui c'est vrai j'y ai pensé aprés coup. Smiley cligne

a écrit :
Par contre, ne jouons pas aux intégristes : un concepteur web a parfaitement le droit de choisir un doctype XHTML transitionnel cligne


Oui bien sûr je l'ai d'ailleurs moi même déja utilisé à plusieurs reprise.