[Résolu] Menu déroulant à onglet

Edit : Le script corrigé et fonctionnel est en fin de sujet

Ancien titre du sujet : J'ai presque fini mon menu mais deux choses m'échappe

Bonjour à tous,


Comme indiqué dans le titre du sujet j'ai presque fini mon menu horizontal mais deux coté technique m'échappe

Les sous menus on tous un joli décalage supérieur que je n'arrive pas à résorber.
Ensuite je me demande si il est possible qu'un contenu un peut long (bosnie-herzegovine) ne déforme pas son contenant en tenant sur plusieurs ligne.

Voici l'exemple en ligne... le CSS est incorporé dans le fichier et décomposé par élément (l'optimisation sera en phase finale)

http://essais.eurower.net/test.html

Je manque de piste de recherche, j'ai du faire une jolie erreur mais je ne vois pas où.

Merci par avance
Modifié par percherie (26 Nov 2008 - 18:58)

un petit souci avec ton top pour l'espace entre tes titres de menu et ta liste de menu.

#tete .menu_onglet .parent ul {
	list-style: none;
	position: relative;
	left: 0em;
	margin: 0px;
	padding: 0px;
	background: #C9B092;
	top: 1.78em;
}

pour ton pb de texte qui dépasse je pense qu'il faut tu donnes une taille fixe à tes colonnes (qui n'en sont pas justement c'est la le pb tu devrais t'aligner sur la taille de ton en-tête pour ta liste de pays)

#tete .menu_onglet .parent ul{
width: 150px;
}

#tete .menu_onglet .parent {
width: 150px;
display: inline;
float: left;
margin: 0px 0px 0px 2px;
}
Modifié par altenide (25 Nov 2008 - 23:21)

percherie a écrit :
Les sous menus on tous un joli décalage supérieur que je n'arrive pas à résorber.

Si tu supprimes le positionnement relatif des UL de second niveau, tu constates que ce décalage est causé par le lien de premier niveau, flottant, qui repousse le contenu du UL mais pas le UL lui-même. Le positionnement flottant fonctionne comme ça.

Quand tu décales ton UL vers le bas avec le positionnement relatif, il garde la même configuration que s'il n'était pas décalé. Le positionnement relatif fonctionne comme ça.

Et comme 1 + 1 = 2, tu obtiens ce décalage visuel.

Solution: ne pas utiliser le positionnement relatif pour décaler ce bloc. Un margin-top serait plus adapté.

pour ton pb de texte qui dépasse je pense qu'il faut que tu inverses la problématique : ce n'est pas la liste qui a des termes trop long mais ton titre qui ne s'ajuste pas à la longueur des items.

ex:

