Sujet Précédent Sujet Suivant

Problème de placement avec IE

Résolu/Fermé
Kaharon Messages postés 58 Date d'inscription samedi 22 août 2009 Statut Membre Dernière intervention 1 avril 2012 - 26 août 2009 à 13:43
angelx1 Messages postés 1452 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 12 novembre 2013 - 26 août 2009 à 13:54
Bonjour, le corps de mon site ne se place pas à droite du menu mais en bas, et j'aimerais qu'il revienne à droite du menu. Cependant, ce problème ce pose que avec IE.
Voici l'adresse du site : http://kaliumnator.hebfree.org
Voici le code HTML du site :
<!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>Kaliumnator-Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Accueil" href="css_kaliumnator.css" />
<link rel="icon" type="image/jpeg" href="/image/icone.jpeg" />
<embed src="musique/Requiem for a dream.mp3" hidden="true" autostart="true" loop="true" />
<BGSOUND SRC="musique/Requiem for a dream.mp3" autostart="true" LOOP="infinite">

</head>
<style>
.title
{
background-color: blue;
}

body
{
width: 760px;
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: #626262; /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
color: yellow;
font-family: "Comic Sans MS", sherif;
}

/* L'en-tête */

#en_tete
{
background-repeat: no-repeat;
margin-bottom: 10px;
font-family: "Comic Sans MS", sherif;
text-align: center;
}

#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
font-family: "Comic Sans MS", sherif;
margin-bottom: 20px;
}

