Petit problème de barre de navigation
Fermé
pitouillecp
Messages postés
3
Date d'inscription
samedi 24 août 2013
Statut
Membre
Dernière intervention
17 septembre 2013
-
Modifié par pitouillecp le 24/08/2013 à 13:28
Ysabe_l Messages postés 12586 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 28 novembre 2024 - 17 sept. 2013 à 14:42
Ysabe_l Messages postés 12586 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 28 novembre 2024 - 17 sept. 2013 à 14:42
A voir également:
- Petit problème de barre de navigation
- Navigation privée - Guide
- Effacer les données de navigation - Guide
- Égal barré - Forum Bureautique
- Windows 11 barre des taches a gauche - Guide
- Barre de défilement - Guide
6 réponses
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
12 sept. 2013 à 17:59
12 sept. 2013 à 17:59
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
--
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
Modifié par animostab le 13/09/2013 à 21:12
Modifié par animostab le 13/09/2013 à 21:12
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
}
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
13 sept. 2013 à 17:39
13 sept. 2013 à 17:39
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
--
pitouillecp
Messages postés
3
Date d'inscription
samedi 24 août 2013
Statut
Membre
Dernière intervention
17 septembre 2013
13 sept. 2013 à 18:09
13 sept. 2013 à 18:09
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
pitouillecp
Messages postés
3
Date d'inscription
samedi 24 août 2013
Statut
Membre
Dernière intervention
17 septembre 2013
17 sept. 2013 à 13:42
17 sept. 2013 à 13:42
Je te remercie vraiment beaucoup, j'ai réussi (grâce à toi) à résoudre un problème que j'avais depuis 2 mois !
Ysabe_l
Messages postés
12586
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
28 novembre 2024
276
17 sept. 2013 à 14:42
17 sept. 2013 à 14:42
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 :)
