Problème d'affichage de blocs

Bonjour,

J'ai un très gros problème, je suis en train de créer un site web, lorsque je le regarde avec Mozilla pas de problème, mais avec IE...

Regardez par vous même : http://www.ayuforever.be/ZoneWarez/

C'est peut-être un problème de CSS, je vous le colle ici : (ne vous inquiètez pas de tout les commentaires, je les ai mit pour moi car je suis en train d'apprendre ce language...).

body
{
width: 760px; /* Largeur du bloc */
margin: auto; /* Centre la page */
margin-top: 20px; /* Pour ne pas coller le site au dessus de la page*/
margin-bottom: 20px; /* Pour ne pas coller le site en bas de la page*/
background-color: #E7E7D2; /*Couleur de fond d'écran*/
}

#banniere
{
width: 760px; /* Largeur du bloc */
height: 130px; /* Hauteur du bloc */
margin-bottom: 10px; /*Marge en dessous du bloc en tête*/
border: 3px double black; /* Une bordure noire de 2 pixel en style solide*/
background-image: url("images/ban_.png"); /*Insertion de la banière */
background-repeat: no-repeat; /*Pour ne pas répéter la banière*/
background-position: center; /*Centrer la banière */
color: blue; /* Couleur du texte dans le bloc*/
}

#menu
{
color: blue; /* Couleur du texte dans le bloc*/
float: left; /* Le menu flottera à gauche */
width: 120px; /* Donner une taille au menu */
}

#menu h3
{
text-align: center; /*Centrage des titres h3 dans le corp du texte */
color: cadetblue; /*Couleur des titres h3 dans le corp du texte*/
text-decoration: underline; /* Texte souligné */
}

.menuin
{
border: 3px double black; /*Ajoute un bord de 2 pixel solide en noir */
margin-bottom: 20px; /* Afin d'éviter que les éléments du menu ne se touchent */
}

.menuin ul
{
list-style-image: url("images/puce.gif"); /* On change l'apparence des puces */
}

#corp_du_texte
{
width: 610px; /* Largeur du bloc */
height: 370px; /* Hauteur du bloc */
color: black; /* Couleur du texte dans le bloc*/
margin-left: 140px; /*Pour pousser le Corps afin qu'il ne passe plus en dessous du menu */
margin-bottom: 20px; /*Pour éviter que le corps ne se colle trop au pied de page*/
padding: 5px; /*Pour éviter que le texte à l'intérieur ne colle trop au bord*/
border: 3px double black; /* Une bordure noire de 2 pixel en style solide*/
}

.important
{
font-weight: bold; /*Texte en gras*/
text-align: center; /*Texte centré*/
text-decoration: underline; /*Texte souligné*/
color: blue; /*Texte en bleu*/
}

#corp_du_texte h3
{
text-align: center; /*Centrage des titres h3 dans le corp du texte */
color: cadetblue; /*Couleur des titres h3 dans le corp du texte*/
text-decoration: underline; /* Texte souligné */
}

#pied_de_page
{
width: 750px; /* Largeur du bloc */
height: auto; /* Hauteur du bloc */
margin-top: 10px; /*Marge au dessus du bloc Pied de page*/
color: red; /* Couleur du texte dans le bloc*/
text-decoration: underline; /* Texte souligné */
size: 50%; /* Taille du texte 50 %*/
font-style: italic; /* Texte en italique */
border: 3px double black; /* Une bordure noire de 2 pixel en style solide*/
padding: 5px; /* Eviter que le texte colle trop le bord*/
text-align: center; /* Centre le texte*/
}

Sinon voici le code Html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>==> Site Web D'UniXoRa <==</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Désign V1.0" href="design.css" />
<link rel="alternate stylesheet" media="screen" type="text/css" title="???" href="???.css" />
</head>
<body>

<div id="banniere">
</div>

<div id="menu">

<div class="menuin">
<h3>Mes Up :</h3>

<ul>
<li><a href="Livres.html">Livres</a></li>
<li><a href="Mangas.html">Mangas</a></li>
<li><a href="Bd.html">BD</a></li>
</ul>
</div>

<div class="menuin">
<h3>Moi :</h3>

<ul>
<li><a href="mailto:unixora@teledisnet.be">Contact</a></li>
</ul>

</div>
</div>

<div id="corp_du_texte">

<h3> Mes Up Pour Zone Warez</h3>

<p>Je vous demande de respecter mon travail, <br/><br/>- de 1) en laissant mes liens sur ce site et sur Zone Warez,<br/>- de 2) en me laissant un petit merci sur mes topics.</p>

<p>Je précise que je n'ai pas mis de mot de passe, mais si je vois trop de personnes qui leech mes liens, sans dire merci, je modifie tous les liens et met un mot de passe dont la seule façon de l'avoir sera de me remercier dans le topic</p>

<p class="important"> Imaginez vous que personne ne dise merci aux Uppeur, et qu'ils décident tous d'arrêter d'Up, c'la fin du net, alors un merci ne tue pas !!!</p>

</div>

<div id="pied_de_page">

<p> Tout les fichiers qui se trouvent ici on été Up par moi (UniXoRa), et se trouvent sur Zone Warez, les les liens ne doivent pas se retrouver sur un autre site.</p>

<p> Si vous n'avez pas encore Mozilla, Passez à Mozilla sans attendre !!! </p>

</div>

</body>
</html>

Merci d'avance pour votre aide.

NB : J'aimerai bien que mon site soit le même pour IE que pour Firefox. Si vous avez regardé avec IE, vous voyez que le contenu part en dessous, c'est trop bizzare, mais je suis sur que c'est une erreur de manipulation...

unixora

4 avril 2006 à 20:51:11

UniXoRa

eLaps

4 avril 2006 à 23:00:19

Dans #corps_du_texte essaie de mettre float: right;
et dans #menu float: left;.

pascall

5 avril 2006 à 7:39:40

bonjour
mets le width de ton corps à 600px au lieu de 610

Linhks

5 avril 2006 à 11:23:37

Enlève le width au corps, et joue juste avec un margin-left et margin-right pour placer ton corps comme tu veux. (IE accepte mal une largeur défini dans un bloc à coté d'un bloc flottant ,en l'occurence ton menu.)

Surtout avec IE, pas de pb avec Firefox

Problème d'affichage de blocs

Supprimer

Modérer

Signaler le message aux modérateurs