Les attributs simples possibles sont : Le paramétrage est expliqué après
-
width : La largeur qui est exprimée en px ou en %
-
height : La hauteur qui est exprimée en px, en % ou mise en "auto"
-
border : Les bordures : qui sont définies par une épaisseur en px, une couleur, une nature (pleine, double, pointillés..), des arrondis aux angles
-
margin : Son centrage par rapport à l'élément (div) qui l'encadre, exprimé en px ou mis en "auto"
-
padding : La marge interne (entre le cadre et le texte qu'il contient), exprimée en px ou mis en "auto"
-
background-color : La couleur du fond, exprimé par une couleur, une opacité (qui affecte même le texte)
-
background-image : Une image de fond, exprimée par une url, et sa manière de prise en compte (mise à l'échelle ou non)
-
box-shadow : Une ombre, définie par une couleur et 3 largeur en px (le décalage, le floutage en x, le floutage en y)
-
overflow : L'apparition d'une scroll barre sur la droite i le texte déborde, définie en "auto" (votre navigateur prend la main) ou scroll
Exemple ci-dessous :
Une 1ère div (bordure blanche fond vert) encadre une 2ème div (bordure en pointillé, fond gris avec opacité de 0,8 )
Dans la 1ère div :
- J'ai défini un padding: 20px, cela centre la 2ème div à l'intérieur.
- box-shadow, donne un halo sur la droite et le bas
- border: 3px double
#fff, pour une bordure double il faut au minimum une largeur de 3px
Dans la 2ème div :
- background-color:
#cccccc; opacity: 0.8, défini un fond gris avec une transparence de 0,8. (0 = transparent et 1 = 100% opaque)
le texte de la div est aussi affecté.
- padding: 20px définit une marge de 20px entre le texte et les bords du cadre
- overflow: auto, colle une scroll barre à droite
- border: 4px dotted
#0f1428 définit une bordure en pointillé
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel erat sapien. Fusce facilisis sagittis eros nec mattis. Fusce adipiscing mollis sollicitudin. Vestibulum bibendum nisi non sem feugiat non semper tortor lacinia. Mauris ut elit metus. Etiam id orci libero. Integer libero arcu, convallis quis ornare in, porta sed neque. Cras quis leo a justo malesuada elementum id sed libero. Quisque at augue ligula, ut porttitor elit. Cras id dolor vitae odio posuere ultrices eget eu quam. Sed dapibus commodo velit vel pellentesque. Nam ligula urna, dapibus ac placerat sed, luctus id ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque odio metus, congue id tempus vitae, viverra in nibh. Aenean congue felis non quam aliquet fermentum vitae quis sapien. Pellentesque lacinia eleifend diam, eu posuere sapien eleifend eget. Mauris vitae fermentu justo. Morbi pulvinar, lectus ut varius fringilla, augue mauris ullamcorper neque, a ullamcorper est libero sed eros. Proin in metus ac dolor ultricies aliquam. Integer at justo mauris. Duis vel quam et enim interdum venenatis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel erat sapien. Fusce facilisis sagittis eros nec mattis. Fusce adipiscing mollis sollicitudin. Vestibulum bibendum nisi non sem feugiat non semper tortor lacinia. Mauris ut elit metus. Etiam id orci libero. Integer libero arcu, convallis quis ornare in, porta sed neque. Cras quis leo a justo malesuada elementum id sed libero. Quisque at augue ligula, ut porttitor elit. Cras id dolor vitae odio posuere ultrices eget eu quam. Sed dapibus commodo velit vel pellentesque. Nam ligula urna, dapibus ac placerat sed, luctus id ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque odio metus, congue id tempus vitae, viverra in nibh. Aenean congue felis non quam aliquet fermentum vitae quis sapien. Pellentesque lacinia eleifend diam, eu posuere sapien eleifend eget. Mauris vitae fermentu justo. Morbi pulvinar, lectus ut varius fringilla, augue mauris ullamcorper neque, a ullamcorper est libero sed eros. Proin in metus ac dolor ultricies aliquam. Integer at justo mauris. Duis vel quam et enim interdum venenatis.
Autre exemple :La première div a une image en fond. Dans la 2ème div, j'ai placé une image.
Notez la différence de codage.
- Code:
-
<div style="width:400px; height: 200px; background-image: url('http://i49.servimg.com/u/f49/16/59/46/39/testde10.png'); margin: auto; padding: auto; border: 5px groove #7a4a0c; border-radius: 100px 0 100px 0; "><div style="margin: auto; padding: 20px;">
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://img11.hostingpics.net/pics/3309092003.gif&sa=X&ei=3b1UVeuHB8TSU6vlgeAC&ved=0CAkQ8wc4Og&usg=AFQjCNHde52O5h_8EwuuFUBST9ONluPHYg" style="width: auto;"></div></div>
Paramétrage de ce merdier
-
width : La largeur qui est exprimée en px ou en % de la largeur définie dans la div parent
- Code:
-
<div style="width: 200px;">Blabla...</div>
-
height : La hauteur qui est exprimée en px, en % de la largeur définie dans la div parent ou mise en "auto". Pour la 1ère div, je vous conseille de mettre "auto", elle s'agrandira en fonction du contenu que vous ajoutez dedans.
- Code:
-
<div style="width: 500px; height: auto;">Blabla...</div>
-
border : On peut définir les bordures individuellement, dans ce cas, spécifiez avant les attributs: border-left , border-right, border-top ou border-bottom
L'épaisseur peut être différente : border-width:1px 2px 3px 2px; (gauche, haut, droite, bas)
Les différents types de bordure : - Code:
-
<div style="width:200px; height: auto; font-family: Times New Roman; font-size: 18px; text-align: center; color: #fff; padding: 10px; border: 4px solid #27859c;">solid</div>
solid
double
dotted
dashed
double (3px mini)
groove (4px mini)
ridge (4px mini)
inset (4px mini)
outset (4px mini)
Les arrondis :
border-radius:10px ==> donne un arrondi de rayon 10 px aux 4 angles
border-radius:10px 100px 0 10px ==> angle supérieur gauche à 10 px, après on tourne dans le sens des aiguille d'une montre (pour une valeur à 0, pas besoin de mettre l'unité px)
- Code:
-
<div style="border: 5px double #cccccc; border-radius: 10px 100px 0 10px;">Blabla...</div>
border-radius: 10px 100px 0 10px
-
margin : margin: 15px => met une marge
extérieure de 15px mini avec la div qui entoure celle-ci
Cette marge peut être spécifiée vis à vis d'un côté : margin-left, margin-right, margin-top ou margin-bottom
auto, valeur seule, marge calculée automatiquement,
inherit, valeur seule, hérite des propriétés de son parent
- Code:
-
<div style="width: 500px; height : auto; margin-left: 20px; margin-top: 30px;">Blabla...</div>
-
padding : padding : 15px => met une marge
intérieure de 15px mini avec le contenue de la div
Cette marge peut être spécifiée vis à vis d'un côté : padding-left, padding-right, padding-top ou padding-bottom
► très utile pour écarter du texte de son cadre
- Code:
-
<div style="width: 500px; height : auto; padding: 50px;">Blabla...</div>
-
background-color : Généralement donnée en hexadécimal (
#000000 pour le noir,
#ffffff pour le blanc), on la trouve aussi en rgb(154,205,50), les noms en anglais pour les couleurs basiques marchent aussi (black, white, red, green, etc)
On peut y ajouter une valeur de transparence avec opacity (valeur de 0 pour transparent à 1 pour opaque) ex: opacity: 0.8
affecte tout le contenu de la div
- Code:
-
<div style="width: 250px; height : 40px; background-color: #c5c5c5; opacity: 0.9;">Blabla...</div>
background-color
#c5c5c5; opacity: 0.9
-
background-image : Permet de mettre une image en fond. la syntaxe est : background-image: url('https://i.servimg.com/u/f49/16/59/46/39/testde10.png')
On y ajoute des indicateur de positionnement :
background-repeat: repeat (ou no-repeat) reproduit X fois l'image si la taille de la div est plus grande que l'image
background-position: center center (ou 50% 50%) pour centrer l'image dans la div
background-position: left top (ou 0% 0%) pour la mettre en haut à gauche dans la div
background-position: right bottom (ou 100% 100%) pour la mettre en bas à droite dans la div
background-size : cover ou contain, l'image se redimensionne sans déformer à la taille de la div
background-size : auto, l'image garde sa taille initiale
background-size : % ou px, on impose la taille de l'image
- Code:
-
<div style="width: 650px; height 100px: auto; background-image: url('http://i49.servimg.com/u/f49/16/59/46/39/testde10.png'); background-size : cover; background-repeat: no-repeat;">Blabla...</div>
background-size : cover; background-repeat: no-repeat
background-size : none; background-repeat: repeat
-
box-shadow : les deux 1er chiffres correspondent au décalage en x et y, le dernier l'épaisseur du floutage, suit la valeur de la couleur
box-shadow: 1px 1px 12px
#555;
- Code:
-
<div style="width: 500px; height : auto; box-shadow: 1px 1px 12px #555;">Blabla...</div>
box-shadow
-
overflow :Permet de gérer les débordements de texte
visible ou inherit : tout le texte sera visible et pourra parfois déborder sur le reste
hidden : ce qui dépasse du cadre de la div est invisible
auto : ce qui dépasse du cadre de la div sera visible grace à une scroll barre horizontale ou verticale (overflow-x, ou overflow-y force la scroll barre que dans un sens)
initial : garde les propriété de la div parent
- Code:
-
<div style="width: 500px; height : auto; overflow: auto;">Blabla...</div>
Exemple d'une div avec tous les paramètres réunis :Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel erat sapien. Fusce facilisis sagittis eros nec mattis. Fusce adipiscing mollis sollicitudin. Vestibulum bibendum nisi non sem feugiat non semper tortor lacinia. Mauris ut elit metus. Etiam id orci libero. Integer libero arcu, convallis quis ornare in, porta sed neque. Cras quis leo a justo malesuada elementum id sed libero. Quisque at augue ligula, ut porttitor elit. Cras id dolor vitae odio posuere ultrices eget eu quam. Sed dapibus commodo velit vel pellentesque. Nam ligula urna, dapibus ac placerat sed, luctus id ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque odio metus, congue id tempus vitae, viverra in nibh. Aenean congue felis non quam aliquet fermentum vitae quis sapien. Pellentesque lacinia eleifend diam, eu posuere sapien eleifend eget. Mauris vitae fermentu justo. Morbi pulvinar, lectus ut varius fringilla, augue mauris ullamcorper neque, a ullamcorper est libero sed eros. Proin in metus ac dolor ultricies aliquam. Integer at justo mauris. Duis vel quam et enim interdum venenatis.
- Code:
-
<div style="width:400px; height: 250px; font-size: 14px; text-align: justify; color: #252524; background-image: url('http://i49.servimg.com/u/f49/16/59/46/39/testde10.png'); background-size : cover; background-repeat: no-repeat; background-color: white; opacity: 0.8; overflow: auto; padding: 30px; border: solid #212c57; border-width:1px 2px 3px 2px; border-radius:100px 10px 0 50px; box-shadow: 3px 3px 5px #8ca2f8; ">Blabla...Duis vel quam et enim interdum venenatis.</div>