Bonjour à vous tous,
Je viens de finir un exercice qui m'a été demandé montrant l'utilisation d'un menu horizontal et les balises structurantes. Mais j'ai deux problèmes que je n'arrive pas à résoudre.
Voici une capture écran de la page d'accueil d'un restaurant :
Mon premier problème concerne la barre de menu. Quand je la survole, j'ai un décalage de quelques pixels à gauche que je voudrais supprimer au survol. Je voudrais aussi supprimer au survol la petite barre noir à droite. Je n'y arrive pas.
Le second problème concerne les deux titres "totalitarium" et "sur le même sujet". J'ai mis la balise <h1> pour les deux titres mais seul le second s'affiche correctement. Le premier se comporte avec une taille de caractère plus petite. Pourtant, je n'ai pas ciblé la balise <h1> dans la CSS. Je ne sais pas d'où vient ce problème.
Merci pour votre aide.
Voici le code HTML :
Voici le code CSS :
Modifié par ObiJuanKenobi (10 Feb 2022 - 08:44)
Je viens de finir un exercice qui m'a été demandé montrant l'utilisation d'un menu horizontal et les balises structurantes. Mais j'ai deux problèmes que je n'arrive pas à résoudre.
Voici une capture écran de la page d'accueil d'un restaurant :
Mon premier problème concerne la barre de menu. Quand je la survole, j'ai un décalage de quelques pixels à gauche que je voudrais supprimer au survol. Je voudrais aussi supprimer au survol la petite barre noir à droite. Je n'y arrive pas.
Le second problème concerne les deux titres "totalitarium" et "sur le même sujet". J'ai mis la balise <h1> pour les deux titres mais seul le second s'affiche correctement. Le premier se comporte avec une taille de caractère plus petite. Pourtant, je n'ai pas ciblé la balise <h1> dans la CSS. Je ne sais pas d'où vient ce problème.
Merci pour votre aide.
Voici le code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link href="css/styles.css" type="text/css" rel="stylesheet">
<title>Accueil du restaurant La Fourchette</title>
</head>
<body>
<div class="conteneur_arriere_plan">
<header>
<img src="img/logo-fourchette-2.png" alt="Logo du restaurant La Fourchette" title="Logo du restaurant La Fourchette" class="logo">
<nav>
<ul>
<li><a href="#" target="_blank">Accueil</a></li>
<li><a href="#" target="_blank" class="selection">Menus</a></li>
<li><a href="#" target="_blank">Informations pratiques</a></li>
<li><a href="#" target="_blank">Contacts</a></li>
</ul>
</nav>
<h4><em>La Fourchette : toujours plus cuit, toujours plus bon !</em></h4>
<div class="annulation_flottement"></div>
</header>
<main>
<section class="bloc_gauche">
<article>
<h2>Restaurant</h2>
<h3>Gastronomie</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus ultricies luctus. Nulla condimentum diam a mauris hendrerit, in aliquet nibh viverra. Vivamus cursus magna a varius molestie. Vestibulum sit amet nibh varius, tempor augue sit amet, vestibulum mauris. Vestibulum fringilla odio nec volutpat tempus. Donec libero orci, rhoncus sed est in, laoreet ultricies velit. Aenean ultrices vestibulum diam, a eleifend magna lacinia ac. Sed quis ligula nec sem aliquet imperdiet id vel orci.
</p>
<h3>Produits</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus ultricies luctus. Nulla condimentum diam a mauris hendrerit, in aliquet nibh viverra. Vivamus cursus magna a varius molestie. Vestibulum sit amet nibh varius, tempor augue sit amet, vestibulum mauris. Vestibulum fringilla odio nec volutpat tempus. Donec libero orci, rhoncus sed est in, laoreet ultricies velit. Aenean ultrices vestibulum diam, a eleifend magna lacinia ac. Sed quis ligula nec sem aliquet imperdiet id vel orci.
</p>
</article>
</section>
<section class="bloc_droite">
<article>
<h1>Le totalorium du totalier plié</h1>
<p><em>le 21 novembre 2018 par Etienne Chapeau</em></p>
<h3>Totalorium</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus ultricies luctus. Nulla condimentum diam a mauris hendrerit, in aliquet nibh viverra. Vivamus cursus magna a varius molestie. Vestibulum sit amet nibh varius, tempor augue sit amet, vestibulum mauris. Vestibulum fringilla odio nec volutpat tempus. Donec libero orci, rhoncus sed est in, laoreet ultricies velit. Aenean ultrices vestibulum diam, a eleifend magna lacinia ac. Sed quis ligula nec sem aliquet imperdiet id vel orci. Mauris dictum, tortor eget ullamcorper tincidunt, tellus tellus consectetur metus, nec tempus odio nisl et nisl. Suspendisse hendrerit ex vel bibendum aliquam. Donec eget facilisis nunc.
</p>
<h3>Totalorium</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus ultricies luctus. Nulla condimentum diam a mauris hendrerit, in aliquet nibh viverra. Vivamus cursus magna a varius molestie. Vestibulum sit amet nibh varius, tempor augue sit amet, vestibulum mauris. Vestibulum fringilla odio nec volutpat tempus. Donec libero orci, rhoncus sed est in, laoreet ultricies velit. Aenean ultrices vestibulum diam, a eleifend magna lacinia ac. Sed quis ligula nec sem aliquet imperdiet id vel orci. Mauris dictum, tortor eget ullamcorper tincidunt, tellus tellus consectetur metus, nec tempus odio nisl et nisl. Suspendisse hendrerit ex vel bibendum aliquam. Donec eget facilisis nunc.
</p>
</article>
<div class="photos">
<h1>Sur le même sujet</h1>
<figure>
<img src="img/gougeres.jpg" alt="Photo de cougères" Title="Photo de cougères">
<figcaption>
Cougères joyeuses
</figcaption>
</figure>
<figure>
<img src="img/table.jpg" alt="Photo d'une table" Title="Photo d'une table">
<figcaption>
Table anonyme
</figcaption>
</figure>
<figure>
<img src="img/biscuits.jpg" alt="Photo de biscuits" Title="Photo de biscuits">
<figcaption>
Biscuits malins
</figcaption>
</figure>
</div>
</section>
<div class="annulation_flottement"></div>
<footer>
<p class="flottement_droite">
©2017 Tous droits de reproduction réservés.
</p>
</footer>
</main>
</div>
</body>
</html>
Voici le code CSS :
*{
margin: 0;
padding: 0;
}
body{
width: 990px;
background: url(../img/back-cover.jpg);
background-size: cover;
background-repeat: no-repeat;
margin: 0 auto;
}
.conteneur_arriere_plan{
background-color: hsla(358, 28%, 95%, 0.85);
}
.logo{
display: block;
padding: 30px 0;
margin: 0 auto;
}
ul{
border-top: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px 0;
}
li{
font-weight: bold;
font-size: 20px;
list-style: none;
display: inline;
border-right: 2px solid #000;
}
a{
text-decoration: none;
padding: 11px;
color: #000;
}
a:hover{
color: #fff;
background-color: #d86c0c;
}
.selection{
color: #d86c0c;
}
h4{
float: right;
margin: 10px;
}
section{
margin-top: 20px;
}
.annulation_flottement{
clear: both;
}
.bloc_droite, .bloc_gauche{
padding: 0 15px;
}
.bloc_droite{
float: right;
width: 640px;
}
.bloc_gauche{
float: left;
width: 280px;
}
h3{
padding: 15px 0;
}
p{
line-height: 1.5em;
padding-bottom: 10px;
}
.photos{
border-top: 2px solid #000;
padding: 5px 0;
}
img{
margin: 5px 10px 0 0;
}
figure{
float: left;
}
figcaption{
text-align: center;
color: #d86c0c;
font-weight: bold;
}
footer{
border-top: 2px solid #000;
margin-top: 30px;
padding-top: 20px;
}
footer{
width: 100%;
height: 30px;
}
.flottement_droite{
float: right;
margin-right: 20px;
}
Modifié par ObiJuanKenobi (10 Feb 2022 - 08:44)
) on peut voir :
