Puces d'une liste, et image en float ??

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Puces d'une liste, et image en float ??

    Bonjour.
    comme visible sur cette page :http://audreybeta.regiscoque.com/par...biobeauty.html
    je bloque pour trouver comment gérer les puces images d'une liste, quand le texte se trouve à droite d'une image en float....
    j'ai même carrément les images de puce à gauche de l'image parfois, et là je sèche vraiment... y a t il une astuce connue pour ce genre de soucis?
    dans l'exemple que j'ai donné,on voit que la puce est collé à l'image, malgré le margin de celle ci...

  • #2
    Re : Puces d'une liste, et image en float ??

    il faudrais que tu sortes ton image de la balise H2 ou elle est. dans ton editeur, met ton image et seulement apres ton titre h2.
    La, la structure du code est <h2><img></h2>.
    <ul>
    <li></li>
    </ul>
    Et la ta liste occupes le meme espace que ton image. Elle s appuies sur le bord gauche de ton image et pas sur le droit.
    Alors que ce serais plus logique d avoir <img><h2></h2>
    enfin c est mon avis....

    Pour info: ligne 248 du fichier template.css
    Le conteneur ul associé a ta liste qui te premettras de bouger l ensemble de ta liste
    #content ul {
    padding-left: 20px;
    }
    et a la ligne 253, le selecteur qui caractèrise chaque élément de la liste
    #content ul li {
    list-style-image: url("../images/bullet.png");
    }

    autrement, tu met une balise div autour de ton image avec une largeur de 20%
    et une autre balise div avec une largeur de 79%
    20+ 79=99% normalement si c est en float ca doit se coller a coté

    Ce ne sont que des pistes mais c est ce que je vois avec firebug.....

    Commentaire


    • #3
      Re : Puces d'une liste, et image en float ??

      super merci beaucoup ! !
      je teste ça direct !

      Commentaire


      • #4
        Re : Puces d'une liste, et image en float ??

        Bonjour.
        Sinon, deux autres possibilités puisque finalemnet l'image peut bien être un titre de niveau h2 !
        Donner une classe à la liste en question et lui donner un margin-left de 280px dans une feuille de styles.
        Si la liste appartient à un article, donner le style dans l'HTML
        Code HTML:
        <ul style="margin-left:280px;">
        <li></li>
        <li></li>
        <li></li>
        </ul>
        Cordialement.
        __
        Eddy !!!
        Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

        Commentaire

        Annonce

        Réduire
        Aucune annonce pour le moment.

        Partenaire de l'association

        Réduire

        Hébergeur Web PlanetHoster
        Travaille ...
        X