TD7
Après l'étude du site du W3C, je vous propose quelques modifications !
Menu en survol
J'aimerais mettre sur les liens du menu un style classique de localisation du curseur. Pour cela j'utilise la propriété :hover
ul.navbar li:hover {
background: yellow; }
Une autre solution est donnée en pièce jointe (2.css).
Centrer la page
Pour centrer un paragraphe on utilise la propriété margin : auto;
tester le code suivant :
<style type="text/css">
h3.ex {
width:100px;
margin-left: auto;
margin-right: auto;
border : 1px solid blue;
}
</style>
</head>
<body>
<p>un paragraphe pour tester.</p>
<h3 class="ex">un paragraphe qui devrait être centré</h1>
<p>un paragraphe pour tester.</p>
</body>
Ecrire le CSS pour centrer la page.
ajouter le code suivant au CSS.
body {
border:1px solid black;
width:800px;
margin-left:auto;
margin-right:auto;
...
Le résultat est donné dans 3.html, le contenu est bien centré ... mais le menu est à sa position absolue par rapport au bloc <html>. Deux corrections s'imposent. La première serait de décaler le body avec une marge pour laisser place au menu. La deuxième serait de placer le menu en absolue par rapport au bloc <body>.
Correction 1
body {
border:1px solid black;
width:800px;
margin-left:auto;
margin-right:auto;
<!-- pour corriger la marge interne ->
padding-left : 10em;
...
Correction 2
La position absolue marche mais la position (0,0) n'est pas là où je crois. C'est un problème classique de définition du bloc conteneur.
Relisons ensemble W3C school Absolute Positioning.
En particulier,
"If no such element is found, the containing block is <html>:"
Il faudrait donc en déduire que <body> doit être transformé en bloc dont la position est différente de "static" (normale).
body {
padding-left : 10em;
position:relative;
border:1px solid black;
width:800px;
margin-left:auto;
margin-right:auto; ...
Remarque : il faut qq années d'expérience pour arriver "rapidement" à cette correction élégante (pas de div supplémentaire).
Test : Comment corriger le CSS pour décaler vers le bas le body de 200px ? (ss utiliser la marge)
html{
background:red;
}
body{
top:200px;
background:green;
color:white;
}
</head>
<body>
DENIS
</body>
</html>
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
-> D'autres idées sont possibles si l'on ne trouve pas cette solution. En voici quelques unes.
Structuration de notre site
La structuration de notre page est la première étape de conception de notre page. Elle consiste à définir les différents blocs de base constituant notre page.
Nous reviendrons plus en détail sur cette structuration dans le projet de création d'une page WEB.
<div id="main">
<!-- Main content -->
<ul class="navbar">
<!-- Menu -->
</ul>
<div id="content">
<!--content -->
</div>
</div>
</body>
Après la définition de la structure passons à la définition du style.
Définition du style
Une solution consiste à définir "navbar" en float et "content" avec une marge solution 6.css (ou en float 8.css).