X-Git-Url: http://git.nguyen.vg/gitweb/?a=blobdiff_plain;f=unix_prog_web%2Funix_prog_web_05.xhtml;h=29a7ce1947cf63a1ba8f3be9e6ddf5f404f216bf;hb=d34876c3ababbacc76f09a3b292e6b188e02fbb8;hp=3c32ca032e864a008979ec4fd8c98108dcdc204a;hpb=0a552a95e70324a04e9d06bd30ac5bc96b2a58b5;p=hacks%2FsimpleWebSlides.git diff --git a/unix_prog_web/unix_prog_web_05.xhtml b/unix_prog_web/unix_prog_web_05.xhtml index 3c32ca0..29a7ce1 100644 --- a/unix_prog_web/unix_prog_web_05.xhtml +++ b/unix_prog_web/unix_prog_web_05.xhtml @@ -22,7 +22,19 @@ - + - +
-

Programmation Internet

+

Unix et Programmation Web

Cours 5

kn@lri.fr
http://www.lri.fr/~kn @@ -57,12 +69,12 @@

On peut appliquer un style CSS

@@ -367,6 +379,8 @@

+fixed + (right:10pt,top:10pt)

Positionnement (exemple)

@@ -375,8 +389,11 @@ a { position: fixed; right:10pt; top: 10pt; - }
-
+ + } + +
+
a { position: relative; left: 10pt; bottom: -5pt; @@ -384,19 +401,20 @@ a { position:absolute; right:0pt; bottom: 10pt; - } -
  • …
    • …]]>     -

    - + } + +
    + +

  • …
    • …]]>

    +

    Autres propriétés

    @@ -419,7 +437,6 @@ transparence: rgba(x, y, z, a), avec 0 ≤ x,y,z ≤ 255 et 0 ≤ a ≤ 1 -
    @@ -485,5 +502,167 @@ div.foo ul li a:visited { color: red; }
    - + +
    +

    exemple : menu dépliable

    + +
  • Entrée 1 +
    • Sous-entrée 1.1
      • +
    • Sous-entrée 1.2
      • +
    • Sous-entrée 1.3
      • +
    +
    • +
  • Entrée 2 +
    • Sous-entrée 2.1
      • +
    • Sous-entrée 2.2
      • +
    • Sous-entrée 2.3
      • +
    +
    • + +]]>     +
    +
    +

    Analyse

    +

    Pour que le ménu soit « dépliable » lors du survol de la souris, + on souhaite que :

    + +
    +
    +

    exemple : menu dépliable (démo)

    + + +
    +
    +

    Style CSS du menu

    +

    + li { padding: 10pt 0pt 10pt 0pt; + display:block; + background:orange; + color:blue; + } + .sous-menu { display : none; } + + ul.menu > li:hover ul.sous-menu { display: block; } + ul.menu > li:hover ul.sous-menu > li { + background:blue; + color:orange; + } + +

    +
    +
    +

    Priorité d'application des règles (cascade)

    +

    Les règles sont appliquées dans l'ordre suivant :

    + +
    +
    +

    z-index

    +

    Il arrive que certaines boites se recouvrent :

    +
    +
    + Du texte recouvert +
    +
    +
    +
    +

    On peut utiliser la propriété z-index pour définir l'ordre + d'empilement (plus elle est élevée, plus la boite est en avant plan) +

    +
    +
    + Du texte recouvert +
    +
    +
    +
    +
    +

    requête media-type

    +
    +

    Différents styles pour différents affichages

    +

    On peut charger un style CSS de manière conditionnelle grace à + l'attribut media de la balise link. + La valeur de l'attribut est une formule logique où l'on + peut tester le type de support d'affichage ainsi que ces + caractéristiques physiques : +

    + + + + + +]]> +

    Cela permet d'appliquer des styles spécifiques lors de l'impression + d'une page ou pour des terminaux mobiles (ayant une petite taille + d'écran) ou de changer de style si l'orientation de l'écran est modifiée.

    +
    +
    +

    Gestion du débordement

    +

    L'attribut overflow permet de gérer le débordement. Il + peut prendre les valeurs visible, hidden et auto + :

    +
    +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do +eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad +minim veniam, quis nostrud exercitation ullamco laboris nisi ut +aliquip ex ea commodo consequat. Duis aute irure dolor in +reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla +pariatur. Excepteur sint occaecat cupidatat non proident, sunt in +culpa qui officia deserunt mollit anim id est laborum. +
    +
    +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do +eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad +minim veniam, quis nostrud exercitation ullamco laboris nisi ut +aliquip ex ea commodo consequat. Duis aute irure dolor in +reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla +pariatur. Excepteur sint occaecat cupidatat non proident, sunt in +culpa qui officia deserunt mollit anim id est laborum. +
    +
    +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do +eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad +minim veniam, quis nostrud exercitation ullamco laboris nisi ut +aliquip ex ea commodo consequat. Duis aute irure dolor in +reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla +pariatur. Excepteur sint occaecat cupidatat non proident, sunt in +culpa qui officia deserunt mollit anim id est laborum. +
    + +
    +