28172 sujets

CSS et mise en forme, CSS3

Centrer un sous menu en fonction de la position du menu premier niveau

Bonjour,


J'essaye en vain d'obtenir un menu relativement facile à utiliser mais ce n'est pas si simple Smiley decu
Voici l'url : http://mysite.tld/

Je souhaiterai faire en sorte que le sous menu correspondant à un des menus du premier niveau soit centré par rapport à celui-ci.
Pour le moment je ne parviens à avoir quelque chose de potable que pour une partie du menu, en jouant avec les marges mais c'est loin d'être optimale.

Donc, comment puis je réaliser mon menu?


Merci de votre aide
Modifié par El-Cherubin (10 Feb 2011 - 10:57)
Salut,

Ton URL est inaccessible.

Pour le reste, si ton sous-menu est correctement imbriqué, tu peux tenter les marges automatiques.
Code (X)HTML
<ul id="menu">
  <li>
    <a href="1.html">1</a>
    <ul>
      <li><a href="1-1.html">1.1</a></li>
      <li><a href="1-2.html">1.2</a></li>
    </ul>
  </li>
  <!-- etc. -->
</ul>

Code CSS
#menu ul {
  width: 75%; /* On fixe une largeur autre que 100% ou auto... */
  margin: 0 auto; /* ... et des marges latérales automatiques */
}
mysite.tld

Hello,

Merci de ta réponse et de m'avoir signalé le souci du site, il est à nouveau accessible.
Un petit souci de configuration apache...

Donc pour le menu, il me semble qu'il est relativement bien imbriqué : 


 <div class="menu"> 
	<ul class="first_menu">
	
	<li><a href="mysite.tld/">Home<!--[if IE 7]><!--></a><!--<![endif]--><span></span></li>
	<li><a href="mysite.tld/who">Who<!--[if IE 7]><!--></a><!--<![endif]--><span></span><!--[if lte IE 6]><table><tr><td><![endif]--> 
			<ul class="submenu">
				<li><a href="mysite.tld/who/history-house">History of the House</a></li>
				<li><a href="mysite.tld/who/designers">Designers</a></li>
				<li><a href="mysite.tld/who/organigram">Organigram</a></li>
				<li><a href="mysite.tld/who/jobs">Jobs</a>
	</li>
			</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li>
	<li><a href="mysite.tld/what">What<!--[if IE 7]><!--></a><!--<![endif]--><span></span><!--[if lte IE 6]><table><tr><td><![endif]--> 
			<ul class="submenu">
				<li><a href="mysite.tld/what/french-know-how">French Know How</a></li>
				<li><a href="mysite.tld/what/our-spirit">Our Spirit</a></li>
				<li><a href="mysite.tld/what/our-values">Our Values</a></li>
			</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> 
	</li>
	<li class="active"><a href="mysite.tld/businesses">Businesses<!--[if IE 7]><!--></a><!--<![endif]--><span></span><!--[if lte IE 6]><table><tr><td><![endif]--> 
			<ul class="submenu">
				<li><a href="mysite.tld/businesses/buyers">Buyers</a></li>
				<li><a href="mysite.tld/businesses/buyers-kit-private-access">Buyers Kit - Private Access</a></li>
				<li><a href="mysite.tld/businesses/distributors">Distributors</a></li>
				<li><a href="mysite.tld/businesses/trade-show">Trade Show</a></li>
				<li><a href="mysite.tld/businesses/where-to-find-us">Where to find us</a></li>
			</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> 
	</li>
	<li><a href="mysite.tld/partners">Partners<!--[if IE 7]><!--></a><!--<![endif]--><span></span><!--[if lte IE 6]><table><tr><td><![endif]--> 
			<ul class="submenu">
				<li><a href="mysite.tld/partners/co-branding">Co-Branding</a></li>
				<li><a href="mysite.tld/partners/private-access">Financial Informations</a></li>
				<li><a href="mysite.tld/partners/franchise-licences">Franchises</a></li>
				<li><a href="mysite.tld/partners/invest-in-on-aura-tout-vu">Invest in on aura tout vu</a></li>
				<li><a href="mysite.tld/partners/licences">Licences</a></li>
				<li><a href="mysite.tld/partners/partnership">Partnership</a></li>
				<li><a href="mysite.tld/partners/support">Support</a></li>
				<li><a href="mysite.tld/partners/why-work-with-us">Why work with us</a></li>
			</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> 
	</li>			
	<li><a href="mysite.tld/press">Press<!--[if IE 7]><!--></a><!--<![endif]--><span></span><!--[if lte IE 6]><table><tr><td><![endif]--> 
			<ul class="submenu">
				<li><a href="mysite.tld/press/event-books">Event Books</a></li>
				<li><a href="mysite.tld/press/journalist-access">Journalist Access</a></li>
				<li><a href="mysite.tld/press/press-books">Press Books</a></li>
				<li><a href="mysite.tld/press/media-download">Press Kit + Web</a></li>
			</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> 
	</li>
	<li><a href="mysite.tld/contact">Contact<!--[if IE 7]><!--></a><!--<![endif]--><span></span><!--[if lte IE 6]><table><tr><td><![endif]--> 
			<ul class="submenu">
				<li><a href="mysite.tld/contact/contact-us-form">Contact Us Form</a></li>
				<li><a href="mysite.tld/contact/head-office">Head Office</a></li>
			</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> 
	</li>
	</ul>	  
	
	  <hr class="noscreen">

	  </div>


