Image + texte en CSS

Version imprimable

Bonjour tout le monde,
Je rencontre un petit problème
Je désire mettre en CSS
1 image + un texte (côte à côte) comme sur cette page
http://www.votre-faire-part.com/part...es-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:

1 2 3 4 .image-gauche-texte { float:left; margin: 0 6px 6px 0; }
CODE HTML
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <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é
- Ils s'imbriquent les uns dans les autres
- mon code est-il correct ou a t-il des plein d'erreurs ?

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

Alors j'ai changé quelques trucs
CODE CSS

Code:

1
2
3
4
5
6
7
8
 .image-gauche-texte { 
	float:left; 
	margin: 0 6px 6px 0;
 }
 .item{
	width: 900px; 
	clear: both;
 }

CODE HTLM

Code:

1
2
3
4
5
6
7
<div class="item">
 <p class="paragraphe">
  <img class="image-gauche-texte" src="image/la-poste-colissimo.jpg" alt="titre de mon image">
  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 />
  <a href="http://www.bola-grossesse.com" target="_blank">www.bola-grossesse.com</a> </p>
</div>

ET CA PLANTE ENCORE
Tout est en bas de page et c'est pas centré grrrrr
http://www.votre-faire-part.com/page.html
http://www.votre-faire-part.com/page.css

HELP PLEASE

11/12/2014, 23h23
ryan

Yop!

Sans présumer du reste, il y a ceci qui n'est pas correct:

Code:

<div id=contenu>

Il manque les guillemets autours de contenu
12/12/2014, 08h40
Bisûnûrs

Citation:

Envoyé par garance.tosello

Tout est en bas de page

C'est le clear:both; de ton .item qui "clear" le float:left; de ton #navigation. Rajoute un float:left; sur ton #contenu.

Citation:

Envoyé par ryan

Il manque les guillemets autours de contenu

Non. C'est correct.
12/12/2014, 10h18
garance.tosello

ca ne fonctionne pas.
Mais pas du tout.
En fait tout remonte mais tout s'imbrique les uns dans les autres
12/12/2014, 10h19
Bisûnûrs

Parce que tu dois aussi mettre un clear:both; sur le #footer.

1 pièce(s) jointe(s)

MERCI POUR TA REPONSE :P

C'est presque ca car il me manque un bout du fond blanc au contenu (sur la gauche)
ET les images + textes s'imbriquent tjrs aussi mal
Pièce jointe 163696

CODE HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id=contenu>
<div class="item">
<p class="paragraphe">
  <img class="image-gauche-texte" src="image/la-poste-colissimo.jpg" alt="titre de mon image">
  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 />
  <a href="http://www.bola-grossesse.com" target="_blank">www.bola-grossesse.com</a> </p>
</div>
/******* JE REPRODUIS LE MÊME CODE ******/
<div class="item">
<p class="paragraphe">
  <img class="image-gauche-texte" src="image/la-poste-colissimo.jpg" alt="titre de mon image">
  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 />
  <a href="http://www.bola-grossesse.com" target="_blank">www.bola-grossesse.com</a> </p>
</div>
</div>

CODE CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.image-gauche-texte { 
   float:left; 
   margin: 0 6px 6px 0;
}
.item{
   width: 900px;    
        clear: both;
}
#footer {
height:329px;
background-image: url(image/footer.jpg);
clear:both;
}
#contenu {
   margin: auto;
   height:1150px;
   background-color: #FFFFFF;
   float:left;
   }

12/12/2014, 12h09
Bisûnûrs

Pour l'espace blanc manquant, tu peux rajouter un width:916px; à #contenu, vu que tu as donné des largeurs fixes à #navigation et #principal.
Et l'autre problème ne devrait pas se produire si tu as gardé le clear:both; sur les .item... Mets à jour ta version en ligne qu'on puisse vérifier par nous-mêmes.
12/12/2014, 13h34
garance.tosello

Voici mes pages
http://www.votre-faire-part.com/page-2.html
http://www.votre-faire-part.com/page-2.css
http://www.votre-faire-part.com/structure-2.css

:P:P:P
12/12/2014, 14h38
Bisûnûrs

Et bien ? Ca s'affiche correctement chez moi.
12/12/2014, 15h53
garance.tosello

Non regarde j'ai mis à l'item (page.css) un 200px et ca ne bouge pas.
Oui effectivement moi aussi ca s'affiche bien maintenant (page n'était ss doute pas rafraichie à mon avis)
12/12/2014, 16h08
Bisûnûrs

Résolu donc ?
12/12/2014, 16h20
garance.tosello
Oui ca y est et je te remercie GRAVE DE GRAVE :P:P:D
J'ai ENCORE un conseil à te demander
Je dois maintenant faire comme ce type de page
http://www.votre-faire-part.com/them...faire-part.htm
donc
2 photos cote à cote
+ texte en dessous
le tout centré
OU 1 photo
+ texte en dessous
le tout centré

Bref, tu me conseilles de faire cela avec tableaux en css ou pas ?

De plus pour le lien de tout à l'heure
je le laisse comme cela

Code:

<a href="http://www.bola-grossesse.com" target="_blank">www.bola-grossesse.com</a>

ou comme cela
ou
Code:

1 2 <u><li><a href="http://www.bola-grossesse.com" target="_blank">www.bola-grossesse.com</a></li></u> <li><a href="http://www.bola-grossesse.com" target="_blank">www.bola-grossesse.com</a></li>
Je suis débutante, je galère trop.