Le Menu déborde sous ie!!

Alors la il y a problème

12 octobre 2006 à 20:53:40

Bon je vous explique
le css est catastrophique sous IE
Il le menu va direct sur le corps

Alors pour savoir mon catastrophe sous IE 6 ça va être simple
Mais la le pire c'est que sous firefox le menu faut pousser o_O

le css

body
{
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-image: url("images/fond.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc

*/
font-family: Arial, Verdana, "Trebuchet MS", "Comic Sans MS", sans-serif;
color: red;
background-color: yellow;
}
#en_tete
{
text-align: center;
margin: 10px
}

/* Le menu */

#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}

.element_menu
{
background-color: yellow;
color: red;
border: 5px outset red;

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: #f66e00;
text-align: center;
background-color: yellow;
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("images/lien.gif"); /* On change l'apparence des puces */
padding-left: 45px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 45 pixels */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
a /* Tous les liens se trouvant dans un menu */
{
color: #00FFFF;
background-color: #098bff;
}
a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #00FFFF;
color: #098bff;
text-decoration: blink;
}

#corps
{
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: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

background-color: yellow; /* Une couleur de fond pour le corps */
background-image: url("images/motif.png");
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
color: red;

border: 5px outset red; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
text-align: center;
}
table
{
border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
border: 4px inset red; /* Bordure personnalisé de 4 pixels */
}
td, th /* Toutes les cellules des tableaux... */
{
border: 3px ridge black; /* ... auront une bordure de 3 pixels */
}
acronym
{
cursor: help; /* Si on passe sur un acronyme mettre le curseur d'aide */
}
caption
{

}
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
padding: 5px;

text-align: center;

background-color: yellow;
background-image: url("images/motif.png");
background-repeat: repeat-x;
color: red;

border: 5px outset red;
}
textarea
{
width: 500px;
height: 200px;
}
input[type=text]:focus, textarea:focus
{
background-color:#098bff;
}

Sous firefox : Menu sous Firefox

Cliquez pour zommer
Sous IE : Menu sous Internet explorer

Cliquez pour zommer

Zequndus

12 octobre 2006 à 21:23:49

Salut
J'ai pas eu trop le temps de regarder le code mais j'ai vu un petit truc : dans #en_tete, tu n'as pas mis de ";" à la fin de margin: 10px !

Conan

12 octobre 2006 à 21:47:20

bon bah ça résout rien

der_shadow

12 octobre 2006 à 21:52:30

Bonjour,
Tu n'as pas un lien sur ton site?

zeunyton

12 octobre 2006 à 22:17:18

Salut pour ma je pense que tu dois enlever ton margin-left:140px; de ton corps est mettre ton corps plutôt en float:right;

Essaye comme cela je pense que sa devrais régler ton probléme.

Conan

18 octobre 2006 à 20:25:35

UP
Non cela ne marche toujours pas désolé

DanielCosta

18 octobre 2006 à 20:35:37

tu peux tester ça sur un fichier tmlé au bol et tu me dis ce que ça fait pour le menu car avec ça moi ça va super, tu aurais un code html aussi?

<!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" >
</html>

EDIT
enfaite regarde vbine ton image, ton premier bloc et bien internet ne fait pas revenir a la ligne et ton deuxieme non plus tu vaois aussi si tu regardes bien que enfaite ton texte du deuxieme bloc est plus long et a cause de l'image il décalle tout.

c'est la je pense :

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("images/lien.gif"); /* On change l'apparence des puces */
padding-left: 45px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 45 pixels */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

ton padding est trop ellevé, si tu veux metre ce padding faut faire ensorte de obliger un retour a la ligne systemeatique.

je sais pas comment faire par contre. carFF oblige el retour a la ligne

On m'appelle - Mon projet sur le forum de recrutement

Conan

22 octobre 2006 à 23:51:09

UP
danielcosta écrit mieux s'il te plaît
c'est illisible tu inverse les lettres

der_shadow

