Image + texte cote à cote en CSS

garancetosello

WRInaute discret
Bonjour tout le monde,
Je rencontre ENCORE un petit problème :idea:
Je désire mettre en CSS
1 image + un texte (côte à côte) comme sur cette page
http://www.votre-faire-part.com/partenaire/anniversaires-enfants.htm(ici est utilisé des tableaux)
Donc plusieurs image et à leurs côté un texte.
Les unes en dessous des autres.

Je voudrais qu'elle fasse 900px de L et le tout centré (pas le texte mais "la table")

Je n'ai pas utilisé la fonction des tableaux mais ce script

CODE CSS
Code:
.image-gauche-texte {
	float:left;
	margin: 0 6px 6px 0;
}

CODE HTML
Code:
<div style="width:900px">
<img class="image-gauche-texte" src="image/la-poste-colissimo.jpg" alt="titre de mon image">
<span class="paragraphe">Bola grossesse
<br>
Le bola de grossesse est un bijou unique porté par les femmes enceintes indonésiennes pendant leur neuf mois de grossesse. Ce bijou dispose de vertues pour le bébé qui entendra le son du bola, telle une mélodie, dès la vingtième semaine de grossesse.
<br>
www.bola-grossesse.com</span>
</div>
<div style="width:900px">
<img class="image-gauche-texte" src="image/la-poste-colissimo.jpg" alt="titre de mon image">
<span class="paragraphe">Bola grossesse
<br/>
Le bola de grossesse est un bijou unique porté par les femmes enceintes indonésiennes pendant leur neuf mois de grossesse. Ce bijou dispose de vertues pour le bébé qui entendra le son du bola, telle une mélodie, dès la vingtième semaine de grossesse.
<br/>
www.bola-grossesse.com</span>

Et ca donne ça : http://www.votre-faire-part.com/a-effacer.jpg

- Je ne sais pas comment faire le saut de ligne entre les 2. Br ?
- Ce n'est pas centré (pas le texte, car je veux que le texte soit sur la gauche, collé à l'image)
- Ils s'imbriquent les uns dans les autres
- mon code est-il correct ou a t-il plein d'erreurs ?

Quelqu'un peut - il m'aider svp ?
Merci d'avance
 

zeb

WRInaute accro
PHP:
<span class="syntaxdefault"></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">div class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"item"</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault"> </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">p class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"paragraphe"</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">  </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">img class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"image-gauche-texte"</span><span class="syntaxdefault"> src</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"http://www.votre-faire-part.com/partenaire/divers/logo_assadia140x90.jpg"</span><span class="syntaxdefault"> alt</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"titre de mon image"</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">  Bola grossesse</span><span class="syntaxkeyword"><</span><span class="syntaxdefault">br </span><span class="syntaxkeyword">/><br /></span><span class="syntaxdefault">  Le bola de grossesse est un bijou unique porté par les femmes enceintes indonésiennes pendant leur neuf mois de grossesse</span><span class="syntaxkeyword">.</span><span class="syntaxdefault"> Ce bijou dispose de vertues pour le bébé qui entendra le son du bola</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> telle une mélodie</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> dès la vingtième semaine de grossesse</span><span class="syntaxkeyword">.<</span><span class="syntaxdefault">br </span><span class="syntaxkeyword">/><br /></span><span class="syntaxdefault">  www</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">bola</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">grossesse</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">com<br /> </span><span class="syntaxkeyword"></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /></</span><span class="syntaxdefault">div</span><span class="syntaxkeyword">><br /><br /><</span><span class="syntaxdefault">div class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"item"</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault"> </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">p class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"paragraphe"</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">  </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">img class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"image-gauche-texte"</span><span class="syntaxdefault"> src</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"http://www.votre-faire-part.com/partenaire/divers/logo_assadia140x90.jpg"</span><span class="syntaxdefault"> alt</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"titre de mon image"</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">  Bola grossesse</span><span class="syntaxkeyword"><</span><span class="syntaxdefault">br </span><span class="syntaxkeyword">/><br /></span><span class="syntaxdefault">  Le bola de grossesse est un bijou unique porté par les femmes enceintes indonésiennes pendant leur neuf mois de grossesse</span><span class="syntaxkeyword">.</span><span class="syntaxdefault"> Ce bijou dispose de vertues pour le bébé qui entendra le son du bola</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> telle une mélodie</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> dès la vingtième semaine de grossesse</span><span class="syntaxkeyword">.<</span><span class="syntaxdefault">br </span><span class="syntaxkeyword">/><br /></span><span class="syntaxdefault">  www</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">bola</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">grossesse</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">com<br /> </span><span class="syntaxkeyword"></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /></</span><span class="syntaxdefault">div</span><span class="syntaxkeyword">><br /><br /><</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault"> </span><span class="syntaxkeyword">.</span><span class="syntaxdefault">image</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">gauche</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">texte </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">  float</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">left</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">  margin</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> 0 6px 6px 0</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault"> </span><span class="syntaxkeyword">}<br /></span><span class="syntaxdefault"> </span><span class="syntaxkeyword">.</span><span class="syntaxdefault">item</span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">  width</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> 900px</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">  clear</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> both</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault"> </span><span class="syntaxkeyword">}<br /></</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">></span><span class="syntaxdefault"> </span>
 

garancetosello

WRInaute discret
Pardon !
J'ai pas fait attention que je m'étais trompée de rubrique.
Zeb, merci pour ta réponse.
Je savais bien qu'il y avait une histoire de "clear"
Alors c'est presque ca CAR tout est descendu dans le footer.
Comment je fais pour tout remonter ?
 

Madrileño

Membre Honoré
Bonjour,
garancetosello a dit:
Alors c'est presque ca CAR tout est descendu dans le footer.
Comment je fais pour tout remonter ?
Le plus simple serait d'indiquer la page test pour que la communauté d'entraide puisse vérifier le code complet de la page.
Le code de Zeb fonctionne bien ici, avec les éléments indiqués avec le sujet.

Cordialement.
 

garancetosello

WRInaute discret
Madrileño a dit:
Bonjour,
garancetosello a dit:
Alors c'est presque ca CAR tout est descendu dans le footer.
Comment je fais pour tout remonter ?
Le plus simple serait d'indiquer la page test pour que la communauté d'entraide puisse vérifier le code complet de la page.
Le code de Zeb fonctionne bien ici, avec les éléments indiqués avec le sujet.

Cordialement.

OK. Mais je peux rester dans cette rubrique ?
 

Madrileño

Membre Honoré
Bonjour,

Pour l'URL de la page test, vous pouvez ajouter noindex au passage, si vous présenter celle-ci ici.

Le sujet a déjà été déplacé. :)

Cordialement.
 

garancetosello

WRInaute discret
Voici mes pages
Code:
http://www.votre-faire-part.com/page.html
Code:
http://www.votre-faire-part.com/page.css
Donc tout est en bas de page et ce n'est pas centré grrrrrrrr

MERCI D'AVANCE POUR VOTRE AIDE
 

Marie-Aude

WRInaute accro
Bonsoir

il est inutile de poster en double, le sujet a été déplacé

par contre, ça serait bien de ne pas reprendre en entier un message citant un de tes messages, pour y répondre, surtout quand ce que tu écris n'a rien à voir avec ce qui est cité , cela rend la lecture du fil lourde et désagréable

(autrement dit réponse <> citation )
 

Discussions similaires

Haut