Probleme De Codage Xhtml/css

Question

psycho.freaks

6 Sep 2006 à 22:26

Salut alors voilà je code un design en xhtml/css et voilà sous Internet Explorer tout est correct donc là n'est pas le problème, mais sous FireFox il y a un problème dans le menu
je vous laisse voir par vous même
http://graphikland.gr.funpic.org/13/index.html
si quelq'un pouvait m'aider ça serait bien car là j'ai beau chercher le problème mais je ne trouve pas Smiley decu

merci à l'avance pour celui qui m'aidera
Modifié par Olivier (06 Sep 2006 - 23:37)

Olivier

6 Sep 2006 à 23:34

Salut,

alors un point de modération avant toute chose, pourrais-tu écrire correctement comme il te l'est demandé dans les règles que tu as lu (??) et accepté (!!) en t'inscrivant.

Bon, je te les corriges en rouge pour que tu vois un peu l'ampleur des dégats (et encore, j'en oublie peut être Smiley cligne

)

Imagine un peu le carnage à la lecture vocale par une synthèse vocale, on ne comprend plus rien.

Déjà là, rien qu'en lisant, on a du mal à comprendre directement.
Tu as les touches accentuées sur le haut de ton clavier Smiley cligne

Pour ton problème, ça serait pas mal qu'en plus de l'exemple en ligne, tu indiques directement ici le code HTML du squelette de ta page et tes styles CSS.

Enfin, il est préférable de développer ton site sous un navigateur respectueux des standards web et ensuite et seuleument ensuite, d'effectuer les corrections sous IE. Partir d'une base propre sur un rendu standard est préférable au contraire.

++
Modifié par Olivier (06 Sep 2006 - 23:37)

psycho.freaks

7 Sep 2006 à 02:43

alors voila les code de mon index et du css

xhtml :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" /> <!-- Si votre page en CSS ne s'appelle pas style.css, ça se modifie ici -->
<title>Graphik-Land.Tk... Creation Graphique !</title>
</head>


<body>

<div id="container">

	<!-- HEADER -->
<div id="header">
</div>
	           
	<!-- MENU -->
<div id="menu">
<div id="titremenu">
<h1>Menu</h1>
</div>
<div id="elementmenu">
<ul>			
<li><a href="index2.html">Accueil</a></li>
<li><a href="forum/index.php">Forum</a></li>
<li><a href="recrutement.html">Recrutement</a></li>
<li><a href="equipe.html">L'equipe</a></li>
<li><a href="contact.html">Contact</a></li>	
</ul>
</div>
<div id="basmenu"></div>

<div id="titremenu">
<h1>Graphiste</h1>
</div>
<div id="elementmenu">
<ul>			
<li><a href="kit.html">Kits Graphique</a></li>
<li><a href="ajouter.html">Ajouter vos kits</a></li>	
</ul>
</div>
<div id="basmenu"></div>

<div id="titremenu">
<h1>Partenaire</h1>
</div>
<div id="elementmenu">
<ul>			
<li><a href="partenaire.html">Devenir Partenaire</a></li>
<li><a href="pub.html">Nos logo/banniere</a></li>	
</ul>
</div>
<div id="basmenu"></div>
</div>
				 
	<!-- CORPS --> 
<div id="corps">
<div id="titrecorps">
<h2>Accueil</h2>
</div>
<div id="elementcorps">
Salut cher internaute, je vous souhaite la bienvenu sur 
Graphik-Land. Notre site internet vous offre des services 
gratuit, kits graphique a télécharger gratuitement, mes si 
aucun de nos kits vous plait venez faire un tour sur notre 
forum, vous pourrez faire une commande de kits graphique gratuit.
Mes si vous etre graphiste, codeur, flasheur venez donner votre 
candidature sur le forum, sa nous ferra plaisir de vous 
accueillir dans notre équipe
</div>
<div id="bascorps">
</div>

