Salut tout le monde
 
Voila, je vous explique mon probleme je dois realiser une page contenant un menu en haut et un menu a gauche. le menu de gauche doit contenir des puces (jpg) Je n'arrive a positionner les menus correctement, sur la partie de gauche, le texte se trouve sur les puces et sur le menu du haut, je ne peux pas espacer les items sans que cela influe sur l'espace des items du menu de gauche..
 
 
C'est la premiere fois ke je fais une page sans tableaux alors j'ai un peu de mal!
 
Voici le code de ma feuille de style! :  
 
 
body {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 0.6em;
 margin: 0;
 padding: 0;
 background-color:#F2F7F7;
 
}
 
/* conteneur englobe les deux menus (droite&gauche et le centre de la page (#centre) les onglets et le pied*/
#conteneur {
     position: absolute;
 /* pour center le site */
     width: 96%;
     height : 96%;
     margin-left: center;
     margin-right: center;
     text-align: left;
     /*margin: 1em 15%;*/
}
 
#coinHautGauche {
 position : absolute;
 left : 70px;
 top : 10px;
 width : 210px;
 height : 150px;
 background-color : #F2F7F7;
}
.imageCoin {
 /*position: absolute;*/
 height: 140px; width: 210px;
 top : 15px;
 left : 15px;
 background-repeat: no-repeat;
 font-size:0px;
 background: url(logo_coin.jpg);
}
 
/*#menuGauche {
 position: absolute;
 left: 70px;
 top : 180px;
 width : 176px;
 background-color: #1D6186;*/
 /*padding-left:10px;*/
 /*padding-top:10px;
 height:expression(this.scrollHeight < 450? "450px" : "auto" );
 min-height: 450px;
}*/
#menuGauche {
 position: absolute;
 left: 70px;
 top : 150px;
 width : 176px;
 background-color: #1D6186;
 /*padding-left:10px;*/
 padding-top:10px;
 height:expression(this.scrollHeight < 400? "400px" : "auto" );
 min-height: 400px;
 text-align : center;
 
}
 
/*#menuGauche a {
 display: block;
 color:#A8D1E7;
 text-align:center;
 text-decoration:none;
 padding-top : 15px;
 Margin-top : 15px; *//*espace entre les rubriques*/
/*}*/
 
#menuGauche a {
 display: block;
 color:#A8D1E7;
 
 text-align:center;
 text-decoration:none;
 /*padding-top : 15px;*/
 Margin-top : 15px; /*espace entre les rubriques*/
}
#menuGauche a:hover {
 text-decoration: none;
 color : #FFAC42;
}
 
/*Item du menu de gauche*/
#menuGauche ul {
 list-style-type: none;
 
}
 
/*position des puces*/
 
#menuGauche li {
 background-image: url(bouton.jpg);
 background-image:horizontal vertical;
 background-image: center left;
 background-repeat: no-repeat ;  
 /*background-position: 0% 50%;*/
 padding-left: 30px;
 margin-left: 0px;
 /*text-align : center;*/
 background-position:0% 50%;
 padding-left:15px;
}
 
/*
#menuGauche li {
background-image: url(bouton.jpg);
background-image:horizontal vertical;
background-repeat: no-repeat;
background-position: 0% 50%;
padding-left: 0px;
margin-left: 0px;
}
*/
 
 
#menuHaut {
 position : absolute;
 left : 280px;
 top : 10px;
 width : 570px;
 height : 150px;
 background-color: #F2F7F7;
 /*padding-left:20px;
 padding-top:20px;*/
}
.menuHaut {
 height : 150px;width:580px;
 background-repeat : no-repeat;
 font-size:0px;
 background : url(haut_icones.jpg);
}
 
#menuHaut ul,li {
 display: inline;
 margin : 0px;
 padding : 10px;
 text-align : center;
 list-style-type: none;
 float : left;
}
 
/*#menuHaut li {
 display: inline;
 list-style-type: none;
} */
 
#menuHaut a {
 /*display: block;*/
 color:#1D6186;
 /*text-align:center;*/
 text-decoration:none;
 /*padding-top : 15px;*/
 Margin-top : 15px; /*espace entre les rubriques*/
}
#menuHaut a:hover {
 /*text-decoration: none;*/
 color : #FFAC42;
}
#centre {
 position:absolute;
 
 top : 210px;
 left : 260px;
 padding-top: 20px;
 padding-left: 20px;
 width : 800px;
 /* fixe une hauteur mini  !!TRES IMPORTANT!!*/
 height:expression(this.scrollHeight < 450? "450px" : "auto" );
 min-height: 500px;
 background-color:#F2F7F7;
}
 
