Problème de code html/css
Bonjour, j' ai un problème qui est que je souhaite mettre deux class dans une seule balise mais, dans mon code css, je ne sait pas comment faire.
Voilà mon code si vous voulez :
Pour info, c' est au "<li class="btn menu-acceuil">" que galère.
Voilà mon code si vous voulez :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titre</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
</style>
</head>
<body>
<?php
include'navbar.php';
?>
<h1>Mon site!</h1>
</body>
</html>
<link rel="stylesheet" type="text/css" href="css/navbar.css">
<nav class="menu-nav">
<ul>
<li class="btn menu-acceuil">
<a href="#">
Acceuil
</a>
</li>
<li class="btn">
<a href="news.html">
Actualités
</a>
</li>
<li class="btn">
<a href="contact.html">
Contact
</a>
</li>
</ul>
</nav>
Pour info, c' est au "<li class="btn menu-acceuil">" que galère.
h1.headline{
color: black;
font-size: 50px;
}
nav.menu-nav ul li.btn a{
color: black;
background-color: white;
text-decoration: none;
}
nav.menu-nav ul li.btn{
list-style-type: none;
display: inline-block;
}
nav.menu-nav ul li.btn:hover a{
color: grey;
background-color: white;
transition: 1.5s all;
}
li {
font-size: 20pt;
padding: 5px 20px;
}
5 réponses
-
ModérateurBonjour,
1 - Ta question concernant le css ... je la déplace dans le forum CSS.
2 - En quoi mettre deux class dans un élément html te pose problème ?
Tu n'expliques pas ton souci.. tu dis juste que ça galère...
Hors..; à moins d'être devin.. il va nous être difficile de comprendre ton souci.
Donc, merci d'expliquer EXACTEMENT le problème constaté
-
ModérateurDonc tu veux cibler le li qui a les deux class
btn menu-acceuil
Dans ce cas,li.btn.menu-acceuil{ }
Bien entendu, après toute modification de CSS (ou de JS ) il faut vider le cache de ton navigateur pour être sûr que les modifications sont prises en compte.
-
Ce que je veux faire c est rendre indépendante chaques balises <li> pour pouvoir changer la taille , la police ... de chacunes.
-
Très bien merci
-
Le plus simple sera peut-être d'utiliser un sélecteur par numéro d'élément. Cela évitera de devoir associer une classe à chaque balise <li>
On peut écrire
li:nth-child(1) {... styles...}
li:nth-child(2) {... styles...}
Etc.
Voir le sélection nth-child :
http://stylescss.free.fr/v2-selectors/child.php
