Menu à taille limité
pazogueye
-
pazogueye Messages postés 5 Date d'inscription Statut Membre Dernière intervention -
pazogueye Messages postés 5 Date d'inscription Statut Membre Dernière intervention -
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
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
A voir également:
- Pôle emploi -dépassement de la taille des pièces jointes
- Comment réduire la taille d'un fichier - Guide
- Mode d'emploi - Guide
- Telecharger toutes les pieces jointes gmail - Guide
- Identifiant pôle emploi 7 chiffres - Forum Réseaux sociaux
- Reduire taille image - Guide
4 réponses
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.
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
</br>
qui marque un retour à la ligne entre les deux mots des titres.
Merci Sugel
Si je souhaite utilisé la même méthode dans quel fichier de mon site devrait-je ajouté la balise </br> (mon site est en opencart). www.loosoxla.com/test
--
Si je souhaite utilisé la même méthode dans quel fichier de mon site devrait-je ajouté la balise </br> (mon site est en opencart). www.loosoxla.com/test
--
Salut,
Voici une solution en css qui devrait convenir.
Remplace dans ton fichier stylesheet.css ce code :
par celui-ci :
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
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