Index




-- Apprendre le langage --



HTML et CSS





Example10


Retour au tutorial "positionnement relatif et absolu"



z-index: 1;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eget est. Vivamus nibh. Maecenas tristique
augue at nibh. Sed suscipit diam eget pede. Nulla at nulla quis nunc aliquet mollis. Nulla massa magna, mollis
in, interdum ut, tempus in, arcu. Vestibulum dolor. Cras ullamcorper ligula euismod tellus tincidunt volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ultricies nisl vitae ipsum ultricies pulvinar.
Pellentesque tortor nibh, convallis ac, placerat id, sagittis non, turpis.



z-index: 2;

Mauris orci. Cras dui. Etiam commodo. Curabitur in enim. Nunc vitae diam id eros condimentum egestas. Duis ut risus
vitae ante accumsan laoreet. Morbi venenatis, leo in faucibus fringilla, felis nisl pulvinar augue, vitae faucibus
metus metus ac metus. Ut consectetuer quam sit amet massa. Sed pellentesque rhoncus urna. Maecenas sodales quam ac
lacus. Donec eleifend purus a ante. Integer mollis. Nunc pharetra condimentum felis. Nulla dapibus. Praesent eget
mi quis pede feugiat faucibus. Curabitur id orci. Nulla fermentum accumsan urna. Vestibulum interdum cursus velit.
Aenean sit amet dolor nec mi vestibulum imperdiet. Aliquam erat volutpat.

Example09


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce magna. Curabitur sagittis porttitor risus.
Maecenas tempus.


Retour au tutorial "positionnement relatif et absolu"



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eget est. Vivamus nibh. Maecenas tristique
augue at nibh. Sed suscipit diam eget pede. Nulla at nulla quis nunc aliquet mollis. Nulla massa magna, mollis
in, interdum ut, tempus in, arcu. Vestibulum dolor. Cras ullamcorper ligula euismod tellus tincidunt volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ultricies nisl vitae ipsum ultricies pulvinar.
Pellentesque tortor nibh, convallis ac, placerat id, sagittis non, turpis.


Nullam sit amet neque quis diam laoreet vehicula. Morbi neque neque, congue ut, luctus non, lobortis nec, mi.
Duis sollicitudin luctus orci. Aenean nec lectus vel justo suscipit semper. Quisque felis. Donec vel risus nec
ipsum pulvinar suscipit. Cras turpis justo, feugiat sed, tempus eu, egestas et, metus. Pellentesque id ligula
aliquam velit luctus semper. Vestibulum viverra, diam sed aliquet sollicitudin, nisl felis dictum wisi, quis
aliquet ipsum neque vel orci. Nullam id arcu.



Aliquam erat volutpat. Aenean pede tortor, luctus eu, mattis eget, varius et, pede. Etiam malesuada.
Sed urna ante, faucibus vestibulum, vulputate non, congue nec, felis. Mauris ante. In hac habitasse
platea dictumst. Nam elementum rutrum diam. Aenean auctor sapien in eros. Quisque ac metus. Mauris ut lorem
eget neque pellentesque iaculis. Duis dictum, lacus et vulputate condimentum, mi justo mollis augue, vel
scelerisque velit mi eu eros. Nulla justo dui, consectetuer id, sollicitudin eu, porta eu, enim. Phasellus
dictum.



Donec interdum tellus vel lacus. Nam at ante vel lectus bibendum varius. Pellentesque sagittis gravida est.
Duis consequat libero id pede. Mauris ultricies consectetuer erat. Morbi facilisis, elit et lacinia aliquam,
wisi augue pulvinar nibh, in gravida lacus diam quis nisl. Quisque ac arcu a odio sollicitudin facilisis. Aliquam
ut turpis. Etiam eget ipsum quis massa adipiscing pretium. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Curabitur porta condimentum tortor. Aliquam dictum, felis eget elementum rhoncus,
augue diam tempus eros, ut convallis quam pede ac odio.



Mauris orci. Cras dui. Etiam commodo. Curabitur in enim. Nunc vitae diam id eros condimentum egestas. Duis ut risus
vitae ante accumsan laoreet. Morbi venenatis, leo in faucibus fringilla, felis nisl pulvinar augue, vitae faucibus
metus metus ac metus. Ut consectetuer quam sit amet massa. Sed pellentesque rhoncus urna. Maecenas sodales quam ac
lacus. Donec eleifend purus a ante. Integer mollis. Nunc pharetra condimentum felis. Nulla dapibus. Praesent eget
mi quis pede feugiat faucibus. Curabitur id orci. Nulla fermentum accumsan urna. Vestibulum interdum cursus velit.
Aenean sit amet dolor nec mi vestibulum imperdiet. Aliquam erat volutpat.

