Eternel probleme de design avec FF/IE

**Dim-G** · 01/07/2006, 20h49

salut, j'ai commencé y'a pas longtemps à coder en xhtml/css, j'ai réussi a bien coder mon site et il passe nickel sous firefox mais je l'ai essayé avec IE et la le corps était sous le menu, j'ai ensuite enlevé la largeur du bloc-texte (corps) et bizarrement c'est toujours bon sous firefox et ca déconne toujours sur IE mais moins, en effet le corps n'est plus sous les menu ais a droite (il doit être la!) mais il est décallé de quelques pixels sur la droite et le footer qui doit toucher le corps est décallé d'une 20aine de pixels, merci d'avance de m'aider !
voici mon code CSS :

body
{
width: 862px;
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
font-family: "Palatino Linotype", "Century Schoolbook", "arial narrow", serif, arial;
font-size: 13px;
}

#en_tete
{
width: 862px;
height: 156px;
background-image: url("images/header.jpg");
background-repeat: no-repeat;
background-color: transparent;
}

#lien_principaux
{
width: 862px;
text-align: center;
color: #006AFB;
background-repeat: no-repeat;
background-image: url("images/lien-principaux.jpg");
background-color: #E3E3E3;
}

#menu
{
float: left;
width: 169px;
text-align: center;
color: #006AFB;
font-size: 12px;
}

.element_menu
{
background-image: url("images/bloc-lien.jpg");
background-repeat: no-repeat;
background-color: transparent;
height: 217px;
margin-bottom: 12px;
}
a
{
text-decoration: none;
color: #006AFB;
}

a:hover
{
text-decoration: non;
color: #006AFB;
}

a:active
{
text-decoration: none;
}

#corps
{
height: 903px;
margin-left: 169px;
padding-left: 15px;
background-image: url("images/bloc-principal.jpg");
background-repeat: no-repeat;
background-color: #FFFFFF;
color: #006AFB;
}

.date
{
color: red;
font-size: 12px;
}
.titre
{
font-size: 18px;
text-decoration: underline;
}

#footer
{

width: 693px;
height: 40px;
margin-left: 169px;
background-image: url("images/footer.jpg");
background-color: #FFFFFF;
text-align: center;
color: #006AFB;
}

.copyright
{
padding-top: 4px;
}

#logo_bas
{
text-align: right;
}

que pensez-vous que je devrais modifier/rajouter pour que ca marche aussi avec IE ?

**Freed0** · 01/07/2006, 21h52

Faudrait la structure de ta page html

**Dim-G** · 01/07/2006, 22h55

oui la voici :

<!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>_-=::TuTo-TrickZ::=-_</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="TuTo-TrickZ, le premier site en francais a proposer des tutoriaux détaillés sur les tricks et acrobaties du karate artistique mais aussi sur les cascades"/>
<meta name="keywords" content="trickz, tricks, karate, artistique, arts, martiaux, traditionnel, moderne, sport, aide, tuto, tutorial, tutoriaux, souplesse, musculation, renforcement, etirement, assouplissement, plyometrie, force, salto, roue, vrille, flip, coup, pied, poing, aerien, acrobatie, chine, nunchaku, arme, kung fu, Qi, shaolin, team, martial, be, stretching, article, w3c "/>
<meta http-equiv="Content-Language" content="fr"/>
<meta name="ROBOTS" content="index, follow, all"/>
<meta name="author" content="Dimitri Graindorge"/>
<meta name="DATE-CREATION-DDMMYYYY" content="01072006"/>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="cssstyle.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="shorcut icon" href="http://votredomaine.com/favicon.ico"/>
</head>

<body>

<div id="en_tete">

</div>

<div id= "lien_principaux">
<a href="news.html">News </a>- <a href="team.html">La Team</a> - <a href="contact.html">Contact </a>- <a href="goodies.html">Goodies</a> - <a href="???">Forum</a>
</div>

<div id="menu">
<div class="element_menu">
<strong>Les Tutos : </strong> <br />
<a href="trickz.html">Trickz </a><br />
<a href="cascade.html">Cascade</a>
</div>
<div class="element_menu">
<strong> Les Articles: </strong><br />
<a href="musculation.html">Musculation</a><br />
<a href="stretching.html"> stretching</a><br />
</div>

<div class="element_menu">
<strong> Publicité </strong>
</div>

<div class="element_menu">
<strong>Les Partenaires :</strong>
</div>

</div>

<div id="corps">
<br />
<span class="titre">Edito :</span> <p>[Nomdusite.com] est le premier site en français consacré à des tutoriaux détaillés sur les trickz et les cascades<br />
Nous proposons aussi des articles intéressants sur divers sujets concernant de pres ou de loin<br />
les trickz/cascades. <br />
Il y aura au fûr et à mesure de nouveaux tutoriaux ainsi que de nouveaux articles qui viendront s'ajouter,
<br /> n'hésitez donc pas à revenir de temps en temps.<br /> </p>
<span class="titre"> Mise en garde :</span>
<p>Nous ne sommes pas responsable des dégâts occasionnés suite à la visite des tutoriaux

</p>
<span class=" titre">News :</span> <br /><br />
<span class="date">10.07.06</span>
<p>
Ouverture du site !</p>
</div>

<div id="footer">
<div class="copyright">
&copy 2006 - Les cours sont la propriété de leurs auteurs, toute reproduction est interdite.
</div>
</div>

<div id="logo_bas">
<p>vide pour l'instant</p>
</div>
</body>
</html>

**Freed0** · 01/07/2006, 23h56

Il est un peu tard pour que je regarde ce soir, mais j'essaierai d'y jeter un coup d'oeil demain matin

**Dim-G** · 02/07/2006, 00h09

merci ca m'aiderait énormément

**Freed0** · 02/07/2006, 00h44

Bon, j'ai quand même regardé (vu que mon autre PC compile le noyau j'ai rien à foutre

) :

Donc d'abord j'ai pas vraiment regardé ton problème mais j'ai plutot d'autres conseils à te donner :

1) Tu utilises plusieurs calques ou tu définis la largeur etc... Ce que je te conseille de faire, c'est de créer un calque main qui regroupe l'entièreté de ta page et qui aura une largeur fixe. Ainsi, tout ce que tu mettras dedans ne dépassera pas cette largeur.

2) Tes menus, ca va pas. Enfin si, mais on peut faire mieux

. Là, tu dois plutot créer une liste qui s'afficherait en inline (je sais pas si tu connais déjà, vu que tu as commencé récemment...).

3) Pour tes titres, utilise les balises <h1>, <h2>, etc... prévue pour ça. Ce sera mieux que d'utiliser <span>.

Voilà, y'a déjà pas mal de trucs qui pourront rendre ton code plus lisible.
Y'a aussi quelque chose d'assez sympa, c'est de regarder son site sans la feuille de style (tu peux la désactiver dans Firefox). Comme ça tu vois si tu codes bien ou pas

(titres qui ressortent, etc...)

Edit: C'est pas pour faire de la pub, mais je te propose de jeter un coup d'oeil à mon site : http://www.tera-hardware.be/bsd
Si tu désactives la feuille de style, tu verras qu'on reconnait facilement le menu, les titres, etc...

Eternel probleme de design avec FF/IE

HTML

Vue hybride

Discussions similaires

Partager

Partager