.element_menu
{
background-color: gray;

padding: 2.5px;
border: 2px solid black;

margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

/* Quelques effets sur les menus */


.element_menu h3 /* Tous les titres de menus */
{
color: yellow;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
font-family: "Comic Sans MS", sherif;
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("/image/puce.jpg"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 30px; /* ... 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: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
font-family: "Comic Sans MS", sherif;
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: rgb(164,9,0);
font-family: "Comic Sans MS", sherif;
}

.element_menu ul:hover /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("/image/puce_b.jpg");
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #B3B3B3;
color: black;
}

div#fleche
{
float: right;
}

#corps h1
{
color: yellow;
text-align: center;
font-size: 50px;
}

#corps h2
{
color: orange;
font-size: 25px;
}

#corps a
{
color: rgb(234,0,6);
text-decoration: none;
}

#corps a:hover
{
background-color: #626262;
color: black;
text-decoration: underline;
}

/* Le corps de la page */

#corps
{
background-color: gray;
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 20px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

color: rgb(164,9,0);


width: 670px;


border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
font-family: "Comic Sans MS", sherif;
}

#corps .retour_haut_page
{
float: right;
font-size: 12px;
font-family: "Comic Sans MS", sherif;
}

#corps .retour_haut_page a
{
text-decoration: none;
color: silver;
}

#corps .retour_haut_page a:hover
{
text-decoration: underline;
color: black;
background-color: #626262;
}

#corps .retour_acceuil_page
{
float: right;
font-size: 12px;
font-family: "Comic Sans MS", sherif;
}

#corps .retour_acceuil_page a
{
text-decoration: none;
color: silver;
}

#corps .retour_acceuil_page a:hover
{
text-decoration: underline;
color: black;
background-color: #626262;
}

#corps .tiret
{
float: right;
font-size: 12px;
font-family: "Comic Sans MS", sherif;
color: silver;
}

div#guilde
{
text-align: center;
}

#pied_de_page
{
width: 840px;
padding: 5px;
text-align: center;
margin-top: 20px;
color: #B3B3B3;
background-color: gray;
background-repeat: repeat-x;
font-family: "Comic Sans MS", sherif;
border: 2px solid black;
font-size: 12px;
}


table
{
border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
text-align: center;
}

td
{
border: 2px solid black;
color: #B3B3B3;
}

td
{
border: 2px solid black;
color: rgb(164,9,0);
font-weight: bold;
padding: 15px;
padding-top: 0px;
padding-bottom: 0px;
}

th
{
color: yellow;
font-size: 20px;
border: 2px solid black;
font-weight: bold;
padding: 15px;
padding-top: 5px;
padding-bottom: 5px;
}

div#tableau
{
text-align: center;
}


a.info {
position: relative;
color: rgb(164,9,0);
text-decoration: none;
}
a.info span {
display: none; /* on masque l'infobulle */
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;

white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

top: 30px; /* on positionne notre infobulle */
left: 20px;

background: #626262;
font-size: 12px;
color: #B3B3B3;
padding: 3px;

border: 1px solid black;
border-left: 4px solid black;
}

</style>

<body>

<div id="banniere" >
<p><img src="image/banniere.jpg" alt="bannière" title="La bannière de la guilde Kaliumnator du jeu de Dofus" /></p>
</div>

<div id="menu">
<div class="element_menu">

<h3>Guilde</h3>
<ul>
<li><a href="page_guilde.html#histoire" title="Histoire">Histoire</a></li>
<li><a href="page_guilde.html#membres" title="Membres">Membres</a></li>
<li><a href="page_guilde.html#percepteur" title="Percepteur">Percepteur</a></li>
<li><a href="page_guilde.html#sorties" title="Sorties">Sorties</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Site</h3>
<ul>
<li><a href="maison_+_écolo.html#le plan" title="Forum">Forum</a></li>
<li><a href="maison_+_écolo.html#prix" title="Inscription">Inscription</a></li>
</ul>
</div>
<div class="element_menu">
<h3>Articles</h3>
<ul>
<li><a href="nous_contacter.html#aquel" title="Astuces">Astuces</a></li>
<li><a href="nous_contacter.html#pourquoi" title="Photos">Photos</a></li>
</ul>
</div>
</div>

<div id="corps"><div id="fleche"><img src="/image/blason_banniere.jpeg" alt="image guilde" /></div>
<div id="guilde"><img src="/image/acceuil.jpg" alt="titre : accueil" /></div>


<h2>Bienvenue</h2>

<p><img src="/image/lettrine_b.jpg" alt="lettrine b" />ienvenue, sur le site de la guilde <acronym title="Guilde du jeu Dofus">Kaliumnator</acronym>, qui se trouve sur<br /> le serveur Rikke Errel.<br />
Vous pouvez vous inscrire pour entrer dans la guilde : vivre vos sorties, votre jeu en groupe, et plus d'amusement en cliquant <a href="page_inscription" title="Page d'incription">ici</a>.<br />
Sur ce site,vous trouverez les photos des membres, leurs niveaux, leurs rangs<br /> (meneur, brat droit, mascotte ...) et des commentaires.<br />
Les sorties organisées : donjons, émotes, aide au gain de niveau (Trools, Kanigrous...).


</p>

<h2>A qui s'adresse ce site ?</h2>
<p><img src="/image/lettrine_a.jpg" alt="lettrine a" /> tous les joueurs qui cherchent une guilde, des astuces du jeu, de l'aide, et bien sûr aux membres déjà inscris dans la guilde Kaliumnator.
</p>






</div>

<div id="pied_de_page">
<p>Copyright 2009-2010, tous droits réservés au site <q>Kaliumnator</q>.</p>
</div>
</body>

</html>

3 réponses

Réponse 1 / 3
angelx1 Messages postés 1452 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 12 novembre 2013 110
26 août 2009 à 13:47
Salut =)
Tu n'était pas obligé de donné tout ca ^^


Deux choses : IE est un grand obstacle pour les créateurs de sites, et IE a plusieurs version, la 6 étant utilisé encore a 10% je crois, est la plus bugué !

Bref, j'ai éssayé ton site, aucun probleme, sous IE, sous firefox ou sous chrome


D'ou ton probleme vient il ?

Surement de ta résolution !
Forcement, en 800*600 des choses ne passe pas ...
Ou alors de l'écriture trop grande ? reste appuyé sur ctrl et scroll ( la molette de ta souris, vers le bas )


Si ce n'est pas ca il ne te reste qu'a mettre a jour IE si ce n'est pas fait :)
0
Réponse 2 / 3
Kaharon Messages postés 58 Date d'inscription samedi 22 août 2009 Statut Membre Dernière intervention 1 avril 2012 1
26 août 2009 à 13:53
Ok merci ^^
0
Réponse 3 / 3
angelx1 Messages postés 1452 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 12 novembre 2013 110
26 août 2009 à 13:54
Tu repasse nous dire si ca a marché et tu mettra dans ce cas le topic en résolu, dans le cas contraire je ferai quelque recherche ^^
0

Discussions similaires

Prélèvement Google Ireland Limited
jaffa1961 -
gill34051 -

32 réponses
Facture de google 380€ !
Misternet -
okapi -

61 réponses
Arnaque frauduleuse Ireland ltd
Mymy -
celine -

3 réponses
Prélèvement "CB Google" inconnu. Arnaque ?
sandrinepommelet -
Roanisel -

29 réponses
Les meilleurs places bercy / accor hotel arena
sisi -
baladur13 -

8 réponses