_blank

_Blank – Etape 16 – Ajustement CSS + HTML

21 mai 2019

1Modifications CSS

Dans Notepad++ > ouvrir monstyle.css
Ligne 59 > Ajouter
```
.row.appels .four.columns {
text-align: center;
}
```
Explication
Nous ciblons les colonnes dont la larguer est équivalente à 4 (.four.columns ) (soit une colonne = un tiers – pour mémo nous sommes en « base 12 », 12/4 = 3 colonnes possibles sur une même ligne) – qui se trouvent dans une rangée à laquelle la class .appels est ajoutée (.row.appels ).
La proposition text-align: center; demande à ce que tous les textes présents dans ces colonnes soient centrés.
Ligne 62 > Ajouter
```
figure h1 {
font-size: 1.8rem;
margin-bottom: 0;
}
figure p {
font-style: italic;
}
```
Explication
figure h1 cible tous les h1 (titre de niveau 1) présents dans la balise figure.
(Ici nous réduisons la taille du corps du titre et la valeur de la marge inférieure est ramené à 0.)
figure p cible tous les p (paragraphe) présents dans la balise figure.
(Ici tous les paragraphes présents dans la balise figure seront présentés en italique.)

2Modifications HTML

Dans Notepad++ > ouvrir index-ALL.html
Lignes 42 à 50 (la navigation – "mytopnav" ) >
- Modifier le lien #home en index.html
- Modifier le lien #page01 en page01.html
- Modifier le lien #page02 en page02.html
- Modifier le lien #page03 en page03.html

Le code finale de la navigation modifiée

<div class="topnav" id="myTopnav">
    <a href="index.html">Accueil</a>
    <a href="page01.html">Page 01</a>
    <a href="page02.html">Page 02</a>
    <a href="page03.html">Page 03</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
    </a>
</div>

3Aller plus loin…

en CSS

la proposition p + ul {…} permettrait d’altérer chaque liste non ordonnée SI (et seulement si…) elle est précédée d’un paragraphe. (Corriger la marge supérieure la séparant du paragraphe la précédent par exemple… p + ul {margin-top: -2rem;} – ici marge négative pour compenser la marge inférieure attribuée au paragraphe dans la feuille de style de skeleton.css.

Il est possible de conditionner les propositions CSS comme l’exemple précédent…
Plus d’exemple, voir cet article.

en HTML

Evitez de transmettre « en clair » son adresse email mais la laisser lisible à l’écran et « fonctionnelle » (le lien à l’écran ouvrira votre client messagerie si il s’agit d’un logiciel embarquée sur votre machine (type Outlook)) – suivre les instructions ici.

Précédent Suivant