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...

**Dim-G** · 02/07/2006, 01h46

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!

**Freed0** · 02/07/2006, 11h36

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

index.html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#main {
  width: 800px;
  margin: auto;
  // Etc etc...
}

2) Ton menu doit en fait être une liste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
- Index
- Contact
- Articles
- ...

Et quand tu met l'affichage en inline (aligné) ça donne ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

- 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Dim-G** · 02/07/2006, 13h10

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é

**Freed0** · 02/07/2006, 13h17

Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Dim-G** · 02/07/2006, 13h50

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)

**Freed0** · 02/07/2006, 14h03

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

Merci

**Dim-G** · 02/07/2006, 14h12

oui voici un imprim ecran

(l'image est réduite)

**Freed0** · 02/07/2006, 14h13

Ah ouais

J'peux avoir les images ? J'essaie d'aménager un peu le code de ton site

**Dim-G** · 02/07/2006, 14h31

*images inaccessibles* ^^

**Freed0** · 02/07/2006, 14h36

Ok merci je les ai

Tu peux les enlever maintenant si tu veux

**Dim-G** · 04/07/2006, 12h57

alors quoi de neuf freed0?

**Freed0** · 04/07/2006, 13h00

Bah j'arrive au même résultat que toi...

**Dim-G** · 04/07/2006, 13h56

ah bordel c'est trop chiant IE !

**Dim-G** · 04/07/2006, 14h23

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 ?

Eternel probleme de design avec FF/IE

HTML

Discussions similaires

Partager

Partager