Discussion :

[ilood]

Bonjour,

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

Code :

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

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> <!-- ou <hr style="clear:both" /> -->
	</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.

[Shivaneth]

effectivement c bizarre, quand on sélectionne l'endroit ou il y a normalement le texte sous IE, il parait
trop fort !!!

[koala64]

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...

[troumad]

Code :

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

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

Pour metre l'image à gauche du texte et

Code :

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

<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

[ilood]

Oui troumad. Mais à la vue du code fournis lors de mon premier post, c'est ce que j'ai fait.

[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 !

[ilood]

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

Code :

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

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

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/

[koala64]

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 :

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

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 */
}

@+

[ilood]

Ca marche, merci tout le monde.