27799 sujets

CSS et mise en forme, CSS3

Bonjour à vous tous,

J'ai terminé mon devoir mais j'ai 3 problèmes que je n'arrive pas à résoudre. Les codes HTML et CSS se trouvent à la fin.

1er problème :
upload/1647519949-62242-capturedancran2022-03-1713252.png
Sur le menu principal, je dois mettre en gras les liens lorsqu'ils sont survolés. Il suffit pour cela d'utiliser la propriété font-weight: bold dans le <a> mais le menu se décale à gauche à chaque survol ce qui n'est pas esthétique. J'ai pensé mettre une largeur fixe à chaque <li> mais le devoir exige qu'ils aient des largeurs différentes en fonction de la longueur du lien.

2ème problème :
upload/1647520468-62242-capture-ok.jpg
Le devoir demande de placer un roll-over sur le bouton vert mais il disparaît dès que je survole l'image.

3ème problème :
upload/1647520669-62242-menu.png
Je ne parviens pas à centrer sur la page le menu du footer malgré mes essais avec margin: 0 auto; et text-align: center; J'ai essayé de placer ces deux propriétés dans la <nav> et dans le <ul>, je ne comprends pas pourquoi il ne se centre pas.

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>
	<main>
	<section>
	<div class="container_blanc">

		<article>
			<a href="#"><img src="img/contenu-img-1.jpg" title="Montagne" alt="Montagne" class="image_article opacity"></a>
			<div class="largeur_article">
				<h4>Une dizaine de militaires armés</h4>
				<p class="auteur_date"><span class="auteur_article">Antoine Dellec</span><span class="date_article">, <em>le 27 avril 2025</em></span></p>
				<p>Il allait peut-être perdre Florence avant même de lui avoir avoué son amour. Il devait empêcher Prélude de continuer dans son délire. Mais comment pouvait-il stopper ce parasite créé par lui quelques années auparavant ?</p>
			</div>
			<div class="brochures">
				<a href="#"><img src="img/product-01.png" title="Rapport annuel 2017" alt="Rapport annuel 2017"></a>
				<h5>Rapport annuel 2017</h5>
				<h6><a href="#" class="bouton_telecharger_consulter">Télécharger</a></h6>
			</div>
		</article>
		
		<article>
			<a href="#"><img src="img/contenu-img-2.jpg" title="Montagne" alt="Montagne" class="image_article opacity"></a>
			<div class="largeur_article">
				<h4>Informaticienne chevronnée</h4>
				<p class="auteur_date"><span class="auteur_article">Didier Paltier Dellec</span><span class="date_article">, <em>le 12 mai 2002</em></span></p>
				<p>Interloqué, David ne sait pas quoi répondre. En effet, il connaît un certain Prélude : lui. C'était le pseudo qu'il utilisait dans sa jeunesse d'informaticien. Tous ses amis de l'époque le connaissaient sous ce nom.</p>
			</div>
			<div class="brochures">
				<a href="#"><img src="img/product-01.png" title="Rapport annuel 2017" alt="Rapport annuel 2017"></a>
				<h5>Rapport annuel 2016</h5>
				<h6><a href="#" class="bouton_telecharger_consulter">Télécharger</a></h6>
			</div>
		</article>

		<div class="container_saut">
			<figure>
				<a href="#">
					<img src="img/saut.jpg" title="Personne sautant" alt="Personne sautant" class="image_saut">
					<figcaption>
						<p class="le_saut">Le saut</p>
						<p>La chute du sot sans son seau</p>
						<p class="bouton_sauter">Sauter</p>
					</figcaption>
				</a>
			</figure>
			<div class="container_livres">
				<div>
					<div class="bloc_livre">
						<img src="img/book-01.jpg" title="Livre Bois" alt="Livre Bois">
						<h5>Bois</h5>
						<h6><a href="#" class="bouton_telecharger_consulter">Consulter</a></h6>
					</div>
					<div class="bloc_livre">
						<img src="img/book-02.jpg" title="Livre Sable" alt="Livre Sable">
						<h5>Sable</h5>
						<h6><a href="#" class="bouton_telecharger_consulter">Consulter</a></h6>
					</div>
				</div>
				<div>
					<div class="bloc_livre">
						<img src="img/book-03.jpg" title="Livre Rivière" alt="Livre Rivière">
						<h5>Rivière</h5>
						<h6><a href="#" class="bouton_telecharger_consulter">Consulter</a></h6>
					</div>
					<div class="bloc_livre">
						<img src="img/book-04.jpg" title="Livre Pierre" alt="Livre Pierre">
						<h5>Pierre</h5>
						<h6><a href="#" class="bouton_telecharger_consulter">Consulter</a></h6>
					</div>
				</div>
			</div>
		</div>
		
		<form action="traitement.php" method="post">
			<h1 class="information">Demande d'information</h1>
			<input type="text" name="nom" id="nom" placeholder="Nom" maxlength="50" required>
			<div class="deux_inputs">
				<input type="text" name="prenom" id="prenom" placeholder="Prénom" maxlength="50" required class="prenom">
				<input type="email" name="email" id="email" placeholder="Email" maxlength="50" required>
			</div>
			<textarea placeholder="Un message ?" spellcheck="true"></textarea>
			<input type="submit" value="Envoyer" class="bouton_envoyer">
		</form>
		
	</div>
	</section>
	</main>
