La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Lundi 15 Décembre 2008 Aujourd'hui, les balises et.

Présentations similaires


Présentation au sujet: "Lundi 15 Décembre 2008 Aujourd'hui, les balises et."— Transcription de la présentation:

1 Lundi 15 Décembre 2008 Aujourd'hui, les balises et

2 Les balises DIV vient de "DIVision". Les balises sont des rectangles dans lesquels on affiche un ou plusieurs éléments XHTML. Les balises sont souvent appelées "boites CSS" dans le jargon CSS Les balises ont les propriétés suivantes : width : largeur ; height : hauteur ; margin : marges extérieures ; padding : marges intérieures ; background-color.

3 Exercice sur les balises Définir une balise dont les caractéristiques sont les suivantes : largeur : 300px, hauteur: 50px, couleur d'arrière-plan : jaune, marges extérieures : 30px, Marges intérieures : 20px. Insérer du texte à l'extérieur et à l'intérieur de la balise et observer l'influence des marges. Redimensionnez la fenêtre et observez ce qu'il se passe.

4 Solution avant la balise div avant la balise div avant la balise div avant la balise div intérieur de la balise div intérieur de la balise div intérieur de la balise div intérieur de la balise div intérieur de la balise div intérieur de la balise div intérieur de la balise div intérieur de la balise div intérieur de la balise div Après la balise div Après la balise div Après la balise div Après la balise div Après la balise div

5 Opacité d'une boîte et positionnement absolu Les balises peuvent être rendues translucides. Vous utiliserez : 1) Pour Internet Explorer, la propriété Filter: Alpha (Opacity=valeur1, style=0); 2) Pour les navigateurs Gecko (Firefox par exemple), -moz-opacity: valeur2 Où valeur1 est compris entre 0 et 100 et valeur2 est compris entre 0 et 1. Exercice : Définissez une boîte d'opacité 50% opérationnelle dans Internet Explorer et Firefox. Affichez cette boîte au-dessus d'une image JPG.

6 Solution .alpha { Filter: Alpha(Opacity=50, Style=0); -moz-opacity: 0.5; }

Une balise div translucide

Présentations similaires


Annonces Google