28221 sujets

CSS et mise en forme, CSS3

Bonjour à tous Smiley smile

Je viens de passer ma journée sur la création d'un site web aux normes XHTML/CSS en respectant un peu la méthode de codage (pas de tableaux....), mais voilà, tout ceci m'est encore un peu étranger et j'ai quelques problèmes.

Sous Mozilla Firefox (haa rien ne vaut Firefox Smiley lol ), le site s'affiche parfaitement, en tout cas comme il l'est supposé l'être. Les problèmes arrivent lorsque l'on passe sous Internet Explorer: de jolis espaces non demandés (ni souhaités ^^) viennent mettre le bazar dans les graphismes, et ô miracle! on ne comprend plus rien. Smiley decu

Voici l'adresse du site, que je vous conseille d'aller voir d'abord sur Firefox puis sur IE: http://zorglub69.free.fr/phponlinegame/

Dans le même temps que vous essayez de trouver où est-ce que je peux bien me tromper, n'hésitez surtout pas à critiquer le code, car j'ai comme l'impressions qu'il y a un petit peu trop de <div></div>. En fait, je ne sais pas si je dois afficher mes images en temps que background ou plutôt en temps qu'images normales, si je dois utiliser les positions relatives/absolues, etc...

Heureusement pour vous, le code n'est pas très long. Voici le code XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="./styles/general_styles.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="ban">
			<img src="./img/main/ban.jpg" alt="Dalarìan" />
		</div>
		<div id="menu"> 
			<? require "./parts/menu.php"; ?>
		</div>
		<div id="slogan">
			<? require "./parts/slogan.php"; ?>
		</div>
		<div id="main">
			<div id="main_h"></div>
			<div id="main_m">
				glop <br />
				glop glop<br />
				re glop et encore<br />
				re-glop<br />
				bou!<br />
				bou!<br />
				bou!<br />
				bou!<br />
				bou!<br />
				bou!<br />
				bou!<br />
				Re-Bou:^^:<br />
				=^.^= Meow [langue]
			</div>
			<div id="main_b"></div>
		</div>
	</body>
</html>


Enfin, le code CSS:

/* CSS Document */

/* Définitions générales */
body {
	background-color: #000000;
	color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
	font-family: "Monotype Corsiva", serif;
	font-size: large;
	width: 790px;
}

img {
	border: none;
}

/* Banière */
div#ban {
	clear: both;
	margin-bottom: 20px;
	margin-top: 20px;
}

/* Slogan */
div#slogan {}

div#slogan_g {
	background-image: url(../img/menu/menu_1/slogan_g.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 30px;
	width: 8px;
}

div#slogan_m {
	background-image: url(../img/menu/menu_1/slogan_m.jpg);
	background-repeat: repeat-x;
	height: 30px;
	text-align: center;
}

div#slogan_d {
	background-image: url(../img/menu/menu_1/slogan_d.jpg);
	background-repeat: no-repeat;
	float: right;
	height: 30px;
	width: 8px;
}

/* Menu */
div#menu {
	float: left;
	width: 125px;
}

div#menu_h {
	background-image: url(../img/menu/menu_1/menu_h.jpg);
	background-repeat: no-repeat;
	height: 8px;
	line-height: 0;
}

div#menu_m {
	background-image: url(../img/menu/menu_1/menu_m.jpg);
	background-repeat: repeat-y;
	padding-bottom: 5px;
	padding-left: 13px;
	padding-top: 5px
}

div.menu_boutton {
	background-image: url(../img/menu/menu_1/bouton.jpg);
	height: 31px;
	margin-top: 10px;
	text-align: center;
	width: 100px;
}

a.menu_lien {
	color: #FFFFFF;
	text-decoration: none;
	vertical-align: middle;
}

div#menu_b {
	background-image: url(../img/menu/menu_1/menu_b.jpg);
	background-repeat: no-repeat;
	height: 8px;
	vertical-align: top;
}

/* Main */
div#main {
	margin-left: 125px;
}

div#main_h {
	background-image: url(../img/main/main_h.jpg);
	background-repeat: no-repeat;
	height: 8px;
	line-height: 0%;
}

