float et IE ça marche pas par Damien490 - page 1

Bonjour

;

J'ai mis un float pour faire un beau petit menu a gauche , il marche très bien sur firefox mais quel catastrophe sur IE o_O

Je vous laisse vérifier par vous même, voici mon site : http://darklords.goldzoneweb.info/site.html .

C'est quand même bien embetant :euh:

Voici mes codes :

<!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>Dark_Lords</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>

<body>

<div id="en_tete">

</div>

<div id="menu">

<h3>MENU</h3>
   <br/>

   <ul>
<li><a href="construction.html">Présentation</a></li>
   <li><a href="construction.html">Historique</a></li>
<li><a href="http://darklords.actifforum.com/">Forum</a></li>
<li><a href="construction.html">Screenshoots</a></li>
   <li><a href="construction.html">Membres</a></li>
   <li><a href="construction.html">Livre d'or</a></li>
   <li><a href="construction.html">Vidéo</a></li>
   <br/>
   <li><a href="http://conquete.91.com/">Conquête</a></li>
   <li><a href="http://bbs.conquete.91.com/index.php">Forum officiel</a></li>
   <li><a href="http://co.mondespersistants.com/">Mondes Persistants</a></li>
   <br/>
   <li><a href="http://www.koreus.com/media/loituma.html">Loituma</a></li>
   <li><a href="http://www.alouette.fr/alouette.m3u">Radio</a></li>
   <li><a href="http://mondo.happytreefriends.com/watch_episodes/index.html">Happy Tree Friends</a></li>
   <li><a href="http://www.penofchaos.com/warham/donjon.htm">Naheulbeuk</a></li>
   <li><a href="http://www.yonkis.com/mediaflash/unmillon.htm">Thank You</a></li>
   <br/>
   <li><a href="http://xxdeliriumxx.winnerbb.com/">Delirium</a></li>
   <li><a href="http://www.exinia.new.fr/">Exinia</a></li>
   <li><a href="http://lahordedelsong.monforum.com/">La Horde d'Helsong</a></li>
   <li><a href="http://forums.mondespersistants.com/forumdisplay.php?f=2957">Atlas</a></li>
   <li><a href="http://celtiquessteam.superforum.fr/index.forum">Celtiques</a></li>
   <li><a href="http://mercen-soldier.easyforum.fr/">Mercen Soldier</a></li>

</ul>

</div>

<div id="corps">
<p class=debut>>> Bienvenue chez les Dark_Lords ! Site web d'information sur un groupement de joueurs de conquète rassemblés dans une guilde du nom de Dark_Lords. C'est ici que vous toruverez tout un tas d'information sur notre guilde et toute les nouvelles actualitées à son sujet ! Merci de votre visite !</p>
   <br/>
   <hr/>
   <p>Le 1 septembre 2006,</p>
   <p class=attention>Si ce site bug, qu'il affiche tout n'importe comment abandonner Internet Explorer qui est de la grosse m**** et utilisez <a href=http://download.mozilla.org/?lang=fr&product=firefox-1.5.0.6&os=win>Firefox</a> qui lui est capable d'afficher les pages correctements et qui me simplifie la vie. Merci a vous !</p>
<hr/>
   <p>Le 30 septembre 2006,</p>
   <p class=information> Bon anniversaire a Dark Lords ! Et oui aujourd'hui la guilde a un an, souvenez vous juste après la dissolution des Faith la guilde avait été créée, nous avons traverser plusieurs périodes de paix , de guerres , mais nous sommes toujours là !!! Et tout ça c'est grâce a vous ! Continuez à nous faire confiance et poursuivons l'épopée Dark Lords jusqu'ou elle voudra nous emmener. Et surtout BON ANNIVERSAIRE A LA GUILDE !</p>
   <hr/>
   <p>Le 30 septembre 2006,</p>
   <p class=information> Bienvenue dans ce tout nouveau site ouvert à l'occasion des 1 ans de la guilde , vous y trouverez plein de super liens concernant la guilde mais aussi concernant conquete , et comme touche finale des liens fun a visiter sur le web</p>
   <hr/>