Example08


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce magna. Curabitur sagittis porttitor risus.
Maecenas tempus.


Retour au tutorial "positionnement relatif et absolu"

Example07




Retour au tutorial "positionnement float"

Example06




CSS :


#menu
 {
  width: 100px;
  float: left;
  margin: 0px 5px;
  border: 1px #CCC solid;
 }

#page
 {
  width: 600px;
  float: left;
  margin: 0px 5px;
  border: 1px #CCC dashed;
 }

HTML :


<body>
 <div id="menu" >
  <ul>
  Menu
  <li> &lt; Page 1</li>
  <li> &lt; Page 2</li>
 </ul>
</div>
<div id="page">
 <p>Lorem Ipsus</p>
 </div>
</body>


Retour au tutorial "positionnement float"


Example05 

 voici un fragment de code.


Ceci est un paragraphe. Avec du texte

Beaucoup de texte...


Retour au tutorial "La syntaxe des css"

Example04




  • Accueil

  • Qui sommes nous ?

  • Nos travaux



  • Forum

  • Livre d'or

  • Chat

  • Contact



Retour au tutorial classes ou identifiants

Example03


Champ type text :



Champ type password :



Champs type checkbox :
Valeur 1

Valeur 2

Valeur 3



Champ type radio :
Valeur 1

Valeur 2

Valeur 3



Champ type hidden :



Champ type button, submit et reset :







Champ type text avec l'attribut disabled="disabled" :



Champ type text avec l'attribut readonly="readonly" :



Champ type checkbox avec l'attribut checked="checked" :
Valeur 1 (checked)

Valeur 2

Valeur 3



Champ type radio avec l'attribut checked="checked" :
Valeur 1 (checked)

Valeur 2

Valeur 3



Champ avec balise <textarea> </textarea>



Champ avec balise <select> </select>



Champ avec balise <select> </select> et attribut multiple="multiple"


Retour au tutorial sur les formulaires

example02


Ceci est un block :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer purus erat, condimentum a,
rutrum sit amet, faucibus quis, quam. In dignissim commodo arcu. Ut et ipsum sed wisi cursus
ultrices. Integer porta dolor at nunc. Mauris ultricies. Cras gravida leo eu neque. Phasellus
id erat in purus convallis mollis. [inline] Nullam condimentum. Nam elit metus, elementum quis,
volutpat sed, feugiat eget, eros. Vivamus cursus ultrices sapien. Sed consequat ligula non
lectus. Pellentesque vehicula orci quis justo. Maecenas aliquet ante sit amet turpis.
Sed laoreet hendrerit lorem. Integer dapibus, quam vel posuere pharetra, magna felis egestas
velit, euismod euismod odio ante et metus. Nulla consequat ligula.



---- Il y a une séparation ----



Ceci est un deuxième block

Il n'y a pas de séparation avec un élément inline.



Retour au tutorial

example01

Titre Principal


sommaire



  • Partie 1 (Liste à puce)

    • sous - liste

    • sous - liste 2

    • sous - liste 3

    • sous - liste 4



  • partie 2

  • partie 3

  • ...



Partie 1


Ceci est un paragraphe :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer purus erat, condimentum a,
rutrum sit amet, faucibus quis, quam. In dignissim commodo arcu. Ut et ipsum sed wisi cursus
ultrices. Integer porta dolor at nunc. Mauris ultricies. Cras gravida leo eu neque. Phasellus
id erat in purus convallis mollis. Nullam condimentum. Nam elit metus, elementum quis,
volutpat sed, feugiat eget, eros. Vivamus cursus ultrices sapien. Sed consequat ligula non
lectus. Pellentesque vehicula orci quis justo. Maecenas aliquet ante sit amet turpis.
Sed laoreet hendrerit lorem. Integer dapibus, quam vel posuere pharetra, magna felis egestas
velit, euismod euismod odio ante et metus. Nulla consequat ligula.


Partie 2


sous partie1


sous-sous partie


sous-sous-sous partie

....


Retour au tutorial

Inscription à : Articles (Atom)