Discussion :

[garance.tosello]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

CODE HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[garance.tosello]

Alors j'ai changé quelques trucs
CODE CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[ryan]

Yop!

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id=contenu>

Il manque les guillemets autours de contenu

[Bisûnûrs]

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.

Il manque les guillemets autours de contenu

Non. C'est correct.

[garance.tosello]

ca ne fonctionne pas.
Mais pas du tout.
En fait tout remonte mais tout s'imbrique les uns dans les autres

[Bisûnûrs]

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

[garance.tosello]

MERCI POUR TA REPONSE

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


CODE HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
   }

[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.

[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

[Bisûnûrs]

Et bien ? Ca s'affiche correctement chez moi.

[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)

[Bisûnûrs]

Résolu donc ?

[garance.tosello]

Oui ca y est et je te remercie GRAVE DE GRAVE
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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou comme cela
ou

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.