28221 sujets

CSS et mise en forme, CSS3

Probleme positionnement menu en bas

Bloquée depuis 3 jours sur ce menu qui ne veut pas se positionner en bas de mon conteneur ! j'ai essayé avec bottom mais rien à faire, margin-top mais si je met une taille trop importante il m'augmente mon conteneur.. J'ai beau cherché et je ne vois absolument pas d'où vient le problème. Smiley rolleyes
Si quelqu'un à une idée..merci

<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#conteneur{ 
                 position:absolute;
                 left: 50%;
	    top: 50%;
	    border-color:#F5F5F5;
	    border-style:solid;
	    border-width:3px;
	    width:740px;
	    height:500px;
	    margin-top:-275px;
	    margin-left:-400px;
	  }

	#menu ul { 
                           list-style-type: none;
                           width: 100%; 
	               bottom:0;
		 }

             #menu li {
                           float:left;
		  margin-right:17px; 
                           list-style-type: none; }
   
            #menu a {           text-decoration: none;
			font-size:12px;
			width: 150px;
			height: 14px;
			display: block;
			text-align:center;
			border: 1px solid gray;
			color: #000;
			background:white;
                               }

                    #menu a:hover {
                                           background: #ff9900;
                                           border: 1px solid inherit; 
	                              color : white;
                                           }

</style>
</head>

<body>
<div id="conteneur">
    <ul id="menu">
	   <li><a href="">bonjour</a></li>
	   <li><a href="">au revoir</a></li>
	</ul>
</div>
</body>
</html>
littlesam a écrit :
Bah pas vraiment, la position absolue va mettre collé au bas de la page, pas au bas du conteneur...


"Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur."[*]

Car en l'occurrence, le conteneur est lui-même positionné.

[*] http://www.openweb.eu.org/articles/initiation_absolue/
Modifié le 05 Jan 2005 - 11:18
Extrait de Savoir utiliser et positionner les éléments en CSS
Utiliser les positions absolues, fixes et relatives a écrit :

Le bloc est placé par rapport à son parent s'il est lui-même positionné, ou alors par rapport au dernier Ancètre positionné (si aucun Ancètre n'est positionné, il se réfère à la page entière (balise body en HTML, html en XHTML).

Modifié le 05 Jan 2005 - 11:35
Stephan a écrit :
balise body en HTML, html en XHTML


Tilt ! C'est donc ça ! Smiley biggrin
Merci je suis (un tout petit peu) moins bête qu'il y a deux minutes.
Justement mon conteneur est l'ancetre de mon menu donc en mettant bottom:0; il devrait se positionner en bas de mon conteneur non ? Smiley confus
maysa a écrit :

Justement mon conteneur est l'ancetre de mon menu donc en mettant bottom:0; il devrait se positionner en bas de mon conteneur non ? Smiley confus

En principe, oui.

=> puisqu'il est le "dernier ancêtre positionné".
Modifié le 05 Jan 2005 - 12:27
fastclemmy a écrit :
#menu{ 
position:absolute;
bottom:0;
}


?


Cela fonctionne avec le code de fastclemmy Smiley cligne
si je rajoute 
#menu{ 
position:absolute;
bottom:0;
}

ça marche, le problème est que ce menu a un frère ainé et que je l'insère ça ne marche plus du tout ! 

<div id="content"> 
       <img src="maysa_2.jpg" id="image" alt="développeur Informatique"/>
       <ul id="menu"> 
        <li><a href="">A</a></li>	
	     <li><a href="">B</a></li>	
		 <li><a href="">C</a></li>
		 <li><a href="">D</a></li>
  	  </ul>
  
</div>

#image { margin-left:10px;
	     margin-top:10px;
       }
Smiley eek
Tu nous avais caché l'ensemble de la fratrie Smiley cligne , n'hésite pas à poster l'ensemble des éléments à ta disposition, car sinon il va être délicat de t'aider avec des extraits de ta page auquel tu ajoutes des éléments sans indications de style ou de positionnement, une page en ligne serait du meilleur effet sur l'ensemble des membres, dont je ne doute pas que l'un d'entres eux ait une solution.
Sujet clos
Aller à