[Résolu] Image et texte en vis a vis

Bonjour,

Voilà j'ai une image et un texte, le texte se trouve à droite de l'image et je veux que le texte reste, peu importe sa longueur avec le meme decalage que l'image impose.
Le HTML :

<div class="lebloc">
<img src="img/profile1.jpg" class="imgpage"/>
<p class="titrepage">Un Super Titre</p>
<p class="txtpage">Blablabalabblaablablablabalablablabaalbablabl...</p>
</div>

Le CSS :

 
.lebloc {
	width:530px;
	background-color:#CCCCCC;
}

.imgpage {
	float:left;
	margin-right:30px;
}

.titrepage {
	font-family:Arial, Verdana, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#000000;
}

.txtpage {
	text-align:justify;
	float:left;
}

Tout ceci fonctionne sur IE mais sur Firefox uniquement mon titre se trouve à droite de l'image et le reste du texte se retrouve sous l'image.
Est-ce que quelqu'un aurai une idee ???
Merci
Modifié par Dimi (13 Jul 2005 - 13:40)

Bonsoir.
Si c'est ce genre de texte en habillage que tu veux ...

<div class=[#blue]"lebloc"[/#]>
<div class=[#blue]"txtpage"[/#]><img src="gurdjieff.jpg" class=[#blue]"imgpage"[/#] alt="philosophe" />
<h4 class=[#blue]"titrepage"[/#]>Un Super Titre</h4>
<p>Proca, rex Albanorum, duos filios, Numitorem et Amulium habuit. Numitori, qui natu maior erat, regnum reliquit; sed Amulius, pulso fratre, regnavit, et ut eum sobole privaret, Rheam Sylviam eius filiam Vestae sacerdotem fecit, quae tamen Romulum et Remum uno partu edidit. Quo cognito, Amulius ipsam in vincula coniecit, parvulos alveo impositos abiecit in Tiberim</p>
</div>
</div>

.lebloc {
width:530px;
}
.imgpage {
position: relative;
float:left;
margin-right:30px;
}
.titrepage {
font-family:Arial, Verdana, sans-serif;
font-weight:bold;
color:#000000;
}
.txtpage {
background-color:#CCCCCC;
text-align: justify;
float:left;
padding: 0 25px;
}

PS: Pour les "bô titres", il vaut mieux employer les balises <h1> à <h6>. Salut
<edit> J'avais pas vu que c'était ton premier post / alors bienvenue
Modifié par Aureance (13 Jul 2005 - 01:20)

Bonjour Dimi !

<p class="titrepage">Un Super Titre</p>

Comme Aureance te l'a mentionné, ça ce n'est pas « Un Super Titre », c'est seulement un paragraphe avec une class="titrepage".

Ça c'est « Un Super Titre » :

Aureance a écrit :

<h4 class=[#blue]"titrepage"[/#]>Un Super Titre</h4>

Dimi a écrit :

je veux que le texte reste, peu importe sa longueur avec le meme decalage que l'image impose.

Alors dans ce cas...

Le CSS :

.lebloc {
	width: 530px;
	background-color: #CCCCCC;
}
.lebloc img {
	float: left;
}
.lebloc h4 {
	/* perso je défini ces propriétés ailleurs, c'est à toi de voir  [cligne] */
}
.lebloc p {
	margin-left: valeur; /* la largeur de l'image plus les 30px de marge */
	text-align: justify; /* je ne suis pas fan du texte justifié, il génère souvent des espaces gênantes */
}

Le HTML :

<div class="lebloc">
	<img src="img/profile1.jpg" class="imgpage"/>
	<h4>Un Super Titre</h4>
	<p>Blablabalabblaablablablabalablablabaalbablabl...</p>
</div>

Et là, bonjour The IE Three Pixel Text-Jog (en) !

Personnellement, ce léger « trouble de la personnalité » ne me gêne pas outre mesure comme tu peux le constater dans cet échange...

... à moins que tu ne sois un adepte du PPPP (Partout Pareil au Pixel Près)

Le syndrôme des 4 P, vous connaissez?

--
Stephan
Modifié par Stephan (13 Jul 2005 - 04:39)

Bonjour,



Voila le résultat après application de tes conseils, je reste toujours avec le texte qui revient sous l'image, je ne vois vraiment pas ce qui cloche.

Le HTML :

<div class="lebloc">
<img src="img/profile1.jpg" />
<h4>Super Titre</h4>
<p>aridus e lasso veniebat anhelitus ore,
metaque erat longe: tum denique de tribus unum
fetibus arboreis proles Neptunia misit.
obstipuit virgo nitidique cupidine pomi
declinat cursus aurumque volubile tollit;
praeterit Hippomenes: resonant spectacula plausu.
illa moram celeri cessataque tempora cursu
corrigit atque iterum iuvenem post terga relinquit:
et rursus pomi iactu remorata secundi
consequitur transitque virum. pars ultima cursus
restabat; 'nunc' inquit 'ades, dea muneris auctor!'
inque latus campi, quo tardius illa rediret,
iecit ab obliquo nitidum iuvenaliter aurum.
an peteret, virgo visa est dubitare: coegi
tollere et adieci sublato pondera malo
inpediique oneris pariter gravitate moraque,
neve meus sermo cursu sit tardior ipso,
praeterita est virgo: duxit sua praemia victor..
</p>
</div>

Le CSS :

.lebloc {
	width:530px;
	background-color:#CCCCCC;
}

.lebloc img {
	float:left;
}

.lebloc h4 {
	font-family:Arial, Verdana, sans-serif;
	font-weight:bold;
	color:#000000;
}

.lebloc p {
	margin-left:30px;
	text-align:justify;
}

En tout cas merci pour vos réponses et pour la bonne humeur qui semble règner sur ce forum

Mega Ooooooops de ma part... Je n avais pas bien lu les commentaires de ton CSS Stephan et effectivement en mettant une marge de la largeur de l'image plus lamarge que je souhaitais, tout marche
Merci Beaucoup