28106 sujets

CSS et mise en forme, CSS3

Bonjour à vous tous,

Je suis maintenant dans la section Perfectionnement en HTML et CSS et je bloque sur un problème avec un menu horizontal.

Voici ce que je dois reproduire pour un devoir (ce n'est que le début d'une page d'accueil qui comporte un menu, un formulaire et des positionnements de blocs) :
upload/1646815506-62242-accueil.jpg

J'ai donc un soucis avec le menu en haut à droite. Quand je survole l'un des carrés, il se remplit de blanc mais le libellé du lien reste en blanc ce qui fait qu'on ne le voit pas.
upload/1646815594-62242-pointeur.png

Mais quand je survole le lien (le curseur se transforme en main) le lien apparaît.
upload/1646815681-62242-main.png

Ce que je cherche à obtenir c'est que tout l'intérieur de chaque zone délimitée par les pointillés se remplisse de blanc et que le lien s'affiche en noir, que je survole le lien ou l'intérieur de la zone.

Je n'arrive pas à résoudre ce problème, l'un de vous aurait une solution ?

De plus, vous remarquerez que quand on survole chaque zone, on voit les pointillés. Je voudrais qu'ils ne s'affichent pas pour que se soit plus joli. J'ai essayé en plaçant une bordure dans le <li> mais ça me décale le menu et les pointillés sont toujours là.

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>Se perfectionner en HTML/CSS</title>
</head>
<body>

<div class="conteneur-principal">
	<header>
		<a href="index.html"><img src="img/logo.png" alt="Logo IRE" title="Logo IRE"></a>
		<nav class="menu_principal">
			<ul>
				<li><a href="#">Accueil</a></li>
				<li><a href="#">Présentation</a></li>
				<li><a href="#">Agenda</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Dans la presse</a></li>
			</ul>
		</nav>
		<h1>I.R.E.</h1>
		<h2>Institut Recherche Environnement</h2>
		<h3>Le meilleure de la science au service de la terre</h3>
	</header>
</div>

</body>
</html>


Voici le code CSS :

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	background: url(../img/bkgd_page.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	font-family: sans-serif;
}

.conteneur-principal{
	width: 1024px;
	margin: 0 auto;
	padding-top: 50px;
}


/********** Barre de menu **********/

nav{
	float: right;
}

.menu_principal ul{
	border: 2px dashed #fff;
	width: 100%;
	display: flex;
	margin-top: 15px;
}

.menu_principal li{
	list-style: none;
	display: inline;
	border-right: 2px dashed #fff;
	padding: 10px 20px;
}

.menu_principal li:last-child {
  border: 0;
}

.menu_principal a{
	text-decoration: none;
	color: #fff;
	display: block;
}

.menu_principal a:hover{
	color: #000;
	background-color: #fff;
}

.menu_principal li:hover{
	color: #000;
	background-color: #fff;
}

/********** Titres **********/

h1, h2, h3{
	text-align: center;
	color: #fff;
}

h1{
	margin-top: 100px;
	font-size: 60px;
	font-weight: 900;
}

h2, h3{
	font-family: serif;
	font-size: 40px;
}

h2{
	font-size: 40px;
}

h3{
	font-size: 20px;
	font-weight: normal;
	margin-top: 5px;
}

Modifié par ObiJuanKenobi (09 Mar 2022 - 09:53)
Modérateur
Salut,

Il faut que tu remarque la différence entre :
.menu_principal li:hover{ }
et
.menu_principal a:hover{ }


Tu as un lien cliquable dans un li. Si tu style le li tu aura un style et un effet de survol mais pas de lien dispo. Il faudra survoler ton lien pour avoir la possibilité de cliquer. Et du coup ca induit aussi les effets de survole du lien. Je ne sais pas si je suis clair..

Mon conseil : ne pas toucher au style du li et tout mettre sur le a (au passage tu as plein de code inutile) :


.menu_principal ul {
  /* border: 2px dashed #fff; on vire le border d'ici*/
  /* width: 100%; si t'es en float, width 100% ne sert a rien */
  display: flex;
  margin-top: 15px;
  list-style: none;
}

.menu_principal li {
  /* list-style: none; on peut remopnter ca sur le ul*/
  /* display: inline; si t'es en flex le inline ne sert à rien*/
  /* border-right: 2px dashed #fff; pas de style sur le li */
  /* padding: 10px 20px; pas de style sur le li */
}

.menu_principal li:last-child {
  /* border: 0; pas de style sur le li */
}

.menu_principal a {
  text-decoration: none;
  color: #fff;
  display: block;
  border: 2px dashed #fff; /* on rajoute le style sur le a */
  border-right: 0; /* on rajoute le style sur le a */
  padding: 10px 20px; /* on rajoute le style sur le a */
}

.menu_principal li:last-child a {
  border-right: 2px dashed #fff; /* meme principe que ce que tu avais fait pour le li */
}

.menu_principal a:hover {
  color: #000;
  background-color: #fff;
}

.menu_principal li:hover {
  /* color: #000; pas de style sur le li */
  /* background-color: #fff; pas de style sur le li */
}


donc si on vire tout le superflu :

.menu_principal ul {
  display: flex;
  margin-top: 15px;
  list-style: none;
}
  .menu_principal a {
    text-decoration: none;
    color: #fff;
    display: block;
    border: 2px dashed #fff;
    border-right: 0;
    padding: 10px 20px;
  }
  .menu_principal li:last-child a {
    border-right: 2px dashed #fff;
  }

  .menu_principal a:hover {
    color: #000;
    background-color: #fff;
  }


Pour les dash, le soucis c'est réglé de lui meme vu que tout est sur le a (avant ça les dash était sur le ul, donc autour du a)

Bonne journée
Modifié par _laurent (09 Mar 2022 - 10:29)
Merci laurent pour tes explications.

J'ai compris que les styles doivent être placés sur le <a> et non sur le <li> ni sur le <ul>.
Je vais devoir mettre à jour mes archives.

Cependant, on voit toujours les pointillés à droite quand on survole chaque lien, sauf pour le dernier "Dans la presse". J'ai essayé de corriger mais je n'y arrive pas.

Comment faire pour qu'on ne voit pas les pointillés à droite quand on survole ?
Modifié par ObiJuanKenobi (09 Mar 2022 - 13:44)
Modérateur
ObiJuanKenobi a écrit :
Comment faire pour qu'on ne voit pas les pointillés à droite quand on survole ?

La encore on va juste tenter de comprendre pourquoi ca fait ça avant de choisir une solution.
Si on mets des pointillés sur tout les <a> on va avoir des doubles bord entre chaque <a>; Il faut donc n'afficher qu'un des deux bords (exactement ce que tu avais fait avec les <li>). Soit le droit, soit le gauche donc. Si on choisi de masque le bord droit, au survol on aura a droite les pointillé apparent du <a> suivant. Au contraire si on choisi le gauche ca sera le bord du <a> précédent... on tourne en rond quoi...

Comme solution on peut utiliser une box-shadow... ca fait un peu bricolage mais bon :
.menu_principal a:hover {
  color: #000;
  background-color: #fff;
  box-shadow: 2px 0 0 0 #fff;
}

sauf sur le dernier sinon ca va décaler un peu le trait au survol...

Sinon tu peux aussi juste mettre un margin négatif de 2px sur les <li>. Les border vont se superposer et je t'avoue que je ne sais pas si ca va toujours bien tomber : https://jsfiddle.net/undless/ukx4f0pr/12/

bonne journée
Meilleure solution
Si on mets des pointillés sur tout les <a> on va avoir des doubles bord entre chaque <a>
En effet, c'est ce que j'obtenais quand je faisais mes tests.

La propriété box-shadow m'est inconnue, je ne vais pas l'utiliser maintenant parce que je ne suis pas aussi avancé dans l'utilisation du CSS. Par contre, ton autre solution (margin négatif) me semble appropriée et je ne savais pas qu'on pouvait utiliser des valeurs négatives. Je vais l'utiliser et merci pour toutes tes explications qui me font avancer.

Je vais continuer le devoir, je dois encore ajouter une partie avec des positionnements et une zone formulaire avant de le livrer à la correction. Je reviendrai avec la suite si je rencontre des problèmes.

Merci encore pour les explications claires.
Modifié par ObiJuanKenobi (09 Mar 2022 - 17:27)