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:
    788
    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
Probleme margin padding dans une liste pour un menu avec puce Développement d'un site Web ou d'une appli mobile 5 Juin 2009
liste a puce et redondance Référencement Google 26 Novembre 2007
[Résolu] problème de liste à puce avec IE Développement d'un site Web ou d'une appli mobile 21 Novembre 2006
CSS et liste à puces Développement d'un site Web ou d'une appli mobile 1 Octobre 2005
[CSS] Améliorer le style des listes à puces Administration d'un site Web 26 Mars 2004
Trouver le trafic d'une liste d'URL ? Débuter en référencement Vendredi à 10:39
Liste des requètes fréquentes en bas de pages Référencement Google 24 Août 2022
Comment voir la liste des ces abonnés Facebook Facebook 11 Août 2022
Site non listé sur Google Débuter en référencement 19 Juin 2022
Outil de test de code HTTP en masse (sitemap ou liste d'URL) Référencement Google 19 Mai 2022
Occurrence des mots clés dans les pages listes de produits e-commerce 23 Février 2022
Suggestions de mots clés sur un liste de 15 000 mots Rédaction web et référencement 7 Décembre 2021
Récupérer URL destination liste redirection Netlinking, backlinks, liens et redirections 22 Novembre 2021
Erreur dans diagnostic Lighthouse : Registers an unload listener Débuter en référencement 29 Mai 2021
Mon projet est-il réaliste Débuter en référencement 11 Mars 2021
version universelle de addEventListener () ? Développement d'un site Web ou d'une appli mobile 12 Décembre 2020
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