[CSS] aligner texte à gauche d'une image

Version imprimable

Bonjour,

Je voudrais aligner du texte à gauche (ou à droite) d'une image.
J'ai donc tenté ceci :
Code:

1 2 3 4 5 6 7 8 9 <div class="unpost"> <h3>article 1</h3> <div class="cquejaiadire"> <img style="float:right" src="images/corpse-bride.jpg" alt="brule un cierge" width="215" height="150" /> <p>Bla rencontre bla, et blabla.</p> <div style="clear:both "></div>  </div> </div>
Le résultat est satisfaisant sous firefox, par contre sous IE le texte de gauche n'apparait pas et la partie gauche du div "unpost" se colle sur le bord du div parent.

L'exemple en ligne : http://davsen.free.fr/test/

Qu'est ce qui cloche ?
Merci pour votre aide.

04/06/2005, 14h47
Shivaneth

effectivement c bizarre, quand on sélectionne l'endroit ou il y a normalement le texte sous IE, il parait
trop fort !!!
04/06/2005, 16h17
koala64

8O

euh oui! et si tu réduis la fenêtre et que tu l'agrandis à nouveau c'est la même... le texte réapparait comme par enchantement...
05/06/2005, 08h44
troumad

Code:

<img alt="Penguin" style="border:0;float:left" src="/Images/pinguin.png" />

Pour metre l'image à gauche du texte et

Code:

<img style="border:0;float:right" src="../Images/pinguin.png" alt="Penguin" />

Pour mettre l'image à droite du texte.
C'est un exemple tiré de la barre en haut de ma page : http://troumad.free.fr/Linux/linux.php
05/06/2005, 10h49
ilood

Oui troumad. Mais à la vue du code fournis lors de mon premier post, c'est ce que j'ai fait. ;)
05/06/2005, 11h49
troumad

Si tu imposais une taille à <div class="cquejaiadire">, peut-être que tu aurais qqc.
Pour ma part, je n'ai pas M$I€ à la maison... Je ne peux pas tester !

Je pense que tu as mis le doigt sur le problème.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 #page div.unpost { background: rgb(47,61,96); border: 1px solid #333333; width: 100%; /* pour IE */ margin: 0 0 1em; padding: 0 0.5em 0.5em } #page div.cquejaiadire { background: rgb(49,56,76); padding: 10px; border: 1px solid #2D4173; border-width: 1px 1px 1px 8px; width: 100%; /* pour IE */ }
Forcer la largeur des deux bloc à 100% semble remettre IE dans le droit chemin.

Par contre sous firefox ça ne ressemble plus à rien :cry:

Le div "unpost" déborde sur le menu de droite et "cquejaiadire" sort de son div parent "unpost".
Pour voir le résultat sous Ff : http://davsen.free.fr/test/

Re...

Vu le problème généré, il faut que seul IE puisse voir cette instruction donc je t'invite plus à l'écrire de la sorte:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
#page div.unpost {
   background: rgb(47,61,96);
   border: 1px solid #333333;
   margin: 0 0 1em;
   padding: 0 0.5em 0.5em
}
 
#page div.cquejaiadire {
   background: rgb(49,56,76);
   padding: 10px;
   border: 1px solid #2D4173;
   border-width: 1px 1px 1px 8px;
}
 
* html #page div.unpost,#page div.cquejaiadire {
   width: 100%; /* pour IE */
}

@+ :wink:

05/06/2005, 16h04
ilood

Ca marche, merci tout le monde. :)