C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Compte à Rebours
Mar 19 Fév 2019, 11:51 par TiGraou

» [RPG] Fiche personnage avec bannière latérale
Mar 19 Fév 2019, 11:42 par TiGraou

» Mettre la ChatBox en spoiler
Dim 17 Fév 2019, 18:47 par Backflip

» Effet de volet glissant sur un bloc
Ven 15 Fév 2019, 10:43 par Kanala

» Barre(s) Hitskinienne
Lun 11 Fév 2019, 23:00 par wildheart.

» Fond de message
Ven 08 Fév 2019, 19:55 par Scratpub

» [PA] Message d'Accueil Simple
Ven 08 Fév 2019, 16:34 par Scratpub

» [Plugin] Effet rollover sur une image
Dim 03 Fév 2019, 07:48 par .lysaivin


Partagez | 
 

Largeur de menu

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://www.sofia.nc/
{ Membre }
{ Membre }

Masculin Messages : 2



Bonjour,

Tout d'abord, je tiens à m'excuser si la question a déjà été abordée mais ma recherche a remonté tellement de résultats que je n'ai pas eu le courage de consulter chaque sujet.

Je planche sur une barre de menu depuis quelques jours. J'ai trouvé du code CSS un peu partout, étant moi-même novice. Je rencontre un souci de largeur que je ne parviens pas à régler. Voici le CSS :


Code:
ol, ul {
  list-style: none;
}

nav {
  height: 44px;
}

.nav {
  margin: 200px auto;
  width: 1200px;
  text-align: center;
}
.nav a {
  display: block;
  text-decoration: none;
}
.nav > li {
  float: left;
  font-family: "OpenSans Semibold";
}

.nav > li > a {
  height: 44px;
  line-height: 44px;
  padding: 0 20px;
  color: #595959;
  text-decoration: none;
  text-shadow: 0 1px white;
  background-colour: rgba(0, 0, 0, 0.05);
  border: 1px solid;
  border-color: #cfcfcf #d6d6d6 #c8c8c8;
  background-image: url("../img/bg.png");
  -webkit-box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1);
}
.nav > li > a:hover {
  color: #539f07;
  text-shadow: 0 1px white, 0 0 20px white;
}
.nav > li.active > a, .nav > li > a:active, .nav > .dropdown:hover > a {
  color: #539f07;
  text-shadow: 0 1px white, 0 0 20px white;
}
.nav a.icon {
  position: relative;
  width: 40.8px;
  padding: 0;
}
.nav a.icon > span {
  display: block;
  position: absolute;
  top: 14px;
  left: 12px;
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
}
.nav a.icon.home > span {
   background-image: url("../img/icons.png");
}

.dropdown {
  position: relative;
  text-align: center;
}
.dropdown:hover ul {
  display: block;
}
.dropdown ul {
  display: none;
  position: absolute;
  left: -1px;
  padding: 0 0 5px;
  white-space: nowrap;
  color: #595959;
  text-shadow: 0 1px white;
  border: 1px solid;
  border-color: #cfcfcf #d6d6d6 #c8c8c8;
  background-image: url(../img/bg.png);
  -webkit-box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1);
}
.dropdown ul:last-child {
  border-bottom-width: 1px !important;
  border-bottom-color: #c6c6c6;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.dropdown ul.large {
  width: auto;
}
.dropdown li {
  display: block;
  padding: 0 20px;
  height: 44px;
  vertical-align: central;
  overflow: visible;
  font-family: "OpenSans Light";
}

.dropdown li a {
  color: #555;
  padding: 8px 18px;
  margin: 0 -18px;
}
.dropdown li a:hover {
  color: #539f07;
  text-shadow: 0 1px white, 0 0 20px white;
}

Mon problème est que je voudrais que la largeur de mes menus principaux s'adapte à la largeur des sous-menus qui leurs sont rattachés lorsqu'elle est plus importante et ce en évitant tout retour à la ligne du texte et vice versa.

Des idées ?
MessageSujet: Largeur de menu   Mar 17 Juin 2014, 04:00
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.dexx-creative-studio.fr
DexX
{ Membre }
{ Membre }

Masculin Messages : 57



Salut,

Tu aurai le code HTML associé au menu ?


La patience mène à tous, il faut juste savoir attendre
MessageSujet: Re: Largeur de menu   Mar 17 Juin 2014, 04:42
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.sofia.nc/
{ Membre }
{ Membre }

Masculin Messages : 2



Oui, pardon. Voici :

Code:
<body>
<nav>
<ul class="nav">
  <li><a class="icon home" href="#">
  <span>Home</span></a></li>
  <li class="dropdown">
    <a href="#">Éducation</a>
    <ul>
      <li><a href="#">Location et maintenance</a></li>
      <li><a href="#">E. N. T.</a></li>
      <li><a href="#">Tableaux Blancs Interactifs</a></li>
    </ul>  
  </li>
  <li class="dropdown">
    <a href="#">Entreprises</a>
     <ul>
      <li><a href="#">Location et Maintenance</a></li>
      <li><a href="#">Infogérance</a></li>
      <li><a href="#">Monitoring</a></li>
      <li><a href="#">Audit</a></li>
      <li><a href="#">Conseil</a></li>
      <li><a href="#">Personnel en régie</a></li>
      <li><a href="#">Logiciels de gestion</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#">Nos partenaires</a>
    <ul>
      <li><a href="#">Impero</a></li>
      <li><a href="#">Licence-PC</a></li>
      <li><a href="#">Microsoft</a></li>
      <li><a href="#">Quadratus</a></li>
    </ul>
  </li>
  <li><a href="#">Télémaintenance</a></li>
  <li class="dropdown">
    <a href="#">À propos</a>
    <ul>
      <li><a href="#">Qui sommes-nous ?</a></li>
      <li><a href="#">L'équipe</a></li>
      <li><a href="#">Nos références</a></li>
    </ul>
  </li>  
  <li><a href="#">Nous contacter</a></li>
</ul>
</nav>
</body>
MessageSujet: Re: Largeur de menu   Mar 17 Juin 2014, 05:08
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Bonsoir AlexandreC,
Le problème est-il toujours d'actualité ?


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Largeur de menu   Dim 20 Juil 2014, 18:50
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Largeur de menu   
Revenir en haut Aller en bas
 

Largeur de menu

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Largeur et endroit du menu déroulant
» Largeur des boutons dans le menu
» largeur de trace
» menu déroulant et opacité
» Menu avec onglet au passage de la souris

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit