menu à taille limité Fermé

Question

Bonjour !
je cherche de l'aide pour faire en sorte que la taille des éléments du menu top de mon Template ai une largeur limité et que une fois atteint cette limite les titres de ces menu aille automatiquement à la ligne (à peut prêt comme ici : http://www.priceminister.com/ ).
Merci
voici mon site : http://www.loosoxla.com/test



Configuration: Windows 7 / Chrome 25.0.1364.97

Sugel · Answer

Salut :) Ce n'est pas possible uniquement en CSS, et sur le site de price minister que tu cite en exemple, ils ont simplement mis une balise
qui marque un retour à la ligne entre les deux mots des titres.

pazogueye · Answer

Merci Sugel Si je souhaite utilisé la même méthode dans quel fichier de mon site devrait-je ajouté la balise
(mon site est en opencart). www.loosoxla.com/test --

Pitet · Answer

Salut,

Voici une solution en css qui devrait convenir.

Remplace dans ton fichier stylesheet.css ce code :


#wrapper_menu .menu li.fullwidth > a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-family: Verdana,Arial,Sans-Serif;
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    padding: 10px 8px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

#wrapper_menu .menu li.fullwidth {
    float: left;
    list-style: none outside none;
    margin: 0;
    position: static !important;
}


par celui-ci :


#wrapper_menu .menu li.fullwidth > a {
    width: 100px;
    color: #FFFFFF;
    display: inline-block;
    font-family: Verdana,Arial,Sans-Serif;
    font-size: 10px;
    line-height: 14px;
    padding: 0 8px;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
}

#wrapper_menu .menu li.fullwidth {
    float: left;
    height: 40px;
    line-height: 40px;
    list-style: none outside none;
    margin: 0;
    position: static !important;
    text-align: center;
}


Quelques explications:

Pour commencer on définie une largeur pour nos éléments de menu (width: 100px) et on supprime la propriété "white-space: nowrap" pour permettre le retour à la ligne.
Le reste des modifications consistent à centrer correctement les textes.
Sur nos éléments de menu :
- on supprime la propriété "float: left" et on change le display: inline-block.
- on supprime les padding top et bottom (padding: 0 8px;) et on ajuste alors la hauteur (height: 40px)
- on change le line-height à 14px pour que nos retours à la ligne soit correctement affichés
- on ajoute vertical-align: middle pour que les textes soit verticalement centrés
Sur les balises li.fullwidth :
- on définie la hauteur et le line-height à 40px pour que l'alignement vertical des textes soit correct
- j'ai ajouté un text-align: center pour centrer horizontalement


J'espère que cette solution pourra vous aider.

Bonne journée

pazogueye · Answer

Bonjour !
 Merci Pitet. mon problème est réglé.
--

Menu à taille limité

4 réponses

Discussions similaires