22 octobre 2006 à 23:56:05

Salut,
Tu peux essayer le float : right; pour ton corps.

Il faudrait quand même le code html pour voir qi il y a pas un truc qui cloche!!

Conan

23 octobre 2006 à 0:21:33

<!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>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Look été" href="php/css/1/design.css" />
</head>
<body>
<div id="en_tete">
<a href="index.php" title="Retournez a l'acceuil"><img src="css/1/images/header.jpg" alt="Bannière" /></a>

</div><div id="menu"> 
<div class="element_menu">
<h3>Principal</h3>
<ul>
<li><a href="index.php" title="Acceuil du site">Acceuil</a></li>
</ul>
</div>
<div class="element_menu">

<h3>Supplément</h3>
<ul>
<li><a href="shoutbox.php" title="Shoutbox">Shoutbox</a></li>
<li><a href="livredor.php" title="Le livre d'or">Livre d'or</a></li>
</ul>
</div>
</div> <div id="corps">

<p>
Coucou les nul

</p>
<div class="news">
<h3>Exalead le moteur crée par l'europe</h3><br />
<div class="contenu_news">
<div class="infos">
Crée par : Conan<br />

Crée le : 13/10/2006 a 13h 31m 18s<br />
Modifier le : 13/10/2006 a 13h 50m 14s<br />
</div>
Exalead est un nouveau moteur de recherche récent comme un peu google avec une presque aussi grande base de données<br />
Leur plus grand but c'est de dominer google parce que la domination de google peut parfois trouvez que c'est comme microsoft avec windows<br />
De temps en temps faut avoir enfin des concurrents parce que les autres moteurs sont a néant même disparu a cause de la domination de google<br />
Les moteurs de recherche est une bon moyen économique (comment ça ??? il y a même pas d'argent a donner quand tu recherche)<br />

Exalead est la pour essayer de bouleversé google (qui est un moteur récent) pour enfin avoir quelqu'un de différent de voir en premier enfin<br />
Ce moteur utilise un peu Ajax il utilise aussi les raccourcis pour avoir dans la page d'accueil de exalead quelque liens que vous visitez souvent </div>
<div class="news">
<h3>Le système de news est arrivé</h3><br />
<div class="contenu_news">
<div class="infos">
Crée par : Conan<br />
Crée le : 13/10/2006 a 09h 12m 21s<br />

Modifier le : 13/10/2006 a 13h 50m 28s<br />
</div>
Enfin un système de news révolutionnaire pour nous chers visiteurs<br />
Les actualité sont a la bourre et le système de news est assigné la version 0.1.0<br />
Oui c'est une version bêta<br />
Pourquoi bêta ?<br />
Parce que je suis pas sur que cela ne plante pas et il y a quelque risque<br />
La version 1 va pas prendre beaucoup de temps a arrivé </div>

</div>
</div>
</div>
<div id="pied_de_page">
Il y a 0 connectées<br />
<a href="http://www.siteduzero.com" title="Le Site du Zer0">
Merci au Site du Zér0<br />
<img src="images/banniere_sdz.gif" alt="Bannière du Site du Zér0" title="Le Site du Zér0" /></a>

<br />
© 2006 Conan tout droit réservé
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
</a>
</p>
</div>
</body>
</html>

C'est valide d'ailleurs

gcyrillus

23 octobre 2006 à 0:48:08

bonsoir,

IE elargie probablement ton menu sans te prevenir , essaie un "overflow:hidden;"

Pour IE6 height et width sont traité comme des tailles minimales.

++

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

der_shadow

23 octobre 2006 à 0:48:17

Ok,
Diminue ton padding-left dans ta classe .element_menu ul et ajoute margin : 0px; dedans.
Ca devrait régler ton pb.

DanielCosta

23 octobre 2006 à 19:04:52

ben si tu arrive pas a lire tant pis dmerde toi ...

je t'ai dis la soluce alors...

On m'appelle - Mon projet sur le forum de recrutement