listes

Liste avec imbrications

Modifier le code ci-dessous pour obtenir la liste telle que présentée dans l'onglet suivant.

liste à obtenir

code à modifier

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title>  liste </title>
    </head>
    
    <body>
         <!-- code de la liste à écrire ici -->
    </body>
</html>

Une solution

La seule "difficulté" est d'imbriquer correctement les balises.

Pour vous aider dans une imbrication correcte, rappelons qu'une indentation pour chaque niveau est une aide considérable pour la lisibilité.

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title>  liste </title>
    </head>
    
    <body>
        <h1>Éléments HTML</h1>
		<ol type="A">
			<li>Document et en-tête
				<ol type="1">
					<li>Doctype</li>
					<li>head</li>
				</ol>
			</li>
			<li>Structure
				<ol type="1">
				    <li>header </li>
					<li>article</li>
					<li>section</li>
					<li> footer</li>
				</ol>
			</li>
			<li>Groupes
				<ol type="1">
					<li>Paragraphe</li>
					<li>div</li>
					<li>Les listes
						<ol type="a">
							<li>Liste non ordonnée</li>
							<li>Liste ordonnée</li>
							<li>Liste de définitions</li>
						</ol>
					</li>
				    <li>Tableaux</li>				
				</ol>
			</li>
			<li> Éléments embarqués</li>
			<li>Texte</li>
			<li>Formulaires</li>							
		</ol>
    </body>
</html>

Liste avec puce image

Compléter le code pour obtenir la liste telle que présentée ci-dessous.

liste à obtenir

L'image pour la puce est la suivante : panda . Avec firefox, un clic droit sur cette image (puis choisir "informations sur l'image") vous permet d'obtenir l'url.

Code à modifier

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> structure 2 </title>
        <style>
           /*  style pour la puce */
        </style>
    </head>
    
    <body>
           <!-- code  pour la liste -->
    </body>
</html>

Une solution

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> structure 2 </title>
        <style>
           ul{list-style : url("ul_images/panda.png");}
        </style>
    </head>
    
    <body>
           <ul>
            <li>Au secours du petit panda -   1995 </li>
            <li>Kung Fu Panda (1) -   2008 </li>
           </ul>
    </body>
</html>

Liste horizontale.

Chercher sur la toile comment afficher une liste horizontalement. Mettre en oeuvre ci-dessous.

code à compléter

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> liste horizontale </title>
        <style>
           /* code pour liste horizontale */
        </style>
    </head>
    
    <body>
            <!-- code de la liste -->
    </body>
</html>

Une solution avec display: inline-block;

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> liste horizontale </title>
        <style>
            li{ display: inline-block;}
        </style>
    </head>
    
    <body>
          <h2> Liste ul </h2>
          
          <ul>
            <li> item 1 </li>
            <li> item 2 </li>
            <li> item 3 </li>
            <li> item 4 </li>
            <li> item 5 </li>
          </ul> 
         
         
          <h2> Liste ol </h2>
          
          <ol type="i">
            <li> item 1 </li>
            <li> item 2 </li>
            <li> item 3 </li>
            <li> item 4 </li>
            <li> item 5 </li>
          </ol> 
         
    </body>
</html>

Un effet secondaire : suppression des puces et numéros.

Une solution avec float

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> liste horizontale </title>
        <style>
            li{ float:left; margin-right: 3em;}
            h2{clear:both;}
        </style>
    </head>
    
    <body>
          <h2> Liste ul </h2>
          
          <ul>
            <li> item 1 </li>
            <li> item 2 </li>
            <li> item 3 </li>
            <li> item 4 </li>
            <li> item 5 </li>
          </ul> 
         
         
          <h2> Liste ol </h2>
          
          <ol type="i">
            <li> item 1 </li>
            <li> item 2 </li>
            <li> item 3 </li>
            <li> item 4 </li>
            <li> item 5 </li>
          </ol> 
         
    </body>
</html>

Une solution avec display: flex;

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> liste horizontale </title>
        <style>
            ul, ol{display: flex;}
            li{margin: 2em;}
            
        </style>
    </head>
    
    <body>
          <h2> Liste ul </h2>
          
          <ul>
            <li> item 1 </li>
            <li> item 2 </li>
            <li> item 3 </li>
            <li> item 4 </li>
            <li> item 5 </li>
          </ul> 
         
         
          <h2> Liste ol </h2>
          
          <ol type="i">
            <li> item 1 </li>
            <li> item 2 </li>
            <li> item 3 </li>
            <li> item 4 </li>
            <li> item 5 </li>
            <li> effet bizarre ici sur la numérotation?</li>
          </ol> 
         
    </body>
</html>