Pouvez vous m'aider à corriger mon site sous IE ?

6 septembre 2006 à 22:11:33

Bonjour à vous tous !

Je suis entrain de coder un petit site web qui me servira à publier quelques news perso etc. Malheureusement, je rencontre quelques difficultés sous Mozilla et sous IE (beaucoup plus) pour un affichage parfait.

Alors tout d'abord voici mon code HTML :

<html>
<head><title>Site Oueb de MEYER Franck v0.1</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenu">
<div id="banniere1"></div>
<div id="banniere3"></div>
<div id="banniere2"></div>

<div id="menu">
<h3>Le plat du jour :</h3>
<div class="element-menu">
<ul>
<li>Accueil</li>
<li>Photos</li>
<li>Services</li>
<li>FTP</li>
<li>Liens</li>
</ul>
</div>
</div>

<h2>Mon jolie titre magnifique</h2>
<p>
Mon petit paragraphe, on verra bien ce que je pourrais y raconter... Work in progress
</p>

<div id="footer">
<p>Copyleft Moa (MEYER Franck)</p>
</div>
</div>

Puis, mon code CSS :

body
{
width: 100%;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-color: 1f6db6;
}

#banniere1
{
float: left; /* La première partie sera à gauche*/
width: 412px; /* On définit la largeur de l'image */
height: 68px; /* On définit la hauteur de l'image */
background-image: url("images/h1.jpg");
background-repeat: no-repeat;
margin-bottom: 0px;
margin-right: -40px; /*Pour que la partie 1 se colle à la 2.*/
}

#banniere2
{
width:auto; /* Se répétera sur la place qu'on lui donne. */
height: 68px;
background-image: url("images/h2.jpg");
background-repeat: repeat-x; /* Un repeat-x aurait suffit, mais comme on définit la hauteur c'est pas la peine*/
margin-bottom: 10px;
}

#banniere3
{
float: right; /* La dernière partie est à droite */
width:26px;
height: 90px;
background-image: url("images/h3b.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
margin-left : -10px; /*Pour que la partie 3 se colle à la 2.*/
}

#contenu
{

margin-left: auto;

margin-right: auto;

text-align: left; /* on rétablit l'alignement normal du texte */
width: 90%;
margin: auto;
background-image: url('images/bord2.jpg');
background-repeat: no-repeat;
background-position: right;
background-color: 9ecaf4;
border-left: solid 2px;
border-bottom: solid 2px;

}
#menu
{
float: left;
width: 179px;
text-indent: 20px;
margin: 20px;
margin-left: 30px !important;
margin-left: 15px;
background-image: url('images/menufond.jpg');
background-repeat: no-repeat;
background-color: white;
}

.element-menu
{
border: solid 1px;
border-top: none;
margin-top: 44px !important;
margin-top: 65px;
}

li
{
margin:0;
padding:0;
list-style-type:none;
}

Alors maintenant, les problèmes :

Sous Mozilla Firefox :

La petit barre noire délimitant ma page blanche dépasse légèrement. Cela est dû au fait qu'une image est utilisée pour la barre droite (pour obtenir l'effet ombrée). Ainsi, j'aimerais pouvoir indiquer en % la taille de cette barre, je ne sais pas si c'est possible. Ce problème est biensûr commun à IE.

Sous Internet Explorer :

Le design n'est pas centrée malgrès un margin: auto dans la propriété css body et #contenu.

Dans le menu, le premier lien intitulé "Accueil" est à l'intérieur du fond violet REGLE

L'espace entre le menu et la gauche de la page n'est pas la même sous IE et FF.REGLE

Merci beaucoup pour l'éventuelle aide que vous pourrez m'apporter, Bonne soirée les gens !

Asphator

7 septembre 2006 à 0:19:23

Salut

Tous tes problèmes peuvent être réglés. Suffit d'aller lire cette partie : ici

Only limits are ours...

Parano

9 septembre 2006 à 22:20:09

Je me suis rendu compte que j'avais oublier le lien pour vous montrez à quoi ça ressemble :

http://parano.dyndns.org/test/

Alors, merci beaucou Asphator j'ai lu le tutorial et j'ai réglé le problèmes des mesures différentes sous IE/Mozilla. Mais les autres problèmes persistent

J'édite le premier message en mettant le nouveau code et en barrant les problemes reglés. J'espere que vous pourrez m'aider !

Merci à vous.

Regnareb

9 septembre 2006 à 22:27:14

C'est simple...

http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS

Parano

9 septembre 2006 à 23:25:58

En effet ça marche niquel ! Merci beaucoup c'est super !

Pour le dernier problème, la petite barre qui dépasse sur l'ombre, vous auriez une idée ivouplait ?

Regnareb

9 septembre 2006 à 23:32:22

Tu parles de l'ombre en haut à droite ? Si c'est ça c'est au niveau de ton image qu'il y a un problème, l'opacité de l'ombre est plus importante sur la partie du haut.

Aussi l'image de ton menu à un léger défaut dans les coins.

Edith : a non j'ai compris pour la barre... j'ai cru que c'était le design en fait... je pense que le plus simple est d'enlever la border-bottom du #contenu et de jouer avec le #footer avec une bordure, ou encore, avec une image

Sinon t'as regardé ton site sous Opera ? Il y a un léger problème sur ton menu

Un conseil, place ce code au tout début de ta CSS pour réinitialiser tout les margin et padding par défaut des navigateurs pour avoir moins de problèmes :

* {
margin:0px;
padding:0px;
}