Bonjour à tous
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
), 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.
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:
Enfin, le code CSS:
Merci de votre aide!
Modifié le 28 Nov 2004 - 17:43

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


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!

Modifié le 28 Nov 2004 - 17:43