Je vais essayer ce que tu me proposes Smiley smile
Modifié par El-Cherubin (10 Feb 2011 - 10:58)
Bonjour/bonsoir.

Quelques propositions:

Pour cacher/montrer ton sous-menu :
utilise plutot left:-999em; et left:0; plutôt que visibility:hidden/visible;

Donne lui plutôt une largeur de 100% et un text-align:center;

Ne positionne pas les li en float ni display:block; mais plutot en display:inline/inline-block; (voir les liens aussi) et laisse les dans le flux naturel.

Ton sous-menu devrait alors rester lisible et centrer les liens .

GC
Bonjour,

Désolé pour le temps de réponse, j'ai eu quelque souci de connexion (changement d'opérateur et le bazar qui suit...)

J'ai bien essayé de modifier mon css en utilisant la propriété left mais je dois faire une/des erreurs car ça ne fonctionne pas, le sous menu disparait completement.

Donc pour le moment j'ai l'ancien menu, avec le css suivant :

	.menu {position:relative; z-index:10; font-family: 'Times New Roman', 'Geneva CE', lucida, sans-serif; padding: 7px 0; height: 70px; border: 1px solid #303030; border-right: none; border-left: none;}
.menu ul {padding:0; margin:0; list-style-type: none;}
 
.menu ul li {float:left; margin:6px 40px 0 0;   }
 
.menu ul li a, .menu ul li a:visited {
		  height: 30px;
		  font-size: 19px;
      	  font-weight: bold;
          display: block; 
          color: #fff;
          text-decoration: none;
          float: left; /*\*/ float:none; 
          padding: 0px 20px 0px 7px;
          line-height: 30px;
		  
}

.menu ul li span {
      	  font-size: 11px;
      	  font-weight: normal;
      	  color: #7c7c7c;
		  margin: 0 0 0 7px;
        }
		
 
.menu table {border-collapse:collapse; margin:0; padding:0; font-size:1em;}
 
.menu ul li ul {visibility:hidden; position:absolute; top:50px; margin:auto;}
 
.menu ul li:hover a,
.menu ul li a:hover {color:#fff; background:#252525;}
 
.menu ul li:hover ul,
.menu ul li a:hover ul {visibility:visible; width:900px; color:#fff; background: #000; }

.menu ul li:hover ul li,
.menu ul li a:hover ul li {margin: 0 0 0 8px; }

.menu ul li:hover ul.right_side li,
.menu ul li a:hover ul.right_side li {float:right; margin: 0 3% 0 8px;}
 
.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; left:0; top:30px; }
 
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {display:block; background:#000; color:#606060; font-size:13px; padding:0 5px 0 5px; border: none;}
 
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {background:#252525; color:#fff;}
 
.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {visibility:visible; color:#fff; background:#252525;}


Surement moyen d'optimiser ça je suppose...

Merci de vos conseils.

gc-nomade a écrit :

Pour cacher/montrer ton sous-menu :
utilise plutot left:-999em; et left:0; plutôt que visibility:hidden/visible;

Donne lui plutôt une largeur de 100% et un text-align:center;

Ne positionne pas les li en float ni display:block; mais plutot en display:inline/inline-block; (voir les liens aussi) et laisse les dans le flux naturel.

GC
Sujet clos
Aller à