28173 sujets

CSS et mise en forme, CSS3

Centrer les liens de mon sous-menu ?

http://users.skynet.be/planetebleue/temp/smiley/smile_bounce.gif Bonjour à tous, voilà la suite des aventures "dragoeco apprends le CSS" et aujourd'hui l'épisode est intitulé : "Mais pourquoi j'arrive pas à centrer les boutons de mon sous-menu?". Smiley lol D'après moi, le fait d'avoir ajouté 

div#nav li:hover ul {
	display:block;
	background:#F90;
	width:750px;
	left:0; }

ce qui me permets d'avoir une barre de sous-menu adapté à la largeur de mon div et qu'il se positionne depuis le bord gauche de celui-ci, m'empêche de pouvoir centrer ce qu'il contient. J'ai bien essayé de créer une nouvelle ligne

div#nav li.bt2 {
	margin-left:0;
	margin-right:0; }

et de varier les tentatives avec un "clear", un "float" et même un "z-index" (je découvre à peine cette fonction) mais je vois pas trop. Auparavant lorsque je ne faisait que du HTML il y avait la possibilité de d'appliquer un centrage à l'intérieur d'un élément avec un bête align="center". Mais en CSS existe-t-il une commande équivalente? Pardonnez la probable naïveté de cette question mais je suis toujours en mode "débutant" là... MerquI ^^

Menu visible ici

HTML
<div id="nav">
<ul class="lgn1">
  <li class="bt0"><a>Accueil</a></li>
  <li class="bt1_tri"><a href="#">Entreprise</a>
    <ul class="lgn2">
      <li class="bt2"><a href="#">Historique</a>
      <li class="bt2"><a href="#">Organigramme</a>
      <li class="bt2"><a href="#">Activités</a>  
      <li class="bt2"><a href="#">Actualités</a>
      <li class="bt2"><a href="#">Recrutement</a>      </li>
    </ul>
  </li>
  <li class="bt1"><a href="#">Production</a></li>
  <li class="bt1"><a href="#">Création</a></li>
  <li class="bt1_tri"><a href="#">Diffusion</a>
    <ul class="lgn2">
      <li class="bt2"><a href="#">Agricole</a>
      <li class="bt2"><a href="#">Espace vert</a>
      <li class="bt2"><a href="#">Jardin</a>      </li>
    </ul>
  </li>
  <li class="bt1"><a href="#">Contact</a></li>
</ul>
</div>


CSS
div#nav {
	position:relative;
	width:750px;
}
div#nav ul {
	margin:inherit;
	list-style-type:none;
}
div#nav li {
	float:left;
}
div#nav li.bt1 {
	margin-left:2px;
}
div#nav li.bt1_tri {
	margin-left:2px;
}
div#nav li ul {
	padding:0;
	margin:0;
	position:absolute;
	display:none;
}
div#nav ul li a {
	display:block;
	padding:7px 5px 1px 5px;
	width:100px;
	line-height:20px;
	text-decoration:none;
	text-align:center;	
}
div#nav li:hover ul {
	display:block;
	background:#F90;
	width:750px;
	left:0;
}
div#nav ul.lgn1 li.bt0 {
	background-image:url(img/ong.gif);
	font-family:Verdana;
	font-weight:bold;
	font-size:12px;
	color:#000;
}
div#nav ul.lgn1 li.bt1 a {
	background-image:url(img/ong.gif);
	background-position:0px -28px;
	font-family:Verdana;
	font-weight:bold;
	font-size:12px;
	color:#CCC;
}
div#nav ul.lgn1 li.bt1_tri a {
	background-image:url(img/ong.gif);
	background-position:0px -84px;
	font-family:Verdana;
	font-weight:bold;
	font-size:12px;
	color:#CCC;
}
div#nav ul.lgn1 li.bt1 a:hover{
	background-image:url(img/ong.gif);
	background-position:0px -56px;
	font-family:Verdana;
	font-weight:bold;
	font-size:12px;
	color:#333;
}
div#nav ul.lgn1 li.bt1_tri a:hover{
	background-image:url(img/ong.gif);
	background-position:0px -56px;
	font-family:Verdana;
	font-weight:bold;
	font-size:12px;
	color:#333;
}
div#nav li.bt2 {
	margin-left:0;
	margin-right:0;
}
div#nav ul.lgn2 li.bt2 a {
	background:#F90;
	padding-top:0px;
	margin:3px;
	font-family:Verdana;
	font-size:10px;
	color:#000;
}
div#nav ul.lgn2 li.bt2 a:hover{
	background:url(img/fondmenu.png);
	font-family:Verdana;
	font-size:10px;
	color:#FFF;
}

Modifié par dragoeco (28 Jan 2008 - 12:39)
En attendant, j"ai ajusté mon premier sous-menu qui contient 5 onglets afin qu'il prenne toute la largeur et j'ai ajouté deux onglets vides à mon deuxième sous-menu, qui lui en comptait seulement trois, pour équilibrer.
Donc 2 fois (une à la première ligne et une à la dernière)

HTML
<li class="btx"><a href=""></a></li>


Et dans le CSS
div#nav ul.lgn2 li.btx a {
	width:132px;
	padding-top:0px;
	margin:3px;
	background:#F90;
	margin-left:0;
	margin-right:0;
}
div#nav ul.lgn2 li.btx a:hover {
	background:none;
}

C'est du provisoire, en attendant de trouver mieux... Smiley langue
Modifié par dragoeco (29 Jan 2008 - 10:30)
Sujet clos
Aller à