Il arrive parfois qu'en CSS certaines lignes se contredisent, exemple :
Bonjour tout le monde !
p{ color: red; } p{ color: green; }
Bonjour tout le monde
<p>
paragraphe et juste en dessous, nous demandons la couleur verte.!important;
, exemple : Bonjour tout le monde !
p{ color: red !important; } p{ color: green; }
Bonjour tout le monde
color:green;
Bonjour tout le monde !
html body p{ color: red; } p{ color: green; }
<p>
, notre ligne css avec la couleur rouge prendra la priorité :Bonjour tout le monde
color:green;
!important
ou préciser la hierarchie pour prendre le dessus sur les autres régles CSS ! ;-).
Problématique, si votre conteneur à une hauteur fixe (sans scrollbar vertical) et que votre footer remonte dans la page web
Vous pouvez adapter le code afin de viser ce résultat souhaité :
<!Doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="footer.css"> <title>Ma Page</title> </head> <body> <div class="conteneur"> <header> <h1>HEADER</h1> </header> <section> <h2>Mon Titre</h2> <p>Le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte - le texte </p> </section> </div> <footer> <h2>Footer</h2> </footer> </body> </html>
* { margin: 0; } html, body { height: 100%; } .conteneur { min-height: 100%; height: 100%; margin: 0 auto -100px; } header{ height: 100px; background: pink; } footer { height: 100px; position: relative; background: pink; }
* { margin: 0; } html, body { height: 100%; } .conteneur { min-height: 100%; height: 100%; } header{ height: 100px; background: pink; } footer { height: 100px; position: absolute; width: 100%; bottom: 0; background: pink; }
min-height
à votre conteneur.
Il arrive parfois que nous ayons besoin de centrer une zone verticalement dans une autre en hauteur.
Pour cela, il existe la propriété : display flex
:
<!Doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="zoneVerticale.css"> <title>Ma Page</title> </head> <body> <div id="conteneur"> <div id="flex"> <div class="mazone"></div> <!--<div class="mazone"></div>--> </div> </div> </body> </html>
#conteneur{ height: 450px; border:1px solid #000; } #flex { height: 100%; display: flex; align-items: center; justify-content: center; } .mazone{ background:red; width:250px; height:250px; }
.mazone
avec un fond rouge apparait bien a mi-hauteur de la zone #flex
:#conteneur
nous permet d'avoir une div qui englobe le reste de notre page web.height: 450px;
permet de définir la hauteur.border:1px solid #000;
permet de définir la bordure.#flex
représente la div qui contient notre zone .mazone
.height: 100%;
permet de récupérer la hauteur de la div parent (100% soit 450px).display: flex;
Affichage de type "flex" pour un affichage flexible.align-items: center;
Propriété qui sera attribuée aux éléments enfants devenus éléments de type "flex-item" pour obtenir un centrage vertical.justify-content: center;
Permet de centrer les zones enfants à l'horizontale au milieu de la div parent.#mazone
représente la div qui contient notre zone .mazone
.background: red;;
permet d'appliquer une couleur de fond.width: 250px;
permet d'appliquer une largeur à la zone.height: 250px;
permet d'appliquer une hauteur à la zone.
Prenons ce code en exemple :
<!Doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="flex1.css"> <title>Ma Page</title> </head> <body> <div id="conteneur"> <div id="flex"> <div class="mazone"></div> <!--<div class="mazone"></div>--> </div> </div> </body> </html>
#conteneur{ height: 450px; border:1px solid #000; } #flex { height: 100%; display: flex; align-items: center; justify-content: center; } .mazone{ background:red; width:250px; height:250px; } .mazone2{ background:blue; width:250px; height:250px; }
display: flex;
seront placées côte à côte automatiquement.flex-direction:column;
, exemple :#conteneur{ height: 450px; border:1px solid #000; } #flex { height: 100%; display: flex; align-items: center; justify-content: center; } .mazone{ background:red; width:250px; height:250px; flex-direction:column; } .mazone2{ background:blue; width:250px; height:250px; }
display: block;
ne fonctionnera pas dans ce cas présent.
Dans les débuts des langages Html et Css, les sites web étaient conçus à l'aide de tableaux avec les balises table, tr, td
, cela n'est plus le cas aujourd'hui pour de l'affichage en FRONT (sauf pour représenter des données tabulaires, des statistiques, des affichages de backoffice ou des newsletter).
Cependant les tables avaient l'avantage de pouvoir centrer verticalement le texte (vertical-align: middle;
) contenu dans leur cellule, ce qui est moins évident avec des zones div.
Alors nous n'allons pas retourner dans le passé pour construire nos sites web avec des tableaux mais pour centrer un texte verticalement à l'intérieur d'une zone en hauteur, nous aurons besoin de la propriété display: table;
:
<!Doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="alignementVertical.css"> <title>Ma Page</title> </head> <body> <div class="zone-principale"> <p>Texte centré verticalement.</p> </div> </body> </html>
.zone-principale { display: table; height: 400px; width: 30%; border: 3px solid ; } p{ display: table-cell; vertical-align: middle; text-align: center; }
.zone-principale
notre zone principale comporte les caractéristiques suivantes :display: table;
permet de simuler le comportement d'une table (afin que plus tard l'utilisation des propriétés display: table-cell;
et vertical-align
soit possible)height: 400px;
permet de fixer une hauteur de 400 pixelswidth: 30%;
permet de fixer une largeur variable de 30 % par rapport à la largeur de l'écranborder: 3px solid ;
permet de dessiner une bordure tout autour de la zone pour mieux la cerner à l'affichagep
comporte les caractéristiques suivantes :display: table-cell;
permet de simuler le comportement d'une cellule afin que le vertical-align
soit possible.vertical-align: middle;
permet d'aligner le texte verticalement (dans la hauteur).text-align: center;
permet de centrer le texte horizontalement (dans la largeur).
Il arrive souvent que l'on intègre une image et que l'on doive aligner du texte à côté, cela ne peut pas toujours être calculé de manière approximative si la taille du texte (ou de l'image) est amenée à changer.
Pour plus de compréhension, voici la problématique rencontrée :
Pour rémédier à cette situation nous allons utiliser la propriété display: table;
afin de simuler le comportement d'une table :
<!Doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="alignementTexteImage.css"> <title>Ma Page</title> </head> <body> <p> <span><img src="image.jpg"></span> <span> Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.<br> </span> </p> </body> </html>
p{ display:table; } /* simule le comportement d'une table avec des colonnes */ span{ display: table-cell; vertical-align:middle; } img{ margin: 0 20px 0 0; }
p
contient les autres éléments et aura les caractéristiques suivantes :display: table;
permet de simuler le comportement d'une table (afin que plus tard l'utilisation des propriétés display: table-cell;
et vertical-align
soit possible)span
contient à la fois l'image et le texte avec les caractéristiques suivantes :display: table-cell;
permet de simuler le comportement d'une cellule afin que le vertical-align
soit possible.vertical-align: middle;
permet d'aligner le texte verticalement (dans la hauteur).img
nous selectionnons l'image uniquement pour l'écarter un peu du texte en lui apportant un peu de marge :margin: 0 20px 0 0;
permet d'appliquer de la marge à droite.
Il arrive parfois que le nombre de liens dans un menu soit variable et changeant et pour cela il n'est pas toujours évident de calculer la bonne marge à appliquer à gauche comme à droite.
Problématique :
Les liens sont alignés à gauche de notre zone.
Pour cette raison, nous allons utiliser la propriété display: inline et display: inline-block;
<!Doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="menuCentre.css"> <title>Ma Page</title> </head> <body> <nav> <ul> <li><a href="">Accueil</a></li> <li><a href="">Actualités</a></li> <li><a href="">Qui sommes nous ?</a></li> <li><a href="">Contact</a></li> </ul> </nav> </body> </html>
<nav>
, à l'intérieur se trouve une liste <ul> <li>
et enfin nos liens représentés par la balise <a>
body{ margin: 0; } nav ul{ padding: 0.5em 0; margin: 0; background : #c0c0c0; text-align: center; } nav li { display: inline; } nav a { margin: 0 3em; color: #fff; text-decoration: none; }
body{ margin: 0; }
nous retirons la marge héritée de notre zone body
nav ul
voici les caractéristiques de notre liste ul contenu dans la balise nav :padding: 0.5em 0;
permet d'ajouter de la marge intérieure à la fois en haut et en bas mais aucune sur les côtés.margin: 0;
nous retirons la marge héritée de notre zone ul
text-align: center;
permet de centrer le texte (en l'occurence, nos liens)nav li{ display: inline; }
permet de modifier le comportement de nos éléments de liste li
afin qu'ils se comportent comme étant inline (pour se sucédder les uns à côté des autres en prenant uniquement la place dont ils ont besoin) et non de type block (sur toute la largeur)nav a
permet de styliser les éléments <a>
contenu dans notre balise de menu <nav>
, voici les caractéristiques :margin: 0 3em;
permet d'espacer les liens entre eux.color: #fff;
permet d'appliquer une couleur blanche sur nos lienstext-decoration: none;
permet de retirer l'effet souligné hérité par nos liens
Pour faire des bordures arrondies sur une zone, une image ou tout autre élément qui s'y prête, vous pouvez utiliser la propriété CSS border-radius
:
Voici un exemple :
<!Doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="bordureArrondie.css"> <title>Ma Page</title> </head> <body> <div class="mazone">...</div> </body> </html>
div.mazone{ border: 3px solid; border-radius: 10px; min-height: 100px; width: 50%; }
div
nous selectionnons notre zone div
ayant la classe .mazone
border: 3px solid;
permet de tracer une bordure tout autourborder-radius: 10px;
permet d'ajouter un effet arrondi de 10 pixels sur les bords en haut à gauche, en haut à droite, en bas à gauche et en bas à droite.min-height: 100px;
permet de fixer une hauteur minimum a 100 pixelswidth: 50%;
permet d'appliquer une largeur variable de 50% par rapport à la taille de l'écran.
Pour mettre de l'ombre sur une image ou sur une zone, nous allons utiliser la propriété css box-shadow
, voici un exemple
<!Doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="ombre.css"> <title>Ma Page</title> </head> <body> <div> <p>Mon texte ombré</p> </div> </body> </html>
div { border: 3px solid; min-height: 100px; width: 50%; text-align: center; box-shadow: 1px 1px 3px; } p{ letter-spacing: 2px; text-shadow: 1px 1px 3px; }
div
nous selectionnons notre zone div
border: 3px solid;
permet de tracer une bordure tout autourmin-height: 100px;
permet de fixer une hauteur minimum a 100 pixelswidth: 50%;
permet d'appliquer une largeur variable de 50% par rapport à la taille de l'écran.text-align: center;
permet d'aligner le texte au centrebox-shadow: 1px 1px 3px;
permet d'appliquer de l'ombre tout autour de la zonep
permet de selectionner notre paragraphe contenant notre texteletter-spacing: 2px;
permet l'espacement des lettres entre ellestext-shadow: 1px 1px 3px;
permet d'appliquer de l'ombre sur le texteValeur | Description | Exemple |
---|---|---|
position horizontale (x) | permet d'afficher l'ombre sur la gauche ou la droite de l'élément. | Par exemple, 5px donneront une ombre sur la droite, -5px donneront une ombre sur la gauche |
position verticale (y) | permet d'afficher l'ombre sur le haut ou le bas de l'élément. | Par exemple, 5px donneront une ombre sur la bas, -5px donneront une ombre sur le haut |
Distance du flou (blur) | cela correspond à l'étendue du flou (dégrade la couleur de l'ombre vers le transparent). | Par exemple, 3px donneront une ombre légèrement étendu, et 8px donneront une ombre plus étendue |
Taille de l'ombre (spread) | cela nous donne la possibilité de redimensionné l'ombre. | Taille adaptable selon le nombre de pixels |
Couleur (color) | permet de gérer la couleur de l'ombre. | #000; donnera une ombre noir, tandis que #336699; donnera une ombre bleue |
Intérieur (inset) | permet de gérer la position de l'ombre. | le mot clé inset vous donnera une ombre intérieure, tandis que ne rien préciser reviendra à faire une ombre portée vers l'extérieur (par défaut) |
box-shadow: x y blur spread color;
box-shadow: 0 -5px 5px -5px #111;
box-shadow: 5px 0 5px -5px #111;
box-shadow: 0 5px 5px -5px #111;
box-shadow: -5px 0 5px -5px #111;
box-shadow: 0 0 5px #333;
Il arrive souvent qu'un site ait besoin de visuel pour rendre le meilleur affichage possible (Un site sans image est rare).
Imaginons le cas d'une bannière de 2000 pixels :
Inscrivons le code Html suivant :
<!Doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="banniere.css"> <title>Ma Page</title> </head> <body> <div class="contenuBanniere"> <img src="banniere.jpg" width="2000"> </div> <div class="conteneur"> <div class="bandeauTitre"> <h1>VOTRE OUTIL DE COLLABORATION</h1> </div> <div class="bandeauTexte"> <h2>Organisez vous<br> pour un travail<br> efficace et rapide</h2> </div> </div> </body> </html>
body{ margin: 0; font-family: Tahoma; font-size: 10px; overflow-x: hidden; /* evite la scrollbar horizontal */ } .contenuBanniere{ position: relative; /* position relative pour pouvoir redéfinir son positionnement */ left: 50%; /* je m'écarte de 50% de la gauche */ margin-left: -1000px; /* 1000px de moins pour garder le contenu du fichier image centré (c'est la moitié car l'image fait 2000px) */ } .conteneur{ width: 960px; margin: 0 auto; } .bandeauTitre { color: #000000; font-weight: bold; left: 20px; letter-spacing: 1px; position: relative; top: -365px; } .bandeauTexte { color: #F6F4F1; left: 20px; letter-spacing: 1px; line-height: 24px; position: relative; top: -353px; }
body
permet d'appeler toute la page, voici les propriétés précisées :margin: 0;
permet de retirer les marges héritéesfont-family: Tahoma;
permet de modifier la police d'écriture.font-size: 10px;
permet de modifier la taille du texteoverflow-x: hidden;
évite une scrollbar horizontale (du fait de notre grande bannière, cette ligne est importante).contenuBanniere
permet d'appeler la zone contenant la banniere :position: relative;
permet de pouvoir redéfinir son positionnementleft: 50%;
permet de nous écarter de la gauche de 50% (la moitié).margin-left: -1000px;
permet de créer un décalage de 1000 pixels (la moitié des 2000 pixels) afin de rester centré sur la page weboverflow-x: hidden;
évite une scrollbar horizontale (du fait de notre grande bannière, cette ligne est importante).conteneur
permet de créer une "enveloppe" qui contiendra le reste des informations :width: 960px;
correspond à la largeurmargin: 0 auto;
permet de centrer notre conteneur et tout ce qui s'y trouve à l'intérieur (0 marge en haut et en bas, automatique à gauche et à droite).
Pour rendre vivant un site web il est recomméndé de prévoir quelques effets visuels interactifs lorsque l'internaute survole certaines zones.
Voici un exemple Html :
<!Doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="effet1.css" /> <title>Ma Page</title> </head> <body> <figure> <img src="<?php echo $url; ?>image.jpg" alt="mon image"> <figcaption> <h2> <a href="">Ma Legende</a> </h2> </figcaption> </figure> </body> </html>
* { margin: 0; padding: 0; } figure { width: 300px; position: relative; overflow:hidden; border: 3px solid #c0c0c0; } figure img{ display: block; } figure figcaption a { text-decoration: none; color: #fff; } figcaption { position: absolute; left: 0; bottom: -30%; background: rgba(0,0,0,0.75); padding: 5px 0; text-align: center; width:300px; transition: 0.6s; } figure:hover figcaption { bottom: 0; /* lorsque l'on survol l'image, on fait remonter la légende */ }
<figure>
et <figcaption>
sont mis en oeuvre conjointement pour attribuer une légende à une image, une vidéo ou tout autre élément média.* { margin: 0; padding: 0; }
permet de casser les héritages de marges intérieures et extérieures sur tous les éléments html.figure
permet de déclarer un bloc qui contiendra des éléments médias, voici ses propriétés :width: 300px;
permet d'appliquer une largeur de 300 pixels à notre zone figureposition: relative;
permet de redéfinir la position de la zone.overflow: hidden;
évite une scrollbar.border: 3px solid #c0c0c0;
permet d'appliquer une bordure tout autour.figure img{ display: block; }
permet de selectionner l'image dans la figure pour lui appliquer la propriété block
afin qu'elle prenne toute la placefigure figcaption a { text-decoration: none; color: #fff; }
permet de selectionner les liens présents à l'intérieur de figcaption pour leur appliquer une couleur blanche et éviter l'effet souligné (text-decoration: none;)figcaption
permet de préciser une légende, voici le code associé :position: absolute;
permet de positionner précisément la légende (dans son parent qui est en position relative) sans prendre en compte l'affichage des éléments déjà présentsleft: 0;
nous n'aurons aucun pixel de décalage avec le bord gauchebottom: -30%;
nous descendons 30% plus bas (cela aura pour effet de masquer la légende)background: rgba(0,0,0,0.75);
permet d'avoir un fond de couleur noir légérement opaque (ce qui permettra de toujours voir l'image dessous)padding: 5px 0;
permet d'appliquer de la marge intérieure en haut et en bas.text-align: center;
permet d'aligner le texte de la legend au centre.width:300px;
permet d'appliquer une largeur de 300 pixels.transition: 0.6s;
Cette transition permettra (au moment du survol hover) de ne pas afficher la légende d'un coup brutal mais progressivement.figure:hover figcaption
Lorsque le bloc figure sera survolé, nous irons chercher la balise figcation pour lui appliquer la propriété suivante :bottom: 0;
cela fera remonter la légende et annulera la propriété (bottom: -30%) que nous avions précédemment déclaré.HTML CSS
1. Introduction Html Css 2. Structure D'une Page Html 3. Structure D'un Fichier Css 4. Les Polices D'ecriture 5. Les Selecteurs 6. Firebug 7. Styles Css 8. L'heritage 9. Les Images 10. Les Positionnements 11. Le Zoning 12. Les Tableaux 13. Les Listes 14. Les Liens Et Ancres 15. Menu De Navigation 16. Les Formulaires 17. Donnees Multimedia 18. Balises Html Et Proprietes Css 19. Cas Pratique 20. Creation D'un Site Web