#centre p {
 text-align: justify;
}
 
 
.bas { /*image avec la contour*/
  height: 40px; width: 176px;
  background-repeat: no-repeat;
  font-size:1px; /* correction d'un bug IE */
  background: url(bas.jpg);
}
 
Je suis désolée du bazard mais je prefere laisser les essais que je fais afin de pas refaire 36000 trucs plusieurs fois!!
 
voila la page html :  
 
 
<div id="conteneur">
 
 <div id="coinHautGauche">
   
  <div class="imageCoin"></div>
   
 </div>
 <div id="menuHaut">
  <div class="menuHaut">
   
  <ul><b><p>
   <li><a href ="contenu/avis.htm" target="ZONE1">Votre avis<br />nous intéresse<br /></a></li>
   <li><a href ="contenu/enCours.htm" target="ZONE1">Courriel</li></a></li>
   <li><a href ="contenu/enCours.htm" target="ZONE1">Carnet<br />d&#39;adresses<br /></a></li>
   <li><a href ="contenu/enCours.htm" target="ZONE1">Demande de <br />fournitures<br /></a></li>
   <li><a href ="contenu/enCours.htm" target="ZONE1">Demande<br />d&#39;interventions<br /></a></li>
   <li><a href ="contenu/enCours.htm" target="ZONE1">Photothèque<br /></a></li>
  </p></b></ul>
</div>
 
 </div>
 <div id="menuGauche">
   
   
  <div class="menuGauche">
      <ul>
 
 
      <b>
       
   <a href ="contenu/conseilMunicipal.php" target="ZONE1"><li><br />Conseil <br />Municipal<br /></li></a>
   <a href ="contenu/commissions.htm" target="ZONE1"><li><br />Commissions<br /></li></a>
   <a href ="contenu/interServ.htm" target="ZONE1"><li>Réunions<br />Inter-services</li></a>
   <a href ="contenu/enCours.htm" target="ZONE1"><li>Comité<br />Technique Paritaire</li></a>
   <a href ="contenu/enCours.htm" target="ZONE1"><li><br />Direction des <br />Ressources<br /> Humaines<br /></li></a>
   <a href ="contenu/enCours.htm" target="ZONE1"><li>Crédits <br />budgétaires</li></a>
   <a href ="contenu/enCours.htm" target="ZONE1"><li><br />Réservations<br /></li></a>
   <a href ="contenu/enCours.htm" target="ZONE1"><li><br />Archives<br /></li></a>
   <a href ="contenu/enCours.htm" target="ZONE1"><li>Liens vers<br />sites Internet</li></a>
   <a href ="contenu/enCours.htm" target="ZONE1"><li>Déclassement<br />de matériel</li></a>
   
   
   
   <a href ="admin/connexion.php" target="ZONE1"><li><br />Administration<br /></li></a>
 
   
   
   <a href ="index.htm#">RECHERCHER</a></b></ul>
  <img src="img/rechercher.jpg" alt=""  title=""/>
  <br />
   
  </div>
  <div class="bas"></div>
   
 </div>
 
J'espere que quelqu'un pourra m'aider!!

heuuuuuuuuuuuu déjà corrige ça avant que je ne te corrige avec la de FlorentG
 
on ne met pas
 
<a><li></li></a>
mais
<li><a></a></li>

Oki d'accord désolée :$, mais j'avais fait ca pour que les puces soit également réactives aux clics!! Corrigé, merci
 
EDIT Ce que je viens de raconter n'est pas clair, je peux mettre des screens shot pour que vous voyez mieux mon problème??

Sauf qu'en HTML, y'a des règles, on s'amuse pas à mettre des balises dans tous les sens

Ou un lien vers un endroit ou tu uploaderais tout ca

FlorentG >> Désolée :$
 
plainsofpain >> la, je peux pas faire d'upload, les accès FTP sont bloqués, c'est super pratique
http://img263.echo.cx/img263/856/intef2gk.jpg
 