</div>
	<footer>
		<nav class="menu_footer">
			<ul>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Newsletter</a></li>
				<li><a href="#">Qui sommes-nous ?</a></li>
				<li><a href="#">Applis mobile et tablette	</a></li>
				<li><a href="#">FAQ</a></li>
			</ul>
		</nav>
	</footer>
</body>
</html>


Code CSS :

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

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

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

/********** Menu principal **********/

nav.menu_principal{
	float: right;
}

.menu_principal ul {
  display: flex;
  margin-top: 15px;
  list-style: none;
}

.menu_principal li {
  margin-right: -2px;
}

.menu_principal a {
  text-decoration: none;
  color: #fff;
  display: block;
  border: 2px dashed #fff;
  padding: 10px 20px;
}

.menu_principal a:hover {
  color: #38b4b4;
  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;
}

h4{
	font-size: 30px;
}

h5{
	font-weight: 100;
	text-align: center;
}

h6{
	text-align: center;
}

/********** Articles **********/

.container_blanc{
	width: 100%;
	background-color: #fff;
	margin-top: 75px;
	padding: 65px 25px 0 25px;
}

article{
	display: flex;
	position: relative;
}

.opacity:hover {
    opacity: 0.5;
}

.image_article{
	border: 2px solid #000;
	margin-right: 10px;
	margin-bottom: 35px;
}

.largeur_article{
	width: 300px;
}

.brochures{
	padding-left: 50px;
}

span{
	color: #aaa;
}

.auteur_date{
	padding: 5px 0;
}

.auteur_article{
	color: #38b4b4;
}

.bouton_telecharger_consulter{
	color: #a22755;
	text-decoration: none;
}

.bouton_telecharger_consulter:hover{
	color: #ccc;
}

/********** Contenu "saut" **********/

.container_saut{
	display: flex;
	margin-top: 150px;
}

.image_saut{
	border: 2px solid #000;
	width: 480px;
	height: 480px;
}

figure{
	float: left;
	width: 480px;
	height: 480px;
	position: relative;
}

figcaption{
	text-align: center;
	background-color: #444;
	position: absolute;
	background: rgba(10,10,10,0.6);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
    flex-direction: column;
    justify-content: center;
}

a{
	color: #fff;
	text-decoration: none;
}

figure:hover figcaption{
	display: none
}

.bouton_sauter{
	background-color: #0c7f06;
	width: 100px;
	padding: 10px 0;
	margin: 20px auto;
}

p.le_saut{
	font-size: 25px;
}

.container_livres{
	width: 477px;
	height: 480px;
	display: flex;
	margin: 6px 0 0 25px;
}

.bloc_livre{
	border: 6px solid #305a47;
	background-color: #ddeae4;
	padding: 22px 55px;
	width: 244px;
	height: 244px;
	margin: -6px;
}

