Published using Google Docs
Info2012
Updated automatically every 5 minutes

1) Affichez le résultat

<div id="example">

 <p><span>Sous le pont Mirabeau coule la Seine Et nos amours. Faut-il qu'il m'en souvienne. La joie venait toujours après la peine. Vienne la nuit sonne l'heure</span></p>

</div>

#example p{

 padding-top:20px;}

p{

 border:4px solid orange;background:red;}

p span{

 display:block;border:1px solid blue;background:indianred;}

<ul class="menu">

 <li><a href="#">Home</a></li>

 <li><a href="#">About</a></li>

 <li><a href="#">Contact us</a></li>

</ul>

.menu a{

 display:block;}

.menu a{

 border:1px solid #f90;background:#fec;padding:4px 10px;

 margin:0 0 1px 0; color:#c60; text-decoration:none;

 font:normal normal normal 0.8em sans-serif;}

.menu a:hover, .menu a:focus, .menu a:active{

 background:#f8fbd0;}

.menu{

 width:7em;}

.menu, .menu li

{

 margin:0;padding:0;list-style-type:none;}

<ul class="menu">

 <li><a href="#">MAth</a></li>

 <li><a href="#">Info</a></li>

 <li><a href="#">Anglais</a></li>

</ul>

.menu a{

 border:1px solid #f90;padding :5px;}

.menu{

width : 500px;}

.menu li

{

 margin:1px;padding:10px;display:inline-block;}

2) Dessiner le résultat des codes suivants.

Vous indiquez par transparence les limites de chaque bloc.

#Gauche {float: left;width: 23%;margin-top: 10px;}

div {border: 1px solid;}

#Centre {float: left;width: 48%;}

#Droite {float: left;width: 18%;}

<body>

<div id="Gauche">

<div id="Centre">

<div id="Droite">

</body>

En partant du 1)  et en modifiant ce qui est indiqué.

2)

 #Centre {

         float: left;

         width: 48%;

}

3)

#Centre {

         float: left;

         width: 48%;

}

#Droite {

          float: left;

         width: 18%;

}

4)

#Droite {

    background: none repeat scroll 0 0 palegreen;

    float: left;

    left: 0;

    padding: 10px 1%;

    position: absolute;

    width: 18%;

}

5)

#Centre {

    background: none repeat scroll 0 0 blanchedalmond;

    float: left;

    padding: 10px 1%;

    position: relative;

    top: -313px;

    width: 48%;

}

3) Donner le code et le css

Pour concevoir le menu dynamique vu en cours.

On notera chaque étape de transformation du code CSS.