display

Étagère de bibliothèque.

Compléter le code css pour obtenir un affichage tel que le suivant :
livres

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

    <head>
        <meta charset="utf-8">
        <title> livres </title>
        <style>
            /* le style ici ! */
        </style>
    </head>
    
    <body>
        <div>
            <p>
                <img src="images/game-html5.jpg" width="100" height="100" title="Foundation Game Design with HTML5 and JavaScript">
                Foundation Game Design with HTML5 and JavaScript
            </p>
            
            <p>
                <img src="images/processing.jpg" width="100" height="100" 
                title="Processing - A Programming Handbook for Visual Designers and Artists"> 
                Processing - A Programming Handbook for Visual Designers and Artists
            </p>
            
            <p>
                <img src="images/webGL.jpg" width="100" height="100" title="WebGL - Guide de développement d'applications web 3D">
                WebGL - Guide de développement d'applications web 3D
            </p>
        </div>
    </body>
</html>

Ci-dessous, un code possible. D'autres codes sont possibles pour obtenir le même résultat.

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

    <head>
        <meta charset="utf-8">
        <title> livres </title>
        <style>
            div{
                text-align:left;
               }
            p{
                width: 100px;
                border: 5px ridge black;
                display: inline-block;
                font-size: 8px;
                margin-right: 10px;
                padding: 3px;
                text-align: center;
             }  
        </style>
    </head>
    
    <body>
        <div>
            <p>
                <img src="images/game-html5.jpg" width="100" height="100" title="Foundation Game Design with HTML5 and JavaScript">
                Foundation Game Design with HTML5 and JavaScript
            </p>
            
            <p>
                <img src="images/processing.jpg" width="100" height="100" 
                title="Processing - A Programming Handbook for Visual Designers and Artists"> 
                Processing - A Programming Handbook for Visual Designers and Artists
            </p>
            
            <p>
                <img src="images/webGL.jpg" width="100" height="100" title="WebGL - Guide de développement d'applications web 3D">
                WebGL - Guide de développement d'applications web 3D
            </p>
        </div>
    </body>
</html>

Menu horizontal.

La liste ci-dessous est destinée à servir de menu.

Définir le style css pour que ce menu se présente comme suit :
menu horizontal

Pour que le texte des liens ne soit plus souligné, on utilise la règle css : a{text-decoration: none;}.
Vous trouverez les valeurs possibles pour la propriété text-decoration sur cette page.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Listes horizontales </title>
        <style>
             
        </style>
    </head>
    <body>
        <ol>
            <li> <a href="#">Lien 1</a> </li>
            <li> <a href="#">Lien 2</a> </li>
            <li> <a href="#">Lien 3</a> </li>
            <li> <a href="#">Lien 4</a> </li>
            <li> <a href="#">Lien 5</a> </li>
            <li> <a href="#">Lien 6</a> </li>
            <li> <a href="#">Lien 7</a> </li>
        </ol>
         
    </body>
</html>

Il y a plusieurs façons d'obtenir le résultat demandé.

Prenez le temps d'en trouver une autre que celle proposée ci-dessous.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Listes horizontales </title>
        <style>
            li{
                /* affichage en ligne : */
                display: inline; 
                margin: 1px; 
            }
            a{
                /* petit cadre :   */
                outline : green solid 1px;
                /* pour supprimer le soulignement des liens : */
                text-decoration: none;   
                /* la couleur de fonte en vert : */
                color : green;
            }
            
        </style>
    </head>
    <body>
        <ol>
            <li> <a href="#">Lien 1</a> </li>
            <li> <a href="#">Lien 2</a> </li>
            <li> <a href="#">Lien 3</a> </li>
            <li> <a href="#">Lien 4</a> </li>
            <li> <a href="#">Lien 5</a> </li>
            <li> <a href="#">Lien 6</a> </li>
            <li> <a href="#">Lien 7</a> </li>
        </ol>
         
    </body>
</html>

Menu horizontal avec un sous-niveau.

L'objectif est d'essayer de compléter le css afin d'avoir un menu se comportant comme suit :

Menu non survolé :
menu non déroulé

Menu "css" survolé :
menu non déroulé

Pour détecter le survol, on utilise le sélecteur :hover.
Consulter des exemples sur cette page.

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

    <head>
        <meta charset="utf-8">
        <title> menu </title>
        <style>
            h1{ 
                text-align: center;
                background-color: pink;
                color : rgb(0,150,0);
                font-weight: bold;
            }
           
            nav ul{
                list-style:none;
                margin: 0; padding:0;
            }
      
            nav li{
                z-index:1; /* le z-index pourra servir à afficher le menu 'par-dessus' le texte qui suit */
                padding: 2px;
            }
            
            nav a{
                text-decoration: none;                
            }
   
        </style>
    </head>
    
<body>
        <h1> ICN </h1>

        <nav>
            <ul class="horizontal">
                <li> <a href="#">HTML</a> </li>
                
                <li><a href="#">CSS </a>
                     <ul class="vertical">
                        <li><a href="#">Sélecteurs</a></li>
                        <li><a href="#">Couleurs</a></li>
                        <li><a href="#">Positionnement</a></li>
                    </ul>

                </li> 

                <li> <a href="#">JavaScript</a> </li>
            </ul>
        </nav>
 

    <h2> Présentation </h2>
    <p> bla bla bla </p>

    <h2> Objectifs </h2>
    <p> bli bli blu </p>


</body>
</html>

Il y a plusieurs possibilités pour arriver au résultat attendu ici.

L'important est que vous arriviez à en mener une à terme.

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

    <head>
        <meta charset="utf-8">
        <title> menu </title>
        <style>
            h1{ 
                text-align: center;
                background-color: pink;
                color : rgb(0,150,0);
                font-weight: bold;
            }
           
            nav ul{
                list-style:none;
                margin: 0; padding:0;
            }
             
            ul.horizontal{
                display: flex;
                flex-direction: row;
                height: 1.2em;
                line-height: 1.2em;   
            }
            
             
            
            nav li{
                z-index:1; 
                padding: 2px;
            }
            
            
            nav ul.vertical{
                display: none;
            }
              
            nav ul.horizontal>li:hover ul.vertical{
                display: block;
            }
            nav a{
                display: block;
                background-color : rgb(0,255,0);
                text-decoration: none;                
            }
        </style>
    </head>
    
    <body>
        <h1> ICN </h1>

        <nav>
            <ul class="horizontal">
                <li> <a href="#">HTML</a> </li>
                
                <li><a href="#">CSS </a>
                     <ul class="vertical">
                        <li><a href="#">Sélecteurs</a></li>
                        <li><a href="#">Couleurs</a></li>
                        <li><a href="#">Positionnement</a></li>
                    </ul>

                </li> 

                <li> <a href="#">JavaScript</a> </li>
            </ul>
        </nav>

 

    <h2> Présentation </h2>
    <p> bla bla bla </p>

    <h2> Objectifs </h2>
    <p> bli bli blu </p>


</body>
</html>