Image + texte cote à cote en CSS

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par garancetosello, 11 Décembre 2014.

  1. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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
     
  2. Madrileño
    Madrileño Membre Honoré
    Inscrit:
    7 Juillet 2004
    Messages:
    31 573
    J'aime reçus:
    280
  3. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 025
    J'aime reçus:
    1
    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>
     
  4. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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 ?
     
  5. Madrileño
    Madrileño Membre Honoré
    Inscrit:
    7 Juillet 2004
    Messages:
    31 573
    J'aime reçus:
    280
    Bonjour,
    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.
     
  6. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Je vais reformuler mes questions dans la rubrique adéquat
    Désolée pour le désagrément et merci ZEB !
     
  7. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    OK. Mais je peux rester dans cette rubrique ?
     
  8. Madrileño
    Madrileño Membre Honoré
    Inscrit:
    7 Juillet 2004
    Messages:
    31 573
    J'aime reçus:
    280
    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.
     
  9. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    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
     
  10. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 503
    J'aime reçus:
    66
    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 )
     
  11. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Si je comprends bien je ne fais que des bêtises !!
    Lol je vais donc aller voir mon sujet déplacé
    Merci :D
     
Chargement...
Similar Threads - Image cote cote Forum Date
[CSS] Aligner une image à coté d'une div en display:table-cell ? Développement d'un site Web ou d'une appli mobile 2 Mai 2012
Pas d'image à côté des adsense AdSense 11 Octobre 2007
créer une image à côté de l'url Développement d'un site Web ou d'une appli mobile 8 Août 2006
URL rewriting d'images URL Rewriting et .htaccess Samedi à 10:42
Quota d'images sur une page Débuter en référencement 10 Janvier 2022
Utiliser plusieurs fois une même image sur un site YouTube, Google Images et Google Maps 3 Janvier 2022
images en responsive, balises et rapidité de chargement Développement d'un site Web ou d'une appli mobile 20 Décembre 2021
problème avec la mise en cache des images de mon site Développement d'un site Web ou d'une appli mobile 19 Décembre 2021
référencement image sur imgbox, Imgur Débuter en référencement 8 Novembre 2021
Duplicate images pour déclinaisons de produits Débuter en référencement 20 Octobre 2021
Référencement - nom des fichiers images Débuter en référencement 22 Septembre 2021
URL image située sur un autre site ou sous-domaine YouTube, Google Images et Google Maps 17 Septembre 2021
Comment accélérer chargement d'une image ? Développement d'un site Web ou d'une appli mobile 4 Septembre 2021
WordPress Actualiser le titre d'une image référencée par mes domaines référents Netlinking, backlinks, liens et redirections 3 Août 2021
faut-il activer les URL image ou éviter pour économiser le crawl Référencement Google 21 Juin 2021
Page indexée mais pas les images Problèmes de référencement spécifiques à vos sites 10 Juin 2021
Images Webp : peut-on se passer d'images alternatives ? YouTube, Google Images et Google Maps 1 Juin 2021
Temps de chargement - Une image full width peut-elle peser moins de 100ko ? Développement d'un site Web ou d'une appli mobile 1 Juin 2021
Linkedin : comment ajouter une URL sur une image ? Autres réseaux sociaux 1 Juin 2021
(image + texte) et Cumulative Layout Shift (CLS) Développement d'un site Web ou d'une appli mobile 8 Avril 2021