Mozilla FireFox n'interprete pas convenablement mon code

Question

VaL

14 Aug 2005 à 17:13

Bonjour à tous & à toutes,

J'ai découpé un design pour un ami, et tenté de réaliser la mise en forme en XHTML v1.0 et CSS. Tout fonctionne bien, excepté un détail fort embêtant ma foi, et n'apparaissant que sous FireFox (je n'ai testé sinon qu'avec Internet explorer).

Voici l'URL de la page : C'est ici

Pour ceux qui n'auraient pas FireFox, je me permets de poster un screenshot de mon problème :

(EDIT de Raphael : merci de créer des vignettes (bouton à cocher) lorsque vous affichez des images énormes, pour éviter de déformer l'affichage du forum)

Donc, comme vous pouvez le voir, le 2e menu de droite ne s'etend pas (c'est le cas de tous, mais j'ai utilisé celui-ci pour l'exemple). Néanmoins , Internet Explorer interprète convenablement mon code, que voici d'ailleurs :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>oKay Ouais - Accueil</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Style -#o_O" href="style.css" />
	</head>
	<body style="width:1003px;background-color:black;margin:auto;">
	
		<!-- Début du header -->
		<div style="width:1003px;height:200px;background-image:url(img/header.jpg);background-repeat:no-repeat;">
		</div>
		<!-- Fin du header -->
		
		<!-- Début du Menu horizontal -->
		<div class="" style="width:1003px;height:37px;background-image:url(img/menuhoriz_background.jpg);background-repeat:no-repeat;">
			<ul style="display:inline;width:1003px;height:37px;margin:0px;padding-left:15px;">
				<li style="display:inline;"><img src="img/menuhoriz_navigation.jpg" alt="navigation :" /></li>
				<li style="display:inline;"><img src="img/menuhoriz_news.jpg" alt="news" /></li>
				<li style="display:inline;"><img src="img/menuhoriz_forum.jpg" alt="navigation :" /></li>

				<li style="display:inline;"><img src="img/menuhoriz_roster.jpg" alt="navigation :" /></li>
				<li style="display:inline;"><img src="img/menuhoriz_results.jpg" alt="navigation :" /></li>
				<li style="display:inline;"><img src="img/menuhoriz_server.jpg" alt="navigation :" /></li>
				<li style="display:inline;"><img src="img/menuhoriz_contact.jpg" alt="navigation :" /></li>
				<li style="display:inline;"><img src="img/menuhoriz_downloads.jpg" alt="navigation :" /></li>
			</ul>
			
			
		</div>
		<!-- Fin du Menu horizontal -->

		<!-- Début du Conteneur général -->
		<div style="margin:0px;width:100%;">
	
		<!-- Début du block MENU GAUCHE -->

		<div style="width:173px;float:left;margin-left:4px;">
		
			<!-- Sous menu -->
			<h1 class="titremenu"></h1>
			<div class="menu">
				<p class="textemenu">hihihihiihihihiihihi</p>
			</div>
			<div class="menubottom"></div>
			<!-- Fin du Sous menu -->

			<!-- Sous menu -->

			<h1 class="titremenu"></h1>
			<div class="menu">
				<p class="textemenu">hihihihiihihihiihihi</p>
			</div>
			<div class="menubottom"></div>
			<!-- Fin du Sous menu -->
			
			<!-- Sous menu -->
			<h1 class="titremenu"></h1>
			<div class="menu">

				<p class="textemenu">hihihihiihihihiihihi</p>
			</div>
			<div class="menubottom"></div>
			<!-- Fin du Sous menu -->			
		
		</div>
		<!-- Fin du block MENU GAUCHE-->
		
		
		<!-- Début du block CONTENU -->
		<div style="width:601px;float:left;margin-left:20px;margin-top:22px;background-image:url(img/contenu_fond.jpg);background-repeat:repeat-y;color:white;">
		
			<h1 style="width:601px;height:35px;background-image:url(img/contenu_fondtitre.jpg);background-repeat:no-repeat;margin:0px;"></h1>
		

			<p class="textemenu">hihihihiihihihiihihi</p>
			<div style="margin-bottom:500px;"></div>

			<img src="img/contenu_bottom.jpg" alt="" style="display:block;margin-bottom:0px;" />
		</div>
		<!-- Fin du block CONTENU -->		
		
		
		<!-- Début du block MENU DROITE -->
		<div style="width:169px;float:left;margin-left:20px;">
		
			<!-- Sous menu -->
			<h1 class="titremenu"></h1>
			<div class="menu">
				<p class="textemenu">hihihihiihihihiihihi</p>
			</div>
			<div class="menubottom"></div>
			<!-- Fin du Sous menu -->

			<!-- Sous menu -->
			<h1 class="titremenu"></h1>
			<div class="menu">
				<p class="textemenu">hihihihiihihihiihihi<br />hihihihiihihihiihihi<br />hihihihiihihihiihihi</p>
			</div>
			<div class="menubottom"></div>
			<!-- Fin du Sous menu -->
			
			<!-- Sous menu -->
			<h1 class="titremenu"></h1>
			<div class="menu">
				<p class="textemenu">hihihihiihihihiihihi</p>
			</div>
			<div class="menubottom"></div>
			<!-- Fin du Sous menu -->			

			

		</div>
		<!-- Fin du block MENU DROIT -->		
		
		</div>
		<!-- Début du Conteneur général -->
	</body>