div#main_m {
	background-image: url(../img/main/main_m.jpg);
	background-repeat: repeat-y;
	padding-bottom: 20px;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 20px;
}

div#main_b {
	background-image: url(../img/main/main_b.jpg);
	background-repeat: repeat-x;
	height: 8px;
}


Merci de votre aide! Smiley biggrin
Modifié le 28 Nov 2004 - 17:43
Personne n'a d'idée? Smiley decu

J'ai vraiment besoin de corriger ce problème, et bien qu'une quarantaine de personnes aient lu ce post, il n'y a toujours pas de réponse. Aurais-je trouvé un problème sans solution? Smiley ohwell
pb_ee1 a écrit :

Sous Mozilla Firefox (haa rien ne vaut Firefox Smiley lol ), le site s'affiche parfaitement, en tout cas comme il l'est supposé l'être. Les problèmes arrivent lorsque l'on passe sous Internet Explorer: de jolis espaces non demandés (ni souhaités ^^) viennent mettre le bazar dans les graphismes, et ô miracle! on ne comprend plus rien. Smiley decu

Pour les espaces regardes peut-être du côté des margin de tes éléments. Les images si elles sont de la décoration elle vont dans la feuille de style, si elles participent du contenu alors dans la page html avec un alt.


pb_ee1 a écrit :

Dans le même temps que vous essayez de trouver où est-ce que je peux bien me tromper, n'hésitez surtout pas à critiquer le code, car j'ai comme l'impressions qu'il y a un petit peu trop de <div></div>. En fait, je ne sais pas si je dois afficher mes images en temps que background ou plutôt en temps qu'images normales, si je dois utiliser les positions relatives/absolues, etc...

Dans le principe, les div devraient permettre de découper une page en grands blocs logiques, par exemple un header, une navigation, le contenu principal, un pied de page, dans la pratique on a parfois tendance à vouloir mettre des divs partout (voir à ce sujet Maladies exotiques des CSS ?) alors les éléments html se suffisent dans bien des cas et sont aussi des conteneur dans bien des cas.

Pour le positionnement voir Quel positionnement choisir?.

Tu as choisi un doctype (xhtml 1.1) qui n'est peut-être pas très judicieux, en faisant une recherche sur ce thème dans les forums tu trouveras matière à réflexion sur l'utilisation d'un tel doctype.
Igor a écrit :

Pour les espaces regardes peut-être du côté des margin de tes éléments. Les images si elles sont de la décoration elle vont dans la feuille de style, si elles participent du contenu alors dans la page html avec un alt.


J'ai mis toutes les images en temps que background puisqu'elles constituent le décor, à l'exception de la bannière qui, bien sûr, demeure en image "normale".

Igor a écrit :
Dans le principe, les div devraient permettre de découper une page en grands blocs logiques, par exemple un header, une navigation, le contenu principal, un pied de page, dans la pratique on a parfois tendance à vouloir mettre des divs partout (voir à ce sujet Maladies exotiques des CSS ?) alors les éléments html se suffisent dans bien des cas et sont aussi des conteneur dans bien des cas.

Pour le positionnement voir Quel positionnement choisir?.


Malheureusement notre ami IE est bien contraignant car il se résigne à afficher ce qu'il veut quand ça lui plaît. Mais j'ai finalement trouvé la solution grâce à toi: mettre le contenu du menu dans un <dl><dd></dd></dt>. C'est la seule manière que j'ai trouvé pour que le tout soit positionné correctement sur les deux navigateurs.

Ensuite, j'ai réduit le nombre de <div></div> à 4 seulement, un pour la bannière, un pour le menu et deux pour le cadre principal. Je n'ai pas réussi à m'en sortir avec un seul <div></div> pour le cadre du milieu, mais je pense que ça tournera bien comme ça quand même. Smiley smile

Igor a écrit :
Tu as choisi un doctype (xhtml 1.1) qui n'est peut-être pas très judicieux, en faisant une recherche sur ce thème dans les forums tu trouveras matière à réflexion sur l'utilisation d'un tel doctype.


