Discussion :

[calitom]

Bonjour,

Je cherche a faire en sorte que plusieurs div soit positionnés par rapport à un div conteneur...

Comment faire?

Quel style pour le conteneur et quels styles pour les contenus...

[BnA]

Salut

Ta demande est particulièrement vague...

Combien de DIV? Positionnées de quelle façon?

Et si tu as déjà un peu de code (même avec des erreurs), ça peut être utile de le mettre.

[Madfrix]

Bonjour,
Je cherche a faire en sorte que plusieurs div soit positionnés par rapport à un div conteneur...

Imbrication de div ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div id="conteneur">
      <div....>
      </div>
      <div....>
      </div>
</div>

Mais c'est vrai que ta demande est vague

[calitom]

C'est comme tu as fait madfrix...

Voici la structure:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<div id=\"conteneur\" style=\"width:680px;height:519px;\">
<div id=\"nom\" style=\"position:relative; top:20px; left: 331px;\">".stripslashes($nom)."</div>
<div id=\"adresse\" style=\"position:relative; top:40px; left: 331px;\">".stripslashes($adresse)."</div>
<div id=\"ville\" style=\"position:relative; top:61px; left: 331px;\">".stripslashes($ville)."</div>
<div id=\"code\" style=\"position:relative; top:82px; left: 331px;\">".stripslashes($code)."</div>
 
<div id=\"commentaires\" style=\"position:relative; top:262px; left: 276px; height: 225px; width: 384px;\"><p>".stripslashes($texte)."</p>".stripslashes($signature)."</div>
 
<img src=\"/images/image.jpg\" width=\"680\" height=\"519\" />
</div>

C'est un code pour un email...
Si je visualise dans outlook tout est bien positionné, mais si je visualise dans ma boite mail orange par exemple, les div sont positionnés par rapport à la page, et non par rapport au div conteneur...

Comment remédier à ca?

[c_s_s]

Tu peux positionner ton conteneur, avec position:relative.

[BnA]

Concevoir des mailings compatibles avec tous les clients mail (web & appli) n'est vraiment pas une sinécure...

Je te recommande ces quelques lectures:

Attributs HTML/CSS supportés par chacun des clients/webmails
Quand CSS et courriels s'embrassent sous le gui
Comment s'assurer que vos emails HTML s'affichent correctement et arrivent à bon port
Emails HTML - Dompter la bête

Mais le plus important, du courage et de la persévérance!

[Saray]

Un div se positionne correctement à son conteneur que si le conteneur a lui même une position. Ce qui n'est pas le cas de ton conteneur.

[BnA]

Oui, mais il s'agit d'un mailing.

Outlook 07 ou Lotus Note 6 ne gèrent pas le positionnement, qu'il soit relatif ou absolu. Comme Yahoo (ancien ou neuf), Gmail (ancien ou neuf) ou Hotmail (ou Live).

Vraiment, les mailings HTML, c'est de la vraie prise de tête.

[devyan]

Je vais me faire insulter mais tant pis

Peut être que la solution à ton problème est simplement d'utiliser la "bonne" vielle méthode des TABLE ...

Pas les dents merci

[BnA]

Je vais me faire insulter mais tant pis

Peut être que la solution à ton problème est simplement d'utiliser la "bonne" vielle méthode des TABLE ...

Pas les dents merci

Bah, j'ai fini par utiliser des tables (mais pas QUE ça) pour les mailings de ma boîte. Ce n'est pas "top", mais au moins, le rendu est similaire dans tous les 'grands' clients/webmails.

Après, les tables dans une page HTML d'un site, c'est vrai que c'est hérétique!

[Madfrix]

Effectivement les TABLE semblent être la meilleure solution à en croire ce lien :

http://thinkvitamin.com/design/ensur...get-delivered/

il donne aussi un lien intéressant vers les différentes propriétés supportées ou non par les principaux clients email :

http://www.campaignmonitor.com/blog/...ort-in-emai-2/

[calitom]

J'ai utilisé des tables, mais je me suis fait critiqué par un commentaire qui disait ceci:

J’ai testé sur gmail et hotmail… je ne sais pas qui code, mais ca arrive en vrac comme un vieille email des années 90 avec des tableaux pourris… c’est totalement illisible.
Dommage, idée sympa au depart.

Donc j'essaye de le faire avec des div, mais c pas évident de faire en sorte que ce soit compatible partout!!!

[c_s_s]

Pour les mails il ne faut pas essayer de faire trop compliqué, sinon bonjour les surprises d'affichages sur certaines messagerie.

[BnA]

J'ai utilisé des tables, mais je me suis fait critiqué par un commentaire qui disait ceci:


Donc j'essaye de le faire avec des div, mais c pas évident de faire en sorte que ce soit compatible partout!!!

Le point le plus important je pense, c'est de bien mettre TOUS tes styles en ligne (donc, dans la balise), quitte à devoir les répéter partout.

Ensuite, oui, ne rien faire de trop compliqué...

As-tu lu les différents liens que j'ai donné plus haut? J'ai réussi à m'en sortir avec ça, mais il faut vraiment faire attention à tout ce qui s'y dit.

Courage!

[calitom]

Merci!!

Comment faire pour mettre dans les balises <a> les different styles hover link visited...

[BnA]

Ca, c'est malheureusement impossible.

Tu peux à la limite déclarer un petit CSS dans le <head> de ton fichier, qui ne contiendrait que les styles pour a:hover, a:visited et a:link (le a 'normal' étant déclaré dans la balise), mais si le client "dégomme" le <head>, ou n'interprète pas les balises <style>, tu n'auras pas d'effets de survol ou autre.

[calitom]

J'ai quasiment réussi!!
J'ai quelque chose qui s'affiche correctement dans orange, et outlook, mais hotmail craint!!!

Dans hotmail, tout le positionnement est désactivé!

Du coup je pense que je vais faire un test sur le nom de domaine de l'adresse email de destination, et dans le cas où c'est hotmail, je fais l'envoi avec l'ancienne méthode des tableaux, et sinon envoi avec positionnement des div...