/********** Formulaire **********/

form{
	margin-top: 75px;
	border: 6px solid #305a47;
	background-color: #ddeae4;
	padding: 0 220px 80px 220px;
}

.information{
	font-size: 24px;
	color: #000;
	text-align: left;
	font-weight: normal;
	margin-bottom: 10px;
}

input, textarea{
	padding: 10px;
	width: 100%;
	margin: 5px 0;
	border: 1px solid #aaa;
	font-size: 11px;
}

textarea{
	height: 120px;
	border: 2px solid #aaa;
	font-size: 12px;
	font-family: sans-serif;
}

.deux_inputs{
	display: flex;
}

.bouton_envoyer{
	font-size: 18px;
	background-color: #305a47;
	color: #fff;
}

.prenom{
	margin-right: 10px;
}

.bouton_envoyer:hover{
	background-color: #109177;
}

/********** Footer **********/

footer{
	margin-top: 70px;
	background-color: #305a47;
}

.menu_footer ul{
	display: flex;
	text-align: center;
	list-style: none;
}

.menu_footer li{
	padding: 10px;
	font-size: 10px;
}

.menu_footer a{
	color: #ccc;
}

.menu_footer a:hover{
	color: #fff;
}

Modifié par ObiJuanKenobi (17 Mar 2022 - 13:55)
Modérateur
Salut,

résultat ici : https://codepen.io/niuxe/pen/eYyJBMJ

problème n°1:

<nav class="menu_principal">
			<ul>
				<li><a href="#" data-text="Accueil"><span>Accueil</span></a></li>
				<li><a href="#" data-text="Présentation"><span>Présentation</span></a></li>
				<li><a href="#" data-text="Agenda"><span>Agenda</span></a></li>
				<li><a href="#" data-text="Blog"><span>Blog</span></a></li>
				<li><a href="#" data-text="Dans la presse"><span>Dans la presse</span></a></li>
			</ul>
		</nav>


.menu_principal li a:before{
  content:attr(data-text);
  display: block;
  padding: 10px 20px;
  position: static;
  color:transparent;
  border: 2px dashed #fff;
  font-weight: bold;
}
.menu_principal a{
  display: block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}
.menu_principal a span{
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  top: 50%;
  transform:translateY(-50%);
  text-align: center;
}

.menu_principal a:hover span{
  color: #38b4b4;  
}

.menu_principal a:hover {
  background-color: #fff;
  font-weight: bold;
}


problème n°2:


figure:hover figcaption{
	display: none
}


Smiley cligne Je ne t'ai pas réglé ce souci. À toi de le gérer.

problème n°3:


.menu_footer ul{
	display: flex;
	text-align: center;
  justify-content:center;
	list-style: none;
}

Modifié par niuxe (17 Mar 2022 - 15:58)
Salut,

pour le 1er problème, la solution qui me semble la plus propre est d'utilisé une font qui ne change pas de largeur en devenant bold.
Tu as une chouette explication ici : https://uxdesign.cc/uniwidth-typefaces-for-interface-design-b6e8078dc0f7

pour le 2e problème, tu as ce bout de code la dans ton css :

figure:hover figcaption{
	display: none
}

Cela fait disparaître le bouton vert aussi car il est inclus dans ton figcaption mais il prend toute la place de l'image c'est pour ça que cela disparaît plus tôt que sur le survol du bouton vert

pour le 3e problème, ton footer (nav ul) est en display flex, du coup tu peux utiliser les propriétés de flex pour le centré avec un justify-content: center;
Modifié par Mathieuu (17 Mar 2022 - 15:43)
Merci Niuxe pour tes réponses.

Malheureusement, je ne peux pas utiliser ta solution pour le menu principal en haut (problème 1) parce que je débute dans le HTML/CSS et je n'ai pas encore vu l'attribut HTML "data-text" ainsi que les propriétés content:attr(data-text); position: static; overflow: hidden; et transform:translateY(-50%);