J'ai en effet remarqué que la version 1.1 n'est pas forcément celle qui conviendrait le mieux. J'ai préféré passer à la version 1.0. Merci pour tout, j'espère bien m'en sortir maintenant. Smiley ravi

Allez, on se repenche sur le code.... Smiley biggol
a écrit :
Malheureusement notre ami IE est bien contraignant car il se résigne à afficher ce qu'il veut quand ça lui plaît. Mais j'ai finalement trouvé la solution grâce à toi: mettre le contenu du menu dans un <dl><dd></dd></dt>. C'est la seule manière que j'ai trouvé pour que le tout soit positionné correctement sur les deux navigateurs.


Je ne parle pas de dl, qui il me semble ne sont pas utilisées à bon escient dans ta page. Voir à ce sujet http://www.la-grange.net/w3c/html4.01/struct/lists.html#edef-DL
Les dl sont une forme de liste qui se constitue de deux entités un terme et une description, ce qui n'est pas le cas dans ton menu, il faudrait mieux utiliser une ul à mon sens.
Administrateur
Igor a écrit :

Je ne parle pas de dl, qui il me semble ne sont pas utilisées à bon escient dans ta page. Voir à ce sujet http://www.la-grange.net/w3c/html4.01/struct/lists.html#edef-DL
Les dl sont une forme de liste qui se constitue de deux entités un terme et une description, ce qui n'est pas le cas dans ton menu, il faudrait mieux utiliser une ul à mon sens.

Hé hé vaste sujet.
http://www.alsacreations.com/articles/deroulant/
a écrit :
Les listes (ul, li), ne peuvent pas exprimer structurellement et clairement une hiérarchie (à moins de placer des balises de titres comme <Hn> au sein du menu).

Les listes de définitions peuvent être une bonne utilisation pour structurer ce genre de menu car la définition du W3C est assez large et vague pour permettre ce genre d'utilisation : http://www.w3.org/TR/html4/struct/lists.html#edef-DL

Il suggère que les listes de définitions peuvent servir d'avantage d'usages, du moment qu'il existe une relation directe entre les éléments.

Certains sites ont d'ailleurs développé assez loin cette structuration : exemple d'une traduction sur Pompage.net, exemple du menu Microsoft revisité.
http://pompage.net/pompe/listesdefinitions/
http://www.xdevdesign.com/Better_MS_Menu.htm


Je suis d'accord que cela peut être un peu tiré par les cheveux, mais ce n'est qu'une application possible de la vague description du W3C. Smiley smile
@ Raphaël
Bien d'accord avec le vague de la recommandation, mais dans ce cas précis une simple énumération qui constitue les items d'un menu, je ne vois pas d'un côté un terme et une description.
De toute façon je suis assez de mauvaise foi en général avec les dl Smiley cligne
Sauf dans ce cas précis où dl est utilisé dans un soucis de présentation et de facilité pour obtenir ce que l'on veut.
Administrateur
Igor a écrit :
Sauf dans ce cas précis où dl est utilisé dans un soucis de présentation et de facilité pour obtenir ce que l'on veut.

Dans ce cas, entièrement d'accord avec toi !
Raphael a écrit :

Dans ce cas, entièrement d'accord avec toi !


C'est vrai qu'en plus du vague il y a l'esprit et la lettre et son utilisation Smiley biggrin
Là en l'occurence comme vous pouvez vous en douter, c'est dans un soucis de présentation....

Car j'avais essayé brièvement avec des <ul></ul>, mais j'avoue n'avoir pas obtenu de grand résultats (toujours ce problème d'espacements). Certes je n'ai pas cherché très loin, je pense d'ailleurs que c'est faisable, mais comme le dit Igor, il ne faut pas utiliser les <dl></dl>:

a écrit :
Sauf dans ce cas précis où dl est utilisé dans un soucis de présentation et de facilité pour obtenir ce que l'on veut.


Voilà. Smiley biggrin Merci encore Smiley lol
Administrateur
a écrit :
(toujours ce problème d'espacements)

Dans ce cas, il suffit d'imposer tes marges aux éléments de listes, tout simplement, non ?

Note: je pense que ce sujet devrait t'intéresser.