28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je souhaite mettre une image à droite avec un texte justifié à gauche, mais je dois faire une erreur car cela ne s'affiche pas comme je souhaiterai.

L'effet désiré est le suivant:

upload/18413-test.JPG

Mais cela m'affiche le tout comme cela est visible sur http://www.soins-aux-plantes.fr

L'image se place sous le texte...

upload/18413-erreur.JPG

Le css contient:

.block2 /* contour des cadres centraux contenant le texte */
{
width:477px;
border-left: 1px solid #5CB3BE;
border-right: 1px solid #5CB3BE;
border-bottom: 1px solid #5CB3BE;
margin-top:-16px;
margin-bottom: 10px;
padding:8px;
background-color:#F4F4F4;
padding-top:20px;

/* background-color:#056096; #C9D8EF #CDE7E1*/
}

.textejeux 
{
width:270px;
text-align:justify;
}

.imagejeux 
{
	float:right;
}


Le code présent sur la page est:

<div class="block2">
<p>
<div class="textejeux">Toilokado lance un concours permettant de gagner des milliers de cadeaux! de de de de de de de de de de de de de de de d e de de de de de e ded ed ed e de</div>
<div class="imagejeux"><img src="http://www.sitacados.com/images/jeu-gratuit-small.jpg" /></div>
</p>
</div>


Merci pour votre aide Smiley biggrin
Modifié par joboy (04 May 2009 - 15:12)
Bonjour,

première chose à faire : supprimer le <p>aragraphe entourant les deux div.

Ensuite modifier ton code HTML :
<div class="block2">
<div class="imagejeux"><img src="http://www.sitacados.com/images/jeu-gratuit-small.jpg" /></div>
<div class="textejeux">Toilokado lance un concours permettant de gagner des milliers de cadeaux! de de de de de de de de de de de de de de de d e de de de de de e ded ed ed e de</div>
</div>
devrait fonctionner.
Modifié par Laurie-Anne (04 May 2009 - 15:15)
Bonjour Laurie-Anne Smiley biggrin

Je viens de tester en faisant comme tu explique mais cela ne donne pas le résultat espéré...

upload/18413-echec2.JPG

Comme tu peux le constater l'image est bien alignée à coté du textte, mais le fond blanc s'arrete à la longueur du texte et non de l'image Smiley decu

Merci pour ton aide en tout cas, tu m'as déjà permis de régler le problème de positionnement Smiley smile

Le problème actuel doit venir de là...mais je ne vois pas où Smiley ohwell

.block2 /* contour des cadres centraux contenant le texte */

{

width:477px;

border-left: 1px solid #5CB3BE;

border-right: 1px solid #5CB3BE;

border-bottom: 1px solid #5CB3BE;

margin-top:-16px;

margin-bottom: 10px;

padding:8px;

background-color:#F4F4F4;

padding-top:20px;

}


Modifié par joboy (04 May 2009 - 15:26)