</div>

<div id="pied_de_page">

<p>Copyright "Dark_Lords by Yoshi Corporation" 2005, tous droits réservés</p>

<p>Damien, pour vous servir</p>

   <p>Remerciement : <a href=http://www.siteduzero.com/>Le Site du ZerO</a> (connaissances et design) , <a href=http://conquete.91.com/>Conquète</a> ( jeu et images ).</p>
<p><a href=http://www.ryoko-owari.com/>Ryoko Owari</a> ( images et design ) .</p>
</div>

</body>

</html>

et le CSS :

body
{
width: 796px;
margin: auto; /* Pour centrer notre page */
margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 0px; /* Idem pour le bas du navigateur */
background-image: url("fond3.jpg");
background-repeat: repeat-y;
background-position: center;

}

#en_tete
{
width: 100%;
height: 300px;
background-image: url("banniere.jpg");
background-repeat: no-repeat;
background-color: rgb(255,255,157);
margin: 0px;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
}

#menu
{
float: left; /* Le menu flottera à gauche */
width: 175px; /* Très important : donner une taille au menu */
height: 820px;
background-color: rgb(255,255,157);
background-repeat: repeat-x;
border: 1px solid black;
margin: 0px;
background-image: url("menu.jpg");
}

h3
{
text-align: center;
color: green;
font-family: "Comic sans MS", "Arial Black", "Times New Roman", Times, serif;
text-decoration: underline;
}

ul
{
list-style-image: url("arrow.gif"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 40px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 40px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */

}

#corps
{
width: 600px;
height: 800px;
margin: 0px;
margin-left: 176px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
padding: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
padding-top: 10px;

color: black;
background-color: rgb(230,228,243); /* Une couleur de fond pour le corps */
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */

border: 1px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#pied_de_page
{
width: 741px;
padding: 5px;
margin: 0px;
text-align: center;
height: 150px;
padding-left: 50px;

color: black;
background-color: white;
background-repeat: no-repeat;
background-image: url("barre.jpg");

border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}

h2
{
text-align: center;
color: red;
font-family: "Comic sans MS", "Arial Black", "Times New Roman", Times, serif;
}

.attention
{
background-image:url("zcode_attention.png");
text-indent: 40px;
background-repeat: no-repeat;
line-height: 25px;
text-align: justify;
}

.debut
{
font-weight: bold;
text-align: justify;
font-size: small;
font-family: "Comic sans MS", "Arial Black", "Times New Roman", Times, serif;
}

.information
{
background-image:url("zcode_info.png");
text-indent: 40px;
background-repeat: no-repeat;
line-height: 25px;
text-align: justify;
}

a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
color: red; /* Les liens seront en rouge au lieu de bleu */
font-style: bold; /* Les liens seront en italique (pourquoi pas ?) */
}

a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
color: green; /* Le lien sera écrit en vert quand on pointera dessus */
}

a:visited /* Quand le visiteur a déjà vu la page concernée */
{
text-decoration: underline;
color: purple;
}

MERCI pour votre aide si précieuse

Damien490

1 septembre 2006 à 23:18:28

Bilbou

2 septembre 2006 à 11:35:16

Chu !

Il te suffit d'augmenter légèrement le margin-left appliqué sur le corps.

Au moins de 2 pixels !
Quitte à augmenter légèrement le width du body, ou à diminuer celui du corps.

Car ton menu fait 175 pixels de large, et ton margin 176 : la bordure de 1 pixel de chaque côté du menu faisant, ce n'est pas assez pour IE !

Bonne journée !

2 septembre 2006 à 12:04:34

Merci Beaucoup ! :lol:

float et IE ça marche pas

float et IE ça marche pas

Supprimer

Modérer

Signaler le message aux modérateurs