Voila l'image, donc j'aimerai bien pouvoir décaller les puces du menu de gauche pour pas kelles se chevauchent avec le texte et dimunuer l'écart entre les items du menu de gauche sans bouger les items du menu du haut qui est a peu pres en place, j'aimerai quand un peu arrivé à les monter hitstoire qu'ils soient plus pres des images
 
Voila encore merci pour votre aide

Change les valeurs de margin et padding dans le bloc
 

Merci bcp plainsofpain, le menu de gauche est bien placé
Voila ce que j'ai utilié :  
 
#menuGauche li {
 background-image: url(bouton.jpg);
 background-image:horizontal vertical;
 background-image: center left;
 background-repeat: no-repeat ;  
 /*background-position: 0% 50%;*/
 padding-left: 40px;
 margin-left: -30px;
 margin-top: 0px;
 /*text-align : center;*/
 background-position:0% 50%;
 /*padding-left:15px;*/
}
par contre, j'ai lu dans sur un autre sujet qu'il n'etais pas correct de mettre des valeurs négatives, comment faire sans?
 
Et sinon, j'ai un deuxieme petit soucis, pour mettre en place ce menu, j'ai utilisé un <div>, mais comme on peut le voir sur l'image, il faudrai ke je rajoute les bordures à ce div pour coler avec le reste de l'interface, je ne sais pas comment il faut faire et je peux pas mettre une image de fond puisque la taille du menu est différente sour IE et fofox!!
 
 

Non, ça ne pose pas de problème sur les marges, les valeurs négatives. Voici ce que dit la recommandation :

Oki oki bon ben c'est bon alors!!Merci
 
Et sinon une idée pour mes contours?? :$

le DIV ne sert à rien, autant directement mettre le ID sur le UL
et tu attaque le UL afin de le transformer comme une boite

Ah oué??? Mais le cadre de mon menu peut quand s'afficher?? Je viens d'essayer! J'ai tout qui s'est mis n'importe comment dans la page!
 
T'entends quoi par "Attaquer le ul", j'ai mis <ul id class="menuGauche">, c'est bien, ca???
 
Merci bien de ta réponse en tout cas!

Euuuh, à ton avis ça veut dire quoi cette chose?
 
Bon, on va commencer par nettoyer le code (tu pourrais ptet le passer au validateur d'ailleurs )

f'ing nonsense, le code HTML ne doit pas contenir d'informations sur la manière dont il s'affiche, il doit contenir des informations sur le rôle sémantique des éléments qui le composent.
Ca c'est de la présentation, ça dégage.

1- les deux divs externes n'ont aucune raison d'être, il suffit de styler l'ul
2- <b> doit être banni des documents HTML
3- on ne met pas de paragraphes entre <ul> et <li>  
4- le 2e <li> se termine avec deux "</li>"
5- c'est quoi tous ces <br />? Non seulement ça n'a pas de sens, mais en plus les li sont des blocs, donc sauf ordre contraire dans les CSS il y a toujours un saut de ligne à la fin d'un <li>
6- l'extension des fichiers HTML est ".html". pas ".htm"

On retrouve: 2 divs complètement inutiles, la balise <b> qui n'a aucune raison d'exister, les dizaines de <br> qui n'ont rien à foutre là.
En bonus exclusifs:  

• il manque un </div>
• Les noms de classes sont moisis ("bas", ça donne quoi comme informations sur le rôle de la zone? et si un jour du décides de le mettre en haut de ta page avec les CSS, tu fais quoi?)
• Une image qui n'apporte rien au document n'a pas à être dans le code HTML
• on ne met RIEN autour d'un <li> si ce n'est un <ul>, les <a> c'est à l'intérieur des éléménts de listes, pas en dehors la remarque t'a été faite, donc je l'enlève

merci bcp pour ta reponse, je met ca en pratique tout d suite!! et je reediterai ce message
 
EDIT 1 Je suis désolée mais je ne suis pas tres douée, soyez indulgents :  
Bon, on va commencer par nettoyer le code (tu pourrais ptet le passer au validateur d'ailleurs  )  
   <div id="coinHautGauche">  
        <div class="imageCoin"></div>  
    </div>  
 
Quand tu me dis ca, je dois mettre quoi à la place je l'affiche comment mon image de coin??
 
EDIT 2 Ca y est j'ai mon code tout propre,merci bcp Masklinn, par contre, une idée pour mettre mon image de contour sur mon menu de gauche???