[Problème] Soucis Menu principal

[milousebw]

Bonjour à tous !

J'ai un petit soucis sur le menu principal d'un site que je viens de faire.

Adresse : http://www.lespeyres.fr

En effet, je n'arrive pas à élargir le menu pour que le menu "Contact" se mette à droite de "Tarifs" et non pas en dessous de "Accueil".

Merci d'avance pour votre aide

[daneel]

Re : Soucis Menu principal

Bonsoir,

Dans l'administration du template (extensions/gestion des templates/theme1016), cliquez sur l'onglet layout
il faut définir la zone du logo sur 3 et le menu sur 9 au niveau "Top Positions"

glisser le curseur pour diminuer la taille de la zone a (le logo) par rapport à la zone b (le menu)




cliquer sur "save" et le tour est joué. Ainsi le menu sera sur une ligne : http://prntscr.com/4v9u2n

Pour info, l'interface de votre template est sous le framework Gantry,
cela permet justement de régler ces petits détails depuis l'administration de Joomla.

[PhilJ]

Re : Soucis Menu principal

Bonjour,

je n'arrive pas à élargir le menu pour que le menu "Contact" se mette à droite de "Tarifs" et non pas en dessous de "Accueil".

...Ce que vous pourriez envisager aussi (mais pas seulement, comme vous le dit daneel en répondant à votre question), c'est de réduire la largeur de votre logo — actuellement 600 px — par exemple en déplaçant le texte « Chambres d'hôtes » en dessous du nom de votre domaine.

Cela permettrait peut-être à votre site de se conformer au standard 1024 (= largeur 1008 px au total).

Il vous faudrait aussi retirer la définition #rt-logo { background: left: -278px; }, qui fait que seules les 4 dernières lettres de votre domaine apparaissent (= "yres") sur ce standard, qui est aussi celui des tablettes (iPad en mode paysage).


Cordialement,



PhilJ

[milousebw]

Re : Soucis Menu principal

Merci beaucoup pour ces réponses ! Mon problème est résolu mais pour la remarque de PhilJ, j'ai réduit le logo mais comment vérifier que la largeur ne dépasse pas les fameux 1008 px ?

Et une autre question, dans la rubrique "Livre d'or", impossible de mettre les commentaires du plus récent au plus anciens ! J'utilise le plugin Vitabook mais je n'arrive pas à trouver l'option pour inverser l'ordre !

Une dernière chose, dans la rubrique "Contact", j'ai les coordonnées que je ne peux pas étendre sur une ligne, le cadre étant trop petit ! Comment l'agrandir ?

Merci encore pour précieuse aide !

[PhilJ]

Re : Soucis Menu principal

Bonjour,

pour la remarque de PhilJ, j'ai réduit le logo mais comment vérifier que la largeur ne dépasse pas les fameux 1008 px ?

...D'abord l'explication : 1008 px = 1024 px – 16 px, 1024 px étant la largeur standard sur le web (héritée des bons vieux écrans 4 / 3, mais pas seulement), et 16 px étant la largeur standard de l'ascenseur vertical sur PC.

Sur iPad, en mode paysage, comme sur toute tablette, il n'y a pas d'ascenseur. Donc la largeur de l'écran est effectivement de 1024 px.

Conteneur principal du template :