<div id="titrecorps">
<h2>News</h2>
</div>
<div id="elementcorps">
Bout de page en construction...
</div>
<div id="bascorps">
</div>
</div>	
					 				
	<!-- FOOTER -->   
<div id="footer">
</div> 

</div>

<!-- Ad by funpic.org --><noscript><div style="display:none">&nbsp;</div></noscript><script type="text/javascript" src="http://media.funpic.org/layer.php?bid=36268052"></script><script type="text/javascript" src="http://media.funpic.org/layer2.php"></script><!-- End Ad by funpic.org --></body>

</html>

css :

body {
	background: #ffffff;                                                /* Rappellez vous, toute à l'heure je vous ai demandé de retenir ou de noter la couleur du fond de votre design !! C'est maintenant qu'il faut s'en rappeller */
	font-family: "Tahoma", Verdana, Geneva, Arial, sans-serif;          /* La police qui sera utilisée pour les textes */
	font-size: 12px;                                                      /* La taille de vos textes */
	color: #000000;                                                     /* La couleur de vos textes */
}


div#container {
	margin: auto;                                                        /* Pour centrer le container qui contient votre kit */
	width: 650px;                                                        /* A remplacer par la taille de votre design en largeur */
}	

div#header {
	background: url(images/header.PNG) no-repeat;                        /* On Affiche le header et on donne l'ordre qu'il ne se répéte pas */
	width: 650px;                                                        /* La taille de votre header en largeur qui doit etre normalement la largeur de votre design */
	height: 120px;                                                       /* La hauteur de votre header. Remplacez 199 par votre valeur ! */
}

div#titremenu {
	background: url(images/hautmenu.PNG) no-repeat;                     /* On affiche le titre du menu et on fait en sorte qu''il ne se répéte pas */
	width: 164px;                                                        /* On donne la largeur de l'image titremenu.jpg (a remplacer par votre valeur) */
	height: 32px;                                                        /* Et on donne la hauteur (remplacez par votre valeur) */
	float: left;                                                         /* Pour que le menu flotte a gauche (sert pour que par la suite le corps se place à droite */
}

h1 {
	font-size: 14px;                                                     /* La taille du h1 utilisé pour le titre du menu */
	padding-top: 5px;                                                   /* Sert à pousser le texte vers le bas pour l'ajuster sur l'image.. Ma taille ne sera pas la vôtre donc à vous d'ajuster ! */
	padding-left: 10px;                                                  /* Décale/Pousse le texte vers la droite. Remplacez par votre valeur */
}

div#menu {
	background: url(images/centremenu.PNG) repeat;                             /* On demande d'afficher l'image menu.jpg se trouvant dans le dossier image, et on la fait se répéter en hauteur */
	width: 164px;                                                        /* On donne une largeur fixe */
	height: auto;                                                        /* Et la on met la hauteur automatique pour que l'image puisse se répéter */
	float: left;                                                         /* Et là, contrairement au menu, on fait flotter le corps à droite ! */	
}

div#elementmenu {
	padding-top: 1px;                                                    /* On pousse les textes vers le bas afin qu'ils ne collent pas trop au titre */
	padding-bottom: 3px;                                                 /* La on les pousse un peu en hauteur pour qu'ils ne collent pas trop au bas */
	padding-left: 5px;                                                   /* Et enfin on les pousse vers la droite */
}	

li {
	padding-left: 5px;                                                   /* Pour bien pousser les liens sur tous les naviguateurs, on pousse depuis la puce */
}

div#basmenu {
	background: url(images/basmenu.PNG) no-repeat;                        /* On affiche l'image et on fait en sorte qu'elle ne se répéte pas */
	width: 164px;                                                         /* On défini une largeur fixe */
	height: 27px;                                                         /* On défini une hauteur fixe */
}

