Dépannage informatique à domicile NCT Micro
  Cliquez ici pour vous abonner à ce flux RSS  

premier paragraphe de texte

deuxième paragraphe de texte

En renseignant la proppriété position:relative au second paragraphe, celui-ci se décale du flux courant


Codage CSS de l'exemple:

/* corps de page de couleur bleue */
body {
background-color: #297cbc;
}

/* bloc div de couleur jaune */
div {
width: 300px;
height: 200px;
background: yellow;

}

/* bloc paragraphe de couleur orange */
p#premier {
width: 100px;
background: orange;

}

/* bloc paragraphe de couleur verte avec une position relative au bloc div, les mouvements left et bottom sont renseignés*/
p#second {
position: relative;
left: 20px;
bottom: 15px;
margin-top: 0;
margin-left: 3em;
width: 150px;
background: green;

}

/* marges de paragraphe à 0 pour structurer les blocs */
p {
margin : 0;
}

Code HTML pour afficher le style CSS

<html>
< head>
< style type="text/css"> @import url(style/background.css);</style>
< /head>
< body>
<div id="conteneur">
< p id="premier">premier paragraphe de texte</p>
< p id="second">deuxième paragraphe de texte</p>
< /div>
< /body>
< /html>