Avec un template comme le vôtre, basé sur le framework Gantry, le conteneur principal (= #body-wrapper .rt-container) a une largeur de 960 px, un chiffre magique car très divisible (par 2, par 3, par 4, par 5, par 6...) — avec une marge de 24 px de chaque côté : 960 + (2 X 24) = 1008.

Concernant la zone contenant le logo et le menu, c'est exactement 960 px, répartis ainsi : zone logo (.rt-grid-3) = 240 px, marges comprises, et zone menu (.rt-grid-9) = 720 px, marges comprises également. Le total fait bien 240 + 720 = 960 px.

Pour comprendre encore mieux : .rt-grid-3 signifie 3 / 12^e du container, donc ici 960 X 3 / 12 = 240 px. Et, vous l'aurez deviné, c'est sûr, .rt-grid-9 signifie 9 / 12^e du container, donc ici 960 X 9 / 12 = 720 px.


Zone de contenu :

Finalement, avec les marges internes, on arrive, selon les cas, à une largeur utile de 940 ou de 930 px pour la zone de contenu.


----------------------

Pour vérifier qu'un site « tient » correctement dans la largeur standard 1024, le plus simple est d'utiliser la combinaison de touches CTRL+MAJ+M (M comme mobile) avec Firefox.

En haut à gauche, un menu permet de sélectionner le type d'écran simulé. Choisissez 768 X 1024, c.-à-d. le format de l'iPad. Vous passerez ainsi en largeur 768 px (= iPad en mode portrait). Pour passer en 1024 px, il suffit de cliquer la flèche symbolisant un basculement située à côté du menu. Si vous voyez toute votre page, c'est qu'un utilisateur possédant un écran 1024 (comme l'iPad en mode paysage) la voit correctement lui aussi.

Pour sortir de ce mode M : cliquez ECHAP (ou bien retapez CTRL+MAJ+M, ou bien cliquez la petite croix en haut à gauche).

Pour 1008 px, c'est plus délicat, à moins de simuler cette largeur manuellement dans le mode Mobile de Firefox. Ou alors, de faire comme moi, c.-à-d. d'utiliser systématiquement un écran 4 / 3 (= un bon vieux 17" ).


----------------------

Pour votre site :

Votre logo a maintenant une largeur plus raisonnable (300 px contre 600 px auparavant), et vous n'êtes donc pas loin d'avoir rétabli une largeur correcte, en suivant ce conseil en même temps que celui de daneel. Du moins sur desktop / laptop (= PC de bureau / PC portable).

Un des soucis est que la largeur prévue par ce template (ou par le réglage de ce template) pour le logo est de 220 px (sans compter une marge, à gauche et à droite du conteneur #rt-logo, de 10 px).

Avec Firebug, on voit bien que le logo (largeur 300 px) se trouve dans une zone dont le parent a une largeur définie à 220 px :
—

#body-wrapper .rt-container .rt-grid-3 {
—width: 220px;
}

—
C'est un peu comme si une armoire (300 px) était censée tenir dans le coffre d'une petite voiture (220 px).

Mais si la compatibilité avec les appareils mobiles est secondaire pour vous, vous pouvez vous satisfaire de ce résultat.

Pour que ce soit parfait sur desktop / laptop, vous pouvez cependant corriger de quelques pixels, à vrai dire en retirant seulement un seul malheureux pixel à droite des liens de menu :
—

ul.sf-menu > li {
—margin-right: 39px; /* au lieu de 40px actuellement */
}

—
Comme il n'est pas recommandé de modifier les fichiers d'origine du template, il vaut mieux faire ces modifications (appelées surcharges, overrides en anglais) dans un fichier spécial, à part.

Le framework Gantry sur lequel s'appuie votre template prévoit cela nativement :

Créez un fichier texte avec votre bloc notes (= Notepad ou Notepad2 ou Notepad++, mais surtout pas avec un traitement de textes) que vous appelerez theme1016-custom.css, c'est-à-dire : le nom de votre dossier de template + "-custom.css". Collez-y la directive CSS ci-dessus (ainsi que toutes les autres modifications que vous souhaitez), puis envoyez ce nouveau fichier par FTP dans le dossier templates/theme1016/css. Gantry saura le trouver et l'utiliser.

Rafraîchissez votre page (F5, ou bien, si nécessaire, rafraîchissez en vidant le cache, avec CTRL+F5).

----------------------

autre question, dans la rubrique "Livre d'or", impossible de mettre les commentaires du plus récent au plus anciens ! J'utilise le plugin Vitabook mais je n'arrive pas à trouver l'option pour inverser l'ordre

...Je donne ma langue au chat car je ne connais pas cette extension — qui semble d'ailleurs peu documentée sur le site de l'éditeur :-\


----------------------

Une dernière chose, dans la rubrique "Contact", j'ai les coordonnées que je ne peux pas étendre sur une ligne, le cadre étant trop petit ! Comment l'agrandir ?

...En effet, la largeur de la zone d'adresse est définie à 50 % de la largeur utile, celle-ci étant ici définie à 930 px.

Cependant, cette définition se fait assez grossièrement :
—

#contact-form-cont,

#contact-address,
.contact-misc p {
—width: 50%;
}

—
Étant donné que vos coordonnées se trouvent dans une balise paragraphe, donc <p>, la largeur disponible est donc de 50 %, mais il s'agit de 50 % ...du conteneur parent, c.-à-d. #contact-address, dont la largeur est déjà elle-même définie à 50 % de la largeur de la page.

Autrement dit : #contact-address a une largeur de 930 X 50% = 465 px, et vos coordonnées doivent se contenter de la moitié de ces 50 %, soit 465 / 2 = 233 px, ce qui ne suffit pas en l'occurrence, car votre adresse demande une largeur d'au moins 268 px.

=> La solution est toute simple :
—

.contact-misc p {
—width: auto; /* au lieu de 50% */
}

Vous pourriez aussi, c'est logique, mettre : width: 100%;

Ajoutez cette directive au fichier theme1016-custom.css. Renvoyez le fichier sur le serveur dans le dossier templates/theme1016/css.

Rafraîchissez votre page (F5, ou bien si nécessaire CTRL+F5).



Cordialement,



PhilJ