passer au css et autres... (2) pour nous encourager, on revois l'objectif à atteindre
TRANSCRIPT
Passer au CSS et autres... (2)Pour nous encourager, on revois l'objectif à atteindre.
<!-- Ici nous allons intégrer un commentaire car il va rester dans la page html -->Puis un morceau de code conditionnel
Passer au CSS et autres... (2)
Mais qu'est ce que c'est que le « pre » ?On voit au passage que cette balise redéfini la balise html.Il s'agit d'un préformatage que nous utiliseronsplus tard.Comme indiqué, il ne sera utilisé que pourIE qui pose problème.Je l'ai fixé à 500px pour être sûr.
Passer au CSS et autres... (2)Nous allons nous intéresser à la balise tout en bas, juste après l'ouverture du body
Elle apparaît sous la forme <div id= « conteneur »>
Tout d'abord la balise <div>
Cette balise indique une division à l'intérieur du corps du document.Les paramètres que nous allons lui appliquerpourront être différent.
id : cela signifie identifiant
id= « conteneur » Ici on donne a l'identifiant le nom « conteneur »
La particularité d'un id c'est qu'il ne peut êtreutilisé qu'une seule fois. Cela paraît logique.
Pour donner du concret, cet identifiant va définir l'enveloppe du contenu de la page.
C'est toujours un peu abstrait, c'est normal.Nous allons voir cela en images.
Passer au CSS et autres... (2)Il faut que l'identifiant « conteneur » contienne des paramètres. Nous allons les écrire.
Ces lignes vont se rajouter dans le <head>
On voit qu'il est écrit div#conteneurcela indique qu'il s'agit d'un identifiant.
On va appliquer à ce conteneur unelargeur de 770px
On réaligne le texte à gauche
On applique une bordure de 2pxcolorée en marron foncé
On applique une couleur à ceconteneur :
#fff ou #FFFFFF (blanc)
On écrit le code ici
J'avais promis du visuel :J'avais promis du visuel :au prochain clic on va voir ce que cela donne !au prochain clic on va voir ce que cela donne !
Passer au CSS et autres... (2)Ici nous voyons l'ensemble de notre code
correctement indenté pour une meilleur lecture
Par les paramètres que
nous avons transmis à l'id « conteneur »
Voici ce que nous obtenons.Pas mal non ?
Revoir animation
Passer au CSS et autres... (2)Aller on ajoute 4 lignes de code :
On peut voir plus bas que comme pour l'ID « conteneur »nous faisons maintenant appel à l'ID « header »
On peut voir que « header » redéfini la balise h1Nous allons revenir sur ce point au prochain écran
Ici la hauteur de 258px correspond à la hauteur
de l'image que nous allons placer
Passer au CSS et autres... (2)Voyons de plus près cette imbrication de balises – Ici nous sommes au cœur du CSS
Feuille de style en cascadeLe terme cascade prends tout son sens<h1Il s'agit ici du format de titre « Titre 1 » par défaut dans Dreamweaver
header permet, puisqu'il est appliqué comme argument de h1de modifier les paramètres de celui-ci.
Et nous pourrions ajouter d'autres arguments...Il suffit de les séparer par un espace
h1#header a (c'est le code à mettre dans la balise style)
Indique que ces paramètre doivent s'appliquer uniquement à une balisede type h1 redéfini par les paramètres de « header » mais ne s'appliquant qu'a la balise « a » (celle-ci indique un lien).
Justement c'est le cas de notre ligne de code :<a href= « index.html » indique un lien qui pointe vers la page index.htmltitle= »Site ressources - Accueil »> indique qu'un indicateur s'afficheraau passage de la souris.
Site ressources : il s'agit ici du nom que porte le lien</a> : on referme la balise lien</h1 : on referme la balise de format de titre
Site ressources – Accueil
Pour le moment nous n'avons pasencore vu quelle redéfinition appliquer
dans le cas de cette balise a et uniquementdans ce cas
Passer au CSS et autres... (2)Mettons en place notre première image :Il s'agit de l'image de fond du header donc : background
Le nom de l'image est : bandeau_ressources_css.jpgLe dossier qui la contient : illustrationsPour indiquer un chemin en css on ecrit : url(chemin_fichier)
no-repeat :on affiche l'image qu'une seule fois.
left topA gauche, en haut
Il reste un espace au dessus de l'image : c'est donc une marge extérieure (margin)
Passer au CSS et autres... (2)Pour la suite voici les contraintes que nous fixons :1 - Il faut que le lien « Site ressources » soit actif sur la zone encadrée de rouge.3 - On ne doit plus voir le texte
On va paramétrer un nouveau style :
h1#header aLargeur : 190pxHauteur : 135px
J'ai volontairement supprimé l'image pour mieux voir.A priori il ne se passe rien
On rajoute la commandedisplay: blockLa traduction est :
Transformer en bloc
Et on obtient ceci
J'ai visualisé le cadre, en réalité la ligne rouge n'est pas visible.On voit que le lien est sur deux lignes
Passer au CSS et autres... (2)On vas maintenant déplacer notre « bloc » en le mettant à 380 pixels de la gaucheet à 0 pixels du haut
Pour lui donner une position relative à notre fond :
position: relative ;
Puis les valeurs :
left: 380px ;top: 0px ;
Le même avec l'image de fond, pour bien visualiser l'emplacement.La précision est au pixel près.Gros avantage par rapport au tableaux
Passer au CSS et autres... (2)Il nous reste maintenant à faire disparaître le texte mais sans l'effacer sinon le programme ne reconnaîtra plus un lien.
On va donc décaler le lien hors de l'écran pour qu'il ne soit plus visible.
Pour cela nous allons appliquer la commande « text-indent »
On lui applique la valeur -5000px. Le texte de lien va être déplacé de5000 pixel sur la gauche.
On aurait pu aussi mettre une image de fond dans le bloc ainsi créé en rajoutant :