</html>

Et le fichier style.css :

/* Style */

.menu
	{ width:173px;
	float:left;
	padding:0px;
	margin:0px;
	margin-bottom:0px;
	background-image:url(img/menu_fondmenu.jpg);
	background-repeat:repeat-y;
	}
.titremenu
	{ width:173px;
	height:29px;
	background-image:url("img/menu_fondtitre.jpg");
	background-repeat:no-repeat;
	margin:0px;
	margin-top:25px;
	margin-bottom:0px;
	padding:0px;
	}
.textemenu
	{ color:white;
	margin:0px;
	font-family:verdana, arial, "trebuchet MS", "sans-sérif";
	font-size:10px;
	}
.menubottom
	{ width:173px;
	height:23px;
	background-image:url("img/menu_bottom.jpg");
	background-repeat:no-repeat;	
	}

J'espère que vous pourrez m'aider Smiley smile

Merci d'avance.
Modifié par Raphael (14 Aug 2005 - 17:31)

Raphael

Administrateur

14 Aug 2005 à 17:37

Hello Val et bienvenue.

Il y'a plusieurs choses que je ne comprends pas sur ton document :
- pourquoi as-tu mélangé les CSS (dans le HTML et sur une feuille séparée)? Est-ce uniquement pour te compliquer la tâche ? Smiley smile

- que veux-tu faire en imposant une taille au Body et des marges en "auto" ? Smiley biggol

- pourquoi répéter plusieurs fois les mêmes styles sur les mêmes éléments ? (style="display:inline;" par exemple) ? Pourquoi ne pas utiliser des classes plutôt ?
- Quel intérêt de répéter plusieurs fois le même texte alternatif (alt="navigation :") ? De cette manière, tu peux être sûr qu'il ne va servir à rien Smiley ohwell

Pour finir, je t'avoue avoir énormément de mal à avoir une idée de ce que tu veux obtenir tout simplement en raison de cette mise en forme éparpillée partout entre le document HTML et la feuille CSS.
Je crois que le mieux serait de tout placer à part sur la feuille CSS pour commencer proprement Smiley smile

PS : au fait, as-tu pensé à suivre la Méthodologie à lire absolument avant de poster dans ce salon ?. Je suis sûr qu'elle devrait t'aider à t'en sortir.

Bonne chance Smiley cligne

VaL

14 Aug 2005 à 18:00

Salut Raphael, merci d'avoir pris le temps de me répondre.

Je vais essayé, à ta manière, de donner des réponses aux questions que tu m'as posées Smiley smile

a écrit :
- pourquoi as-tu mélangé les CSS (dans le HTML et sur une feuille séparée)? Est-ce uniquement pour te compliquer la tâche ?

Je suis tout à fait d'accord avec toi, mais cependant, ma légère expérience en matière de codage m'a indiqué qu'une feuille de style en cascade trop remplie était inutile. C'est pourquoi j'ai pris l'habitude (bonne ou mauvaise selon le point de vue), de n'y mettre que les styles qui seront réutilisés plusieurs fois. Ainsi, pour mettre en forme le "conteneur général", par exemple, comme je l'appelle, je ne créé pas de classe, mais je mets le style directement car je n'aurai qu'à l'employer une fois.
Mon explication vaut ce qu'elle vaut, mais moi, je m'y retrouve mieux Smiley smile

, bien que je conçoive qu'il soit plus dur pour les autres usagers de comprendre la logique de mon code.

a écrit :
- que veux-tu faire en imposant une taille au Body et des marges en "auto" ?

Eh bien, celà permet de centrer le site, tout simplement. Imagine qu'un utilisateur surfe en 1600x1200, bien que ce soit rare, il aura le contenu du site centré sur son écran.

a écrit :
- pourquoi répéter plusieurs fois les mêmes styles sur les mêmes éléments ? (style="display:inline;" par exemple) ? Pourquoi ne pas utiliser des classes plutôt ?

Là, ta remarque est fort justifiée, mais je n'en suis encore qu'à la version bêta du design, le plus important étant que tout fonctionne pour le moment :]

a écrit :
- Quel intérêt de répéter plusieurs fois le même texte alternatif (alt="navigation :") ? De cette manière, tu peux être sûr qu'il ne va servir à rien

Remarque tout à fait exacte, mais la réponse est la même que précédemment : je me suis servi d'un modèle que j'ai copié/coller sans tout encore modifier, mais ne t'inquiète pas pour celà, c'était prévu que je modifie l'attribut "alt" pour chaque balise Smiley cligne

Sujet clos