C'est trop compliqué pour moi, je débute et je ne comprends pas ton code. Certes ça marche mais je ne peux pas envoyer ce devoir avec ce code car le formateur n'a pas abordé ces propriétés et il ne veut pas qu'on utilise du code non présenté en cours. Il m'a déjà recalé à ce sujet.

Concernant le problème 2, tu me dis de le résoudre seul. Si j'expose mon problème sur ce forum, c'est que justement je n'arrive pas à le résoudre ! Pour toi c'est simple parce que tu pratiques certainement depuis des années et que tu es à l'aise avec le code mais pour moi qui débute c'est compliqué.

Merci quand même pour tes réponses.
Modifié par ObiJuanKenobi (17 Mar 2022 - 16:41)
Merci Mathiueuu pour tes explications.

Concernant le problème 1, on n'a pas encore abordé l'utilisation de la propriété font-family. Je ne peux donc pas utiliser une police de caractère à chasse fixe. Je vais envoyer le devoir sans avoir corrigé ce souci. Merci de m'avoir précisé ton astuce que je retiendrais pour plus tard.

Merci aussi de m'avoir précisé que comme j'utilisais un display flex, je devais utiliser les propriétés de flexbox et non text-align center ou margin 0 auto pour centrer. Et ça marche !

Concernant l'explication du problème 2, j'ai bien compris que le bouton se trouve à l'intérieur de <figcaption> et que pour avoir un rollover dessus il faut qu'il soit en dehors sinon, dès qu'on survole l'image, le <figcaption> disparaît et le bouton aussi. Mais mon souci c'est que je ne parvient pas à corriger ce problème.

Merci Mathieuu, 1 problème sur 3 réglé.
Modifié par ObiJuanKenobi (17 Mar 2022 - 16:39)
Modérateur
Alsacreations est une communauté d'entraides et pédagogique. Les membres viennent ici pour apprendre et partager des techniques. C'est le meilleur moyen d'apprendre et de faire des recherches annexes.

Il n'y a rien de compliqué pour le problème n°1. Le problème que tu rencontres est qu'un font-weight bold joue automatiquement sur le flux de données html. Peut être que ce lien te permettra de mieux comprendre la notion de flux : CSS Le positionnement dans le flux d'un élément HTML.

La solution que j'aborde est simple :
il faut que le texte affiché soit en dehors du flux. Ainsi, si je joue sur le font-size ou font-weight ou autres, ça n'aura pas d'impact sur les autres éléments html. La contrainte est que si je sors l'élément du flux, l'espace qu'il occupait devient null/néant (largeur et hauteur à zéro). Donc, je dois compenser par un élément totalement similaire qui doit occuper le même endroit et le même espace sans qu'un moteur de recherche ou autre voit un doublon. Le pseudo élément :before ou :after peuvent remplir cette tâche. Pour qu'il s'affiche, je dois impérativement ajouter la règle css content. Ça tombe bien, j'ai du texte. Le problème, ce texte n'est pas du tout linéaire. Alors, j'ajoute un attribut personnalisé data-quelque-chose et une valeur au noeud parent. Pour récupérer la valeur de cet attribut personnalisé dans un pseudo élément, j'utilise la fonction attr().

ps : La règle ultime qu'un intégrateur ou développeur est qu'il doit trouver des solutions aux problèmes qu'il rencontre afin d'arriver à ses fins. Pour ce faire, il doit faire des recherches annexes et ainsi apprendre.
Modifié par niuxe (17 Mar 2022 - 17:16)
\ô/
concernant le point 1, on peut également, entre autre, « simuler le grossissement » du texte en ajoutant une ombre au texte
a:hover {
    text-shadow: 0 0 1px currentColor;
}

ce n'est pas exactement le même rendu mais ça peut le faire.
Meilleure solution
Merci Dave-Hiock pour ta solution. J'ai abordé cette propriété dans les cours mais je n'ai pas pensé à l'utiliser, j'étais focalisé que sur font-weight. Je l'ai utilisée, merci encore.
Modifié par ObiJuanKenobi (17 Mar 2022 - 19:20)