Vous utilisez un navigateur obsolète, veuillez le mettre à jour.
Veuillez utiliser un navigateur internet moderne avec JavaScript activé pour naviguer sur OpenClassrooms.com
Une question ? Pas de panique, on va vous aider !
Ce sujet est fermé.
Bonjour à tous,
J'aimerais changer la taille des polices de "Couverture", "Doudou", "Attache tétine", ... mais je n'y arrive pas.
Code html
<div id="barre"> <ul id="menu"> <li class="gauche"></li> <li class="menu1"><a href="#" class="drop">Nos produits</a> <div class="dropdown_4columns"><!-- 4 col --> <div class="col_1"> <h3>Coin dodo</h3> <ul> <li><a href="#" >Couverture</a></li> <li><a href="#">Doudou Lapinou</a></li> <li><a href="#">Doudou Souvenir</a></li> <li><a href="#">Doudou Rond</a></li> </ul> </div> <div class="col_1"> <h3>Accessoires</h3> <ul> <li><a href="#">Attache Tétine</a></li> <li><a href="#">Protège Carnet Broderie</a></li> <li><a href="#">Protège Carnet Photo</a></li> <li><a href="#">Coques Téléphones</a></li> </ul> </div> <div class="col_1"> <h3>Pour le bain</h3> <ul> <li><a href="#">Cap de bain brodé</a></li> <li><a href="#">Cap de bain imprimé</a></li> <li><a href="#">11</a></li> <li><a href="#">11</a></li> </ul> </div> <div class="col_1"> <h3>Coin Bodys</h3> <ul> <li><a href="#">Bodys souvenir</a></li> <li><a href="#">Bodys mains</a></li> <li><a href="#">Bodys Coquins</a></li> <li><a href="#">Bodys Veux-tu être</a></li> <li><a href="#">Bodys Prince / Princesse</a></li> <li><a href="#">Bodys Coeur</a></li> <li><a href="#">Bodys Pieds</a></li> <li><a href="#">Bodys Ailes d'Anges</a></li> <li><a href="#">Bodys Personnalisable</a></li> </ul> </div> <div class="col_1"> <h3>Coin mugs</h3> <ul> <li><a href="#">Mugs animaux</a></li> <li><a href="#">Mugs anniversaire</a></li> <li><a href="#">Mugs naissance</a></li> <li><a href="#">Mugs personnalisable</a></li> </ul> </div> <div class="col_1"> <h3>66666</h3> <ul> <li><a href="#">Lightbox</a></li> <li><a href="#">Diaporamas</a></li> <li><a href="#">Scripts</a></li> <li><a href="#">Liens</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </li> <li class="menu2"><a href="#" class="drop">Test 2</a> <div class="dropdown_4columns"><!-- 4 col --> <div class="col_1"> <h3>11111</h3> <ul> <li><a href="#">Lightbox</a></li> <li><a href="#">Diaporamas</a></li> <li><a href="#">Scripts</a></li> <li><a href="#">Liens</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="col_1"> <h3>22222</h3> <ul> <li><a href="#">Lightbox</a></li> <li><a href="#">Diaporamas</a></li> <li><a href="#">Scripts</a></li> <li><a href="#">Liens</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="col_1"> <h3>33333</h3> <ul> <li><a href="#">Lightbox</a></li> <li><a href="#">Diaporamas</a></li> <li><a href="#">Scripts</a></li> <li><a href="#">Liens</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="col_1"> <h3>44444</h3> <ul> <li><a href="#">Lightbox</a></li> <li><a href="#">Diaporamas</a></li> <li><a href="#">Scripts</a></li> <li><a href="#">Liens</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </li> <li class="menu3"><a href="#" class="drop">Test 3</a> <div class="dropdown_4columns"><!-- 4 col --> <div class="col_1"> <h3>Liensffff</h3> <ul> <li><a href="#">Lightbox</a></li> <li><a href="#">Diaporamas</a></li> <li><a href="#">Scripts</a></li> <li><a href="#">Liens</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="col_1"> <h3>Liens1vvvv1</h3> <ul> <li><a href="#">Lightbox</a></li> <li><a href="#">Diaporamas</a></li> <li><a href="#">Scripts</a></li> <li><a href="#">Liens</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </li> <li class="droite"></li> </ul> </div> <!--Fin barre-->
Code CSS
#barre{ margin: 0; padding: 0; height: 58px; background: url(img/designv3/barremenu.png) no-repeat 0 0; } #menu li.gauche{ float:left; display:block; width: 35px; height: 58px; text-align:center; position:relative; border: 1px solid black; margin: 0px 0px 0 -40px; } #menu li.menu1{ float:left; display:block; width: 315px; height: 43px; position:relative; text-align:center; border: 1px solid black; padding: 15px 0 0 0 } #menu li.menu2{ float:left; display:block; width: 300px; height: 58px; position:relative; text-align:center; border: 1px solid black; } #menu li.menu3{ float:left; display:block; width: 270px; height: 58px; position:relative; text-align:center; border: 1px solid black; } #menu li.droite{ float:left; display:block; width: 50px; height: 58px; position:relative; border: 1px solid black; } #menu li.menu1:hover{ padding: 0; background-color:White; /* Rounded corners */ -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } #menu li a{ font-family:Arial, Helvetica, sans-serif; font-size:20px; color: red; display:block; outline:0; text-decoration:none; } .dropdown_4columns { width: 700px; height: 300px; margin:4px auto; float:left; position:absolute; left:-999em; /* Hides the drop down */ text-align:left; padding:10px 5px 10px 5px; border:1px solid #777777; border-top:none; /* Gradient background */ background:red; background: -moz-linear-gradient(top, white, white); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(white)); /* Rounded Corners */ -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; } .col_1 { display:inline; float: left; position: relative; margin-left: 5px; margin-right: 5px; } #menu li:hover a { color:#161616; text-shadow: 1px 1px 1px #ffffff; } #menu li .drop { padding-right:21px; } #menu li:hover .dropdown_4columns { left:-1px; top:auto; } #menu li ul { list-style:none; padding:0; margin:0 0 12px 0; } #menu li ul li{ font-size:20px; line-height:24px; position:relative; text-shadow: 1px 1px 1px #ffffff; padding:0; margin:0; float:none; text-align:left; width:130px; } #menu li ul li:hover { background:none; border:none; padding:0;margin:0; }
Merci pour votre aide
Bonsoir,
Ta question est sérieuse ? tu arrives à faire tout ça mais pas changer la taille de 3 <li> ?
alors tu ajoute ce que tu devrais connaitre : class="" que tu nommes comme tu veux au niveau de la balise de chaque texte à mettre en gras comme ceci
class=""
<a class="maClass">Couverture</a> <a class="maClass">Doudou</a> <a class="maClass">Attache tétine</a>
Et dans ton css tu n'as plus qu'a appliquer la taille de texte à la class maClass.
Je suis sur que ça doit te dire quelque chose
Je sais comment on fait
J'ai tester ceci:
<li><a href="#" class="article">Couverture</a></li>
.article{ font-size:15px; }
Et cela ne fonctionne pas
Il doit y avoir un truc qui bloque mais je ne sais pas quoi
#menu li ul li{ font-size:20px; [...]
#menu li ul li{ font-size:10px; [...]
Tu va trouver ca bête mais serrait-il possible de voir le <head> d'une de tes page html ?
Compos sui.
#menu li a{
Car ceci prime sur le reste l'un touche sur la balise li et celui-ci sur la balise a
Salut,
https://www.emmanuelbeziat.com/blog/principes-du-css-poids-des-declarations/
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
du coup met ton .article apres
En ceci par exemple Aucune taille ne change c'est ca que je ne comprends pas
Compos sui.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !