Cadres & Bordures.

              1.Cadres Bases.
     On peut définir un cadre autour d'un éléments défini par un tag affecté d'un style. Ici on a quelques différences entre les rendus de Netscape et Internet Explorer. Pour visualiser ces différences, il vaut mieux disposer des deux navigateurs.
    Définition d'un cadre, la configuration minimale fonctionnant dans les deux navigateurs est,  border : 20pt solid blue, on spécifie une largeur de bordure et un style, ici solid et la couleur. Si vous visualisez cette page, (cadre ci dessous), sur les deux navigateurs, vous voyez que Netscape limite l'espace du tag et  le cadre à l'espace définit par le texte alors que IE, (Internet Explorer) poursuit l'espace et le cadre jusqu'au bout de la ligne, cela est particulièrement visible sur le deuxième tag, "Définition". On peut limiter l'espace dans IE avec l'instruction width, (largeur), malheureusement celle ci supprime le formatage de texte hérité du tag Body dans Netscape. Il en est de même si nous insérons ces instructions dans le tag Div. Nous n'avons pas compatibilité entre les deux navigateurs. On peut contourner ce problème en réécrivant un tag span an niveau du texte, en affectant le style désiré à ce tag. Nous pouvons alors supprimer le style dans le tag Body!  Exemple.
    Dans cet exemple nous voyons deux choses, nous rajoutons une instruction width dans le Div, ceci pour IE, et un span de définition du texte, pour Netscape.

    Exercice : Modifier dans la zone de code ci-dessus l'épaisseur du cadre, dans l'instruction border , modifier la couleur, en employant les couleurs vu à la page 2 de ce tutorial.
    Exercice : Modifier l'aspect des cadres en changeant leur style. Dans l'exemple donné, le style est solid, essayer, none, solid, double, inset, outset, groove, ridge. Le style none sert à supprimer l'héritage du cadre par les tags inclus.

              2.Cadres Marges.
    Appliquer les mêmes instructions que pour un paragraphe.
    Exercice, dans la fenêtre ci-dessus, ajoutez dans un des tags Div une instruction, margin-left : 50pt
    Dand le premier Div, margin:10pt 20pt 30pt 40pt    faire varier ces valeurs

              3.Cadres Marges intérieures.
   padding-top, padding-right, padding-bottom, padding-left, paddings   
    Ces instructions précisent l'espace devant exister entre la bordure et le contenu du cadre. Respectivement entre la bordure haute, droite, basse, gauche.
    Exemple programmant les valeurs haute gauche et droite
    Exercice, changer les valeurs de marge, rajouter la marge basse
    On peut préciser les 4 valeurs en une seule instruction : padding
    l'ordre est haut droit bas gauche
    Exemple    padding : 10pt 20pt 30pt 40pt
    Exercice    changer les valeurs de marges.

	Sommaire
Précédent		Suivant