Problème d'affichage en CSS

[garancetosello]

Bonjour,
Je reprends mon sujet car l'ancien et plein de confusion
Je voudrai mettre des images + texte l'un à côté de l'autre et les uns en dessous des autres
comme par exemple sur cette page : http://www.votre-faire-part.com/partenaire/cadeau-naissance.htm
Donc texte aligné sur la gauche à côté de l'image et le tout centré
J'ai donc essayé de le reproduire en CSS mais mon contenu reste en bas de page et ne se place pas dans le contenu mais dans le footer.
ET quand je rajoute un clear:both; à ITEM un problème d'affichage se passe
Une marge rose apparait et rien ne se centre
http://www.votre-faire-part.com/a-effacer-3.jpg

CODE HTML
(Question très con mais j'en profite pour vous la poser en même temps, est-ce qu'il ya des "" à contenu <div id=contenu> ?

<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 />
  www.bola-grossesse.com </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 />
  www.bola-grossesse.com </p>
</div>
</div>

CODE CSS

 .image-gauche-texte { 
	float:left; 
	margin: 0 6px 6px 0;
 }
 .item{
	width: 900px; 	
        clear: both;
 }

http://www.votre-faire-part.com/page.html
http://www.votre-faire-part.com/page.css

Est-ce que quelq'un peu me donner un coup de pouce ?
Ca ne doit pas être compliqué mais bien sûr je bloque
Ne pensez pas que je ne cherche pas, au contraire ca fait des heures que j'essaye de comprendre
Merci à tous

 

[UsagiYojimbo]

Plutôt que de mettre un clear:both à l'élément item, rajoute, entre tes deux derniers </div> :

<div class="clearer"></div>

et le style associé

.clearer{
clear:both;
}

 

[garancetosello]

ET NON c'est pas encore ça (merci pour ta réponse)
Ca donne ca quand je fais ce que tu me dis
http://www.votre-faire-part.com/a-effacer-3.jpg

 

[UsagiYojimbo]

En effet, modifie aussi

.item{
width: 900px;    
clear: both;
}

en

.item{
width: 900px;    
float:left
}

 

[garancetosello]

Hihihihihihihihihihihihihihihiiiii !!!!
CA MARCHE
MERCI MERCI MERCI
<3 <3 <3 <3
Mais regarde ce que ca donne dans ma page en interne http://www.votre-faire-part.com/a-effacer5.jpg
Ca me gêne un peu. Qu'est ce que je peux faire pour que ca s'affiche correctement ?

Est-ce que je garde le <div class="clearer"></div> ?
Elle représente quoi cette balise <div class="clearer"> ?


TU PEUX ME RENSEIGNER CAR JE VEUX COMPRENDRE
.item{
width: 900px; /* taille de la largeur du texte */
float:left; /* le texte est à gauche de l'image */
} /******* Fin de code ******/
.clearer{
clear:both; /* ? */
}

 

[garancetosello]

RIEN NE MARCHE
J'en peux plus.
Regardez ce que ca donne.
Le deuxième c'est mis en bas de page !
La taille de l'ITEM n'est pas prix en compte
http://www.votre-faire-part.com/page.html
http://www.votre-faire-part.com/page.css
http://www.votre-faire-part.com/structure.css

SVPPPP

 

[cduray]

Dans structure.css, tu dois peux ajuster:

#contenu {
   height:1150px;
   background-color: #FFFFFF;
float: left; width: 916px;
   }
#footer {
height:329px;
background-image: url(image/footer.jpg);
        clear: both;
}

Le "clear" fonctionne par rapport à l'ancêtre floaté, or ton #contenu n'était pas en float, donc il remontait plus haut et voyait que #navigation était en float: left, et faisait un clear p/r à #navigation

 

[-Romu-]

Un complément de cduray que te met sur le bon chemin.
Je pense que tu devrais faire des croquis papier pour bien représenter ton projet.
Ensuite, utilise un reset css qui peut te simplifier la vie
Et pourquoi ne pas apprendre l'html5 (header, nav, main, article, footer) ?

 

[garancetosello]

Ben oui CDURAY est mon sauveur ! J'arrête pas de lui prendre la tête !!
Merci Mr CDURAY !
Merci Mr Romu !
(peit clin d'oeil à Cduray, mon frère ne m'a tjrs pas fait ma structure, je lui donne jusqu'à mardi)
Il ne reste plus qu'à centrer le tout et j'y suis.
Il faut que je le précise dans ITEM ?

 

[baud74]

c'est dommage de passer autant de temps à faire une mise en page à largeur fixe (qui est tronqué chez moi et sur un % d'autres visiteurs) alors qu'il faudrait plutôt passer du temps à en faire une qui s'adapte à la largeur de l'écran, quelque soit cette dernière.

 

[garancetosello]

c'est dommage de passer autant de temps à faire une mise en page à largeur fixe (qui est tronqué chez moi et sur un % d'autres visiteurs) alors qu'il faudrait plutôt passer du temps à en faire une qui s'adapte à la largeur de l'écran, quelque soit cette dernière.

Mon frère est entrain de me faire toute la structure et moi je fais le contenu
Il n'habite pas là donc assez galère pour communiquer.
Tu peux me dire comment je peux faire pour tout centrer
car quand je fais <div class="item" align="center"> le texte se centre mais moi je ne veux pas que le texte se centre mais le contenu de la page, Je ne suis pas très claire

 .image-gauche-texte { 
	float:left;
	margin: 0 6px 6px 0;
 }
 .item{
	width: 700px;
    float:left;
}

 

[garancetosello]

NE ME REPONDEZ PAS JE SUIS ENTRAIN DE TROUVER UNE AUTRE SOLUTION SANS TOUCHER A LA STRUCTURE

 

[garancetosello]

SUPER MEGA PRET DU BUT
SVP HELP ME !
Donc j'ai procédé autrement j'ai mis une div qui contient l'ensemble (img + p)
Je ne veux pas toucher à ma structure car elle n'est pas définitive.
SVP, je pense que pour vous c'est un jeu d'enfant.
J'ai une petite marge qui apparaît et ce n'est tjrs pas centré.
SVP je compte vraiment sur vous !
http://www.votre-faire-part.com/page.html
http://www.votre-faire-part.com/page.css
MERCI D AVANCE

 

[Madrileño]

Bonjour,

Vous pouvez vérifier le margin-top (ou bottom) utilisé.

Quelques avis :
- Un logo serait bien en haut à gauche, avec l'espace vide
- Corriger encore les erreurs de la page
- Le logo accueil en CSS est possible

SVP je compte vraiment sur vous !

Vous pouvez aussi présenter vos avis en tant qu'utilisateur des sites : Demandes d'avis et de conseils
pour vous aussi aider la communauté d'entraide du forum.

Cordialement.

 

[-Romu-]

Je pense que sur certaine version tu auras quelques bug

J'avoue ne pas comprendre ta logique avec contenu => content...
Tu pourrais faire beaucoup plus simple


pour centrer un display block
tu définit une largeur et tu rajoute des marge auto
ex

.item {
display:block;
width:500px;
margin:0 auto;
}

 

[garancetosello]

Merci Romu je vais y jeter un oeil
Suis débordée
Merci

 

[Madrileño]

Bonjour,

Suis débordée

Avec les fêtes, c'est bon signe.

Cordialement.