Problème pour formater un paragraphe

Résolu/Fermé
tipi75 Messages postés 680 Date d'inscription lundi 20 août 2007 Statut Membre Dernière intervention 16 avril 2015 - 9 août 2010 à 22:37
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 - 10 août 2010 à 21:38
Bonjour,

Je n'arrive pas à formater mon paragraphe comme l'exemple de ce lien:

http://www.snoupix.com/demo/slider-jquery/final.html

Je voudrais que le texte soit à côté de l'image, cependant moi, mon paragraphe est sur une ligne et il traverse la photo.

Voici mon code css:

#evenement_slideshow{
margin:0 auto;
width:750px;
height:470px;
/*background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;*/
position:relative;
}

#evenement_slideshow #evenement_contenu_slideshow{
margin:0 auto;
width:750px;
height:470px;
overflow:auto; /* affiche une scrollbar au cas ou */
position:relative;
}

#evenement_slideshow #evenement_contenu_slideshow .evenement_slide{
margin:0 auto;
width:730px; /* reduit de 20 pixels la div #slidesContainer pour permettre d'afficher la barre de scroll */
height:470px;
}

.evenement_slide h2{
font:italic 24px Georgia, "Times New Roman", Times, serif;
text-align: left;
color:#ccc;
letter-spacing:-1px;
margin:0 0 0 40px;
}

 .evenement_slide h4{
font:italic 14px Georgia, "Times New Roman", Times, serif;
text-align: left;
color:#ccc;
letter-spacing:-1px;
margin:0 0 0 60px; 
 }
 
.evenement_slide p{
position: absolute;
text-align: justify;
width: 250px;
margin:0 0 0 4%;
white-space: normal;
}

.evenement_slide img{
position: absolute;
margin:-60px 50px;
}




Voici le html:

<div id="principal">
		<div id="evenement_slideshow"><div id="evenement_contenu_slideshow">
<div class="evenement_slide"><h2>test1</h2><h4>13-04-2005</h4><br><br><p>fdsss</p></div><div class="evenement_slide"><h2>test2</h2><h4>14-08-2006</h4><br><br><p>cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p></div><div class="evenement_slide"><h2>test3</h2><h4>09-10-2007</h4><br><br><p>vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</p></div><div class="evenement_slide"><h2>test4</h2><h4>27-08-2008</h4><br><br><p>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p></div><div class="evenement_slide"><h2>test5</h2><h4>21-12-2009</h4><br><br><p>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p></div><div class="evenement_slide"><h2>test6</h2><h4>14-02-2010</h4><br><br><p>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p></div></div></div></div>



Merci pour votre aide

3 réponses

notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
10 août 2010 à 11:40
0
tipi75 Messages postés 680 Date d'inscription lundi 20 août 2007 Statut Membre Dernière intervention 16 avril 2015 27
10 août 2010 à 21:35
Merci pour ton aide notobe, je ne pensais pas du tout que ça pouvait venir de là.

Merci encore.
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
10 août 2010 à 21:38
C'est un grand classique ;)
Bonne continuation.
0
Webster95 Messages postés 553 Date d'inscription lundi 5 novembre 2007 Statut Membre Dernière intervention 9 juillet 2013 142
9 août 2010 à 22:56
J'ai une méthode un peu barbar, mais asser esthetique.
Tu créer un tableau avec 2 colonne:
La premier contient ton image, la deuxieme le texte.
Ensuite, tu enleve les bordures et tu réduit la fenetre au maximum.

bon courage

-1