Menu à taille limité
Fermé
pazogueye
-
Modifié par pazogueye le 20/08/2013 à 08:53
pazogueye Messages postés 5 Date d'inscription mercredi 10 octobre 2007 Statut Membre Dernière intervention 25 août 2013 - 23 août 2013 à 09:41
pazogueye Messages postés 5 Date d'inscription mercredi 10 octobre 2007 Statut Membre Dernière intervention 25 août 2013 - 23 août 2013 à 09:41
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
- Mode d'emploi chromecast - Guide
- Code personnel pole emploi - Forum Vos droits sur internet
- Montre polit mode d'emploi ✓ - Forum Accessoires & objets connectés
4 réponses
Sugel
Messages postés
4070
Date d'inscription
jeudi 18 août 2011
Statut
Membre
Dernière intervention
19 juin 2017
724
20 août 2013 à 09:15
20 août 2013 à 09:15
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.
pazogueye
Messages postés
5
Date d'inscription
mercredi 10 octobre 2007
Statut
Membre
Dernière intervention
25 août 2013
21 août 2013 à 12:06
21 août 2013 à 12:06
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
pazogueye
Messages postés
5
Date d'inscription
mercredi 10 octobre 2007
Statut
Membre
Dernière intervention
25 août 2013
23 août 2013 à 09:41
23 août 2013 à 09:41
Bonjour !
Merci Pitet. mon problème est réglé.
--
Merci Pitet. mon problème est réglé.
--