Une autre chose avec laquelle j'ai un peu lutté, c'est de mettre deux éléments l'un en-dessous de l'autre (<nav> et <main>) sans que le texte présent dans <main> passe sous la barre de <nav> qui a un positionnement forcé.
Fragment de la page html sur laquelle je travaille :
<body>
<nav>
nav bar
</nav>
<main>
<section>
<h2>section 1</h2>
<p>Ut consectetur eros efficitur, convallis tortor ut, placerat sapien.</p>
</section>
<section>
<h2>section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</main>
</body>
Proposition de solution pour garder la partie de navigation en haut de page :
body {
margin: 0;
}
nav {
position: -webkit-sticky; /* Safari */
position: sticky;
height: auto;
top: 0;
background-color: #251D3A;
color: #E04D01;
}
main {
overflow: hidden;
background-color: #FF7700;
color: #2A2550;
}
Explications :
Il y a plusieurs valeurs possibles pour la propriété position qui indique la façon dont un élément doit être positionné dans le document. Par défaut, le flux du document se déroule de haut en bas. On peut sortir un élément du flux avec la position absolute par exemple, pour rendre le positionnement de l'élément relatif à son élément parent ou encore la position fixed si on veut le positionner relativement à la fenêtre du navigateur. La valeur sticky quant à elle permet d'aller de la valeur relative (ici, relatif à <body> qui remplit 100% de l'espace) à un positionnement fixe (par exemple : top: 0, soit haut de page) en fonction du défilement du document.
Attention : Internet Explorer ne gère pas le positionnement sticky et Safari a besoin d'un préfixe -webkit.
Elle est complétée par la propriété overflow de l'élément suivant avec une valeur hidden pour que le contenu remplisse tout l'espace disponible avec possibilité de défilement sans barre de défilement.
Il y a peut-être des façons de faire plus propres mais pour l'exemple en question ça fonctionne, en plus d'être très court ce qui est appréciable. On pourra ajouter des marges intérieures (padding) pour que ce soit un peu moins moche, par exemple :
padding: 0 1em;
pour <body> et <main> et
padding: 1em;
pour <nav>.
(si deux valeurs : la première est valable pour haut/bas du bloc, la deuxième pour droite/gauche. Si une seule valeur : valable pour les quatre côtés)
J'ai enfin compris que certains éléments HTML avaient une marge et/ou padding par défaut appliquée par les navigateurs, par exemple <body> a une marge par défaut de 8px sur Firefox. Résultat : si vous coloriez votre page en jaune :
body {
background-color: gold;
}
et votre tête de page en bleu (en fournissant une hauteur pour que le bloc soit visible) :
header {
background-color: aqua;
height: 200px;
}
pour la page suivante :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
</header>
<main>
</main>
</body>
</html>
eh bien vous verrez apparaitre ce qui semble être une bordure non sollicitée de votre <header> ! D'après ce que j'ai compris, il s'agit plutôt de l'espace que se ménage le <body> par rapport à ses éléments enfants donc c'est plutôt sur <body> qu'il faut agir. Pour le débarrasser de ses marges cachées, proposition de solution :
body {
background-color: gold;
margin: 0;
}
(Voir sinon une autre proposition dans un article plus récent.) C'est le même principe pour tous les éléments qui ont une marge par défaut paramétrée par le navigateur, <h1> par exemple ou encore, <ul>.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Une nouvelle page HTML" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page test</title>
<link rel="stylesheet" href="style.css"/>
<script src="script.js" defer></script>
<base href="https://www.mywebsiteURL.com/" target="_blank">
</head>
<body>
</body>
</html>
Explanations:
<!DOCTYPE html>
so the browser follows the HTML specification
<html lang="fr">
html tag -> to inform the browser it's an HTML document
lang attribute -> to allow screen readers to invoke the correct pronunciation
<head>
head tag -> machine-readable information about the document
<meta>
meta tag -> to add metadata with no specifc tag
charset attribute -> (charset stands for "character set") to specify the document's character encoding (UTF-8 being the universal character set, encodes multiple languages). This tag/attribute must be located within the first 1024 bytes of the document.
name and content attributes (they come together: metadata's name, metadata's value)
-> name value description -> to put in content's value a very short description of the page's content. This will be used by search engines to provide a description of the page.
-> name value viewport (for a browser, 'viewport' means what's visible, a viewport definition tells the browser how to render the page) -> to put in content's value some elements like width that could be device-width and the ratio between the device width and the display zone size (positive number between 0.0 and 10.0), separated by comas. It helps the styling of the page looking similar on mobile as it does on a desktop or laptop and sets the initial zoom level when the page is first loaded by the browser.
<title>
title tag -> to specify the website's title where the HTML document belongs; the title page could also be added (that's what is appearing in the brower's tabs). It's also this title that is indexed by search engines. Note that this is also useful for people using assitive technologies to rapidly aprenhend the website's content.
<link>
link tag -> to link the HTML document to an external resource, for instance a stylesheet or JavaScript
rel attribute -> to specify the relation. Use stylesheet for CSS
href attribute -> stylesheet's URL (can be relative)
<base>
base tag -> specifies a default URL and a default target for all links on a page