TD : menu

Nous allons prendre pour prétexte de créer un menu déroulant pour appliquer deux notions vues en cours.

1. position absolue et
2. le conteneur

Nous verrons plus tard comment réaliser un menu déroulant en quelques lignes de CSS.

Challence

Trouvez le sélecteur permettant de mettre le style aux notes paires comme le montre la figure suivante. Le HTML est donnée à gauche.

sélecteur {
  background-color : red
}

JS Bin on jsbin.com

nth-child and Co

p:nth-child ( pos )
Le style est appliqué à toutes balises p enfants en position pos.

overflow !

Définition La propriété overflow permet de couper (ou de laisser voir) ce qui dépasse d'un cadre. Exemple d'utilisation La propriété overflow est utilisée de façon très classique pour l'animation. L'idée est représentée par la figure suivante. Deux images sont positionnées l'une à coté des autres (par float:left). code en Action La propriétés overflow est mise à hidden pour ne faire voir que la première photo. code en action Il suffit de faire décaler les photos (par la speudo classe :over) de la largeur d'une photo pour voir apparaître la seconde photo précédemment cachée. C'est maintenant la première photo qui est cachée. Autre exemple avec du texte. L'idée est de construire un cadre contenant une image suivi d'un commentaire. La dimension du cadre est celle de l'image pour cacher le commentaire. En se placant sur l'image, il suffit de modifier la marge du commentaire (valeur négative) pour le faire remonter sur l'image. Dans la vidéo suivante, nous avons supprimer la propriété overflow pour suivre le déplacement du commentaire. En se plaçant sur l'image (effet over), la propriété margin-top est modifiée en valeur négative, assurant ainsi que le commentaire remonte. Dans le fichier CSS mainstyle du code en action rechercher la classe : .boxgrid {    ...     margin-left: 10px;     margin-right: 10px;     overflow-x: hidden;     overflow-y: hidden;     position: relative;     width: 292px; } Mettez la propriété overflow à la valeur visible. Finalement, cette technique pourrait être généralisée pour les quatre cotés de l'image. Pour aller plus loin Caroussel ++ Ouvrir le fichier code en action, puis rechercher la classe <div class="ca-content-wrapper"> et de rechercher dans le fichier de style : .ca-content-wrapper{ .... overflow:hidden; }

outils !

• http://css3please.com/
• http://robertnyman.com/css3/
• CSS3 Box Generator
• CSS Tricks : Button Generator
• CSS3 Generator
• CSS3 Border Radius Generator
• @font-face Generator
• CSS3 Maker
• CSS Gradient Generator

style de base

Comment trouver le style de base dans mozilla !

tapez resource://gre-resources/html.css dans la barre d'adresse.

fichier pour test

fichier test

TD CSS

• CSS

test : niveau 1

Test pendant les vacances !