Sujet Précédent Sujet Suivant

Cherche deboggueur css

Résolu/Fermé
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 - 25 nov. 2007 à 22:46
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 - 25 nov. 2007 à 23:09
Salut,

Est ce que quelqu'un arrive a voir l'erreur ? elle concerne la partie "pub/top/ma pub ici/bottom.
Normalement, il devrait y avoir les images que je présente en dessous (essayer le code, les images sont linkées sur serveur, donc accessibles pour vous)

mais le probleme, c'est que les images de background n'apparaissent pas.
ca fait deux heures que je suis la dessus... bizarre, car j'utilise cette meme technique sur d'autres pages, et le rendu est bon.

qui arriverait a me debogguer cette css ? 


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<head>
  <title>Portes coulissantes</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta http-equiv="Content-Language" content="fr" />
<style type="text/css" media="screen">

* 
	{
	margin:0;padding:0; color:#FFFFFF;
	}

html 
	{
	background:#000000 url(image/headerstripe.jpg) repeat-x;
	}

body
	{
	
	}

#page
	{
	width:1000px;
	margin:30px auto 30px auto;
	}

.clear
	{
	clear:both;
	}

/********** DEBUT DE LA BANNIERE **********/

#ban 
	{
	background:url(http://mondesauvage.free.fr/share/ccm/menu/head.gif) no-repeat;
	height:180px;
	position:relative;
	}

	/* menu positionné sur la banniere */
		
		#ban_menu
			{
			position:absolute;
			bottom:0px;
			left:0px;
			font-size:14px;
			}
			
		/* positionné au niveau du logo */
			
			#ul_accueil
				{
				float:left;
				width: 150px;
				height:66px;
				text-align:center;
				list-style:none;
				}
			
				#ul_accueil li
					{
					width:120px;
					height:66px;
					margin:0 auto 0 auto;
					}
			
		/* positionné au niveau du bloc titre */
			
			#ul_topmenu
				{
				float:right;
				margin-right:10px;
				width:800px;
				height:66px;
				text-align:center;
				list-style:none;
				}
			
				#ul_topmenu li
					{
					float:right;
					width:120px;
					height:66px;
					}
				
			/* permet d'afficher les images de survol */
				#ban_menu li a, #ban_menu li.selected a, #ban_menu li a:hover, #ban_menu li.selected a:hover 
					{
					display:block;
					height:66px; 
					width:120px;
					text-decoration:none;
					text-transform: uppercase;
					line-height:34px; /* hauteur de la ligne, le texte sera centré verticalement dans cette hauteur */
					}
			
			/* configuration de la mise en forme du texte */
				#ban_menu li a
					{color: red;}
				#ban_menu li.selected a
					{color: white;}				
				#ban_menu li a:hover, #ban_menu li.selected a:hover
					{color: orange;}
					
	/* choix des images */
		/* GENERAL */
				#ban_menu li a
					{background:url(image/menubtn_r1_c1.gif) no-repeat top;}
				#ban_menu li.selected a
					{background:url(image/menubtn_r1_c1.gif) no-repeat bottom;}
				#ban_menu li a:hover, #ban_menu li.selected a:hover 
					{background:url(image/menubtn_r1_c1.gif) no-repeat 1%;}
		/* ACCUEIL */
				#ban_menu li#accueil_accueil a
					{background:url(image/ban_accueil_accueil.gif) no-repeat top;}
				#ban_menu li#accueil_accueil.selected a
					{background:url(image/ban_accueil_accueil.gif) no-repeat bottom;}
				#ban_menu li#accueil_accueil a:hover, #ban_menu li#accueil_accueil.selected a:hover 
					{background:url(image/ban_accueil_accueil.gif) no-repeat 1%;}
		/* CONTACT */
				#ban_menu li#topmenu_contact a
					{background:url(image/ban_topmenu_contact.gif) no-repeat top;}
				#ban_menu li#topmenu_contact.selected a
					{background:url(image/ban_topmenu_contact.gif) no-repeat bottom;}
				#ban_menu li#topmenu_contact a:hover, #ban_menu li#topmenu_contact.selected a:hover 
					{background:url(image/ban_topmenu_contact.gif) no-repeat 1%;}
		/* BLOG */
				#ban_menu li#topmenu_blog a
					{background:url(image/ban_topmenu_blog.gif) no-repeat top;}
				#ban_menu li#topmenu_blog.selected a
					{background:url(image/ban_topmenu_blog.gif) no-repeat bottom;}
				#ban_menu li#topmenu_blog a:hover, #ban_menu li#topmenu_blog.selected a:hover 
					{background:url(image/ban_topmenu_blog.gif) no-repeat 1%;}
		/* WEB */
				#ban_menu li#topmenu_web a
					{background:url(image/ban_topmenu_web.gif) no-repeat top;}
				#ban_menu li#topmenu_web.selected a
					{background:url(image/ban_topmenu_web.gif) no-repeat bottom;}
				#ban_menu li#topmenu_web a:hover, #ban_menu li#topmenu_web.selected a:hover 
					{background:url(image/ban_topmenu_web.gif) no-repeat 1%;}
		/* MONTAGNE */
				#ban_menu li#topmenu_montagne a
					{background:url(image/ban_topmenu_montagne.gif) no-repeat top;}
				#ban_menu li#topmenu_montagne.selected a
					{background:url(image/ban_topmenu_montagne.gif) no-repeat bottom;}
				#ban_menu li#topmenu_montagne a:hover, #ban_menu li#topmenu_montagne.selected a:hover 
					{background:url(image/ban_topmenu_montagne.gif) no-repeat 1%;}
		/* FLORE */
				#ban_menu li#topmenu_flore a
					{background:url(image/ban_topmenu_flore.gif) no-repeat top;}
				#ban_menu li#topmenu_flore.selected a
					{background:url(image/ban_topmenu_flore.gif) no-repeat bottom;}
				#ban_menu li#topmenu_flore a:hover, #ban_menu li#topmenu_flore.selected a:hover 
					{background:url(image/ban_topmenu_flore.gif) no-repeat 1%;}
		/* FAUNE */
				#ban_menu li#topmenu_faune a
					{background:url(image/ban_topmenu_faune.gif) no-repeat top;}
				#ban_menu li#topmenu_faune.selected a
					{background:url(image/ban_topmenu_faune.gif) no-repeat bottom;}
				#ban_menu li#topmenu_faune a:hover, #ban_menu li#topmenu_faune.selected a:hover 
					{background:url(image/ban_topmenu_faune.gif) no-repeat 1%;}

/* permet de supprimer l'apparition des images si la souris est dans le bas de l'image */
	#ban_cache_menu 
		{width:1000px;
		height:30px;
		position:absolute;
		bottom:0px;
		left:0px;
		}

/********** FIN DE LA BANNIERE **********/
/********** DEBUT BANDEAU DE PUB - 1000px - ORANGE **********/

#1000_orange
{

}
#1000_orange_t
{
background: url("http://mondesauvage.free.fr/share/ccm/menu/1000_orange_t.jpg") no-repeat;
width:1000px;
height:10px;
min-height:10px;
}
#1000_orange_m
{
background: url("http://mondesauvage.free.fr/share/ccm/menu/1000_orange_m.jpg") repeat-y;
width:1000px;

}
#1000_orange_b
{
background: url("http://mondesauvage.free.fr/share/ccm/menu/1000_orange_b.jpg") no-repeat;
width:1000px;
height:37px;
}

/********** FIN BANDEAU DE PUB - 1000px - ORANGE **********/
</style>
</head>

<body>body

<div id="page">page
	<div id="ban">ban
		<div id="ban_menu">
			<ul id="ul_accueil">
			  <li id="accueil_accueil"><a href="#">Accueil</a></li>
			</ul>
			<ul id="ul_topmenu">
			  <li id="topmenu_contact"><a href="#">Contact</a></li>
			  <li id="topmenu_blog" class="selected"><a href="#">Blog</a></li>
			  <li id="topmenu_web"><a href="#">Web</a></li>
			  <li id="topmenu_montagne"><a href="#">Montagne</a></li>
			  <li id="topmenu_flore"><a href="#">Flore</a></li>
			  <li id="topmenu_faune" class="selected"><a href="#">Faune</a></li>
			</ul>

		</div>
		<div id="ban_cache_menu">
		</div>
	</div>
	<div id="1000_orange">pub
		<div id="1000_orange_t">top</div>
		<div id="1000_orange_m">
		ma pub ici
		</div>
		<div id="1000_orange_b">bottom</div>
	</div>
</div>
Je vérifie que l'adresse des images  est bonne :
<br/>
<img src="http://mondesauvage.free.fr/share/ccm/menu/1000_orange_t.jpg" />
<img src="http://mondesauvage.free.fr/share/ccm/menu/1000_orange_m.jpg" />
<img src="http://mondesauvage.free.fr/share/ccm/menu/1000_orange_b.jpg" />
</body>
</html>


PS : j'ai laissé le reste de la css, au cas ou il y aurait de mauvaises intéractions.
PPS : précision: ca fonctionne sous IE6, mais pas les autres navigateurs, c'est ca le plus bizarre
A voir également:

3 réponses

Réponse 1 / 3
Perceval
25 nov. 2007 à 23:02
Hello Gryzzly,

pour voir ce qui ne va pas dans une feuille css, pense à utiliser le validateur du w3c : http://jigsaw.w3.org/css-validator/

Il ne fait que t'indiquer les erreurs css dans ta page, et te propose une version de la feuille sans erreurs - mais qui n'a pas forcément le résultat que tu voudrais. Donc c'est un peu limité, mais c'est déjà ça.

Avec ta feuille, il t'indique ça :
177 #1000_orange En CSS1, il était possible d'avoir un nom d'id commençant par un chiffre ("#55xx") sauf s'il s'agissait d'une dimension ("#55cm"). En CSS2, de tels noms sont analysés comme étant des dimensions inconnues, pour permettre l'ajout de nouvelles unités).To make ".1000_orange" a valid id, CSS2 requires the first digit to be escaped ("#\31000_orange")

181 #1000_orange_t En CSS1, il était possible d'avoir un nom d'id commençant par un chiffre ("#55xx") sauf s'il s'agissait d'une dimension ("#55cm"). En CSS2, de tels noms sont analysés comme étant des dimensions inconnues, pour permettre l'ajout de nouvelles unités).To make ".1000_orange_t" a valid id, CSS2 requires the first digit to be escaped ("#\31000_orange_t")

189 #1000_orange_m En CSS1, il était possible d'avoir un nom d'id commençant par un chiffre ("#55xx") sauf s'il s'agissait d'une dimension ("#55cm"). En CSS2, de tels noms sont analysés comme étant des dimensions inconnues, pour permettre l'ajout de nouvelles unités).To make ".1000_orange_m" a valid id, CSS2 requires the first digit to be escaped ("#\31000_orange_m")

196 #1000_orange_b En CSS1, il était possible d'avoir un nom d'id commençant par un chiffre ("#55xx") sauf s'il s'agissait d'une dimension ("#55cm"). En CSS2, de tels noms sont analysés comme étant des dimensions inconnues, pour permettre l'ajout de nouvelles unités).To make ".1000_orange_b" a valid id, CSS2 requires the first digit to be escaped ("#\31000_orange_b")

Je ne sais pas si ça te servira, mais tu y trouveras peut-être déjà un début de piste.

Sinon, les # en début de déclaration ne sont utiles que si tu utilises des id et non des class dans tes balises. Et une id et une class, avec le même css à l'intérieur, n'auront pas forcément les mêmes résultats ...

Bonne chance.
0
Réponse 2 / 3
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
25 nov. 2007 à 23:05
SALUT

change le nom de tes div !! enleve les "1000_"

RAD
0
Réponse 3 / 3
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 330
25 nov. 2007 à 23:09
Pfff.
Vous me sauvez. J'ai perdu deux heures. vous venez de m'en faire gagner au moins autant. Merci. C'est bien un problème de chiffres en début de nom de class ou d'id (le comportement est le meme pour les 2).

Prochain bug css, je passe ma feuille au validateur ;o)
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse