Petit problème de barre de navigation
pitouillecp
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
Ysabe_l Messages postés 12714 Date d'inscription Statut Contributeur Dernière intervention -
Ysabe_l Messages postés 12714 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour à tous,
J'ai créer un code pour faire la barre de navigation de mon site mais je viens de remarque que elle bug légèrement sous Firefox et Explorer (pour Chrome tout va bien).
Voici le code CSS:
body {
font-family: 'MyriadWebProRegular', sans-serif;
}
a:link, a:visited {
text-decoration: none; }
#masthead {
width: 900px;
height: 75px;
margin: 0 auto;
padding: 0;
position: relative;
border-radius: 10px;
border-radius: 10px 10px 0px 0px;
background: #22a4f3;
}
#masthead #nav ul {
padding: 0;
margin: 0;
position: absolute;
width: 900px;
top: 25px;
left: 25px; }
#masthead #nav ul li {
float: left;
font-weight: bold;
}
#masthead #nav ul li a {
display: block;
color: #fff;
padding: 5px 4px;
font-size: 15px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px; }
#masthead #nav ul li a:hover {
background: #0370cb;
}
a:link, a:visited {
text-decoration: none; }
Et voici le code html :
<div id="masthead">
<!--masthead-->
<div id="nav">
<ul>
<li><a href="http://pitouille2.renseign.com" target="_blank">Accueil</a></li>
<li><a> </a></li><li><a> </a></li><li>
</li><li><a href="http://pitouille2.renseign.com/astuces/" target="_blank">Astuces</a></li>
<li><a> </a></li><li><a> </a></li><li>
</li><li><a href="http://pitouille2.renseign.com/404/" target="_blank">Extras</a></li>
<li><a> </a></li><li><a> </a></li><li>
</li><li><a href="http://pitouille2.renseign.com/404/" target="_blank">Dessins</a></li>
<li><a> </a></li><li><a> </a></li><li>
</li><li><a href="http://pitouille2.renseign.com/" target="_blank">Coin for change</a></li>
<li><a> </a></li><li><a> </a></li><li>
</li><li><a href="http://pitouille2.renseign.com/404/" target="_blank">Les autres sites</a></li>
<li><a> </a></li><li><a> </a></li><li>
</li><li><a href="https://disney.fr/" target="_blank">Joue à Club Penguin</a></li>
<li><a> </a></li><li><a> </a></li><li>
</li><li><a href="mailto:pitouille2@renseign.com" target="_blank">Contacte-moi</a></li>
</ul>
</div>
</div>
</body>
Vous pouvez la voir ici : http://pitouille2.renseign.com/astuces/
J'aimerais ne plus voir les points noir ;-)
Merci d'avance
J'ai créer un code pour faire la barre de navigation de mon site mais je viens de remarque que elle bug légèrement sous Firefox et Explorer (pour Chrome tout va bien).
Voici le code CSS:
body {
font-family: 'MyriadWebProRegular', sans-serif;
}
a:link, a:visited {
text-decoration: none; }
#masthead {
width: 900px;
height: 75px;
margin: 0 auto;
padding: 0;
position: relative;
border-radius: 10px;
border-radius: 10px 10px 0px 0px;
background: #22a4f3;
}
#masthead #nav ul {
padding: 0;
margin: 0;
position: absolute;
width: 900px;
top: 25px;
left: 25px; }
#masthead #nav ul li {
float: left;
font-weight: bold;
}
#masthead #nav ul li a {
display: block;
color: #fff;
padding: 5px 4px;
font-size: 15px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px; }
#masthead #nav ul li a:hover {
background: #0370cb;
}
a:link, a:visited {
text-decoration: none; }
Et voici le code html :
<div id="masthead">
<!--masthead-->
<div id="nav">
<ul>
<li><a href="http://pitouille2.renseign.com" target="_blank">Accueil</a></li>
<li><a> </a></li><li><a> </a></li><li>
</li><li><a href="http://pitouille2.renseign.com/astuces/" target="_blank">Astuces</a></li>
<li><a> </a></li><li><a> </a></li><li>
</li><li><a href="http://pitouille2.renseign.com/404/" target="_blank">Extras</a></li>
<li><a> </a></li><li><a> </a></li><li>
</li><li><a href="http://pitouille2.renseign.com/404/" target="_blank">Dessins</a></li>
<li><a> </a></li><li><a> </a></li><li>
</li><li><a href="http://pitouille2.renseign.com/" target="_blank">Coin for change</a></li>
<li><a> </a></li><li><a> </a></li><li>
</li><li><a href="http://pitouille2.renseign.com/404/" target="_blank">Les autres sites</a></li>
<li><a> </a></li><li><a> </a></li><li>
</li><li><a href="https://disney.fr/" target="_blank">Joue à Club Penguin</a></li>
<li><a> </a></li><li><a> </a></li><li>
</li><li><a href="mailto:pitouille2@renseign.com" target="_blank">Contacte-moi</a></li>
</ul>
</div>
</div>
</body>
Vous pouvez la voir ici : http://pitouille2.renseign.com/astuces/
J'aimerais ne plus voir les points noir ;-)
Merci d'avance
A voir également:
- Petit problème de barre de navigation
- Navigation privée - Guide
- Supprimer les données de navigation - Guide
- Windows 11 barre des taches a gauche - Guide
- Barre de défilement - Guide
- O barré ✓ - Forum Excel
6 réponses
enlève les <li></li> et les <a></a> vides dans le html
rajoute
list-style-type:none;
dans #masthead #nav ul ou dans #masthead #nav ul li
les petits points sont en fait le point de commencement d'une ligne de liste !
tu as un doublon dans #masthead {} border-radius 2 fois
attention border radius n'est n'est pas pris en charge par tous les nagigateurs
voir cette page
https://www.alsacreations.com/tuto/lire/1300-css3pie-styles-css3-pour-internet-explorer.html
pieHTC se télécharge ici http://css3pie.com/download/
pieHTC applique les border radius (et autres) a IE inférieur à 9
--
rajoute
list-style-type:none;
dans #masthead #nav ul ou dans #masthead #nav ul li
les petits points sont en fait le point de commencement d'une ligne de liste !
tu as un doublon dans #masthead {} border-radius 2 fois
attention border radius n'est n'est pas pris en charge par tous les nagigateurs
voir cette page
https://www.alsacreations.com/tuto/lire/1300-css3pie-styles-css3-pour-internet-explorer.html
pieHTC se télécharge ici http://css3pie.com/download/
pieHTC applique les border radius (et autres) a IE inférieur à 9
--
Ben en tout cas il n'y a plus les petits points quand je vais voir la page
dans la page d'acceuil il y sont encore donc enlève les style css intégré à la page !!! balises <style type="text/css"> ...........</style>
essaie de vider le cache de ton navigateur
vérifie ton html il y a quelques erreur </body> au milieu des pages par exemple
bon vu que ton css est bourré d'erreur refais le en séparant chaque id ou class
et chaque élément (li ul a etc)
ex
#nav{} ---------------------->text-align:center; a rajouter
#nav a:hover{}
#nav ul{}
#nav li{}
#masthead{}
#mashead p {}
etc
evite de faire plusieurs déclaration identiques pour une meme ID
voila les erreurs
#section-content {
width: 900px;
margin: 0 auto;
background: transparent; ---> DOUBLON1
}
#section-content #zone-content-wrapper {
padding: 20px 10px;
background: #fff; -----> DOUBLON1
behavior: url(/sites/default/themes/club_penguin/css/pie/PIE.htc);
---->le behavior se place apres les boxshadow et consorts
position: relative\9; ----->relative\9; ???? retire le\9
box-shadow: 5px 10px 10px -7px #666666, -5px 10px 10px -7px #666666;
box-shadow prend 3 valeurs px et 1 valeur couleur
}
#section-content #zone-content-wrapper #zone-content {
background: #fff; --------------DOUBLON1
}
body { -----------------DOUBLON2
font-family: 'MyriadWebProRegular', sans-serif; -----> police inconnue des nav
}
a:link, a:visited {
text-decoration: none; }
#masthead { width: 900px;
height: 75px;
margin: 0 auto;
padding: 0;
position: relative;
border-radius: 10px 10px 0px 0px;
-------> rajoute les declaration pour autres navigateurs et pieHTC
background: #22a4f3;
}
#masthead #nav ul {
padding: 0;
margin: 0;
position: absolute;
width: 900px;
top: 25px;
left: 25px;
list-style-type:none;
}
#masthead #nav ul li {
float: left;
font-weight: bold;
list-style-type:none;
}
#masthead #nav ul li a {
display: block;
color: #fff;
padding: 5px 4px;
font-size: 15px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-------> rajoute pieHTC
}
#masthead #nav ul li a:hover {
background: #0370cb;
}
body { --------DOUBLON 2
font-family: 'MyriadWebProRegular', sans-serif;
}
a:link, a:visited {
text-decoration: none; }
#masthead2 {
width: 240px;
height: 30px;
margin: 0 auto;
padding: 0;
position: absolute;
border-radius: 30px;
-------> rajoute les declaration pour autres navigateurs et pieHTC
background: #CCCFFF;
}
#masthead2 #nav ul {
padding: 0;
margin: 0;
position: absolute;
width: 900px;
top: 0px;
left: 10px; }
#masthead2 #nav ul li {
float: left;
font-weight: bold;
}
#masthead2 #nav ul li a {
display: block;
color: #FFFFFF;
padding: 5px 4px;
font-size: 15px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-------> rajoute les declaration pour autres navigateurs et pieHTC
}
dans la page d'acceuil il y sont encore donc enlève les style css intégré à la page !!! balises <style type="text/css"> ...........</style>
essaie de vider le cache de ton navigateur
vérifie ton html il y a quelques erreur </body> au milieu des pages par exemple
bon vu que ton css est bourré d'erreur refais le en séparant chaque id ou class
et chaque élément (li ul a etc)
ex
#nav{} ---------------------->text-align:center; a rajouter
#nav a:hover{}
#nav ul{}
#nav li{}
#masthead{}
#mashead p {}
etc
evite de faire plusieurs déclaration identiques pour une meme ID
voila les erreurs
#section-content {
width: 900px;
margin: 0 auto;
background: transparent; ---> DOUBLON1
}
#section-content #zone-content-wrapper {
padding: 20px 10px;
background: #fff; -----> DOUBLON1
behavior: url(/sites/default/themes/club_penguin/css/pie/PIE.htc);
---->le behavior se place apres les boxshadow et consorts
position: relative\9; ----->relative\9; ???? retire le\9
box-shadow: 5px 10px 10px -7px #666666, -5px 10px 10px -7px #666666;
box-shadow prend 3 valeurs px et 1 valeur couleur
}
#section-content #zone-content-wrapper #zone-content {
background: #fff; --------------DOUBLON1
}
body { -----------------DOUBLON2
font-family: 'MyriadWebProRegular', sans-serif; -----> police inconnue des nav
}
a:link, a:visited {
text-decoration: none; }
#masthead { width: 900px;
height: 75px;
margin: 0 auto;
padding: 0;
position: relative;
border-radius: 10px 10px 0px 0px;
-------> rajoute les declaration pour autres navigateurs et pieHTC
background: #22a4f3;
}
#masthead #nav ul {
padding: 0;
margin: 0;
position: absolute;
width: 900px;
top: 25px;
left: 25px;
list-style-type:none;
}
#masthead #nav ul li {
float: left;
font-weight: bold;
list-style-type:none;
}
#masthead #nav ul li a {
display: block;
color: #fff;
padding: 5px 4px;
font-size: 15px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-------> rajoute pieHTC
}
#masthead #nav ul li a:hover {
background: #0370cb;
}
body { --------DOUBLON 2
font-family: 'MyriadWebProRegular', sans-serif;
}
a:link, a:visited {
text-decoration: none; }
#masthead2 {
width: 240px;
height: 30px;
margin: 0 auto;
padding: 0;
position: absolute;
border-radius: 30px;
-------> rajoute les declaration pour autres navigateurs et pieHTC
background: #CCCFFF;
}
#masthead2 #nav ul {
padding: 0;
margin: 0;
position: absolute;
width: 900px;
top: 0px;
left: 10px; }
#masthead2 #nav ul li {
float: left;
font-weight: bold;
}
#masthead2 #nav ul li a {
display: block;
color: #FFFFFF;
padding: 5px 4px;
font-size: 15px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-------> rajoute les declaration pour autres navigateurs et pieHTC
}
Voyant que tu as resolu le probleme un petit re merci ne ferais pas de mal
enlève les <li><a> </a></li><li><a> </a></li><li>
</li> c'est vide ca sert a rien
si ca decale tes li ajoute une valeur de margin
autre chose ta balise <section> n'est pas refermée par </section> dans ta page
--
enlève les <li><a> </a></li><li><a> </a></li><li>
</li> c'est vide ca sert a rien
si ca decale tes li ajoute une valeur de margin
autre chose ta balise <section> n'est pas refermée par </section> dans ta page
--
Oui, un grand merci mais je n'ai pas vu de changement, même avec ce que tu m'as conseillé, ou pour les balises vides, je les utilisent pour faire des espaces (sûrement une mauvaise manière)...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Je te remercie vraiment beaucoup, j'ai réussi (grâce à toi) à résoudre un problème que j'avais depuis 2 mois !
Bonjour,
Si je peux me permettre ton code a de nombreux soucis, si je prends la page http://pitouille2.renseign.com/404/ par exemple.
Déjà il manque le doctype, le charset.
Ensuite dans l'ordre tu as mis (si j'enlève tout ce qui est dedans)
Problèmes :
- il ne doit y avoir qu'une seule balise <head> et une seule </head>, elles doivent se trouver en haut du code (head voulant dire tête).
- il ne doit y avoir qu'une seule balise <body> et une seule </body>, la balise <body> devant se trouver juste après </head> (body voulant dire corps).
- il ne doit rien y avoir en dehors des balises <body></body> qui définit ce qui doit être affiché.
- tu ouvres un <section> qui tu ne fermes nulle part.
- tu ouvres un <div> que tu ne fermes nulle part.
En fait dans la balise head on doit trouver toutes les infos pour le navigateur (les infos de référencement, les codes javascript ...) et dans la partie body tout ce qui sera affiché (donc le contenu).
En regardant vite fait les autres pages c'est le même genre d'erreurs, avec même des pages (comme l'accueil) qui n'ont même pas de <head></head>.
Je te conseille de faire un tour sur ce site : http://validator.w3.org/ et de vérifier toutes tes pages, tu trouveras beaucoup de commentaires sur tes erreurs.
Bon courage :)
Si je peux me permettre ton code a de nombreux soucis, si je prends la page http://pitouille2.renseign.com/404/ par exemple.
Déjà il manque le doctype, le charset.
Ensuite dans l'ordre tu as mis (si j'enlève tout ce qui est dedans)
<html>
<head>
</head>
<body>
</body>
<section>
<div>
<head>
</head>
des liens et du texte
<body>
</body>
une image
</html>
Problèmes :
- il ne doit y avoir qu'une seule balise <head> et une seule </head>, elles doivent se trouver en haut du code (head voulant dire tête).
- il ne doit y avoir qu'une seule balise <body> et une seule </body>, la balise <body> devant se trouver juste après </head> (body voulant dire corps).
- il ne doit rien y avoir en dehors des balises <body></body> qui définit ce qui doit être affiché.
- tu ouvres un <section> qui tu ne fermes nulle part.
- tu ouvres un <div> que tu ne fermes nulle part.
En fait dans la balise head on doit trouver toutes les infos pour le navigateur (les infos de référencement, les codes javascript ...) et dans la partie body tout ce qui sera affiché (donc le contenu).
En regardant vite fait les autres pages c'est le même genre d'erreurs, avec même des pages (comme l'accueil) qui n'ont même pas de <head></head>.
Je te conseille de faire un tour sur ce site : http://validator.w3.org/ et de vérifier toutes tes pages, tu trouveras beaucoup de commentaires sur tes erreurs.
Bon courage :)