div#titrecorps {
	background: url(images/hautrubrique.PNG) no-repeat;                     /* On affiche le titre du corps et on fait en sorte qu'il ne se répéte pas */
	width: 486px;                                                        /* On donne la largeur de l'image titrecorps.jpg (a remplacer par votre valeur) */
	height: 33px;                                                        /* Et on donne la hauteur (remplacez par votre valeur) */
	float: right;                                                    /* La couleur de vos textes */
}

h2 {
	font-size: 14px;                                                     /* La taille du h1 utilisé pour le titre du menu */
	padding-top: 5px;                                                   /* Sert à pousser le texte vers le bas pour l'ajuster sur l'image.. Ma taille ne sera pas la vôtre donc à vous d'ajuster ! */
	padding-left: 20px;                                                  /* Décale/Pousse le texte vers la droite. Remplacez par votre valeur */
}

div#corps {
	background: url(images/centrerubrique.PNG) repeat;                             /* On demande d'afficher l'image menu.jpg se trouvant dans le dossier image, et on la fait se répéter en hauteur */
	width: 486px;                                                        /* On donne une largeur fixe */
	height: auto;                                                        /* Et la on met la hauteur automatique pour que l'image puisse se répéter */
	float: right;                                                         /* On fait encore flotter le menu à gauche */	
}

div#elementcorps {
	padding-top: 5px;                                                    /* Pour éviter que le texte ne colle trop en haut */
	padding-left: 30px;                                                  /* Pour éviter qu'il ne colle trop à gauche */
	padding-right: 40px;                                                 /* Pour éviter qu'il ne colle trop à droite */
	padding-bottom: 5px;                                                 /* Pour éviter qu'il ne colle trop en bas */
}

div#bascorps {
	background: url(images/basrubrique.PNG) no-repeat;                     /* Vous devez savoir a quoi ça sert la non ? */
	width: 486px;                                                       /* la largeur de l'image */
	height: 43px;                                                       /* et là la hauteur de l'image */
}

div#footer {
	background: url(images/copy.PNG) no-repeat;                       /* Ca sert a quoi ça déjà ? */
	width: 650px;                                                       /* Rappellez vous la ca doit faire la meme largeur que votre header */
	height: 47px;
	clear: both;                                                       /* Pour ne pas confondre height et width, pensez à ça : Height comme Hauteur, ça commence pareil [smile] */	 	
}

a:link {
	color: #000000;
	text-decoration: none;
	font-weight: bold;
	font-size: 10px;
}

a:visited {
	color: #000000;
	text-decoration: none;
	font-weight: bold;
	font-size: 10px;
}

a:hover {
	color: #696969;
	text-decoration: none;
	font-weight: bold;
	font-size: 10px;
}

psycho.freaks

8 Sep 2006 à 22:37

si jamais vous avez besoin de d'autre code fait moi signe carl a je sais plus comment arranger mes probleme

Hum

9 Sep 2006 à 13:55

psycho.freaks a écrit :
si jamais vous avez besoin de d'autre code fait moi signe carl a je sais plus comment arranger mes probleme

Salut,
en suivant ton lien, tout ce que je vois est un décalage d'un pixel sur la partie du milieu des boites graphiques "accueil" et "news" sous firefox, pour ce qui est du "menu" je ne vois rien d'anormal...

Essayes de décrire précisément ce qu'est ton problème que l'on puisse t'aider, ce qui est clair pour toi ne l'est pas forcément pour les autres...

Passes ton code HTML ici, tu as déjà du boulot :
validateur html w3c

> > > tu utilises des id plusieurs fois : c'est interdit.
<div id="toto"> ne peut exister qu'une seule fois dans ta page.

Autrement pour attribuer des déclarations sur plusieurs balises en même temps, il faut se servir des classes.

Voir dans la
FAQ pour plus de détails

ps : Tu as aussi un validateur pour les CSS :
validateur CSS w3c
Modifié par Hum (09 Sep 2006 - 13:59)

Sujet clos

Questions générales et questions de débutants

Probleme De Codage Xhtml/css