27801 sujets

CSS et mise en forme, CSS3

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 :

upload/1644478292-62242-capture.jpg

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">
			&#169;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)
Modérateur
Salut !

Alors pour ton premier soucis le petit espace bien du fait que tu saute une ligne entre tes <li> (c'est une bonne chose pour la lisibilité mais ca crée ce petit espace). Il me semble que c'est el meme soucis que : https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html ou du moins c'est très proche.
Deux solutions :
- coller les balise <li> les unes aux autres
- utiliser un display: flex; sur le parent pour aligner les enfant
Tu ferais bien de supprimer cet espace tout le temps et pas seulement au survol sinon ton menu va bouger à chaque survol ce sera moche.

Pour la petite barre il suffit de mettre le border-right à 0 au survol. Attention le border est sur le <li> pas sur le <a>. Mais là aussi, si tu le vire juste au survol tout ton menu va bouger ca sera pas top comme rendu... Si c'est juste pour le rendu, les laisser c'est pas choquant je trouve.

Pour ton second soucis si tu regarde l'inspecteur de code (petite parenthese, sert toi vraiment de cet outil ca t'aidera a résoudre 90% de tes soucis Smiley smile ) on peut voir :
:-webkit-any(article, aside, nav, section) :-webkit-any(article, aside, nav, section) h1 {
    font-size: 1.17em;

Qui viens surcharger le h1 de base qui est à :
:-webkit-any(article, aside, nav, section) h1 {
    font-size: 1.5em;

Comportement étrange que je n'avais jamais remarqué... juste parce que ton h1 est dans un article lui même dans une section il réduit la taille. Bon, quoi qu'il en soit, redéfini une taille pour tes h1 dans ton CSS ca règlera le soucis Smiley cligne

Bonne journée
Merci Laurent pour ton lien super utile.

Je l'ai consulté et j'ai trouvé qu'ajouter un commentaire à la fin et au début de chaque <li> est la solution la plus intéressante puisque je peux laisser chaque <li> sur une ligne et rendre la lisibilité meilleur alors que remonter chaque ligne fonctionne aussi mais c'est plus rébarbatif pour lire. Par contre, placer un display: flex; sur le parent <ul> ne change rien.

J'ai ajouté aussi un border-right: 0; dans le a:hover et le petit trait à droite ne s'efface pas au survol.

Enfin, j'ai ciblée le <h1> dans la feuille CSS en lui attribuant la propriété font-size: 24px; et rien ne change. Le premier titre a toujours un petit corps de caractère.

J'ai signalé ce comportement au formateur, il saura peut-être m'expliquer la raison et comment le corriger.

Merci pour toutes tes explications.
Modérateur
Salut,

Alors
ObiJuanKenobi a écrit :
rébarbatif pour lire. Par contre, placer un display: flex; sur le parent <ul> ne change rien.

J'ai pris ton code tel quel et j'ai juste rajouté display:flex; sur le ul : https://jsfiddle.net/ouxre9qy/
Ca a l'air de fonctionner.

ObiJuanKenobi a écrit :
J'ai ajouté aussi un border-right: 0; dans le a:hover et le petit trait à droite ne s'efface pas au survol.

Je te recolle ma réponse, tu as peut-être mal lu (ou pas entièrement) :
_laurent a écrit :
Pour la petite barre il suffit de mettre le border-right à 0 au survol. Attention le border est sur le <li> pas sur le <a>. Mais là aussi, si tu le vire juste au survol tout ton menu va bouger ca sera pas top comme rendu... Si c'est juste pour le rendu, les laisser c'est pas choquant je trouve.


ObiJuanKenobi a écrit :
Enfin, j'ai ciblée le <h1> dans la feuille CSS en lui attribuant la propriété font-size: 24px; et rien ne change. Le premier titre a toujours un petit corps de caractère.

La aussi j'ai pris ton code et j'ai juste rajoute h1 { font -size: 24px; } et ca marche bien ils font la meme taille : https://jsfiddle.net/uqf14do0/

Bonne journée
Modifié par _laurent (11 Feb 2022 - 09:33)
Au temps pour moi !

Le display: flex; fonctionne.
La déclaration du <h1> sur la feuille CSS fonctionne aussi.
J'ai suis sûrement allé trop vite quand j'ai testé la première fois.

Par contre, le border-right: 0; sur le <li> ne fonctionne toujours pas.
Modérateur
ObiJuanKenobi a écrit :
Par contre, le border-right: 0; sur le &lt;li&gt; ne fonctionne toujours pas.

Un petit bout de code pour me montrer comment tu as fait ? Smiley smile
Voilà le code :

li:hover{
	border-right: 2px solid hsla(358, 28%, 95%, 0.85);
}


Finalement ça marche parce que je m'y prenais mal avant. Je n'ai pas mis border-right: 0; parce que cela me décalait le menu de 2 pixels vers la gauche chaque fois que je le survolais. J'ai donc gardé les 2 pixels et j'ai mis la même couleur que sur le blanc transparent d'arrière plan. J'ai triché, quoi !
Modérateur
ObiJuanKenobi a écrit :
Finalement ça marche parce que je m'y prenais mal avant.

Smiley lol


ObiJuanKenobi a écrit :
Je n'ai pas mis border-right: 0; parce que cela me décalait le menu de 2 pixels vers la gauche chaque fois que je le survolais.
Ah bon ?! Smiley lol
_laurent a écrit :
Pour la petite barre il suffit de mettre le border-right à 0 au survol. Attention le border est sur le &lt;li&gt; pas sur le &lt;a&gt;. Mais là aussi, si tu le vire juste au survol tout ton menu va bouger ca sera pas top comme rendu... Si c'est juste pour le rendu, les laisser c'est pas choquant je trouve.


Tout est résolu du coup ? Smiley smile

Bonne journée
Oui, j'ai finalement résolu mes trois problèmes.

Ce qu'il se passait pour le border, c'est que je l'appliquais au li a:hover {border...} alors que je devais créer un li:hoover{border...}.

Merci pour tes explications et je suis très content parce que je comprends de mieux en mieux les constructions des menus horizontaux qui étaient ma bête noire, entre autres.

J'ai ainsi appris qu'on ne peut pas appliquer des marges aux balises de type inline, seulement aux types block. Et rien que ça, ça me bloquait pendant des heures parce que je n'arrivais pas à comprendre pourquoi ça ne marchait pas alors que l'explication est très simple.

J'ai aussi appris avec mes cours quelles sont les balises HTLM qui génèrent des requêtes. Grâce à cela, on peut appliquer une équation simple qui permet de savoir quel débit théorique il faut au minimum pour assurer le bon chargement de son site web.

Bref, j'apprends de plus en plus et bientôt, je serais un maître Jedi du code !

Que le code soit avec vous !
Modifié par ObiJuanKenobi (13 Feb 2022 - 13:03)