Problème d'affichage en CSS

Discussion dans 'Demandes d'avis et de conseils sur vos sites' créé par garancetosello, 12 Décembre 2014.

  1. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Bonjour,
    Je reprends mon sujet car l'ancien et plein de confusion :oops:
    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> ?
    Code:
    <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
    Code:
     .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
     
  2. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 873
    J'aime reçus:
    71
    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;
    }
     
  3. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
  4. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 873
    J'aime reçus:
    71
    En effet, modifie aussi

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

    Code:
    .item{
    width: 900px;    
    float:left
    }
     
  5. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Hihihihihihihihihihihihihihihiiiii !!!! :D :D :D
    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; /* ? */
    }
     
  6. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
  7. cduray
    cduray Nouveau WRInaute
    Inscrit:
    7 Avril 2008
    Messages:
    38
    J'aime reçus:
    0
    Dans structure.css, tu dois peux ajuster:

    Code:
    #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
     
  8. -Romu-
    -Romu- WRInaute occasionnel
    Inscrit:
    19 Avril 2012
    Messages:
    280
    J'aime reçus:
    0
    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) ?
     
  9. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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 ?
     
  10. baud74
    baud74 WRInaute impliqué
    Inscrit:
    21 Juillet 2014
    Messages:
    586
    J'aime reçus:
    0
    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.
     
  11. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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
    Code:
     .image-gauche-texte { 
    	float:left;
    	margin: 0 6px 6px 0;
     }
     .item{
    	width: 700px;
        float:left;
    } 
    
     
  12. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    NE ME REPONDEZ PAS JE SUIS ENTRAIN DE TROUVER UNE AUTRE SOLUTION SANS TOUCHER A LA STRUCTURE
     
  13. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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
     
  14. Madrileño
    Madrileño Membre Honoré
    Inscrit:
    7 Juillet 2004
    Messages:
    32 136
    J'aime reçus:
    273
    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
    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.
     
  15. -Romu-
    -Romu- WRInaute occasionnel
    Inscrit:
    19 Avril 2012
    Messages:
    280
    J'aime reçus:
    0
    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
    Code:
    .item {
    display:block;
    width:500px;
    margin:0 auto;
    }
    
     
  16. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Merci Romu je vais y jeter un oeil
    Suis débordée
    Merci
     
  17. Madrileño
    Madrileño Membre Honoré
    Inscrit:
    7 Juillet 2004
    Messages:
    32 136
    J'aime reçus:
    273
    Bonjour,
    Avec les fêtes, c'est bon signe. :)

    Cordialement.
     
Chargement...
Similar Threads - Problème affichage CSS Forum Date
[Problème CSS+ JS] Affichage modifié par navigateur Développement d'un site Web ou d'une appli mobile 17 Juin 2011
Problème d'affichage meta titre Débuter en référencement 3 Juin 2019
[Wordpress]Problème affichage article dans sous-catégorie Développement d'un site Web ou d'une appli mobile 11 Juin 2017
Problème d'affichage des commentaires sur Wordpress Développement d'un site Web ou d'une appli mobile 2 Mars 2017
Problème d'affichage de la carte sur Google : Google maps / Google mon entreprise Référencement Google 7 Mai 2016
[Problème] Affichage des 10 derniers sujets de mon forum Développement d'un site Web ou d'une appli mobile 31 Mars 2016
Probleme Affichage Title = Ajout Non Voulu De Google Référencement Google 10 Juin 2015
Problème d'affichage de contenu Développement d'un site Web ou d'une appli mobile 19 Janvier 2015
Problème affichage image Développement d'un site Web ou d'une appli mobile 20 Décembre 2014
Problème d'affichage www.monsite.com/index.php introuvable URL Rewriting et .htaccess 17 Décembre 2014
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice