[Résolu!!]Problème menu qui se décale à gauche

Salut,

lire Centrer les éléments ou un site web en CSS.


Edit: au passage il faudrait commencer par corriger les 273 erreurs de validation.
Modifié par Heyoan (10 Feb 2010 - 10:21)

Bonjour,

Parles-tu du menu qui parle de livraison express, de livraison gratuite, etc. ? Si c'est le cas, je te conseille de lire ce tutoriel sur le centrage d'éléments en CSS, plus particulièrement la partie sur le centrage horizontal des éléments de type bloc.

Édition : grillé par Heyoan.
Modifié par Victor BRITO (10 Feb 2010 - 10:20)

Bonjour,
l'article conseillé plus haut sur le centrage d'éléments en CSS te sera TRÈS utile.
En attendant pour régler ton problème, je te conseil 2 possibilités.

.blocfooter {
margin-left: 35px par exemple
}  

ou bien ajout d'un width pour #footer pour ensuite centrer avec un margin auto

#footer {
width: Moi j'ai mis 1000 px mais c'est à voir
margin:0 auto;
}  

Dans les 2 cas le résultat était nikel avec firebug.

Bonne continuation.
Modifié par Torifan (10 Feb 2010 - 11:34)

Oui c'est bien ce menu-là.
En fait, hier tout était correctement placé jusqu'à ce qu'une modification soit faite sur le site ( ajout d'une deuxième colonne de marques dans le menu du haut rubrique "marques" et ajout de "les incontournables" dans le menu de gauche.
Je pense que le problème vient de là.
La personne qui a fait ces modifications a du empiéter sur mon travail de CSS.

ecoute ça marche c'est nikel sauf quand je regarde sur IE7...

jisko42 a écrit :
ecoute ça marche c'est nikel sauf quand je regarde sur IE7...

As tu éssayé les 2 possibilités ?
Est ce que toute les deux passent mal dans IE7 ?
Modifié par Torifan (10 Feb 2010 - 12:34)

oui pour les 2 le corps de ma page se place a gauche dans IE7

jisko42 a écrit :
oui pour les 2 le corps de ma page se place a gauche dans IE7

Ok, alors une réponse d'un expert me sera aussi utile, attendons.

Torifan a écrit :
Dans les 2 cas le résultat était nikel avec firebug.

La première solution était mauvaise car ce n'est pas un centrage automatique. À moins d'utiliser exactement la même largeur de fenêtre que toi, la marge à gauche de 35px ne donnera pas un centrage horizontal.

Sinon, les non-experts peuvent débuguer aussi, hein. En utilisant les bons outils et un peu de jugeote, par exemple.

D'après Firebug, les blocs div#footer div#droite et div#centreGauche ne sont pas inclus dans div#cadre. Or, c'est div#cadre qui a pour fonction de centrer horizontalement l'ensemble du contenu.
Conclusion: il doit y avoir un </div> en trop dans ton code.
Note qui va bien: avec un code HTML valide, ce genre d'erreur se repère plus facilement vu que ça donne souvent une erreur de validation (élément non refermé ou balise de fermeture en trop).

Après avoir lu attentivement le message de Florent je trouve ça tout à fait normal et simpliste, j'ai comme envie de dire mais oui je le savais ...

Merci pour cette intervention, et merci à toi aussi jisko42, j'ai au moin appris quelques chose aujourd'hui.

donc ce n'est qu'un problème de div? je n'ai pas besoin de toucher a ma page CSS?

J'ai beau essayer de tout regrouper dans la div cela ne fonctionne pas et quand je me sers de firebug les div qui devraient se retrouver dans div cadre restent à l'exterieur..



Ma dernière "(/div)" est peut-être placée au mauvais endroit...


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="produits.aspx.cs" Inherits="fr_produitsV3" %>
<%@ Register Src="subheader.ascx" TagName="subheader" TagPrefix="ucSubheader" %>
<%@ Register Src="header.ascx" TagName="header" TagPrefix="ucHeader" %>
<%@ Register Src="menuHaut.ascx" TagName="menuHaut" TagPrefix="ucMenu" %>
<%@ Register Src="rechercheProduit.ascx" TagName="rechercheProduit" TagPrefix="ucRecherche" %>
<%@ Register Src="footer.ascx" TagName="footer" TagPrefix="ucFooter" %>
<%@ Register src="postfooter.ascx" tagname="postfooter" tagprefix="ucPostfooter" %>
<%@ Register src="headPartenaire.ascx" tagname="headPartenaire" tagprefix="ucHeadPartenaire" %>
<%@ Register src="produits.ascx" tagname="produits" tagprefix="ucProduits" %>

<!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 id="Head1" runat="server">
<title>MODZ.FR - <asp:Literal ID="lTitre" runat="server"></asp:Literal></title>
<asp:Literal ID="MetaDesc" runat="server"></asp:Literal>
<link type="text/css" href="../css/commun.css" rel="stylesheet" />
<link type="text/css" href="../css/noel_point_cache.css" rel="stylesheet" />
<link type="text/css" href="../css/produits.css" rel="stylesheet" />
<asp:Literal ID="lCssGenre" runat="server"></asp:Literal>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-899980-2");
pageTracker._trackPageview();
} catch(err) {}</script>

<script type="text/javascript" src="http://enquetes.modz.fr/clickheat/js/clickheat.js"></script>
<noscript><p><a href="http://www.labsmedia.fr/index.html">Outils webmaster gratuits</a></p></noscript>
<script type="text/javascript"><!--
clickHeatSite = 'modz';
clickHeatGroup = 'Produits';
clickHeatServer = 'http://enquetes.modz.fr/clickheat/click.php';
initClickHeat(); //-->
</script>
<ucHeadPartenaire:headPartenaire ID="headPartenaire1" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<ucSubheader:subheader ID="subheader1" runat="server" />
<div id="cadre">
<%-- <div id="noel_point_cache_2" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=2&key=sdfqsdfd454qdfgdf53g"><img src="../images/opnoel09/noel_point_cache_1.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_3" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=3&key=sdfqsdqsdflmklvp"><img src="../images/opnoel09/pts/point_noel_03.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_4" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=4&key=iujbdvqjksdh24sdfknlazeh"><img src="../images/opnoel09/pts/point_noel_04.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_5" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=5&key=jkhklnvcsd54sdfsdf564"><img src="../images/opnoel09/pts/point_noel_05.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_6" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=6&key=fsdiofjdioshper567453sdefr"><img src="../images/opnoel09/pts/point_noel_06.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_7" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=7&key=edfazf544sdf4referf"><img src="../images/opnoel09/pts/point_noel_07.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_8" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=8&key=sdfhiodfiogy56786qsdfgq"><img src="../images/opnoel09/pts/point_noel_08.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_9" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=9&key=hksdgf24534qsefzef"><img src="../images/opnoel09/pts/point_noel_09.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_15" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=15&key=dsfqsdg54qdf5g4qdfg547"><img src="../images/opnoel09/pts/point_noel_15.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_16" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=16&key=54765vfqsdfq543qsdfsdf4g"><img src="../images/opnoel09/pts/point_noel_16.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_25" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=25&key=24sd24f4asdf4asd53f453sqd"><img src="../images/opnoel09/pts/point_noel_25.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_26" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=26&key=54654qsd65fqsdfsdfqsdf"><img src="../images/opnoel09/pts/point_noel_26.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_27" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=27&key=54dsq54fsd54f54qsdf5d"><img src="../images/opnoel09/pts/point_noel_27.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_28" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=28&key=4sdfqsdf54sd56f47sd56f"><img src="../images/opnoel09/pts/point_noel_28.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_29" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=29&key=sdf54qsd4f5qsd54fsd543f"><img src="../images/opnoel09/pts/point_noel_29.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_30" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=30&key=54sd4fqsd5f544fqsdfsd54f"><img src="../images/opnoel09/pts/point_noel_30.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_31" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=31&key=54sd56f4s56qf456"><img src="../images/opnoel09/pts/point_noel_31.png" alt="" border="0"></img></a></div>

<div id="noel_point_cache_32" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=32&key=sdfsdfqsdf564413453"><img src="../images/opnoel09/pts/point_noel_32.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_33" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=33&key=78521456sd4gfd5gfdfbsff"><img src="../images/opnoel09/pts/point_noel_33.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_34" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=34&key=tjkkyukyuhk125645fukhk"><img src="../images/opnoel09/pts/point_noel_34.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_35" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=35&key=btjfbg1bf111b117"><img src="../images/opnoel09/pts/point_noel_35.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_36" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=36&key=46h7ghgh4vdh4hsv73xsxhy"><img src="../images/opnoel09/pts/point_noel_36.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_37" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=37&key=xzdfbhjgfsgh5454546klu"><img src="../images/opnoel09/pts/point_noel_37.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_38" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=38&key=sdfdfsdfcc546546546546546xdxdxd"><img src="../images/opnoel09/pts/point_noel_38.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_39" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=39&key=xdfxxdfxdfscf47cff"><img src="../images/opnoel09/pts/point_noel_39.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_41" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=41&key=dededexdxdxdefzui5464"><img src="../images/opnoel09/pts/point_noel_41.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_42" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=42&key=dfx5543213213213htrh"><img src="../images/opnoel09/pts/point_noel_42.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_51" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=51&key=df1sdf213sdf213213213dqsf1g"><img src="../images/opnoel09/pts/point_noel_51.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_52" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=52&key=dfdftrpklsdfgdf1432psdf"><img src="../images/opnoel09/pts/point_noel_52.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_53" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=53&key=dfsd21df1s21qsd21fs2d"><img src="../images/opnoel09/pts/point_noel_53.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_54" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=54&key=ds21sd2f1s23dr4sd54"><img src="../images/opnoel09/pts/point_noel_54.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_55" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=55&key=sdf54sd54f53sdf4sd53f4"><img src="../images/opnoel09/pts/point_noel_55.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_56" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=56&key=ds21sdq1df23112315qf"><img src="../images/opnoel09/pts/point_noel_56.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_57" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=57&key=deff4qdg4qgdg5"><img src="../images/opnoel09/pts/point_noel_57.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_58" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=58&key=efrsd53f4sd4fq3"><img src="../images/opnoel09/pts/point_noel_58.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_59" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=59&key=df4ds53f4qsd343sdf23sdfsdf"><img src="../images/opnoel09/pts/point_noel_59.png" alt="" border="0"></img></a></div>
<div id="noel_point_cache_60" runat="server"><a href="opnoel09_felicitations.aspx?emplacement=60&key=iluntbjkgjkb5454411231789"><img src="../images/opnoel09/pts/point_noel_60.png" alt="" border="0"></img></a></div>
--%>
<ucHeader:header ID="header1" runat="server" />
<ucMenu:menuHaut ID="menuHaut1" runat="server" />
<ucProduits:produits ID="produits1" runat="server" />


<div id="droite" runat="server" enableviewstate="false" >
<%
if ((Request.Url.Host != "pourelles.modz.fr") && (Request.Url.Host != "modz.pourelles.orange.fr")){
%>

<%
}
%>
<a href="/simpleviewer/nouveautes.aspx?xml=2010-02-08_1027.xml"><img src="../nouveautes/img/bandeauLateral_produits_promo08022010.jpg" border="0" /></a>
</div>
<ucFooter:footer ID="footer1" runat="server" />
</div>
<ucPostfooter:postfooter ID="postfooter1" runat="server" />
<asp:Literal ID="litTaggsBas" runat="server" EnableViewState="false"></asp:Literal>
</form>
</body>
</html>

Moi je mets des marqueurs à mes </div> pour m'y retrouver. Exemple:

<div id="content">
   ... Ici de quelques lignes à des centaires...
</div><!--#content-->

Du coup ça m'arrive très rarement de partir à la chasse de la </div> perdue ou mal placée.

ah oui bonne technique ça! je pense ke je vais l'adopter!
Mais sinon je n'trouve toujours pas où placer ma </div>...

le problème set réglé!!
Une </div> en trop dans ma page produits.ascx ajoutée par ma collègue.
Je vous remercie pour votre aide!