Pb de liste à puce dans un bloc HTML5

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par clauduc, 9 Mai 2014.

Tags:
  1. clauduc
    clauduc Nouveau WRInaute
    Inscrit:
    9 Mai 2014
    Messages:
    1
    J'aime reçus:
    0
    Bonjour à tous
    Je suis nouveau ici. 68 ans, un certain bagage en informatique mais pas d'expérience de développement de site. J'ai pris l'engagement - un peu fou peut-être - de développer bénévolement le site Internet d'une petite commune des Hautes-Pyrénées. J'ai donc attaché ferme HTML5, CSS3 et un peu PHP.
    Je bute sur un petit problème bizarre :
    Je défini des blocs, par exemple un bloc à gauche pour des liens vers différentes pages et un autre à droite pour des informations détaillées.
    Dans mon bloc de gauche, quand je défini une liste à puce, j'observe que celle-ci ne se positionne pas dans le bloc comme c'est le cas pour le texte, la liste se superpose même au texte :

    Extrait du code HTML5 :

    <p class="gauche">
    Bloc gauche </br>
    Bloc gauche </br>
    Bloc gauche
    </br>
    <ul>
    <li> liste à puce </li>
    <li> liste à puce </li>
    <li> liste à puce </li>
    <li> liste à puce </li>
    <li> liste à puce </li>
    </ul>
    </p>



    Extrait du CSS3 :

    body
    {
    border: 3px blue dashed;
    background-color: #e7e7e7;
    font-family: verdana;
    font-size:16px;
    color:#666666;
    text-align:justify;
    line-height:16px;
    margin:0;
    padding-left : 10px;}

    .gauche
    {
    margin: 2px;
    width : 300px;
    min-height : 300px;
    position: absolute;
    overflow : auto;
    border : 3px solid black;
    }



    Voilà

    Merci d'avance.

    Clauduc
     
  2. loubet
    loubet WRInaute impliqué
    Inscrit:
    19 Février 2003
    Messages:
    792
    J'aime reçus:
    0
    je conseille par faire un code html correct du style :
    <div class="gauche">
    <p>Bloc gauche </br>
    Bloc gauche </br>
    Bloc gauche
    </p>
    <ul>
    <li> liste à puce </li>
    <li> liste à puce </li>
    <li> liste à puce </li>
    <li> liste à puce </li>
    <li> liste à puce </li>
    </ul>
    </div>
     
Chargement...
Similar Threads - liste puce bloc Forum Date
Duplicate Content sur liste à puce sur plusieurs sites Référencement Google 13 Mars 2015
Formulaire en liste à puces ? Débuter en référencement 1 Mai 2013
Impact des noms de domaine blacklistés à cause d'emailing Référencement Google 18 Septembre 2020
Blackliste publicité Facebook pourquoi? Facebook 11 Mai 2020
Désindexer liste d'URL en générant un sitemap Crawl et indexation Google, sitemaps 2 Mai 2020
Liste de villes et référencement Débuter en référencement 24 Avril 2020
Equivalent boite liste indexable ? Développement d'un site Web ou d'une appli mobile 18 Avril 2020
Avis sur le liste lodge-coco.com Rédaction web et référencement 28 Mars 2020
Astuce Comment repérer les mots-clés inversés/similaires dans une liste Débuter en référencement 21 Janvier 2020
WordPress Quelle liste de Ping Wordpress pour 2019-2020 Crawl et indexation Google, sitemaps 21 Décembre 2019