#menu { list-style-type: none; margin: 0; padding: 0; border: 0;}
#menu li{ float: left; margin: 0; padding: 0 0 0 0px ; border: 0;}
#menu .sousMenu{ list-style-type: none; margin: 0px ; padding: 0px ; border: 0;}
#menu .sousMenu li{ background-color:#ccc; float: none; margin: 0; padding: 0; border: 0;}
#menu li{ width:100px; background-color:#fff; float: left; margin: 0; padding: 5px ; border: 1;}
.monTitre { background-color:#6666FF; text-align:center;}

<ul id="menu">
 <li>
 <div class="monTitre">
 <a href="#">Est Europe</a>
 </div>
  <ul class="sousMenu">
   <li><a href="#">Pologne</a></li>
   <li><a href="#">Ukraine</a></li>
   <li><a href="#">Bosnie-Herzégovine</a></li>
  </ul>
 </li>
  
 <li>
 <div class="monTitre">
  <a href="#">Afrique</a>
  </div>
  <ul class="sousMenu">
   <li><a href="#">Afrique du sud</a></li>
   <li><a href="#">Gabon</a></li>
 </ul>
 </li>
</ul>

Modifié par altenide (25 Nov 2008 - 23:24)

Florent V. a écrit :

Quand tu décales ton UL vers le bas avec le positionnement relatif, il garde la même configuration que s'il n'était pas décalé. Le positionnement relatif fonctionne comme ça.

Et comme 1 + 1 = 2, tu obtiens ce décalage visuel.

Solution: ne pas utiliser le positionnement relatif pour décaler ce bloc. Un margin-top serait plus adapté.

Merci Florent, je cherchais du coté de l'élément parent sans prendre en compte que le positionnement relatif des éléments enfants pouvait créer le problème.

altenide a écrit :
pour ton pb de texte qui dépasse je pense qu'il faut que tu inverses la problématique : ce n'est pas la liste qui a des termes trop long mais ton titre qui ne s'ajuste pas à la longueur des items.

En effet je n'avais pas pris le problème dans le bon sens... ça m'a pris plus de temps à mettre en place mais j'ai enfin réussi et par la même occasion ça m'a permis de me passer de certains positionnement flottant, positionnement qui me créait un décalage.

Afin que vos conseils servent à d'autres personne je vais ajouter une réponse contenant le script du menu pour qu'il reste en dur dans le forum avant de marquer le sujet comme résolu

Sachant que j'ai eu un peut de mal, je me permet de poster en détail le script d'un menu avec sous menu avec la possibilité de la rendre déroulant avec les pseudo classe :hover et :focus

Cette possibilité n'est

Les deux images utilisent la technique des portes coulissante. Elles sont issue du tutoriel "Créer un menu à onglet avec CSS" de Normand Lamoureux : http://normandlamoureux.com/cours/css/

Le CSS est décomposé et non optimisé car encore en cours d'intégration au mais il fonctionne correctement.

CSS :

.menu_onglet {
	margin: 0px;
	list-style: none;
	font: 100% tahoma, arial, helvetica, "bitstream vera sans", sans-serif;
	padding: 0px;
	border-width: 0px;
}
.menu_onglet .parent {
	float: left;
	margin: 0px 0px 0px 2px;
	text-align: center;
	padding: 0px;
}
.menu_onglet .parent a {
	padding: 0px 0px 0px 6px;
	text-decoration: none;
	background: url(coin-gauche.png) no-repeat 0% -250px;
	margin: 0px;
	display: block;
}
.menu_onglet .parent#current a {
	background: url(coin-gauche.png) no-repeat 0% 0%;
}
.menu_onglet .parent a span {
	padding: 6px 6px 3px 0px;
	color: #ffffff;
	background: url(coin-droit.png) no-repeat 100% -250px;
	display: block;
}
.menu_onglet .parent#current a span {
	color: #333333;
	background: url(coin-droit.png) no-repeat 100% 0%;
}
.menu_onglet .parent a:hover {
  background: url(coin-gauche.png) no-repeat 0% -500px;
}
.menu_onglet .parent a:focus {
  background: url(coin-gauche.png) no-repeat 0% -500px;
}
.menu_onglet .parent a:hover span {
  background: url(coin-droit.png) no-repeat 100% -500px;
}
.menu_onglet .parent a:focus span {
  background: url(coin-droit.png) no-repeat 100% -500px;
}

/*sous menu*/
.menu_onglet .parent ul {
	list-style: none;
	margin: 0em;
	padding: 0px;
	background: #C9B092;
	text-align: left;
	display: none;
}
.menu_onglet .parent:hover ul {
	display: block;
}
.menu_onglet .parent:focus ul {
	display: block;
}
.menu_onglet .parent ul li a {
	float: none;
	background: url(none);
	display: block;
}
.menu_onglet .parent ul li a span {
	float: none;
	background: url(none);
}
.menu_onglet .parent ul li a:hover {
	background: #800000;
}
.menu_onglet .parent ul li a:focus {
	background: #800000;
}
.menu_onglet .parent ul li a:hover span {
	background: #800000;
}
.menu_onglet .parent ul li a:focus span {
	background: #800000;
}

HTML :

<ul class="menu_onglet">
  <li class="parent item54"><a href="/index.php?option=com_content&view=category&id=34&Itemid=54"><span>Europe du sud</span></a>
    <ul>
      <li class="item65"><a href="/index.php?option=com_content&view=article&id=48&Itemid=65"><span>Albanie</span></a></li>
      <li class="item66"><a href="/index.php?option=com_content&view=article&id=52&Itemid=66"><span>Texte plus grand que </span></a></li>
      <li class="item67"><a href="/index.php?option=com_content&view=article&id=55&Itemid=67"><span>Croatie</span></a></li>
    </ul>
  </li>
  <li class="parent item55"><a href="/index.php?option=com_content&view=category&id=35&Itemid=55"><span>Europe de l'est</span></a>
    <ul>
      <li class="item74"><a href="/index.php?option=com_content&view=article&id=46&Itemid=74"><span>Bulgarie</span></a></li>
      <li class="item75"><a href="/index.php?option=com_content&view=article&id=65&Itemid=75"><span>Moldavie</span></a></li>
    </ul>
  </li>
</ul>