Eternel probleme de design avec FF/IE

Version imprimable

01/07/2006, 20h49
Dim-G

Eternel probleme de design avec FF/IE

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 :

Citation:

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 ?
01/07/2006, 21h52
Freed0

Faudrait la structure de ta page html ;)
01/07/2006, 22h55
Dim-G

oui la voici :

Citation:

<!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>
01/07/2006, 23h56
Freed0

Il est un peu tard pour que je regarde ce soir, mais j'essaierai d'y jeter un coup d'oeil demain matin ;)
02/07/2006, 00h09
Dim-G

merci ca m'aiderait énormément :D
02/07/2006, 00h44
Freed0

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

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...
02/07/2006, 01h46
Dim-G

salut, déja merci de répondre, alors :
1) #corps c'est ce que tu appelles un calque (par exemple) ? parce que si c'est ca j'ai enlevé toutes les largeurs (sauf celle du menu car sinon ca va plus)
et au début j'ai mis une taille dans "body" (au tout début) on peut pas considérer ca comme ce qui regroupe tout ?

2) quoi ? (lol)

3) j'ai enlevé le <span> et remplacé ca par les balises <h3> et <ins>

j'ai pas tout compris mais merci rien qu'avec ces 2-3 petits changements le footer colle maintenant au corps ! il ne reste que le décallage de 2 ou 3 px vers la droite!

1) Pour le calque principal, ca ressemble à ça :

index.html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <html> <head> <title>Yop</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main"> /* Le contenu de ta page */ </div> </body> </html>
et la page de style :
Code:

1 2 3 4 5 #main { width: 800px; margin: auto; // Etc etc... }
2) Ton menu doit en fait être une liste :
Code:

1 2 3 4 5 - Index - Contact - Articles - ...
Et quand tu met l'affichage en inline (aligné) ça donne ceci :

Code:

- Index - Contact - Articles - ...

3) Ok, tu peux même mettre des <h1> ou <h2> et ensuite modifier leur taille dans ta feuille de style... ex :
Code:

1 2 3 4 5 h1 { font-family: Verdana; font-size: 15px; color: #f00; }

02/07/2006, 13h10
Dim-G

pour le 1) c'est ok et pour le trois aussi, mais la je vais devenir lourd:
le 2 : je ne sais pas comment faire pour que les liens de la barre de liens principaux devienne soit une liste puis qu'il redevienne aligné

Par exemple :

Code:

1
2
3
4
<ul class="liens">
  <li>Index</li>
  <li>Contact</li>
</ul>

Code:

1
2
3
.liens li {
  display: inline;
}

02/07/2006, 13h50
Dim-G

ah oui par contre ca ca pose probleme parce que oui les liens restent toujours sur une ligne mais alors c'est la barre des liens principaux qui est décolle du header d'au moins 20 pixels et aussi décollé du corps de 20 pixels (j'avais déjà essaye de mettre les liens dans un paragraphe <p> mais ca faisait le même probleme)
02/07/2006, 14h03
Freed0

Y'aurait moyen d'avoir les images de ton site ?
Histoire de voir comment ça donne au complet...

Merci
02/07/2006, 14h12
Dim-G

oui voici un imprim ecran http://membres.lycos.fr/break0dance/screen.jpg

(l'image est réduite)
02/07/2006, 14h13
Freed0

Ah ouais :D
J'peux avoir les images ? J'essaie d'aménager un peu le code de ton site :)
02/07/2006, 14h31
Dim-G

*images inaccessibles* ^^
02/07/2006, 14h36
Freed0

Ok merci je les ai ;) Tu peux les enlever maintenant si tu veux
04/07/2006, 12h57
Dim-G

alors quoi de neuf freed0?8-)
04/07/2006, 13h00
Freed0

Bah j'arrive au même résultat que toi...
04/07/2006, 13h56
Dim-G

ah bordel c'est trop chiant IE !
04/07/2006, 14h23
Dim-G

et si je mettais mon design dans un tableau ou je spécifierai une taille, est-ce que ca forcerait l'image a rester dans le tableau ou ca dépasserait quand meme ?
04/07/2006, 15h07
Freed0

Bof les tableaux spas terrible
04/07/2006, 17h41
Dim-G

oui mais ca pourrait marcher non ? par contre je sais pas comment faire un tableau, enfin si avec <table> mais je c pas comment spécifier une taille etc