Menu qui sort du conteneur.

A cause d'un float:left

Sujet résolu

26 décembre 2005 à 3:55:27

Salut,

je fais un menu gauche que j'ai intégré dans un div conteneur qui lui fait 750 pixel centré. Hors quand je fais un float:left sur le menu gauche il se barre hors du div conteneur mais seulement sur internet explorer et j'aimerai bien corriger cette erreur. D'autres part si quelqu'un a une idee pour régler aussi le problème des padding sous internet explorer car les lien dans le header ne sont pas à la bonne place sur IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Kotech - Informatique pour particuliers / PME</title>
<link rel="stylesheet" media="screen" type="text/css" href="css/kotech.css" />
</head>

<body>

<div id="conteneur">

<div id="header">

<div class="menu_haut">

<ul id="puce_none_left">
<li><a href="produits.htm">Produits</a></li>
<li><a href="services.htm">Services</a></li>
<li><a href="download.htm">Téléchargements</a></li>
</ul>

</div>

<div class="menu_haut">

<ul id="puce_none_right">
<li><a href="partenaires.htm">Partenaires</a></li>
<li><a href="contacts.htm">Contacts</a></li>
<li><a href="informations.htm">A Propos De Kotech</a></li>
</ul>

</div>

</div>

<div id="menu_left">

<ul id="puce_none_def">
<li><a href="informations.htm">A Propos De Kotech</a></li>
</ul>

</div>

<div id="corps">
</div>

</div>

</body>
</html>

body
{
width:750px;
margin-left:auto;
margin-right:auto;
margin-top:5px;;
padding:0;
font-family:"Trebuchet MS",Tahoma, Verdana, Serif;
font-size:12px;
text-align:center;
}
a
{
color:#000000;
text-decoration:none;
}
#puce_none_left a, #puce_none_right a
{
color:#FFFFFF;
}
a:hover
{
text-decoration:underline;
}
#puce_none_left
{
list-style-type:none;
margin-top:30px;
margin-right:55px;
font-size:13px;
}
#puce_none_right
{
list-style-type:none;
margin-top:30px;
margin-right:15px;
font-size:13px;
}
#puce_none_def
{
list-style-type:none;
text-align:left;
margin:0px;
padding:0px;
}

/* Corps du site */

#conteneur
{
height:700px;
}
#header
{
background-image:url(../images/banniere.png);
width:750px;
height:110px;
}
.menu_haut
{
float:left;
width:375px;
}
#menu_left
{
float:left;
width:150px;
}

Merci

edit: jai réglé le 2e prob sur les lien décalé sous IE il fallait remplacer les padding par des margin je modifie le code en conséquence.

erigoal

26 décembre 2005 à 13:27:55

Salut nosti !
bon apparement je suis pas le seul à avoir ce genre de probléme,
si quelqu'un à une idée qu'il n'hesite pas.
si je trouve quelque chose je te previen.
@+

Nosti

26 décembre 2005 à 13:37:43

Voici le site en ligne.

http://tips2.free.fr

un second problème s'ajoute, si vous regarder les effets d'ombre a gauche et a droite sous IE c'est décalé a droite car il double les valeurs(si je met 3px pour IE lui il e comte 6px)

Merci

jp949

26 décembre 2005 à 13:40:30

il ne sort absolument pas du body le menu

Nosti

26 décembre 2005 à 13:43:22

hum oui en recodant le prob a du se régler mais si je met un float:left regarde.

edit: erf je comprend pas hier tout bugait bien et la tout marche bien mais bon je vais recree maintenant un post pour mon autre probleme d'ffet d'ombre.

jp949

26 décembre 2005 à 13:55:44

suffit de faire un hack pour l'ombre

Nosti

26 décembre 2005 à 14:00:41

Comment ca ? J'ai vaguement entendu parler. C'est pour intégrer css 3?

jp949

26 décembre 2005 à 14:08:31

non c'est css 2 tu fais
margin-left:3px ! important; /*pour les autres*/
margin-left:0; /*pour IE*/

Nosti

26 décembre 2005 à 14:12:58

oki merci je teste, mais après il sera plus valide?

edit: ca marche pas.

jp949

26 décembre 2005 à 14:15:40

c'est valide et ca doit marcher

Nosti

26 décembre 2005 à 14:16:43

Ca marche que sur les margin?

jp949

26 décembre 2005 à 14:20:37

avec toutes les propriété ou presque

Nosti

26 décembre 2005 à 14:21:50

Quand je met un truc 0; sa annule la première donnée d'avant 3px;

!!

edit: c'est bon j'avais oublié le trc importtant et effectivement sa marche mais jaurai besoin de faire un margin-left de 1 px juste pour IE.

jp949

26 décembre 2005 à 14:34:03

ca n'annule pas puisqu'ily a " ! important "
important n'est pas compris par IE c'est du css2 et il ne le comprend pas.
les autres navigateurs eux l'appliquent mais IE applique la derniere proprieté enoncée donc.
margin:3px ! important;/*bien mettre les espaces*/
margin:0; /*pour IE */

Nosti

26 décembre 2005 à 14:35:43

D'accord je comprend mieux. Mais j'aurai besoin de mettre encore de 1 pixel de la gauche sous IE.

jp949

26 décembre 2005 à 14:39:50

la je sais pas l'ampleur d'ombre que tu veux donner mais regle selon ta volonte s'il faut 1px pour IE tu codes " margin-left:1px; "

Nosti

26 décembre 2005 à 14:42:53

Oki merci mais l'ampleur je peux pas la choisir jai deja donné une taille pour mon ombre je lai fait sous photoshop en mettant au extremité des point noir en degrader sur 5pixel mais si tu connais une meileur technique n'hésite pas à me le dire

jp949

26 décembre 2005 à 14:49:29

je connais la solution du div qui a les memes caracteristiques que celui auquel tu veux attribuer l'ombre avec un
background-color:#777700;
position: relative;
left:3px; bottom:3px;