18073 sujets

Questions générales et questions de débutants

[resolu]Positionnement menu

Bonjour,

Je souhaite insérer un menu de naviguation dans la colonne gauche de mon site mais pour le moment il dépasse à droite de la colonne.

J'ai essayé avec la position absolute et des marges négatives mais je crois que c'est déconseillé ?


<body>
<div id="page">
   <div id="entete">
     <h3>ESSAI</h3>
   </div>
   <div id="gauche">
     <div id="menu">
     <ul>
       <li><a href="#" title="lien1">lien 1</a></li>
       <li><a href="#">lien 2</a></li>
       <li><a href="#">lien 3</a></li>
       <li><a href="#">lien 4</a></li>
       <li><a href="#">lien 5</a></li>
     </ul>
   </div>
   </div>
  <div id="contenu">
     <h2>TITRE </h2>
   
	<p>Et duis, qui illum elit. Diam qui ipsum nulla molestie diam iusto nostrud sed ullamcorper esse erat. Hendrerit delenit nulla nibh eu, delenit eum consequat tincidunt tincidunt blandit suscipit, vulputate. Duis illum, enim, minim nisl consequat molestie at vel in eum dolore magna ullamcorper luptatum. Nulla ea, nulla et exerci, ea vel dolore accumsan. Eros quis ad volutpat feugiat, ut dolore nisl feugait erat odio qui feugait in, ex minim vero ullamcorper. Euismod at vero duis nulla ex ipsum wisi in, luptatum wisi adipiscing consequat exerci. Hendrerit ut suscipit accumsan vel. 

Facilisis lobortis feugait, enim volutpat ut velit eros iriure dignissim, dolor facilisis. Eum exerci  consequat nulla ex iusto, nulla. Nulla minim vero duis et luptatum tincidunt illum elit at in esse suscipit vulputate feugait, ullamcorper luptatum ex. Dolor blandit dolore minim in iusto consequat, tincidunt feugait in eum lorem. Consectetuer vel, odio qui minim, wisi in eu feugiat erat molestienulla odio. 
	</p>

      </div>
   <div id="piedpage">
        <p><a href="#">lien 1</a> • <a href="#">lien 2</a> • 
        <a href="#">lien 3</a> • <a href="#">lien 4</a> • <a href="#">lien 5</a></p>
           </div>
</div>
</body>




body {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:small;
	margin:0;
	padding:0;
	text-align:center;
	color:black;
	background:white;
}

/************************************************************************/
/******************* Le cadre de ma page     ****************************/
/************************************************************************/
#page {text-align:left;
       margin:20px auto;
	   width:760px;
	   background:white;
	   }

/************************************************************************/
/******************* l'en tete du document   ****************************/
/************************************************************************/
#entete{background:url(images/dessus.gif) no-repeat;
	height:150px;}

#entete h3{text-align:center;
	   padding-top:30px;
	   color:white}

/************************************************************************/
/******************* menu pour la navigation ****************************/
/************************************************************************/

#gauche {float: left;
	 width:137px; 
 	 height:400px; 
 	 background-color:rgb(0,0,255);} 


#menu {	width:100px;}
	

#menu li {list-style:none;
	  }
		  
		 
#menu a, #menu a:visited {border:1px solid black;
                        background-color:#FFF;
		       	padding:0px;
		        margin:0px;
		        text-decoration:none;
			font-weight:bold;
			color:#000;
			display:block;
	  		width:100px;
		               }		
					   
#menu a:hover {background-color:#000;
              color:#fff;}	

/*************************************************************************/
/******************* Contenu  du document ********************************/
/*************************************************************************/

#contenu{margin-left:150px;
	 margin-top:0px;
	 margin-bottom:0px;  
	 margin-right;10px;
	 background:white;
	 padding-bottom:2-00px;
				}

/*************************************************************************/
/******************* Pied de page du document ****************************/
/*************************************************************************/		

#piedpage{ height:20px;
	   padding-top:10px;
	   background:white;
		  }

#piedpage p{ text-align:center;
	     color:black;
	     font-size:90%;}  /* le texte en pied de page est plus petit le texte de la page */


#piedpage a {color:red;}

#piedpage a:hover{color:white;}


Par avance merci de votre aide.
Modifié par tanguy (28 Oct 2005 - 16:31)
Bonjour,

En montant ton code avec l'extension Aadvark j'ai pu voir que le bloc UL avait une marge intérieure. Tu devrais pouvoir solutionner ce probleme en réduissant cela soit :

#menu ul {padding:0;}


soit en définissant dès le départ de ton code une propriété de ce genre là pour tous les éléments de ta CSS :


* {padding:0;}


L'étoile étant communément utilisée pour dire "all" dans toute sorte d'applications. Smiley cligne
Bonjour,
je remplacerais bien 
<div id="menu">
<ul>
bla bla bla
</div>
</div>
par
<ul id="menu">
bla bla bla
</div>
pour éviter de choper la divite Smiley smile
Modifié par zanzibar (28 Oct 2005 - 15:33)
Modérateur
zanzibar, je crois que tu as fais des erreurs dans ton exemple de code. Tu as remplacé le </ul> par un </div>.

Smiley smile
Modifié par Merkel (28 Oct 2005 - 15:48)
Bonjour et merci de vos réponses.

J'ai mis margin et padding 0 pour supprimer les marges par défaut et ça fonctionne.
Sujet clos
Aller à