alignement ligne de menu

[Bege]

Bonjour à tous,

je voudrais aligne le bas de la ligne de menu avec la hauteur de l'image d'arrière plan, par exemple sur cette copie d'écran, pour faire remonter la ligne indiquée par la flèche rouge jusqu'au trait qui est juste au dessus :

voilà l'adresse de la page : http://www.rouhling.net/portail/

j'ai pourtant essayer de trouver dans quel fichier faire la modification avec firebug ou "examiner l'élément" mais je ne trouve pas

merci pour vos conseils

[Rajoz]

Re : alignement ligne de menu

Bonjour Bege,

Je vois deux solutions.

1) Changer la position du menu

La position du menu est définie par sa position top (en rouge ci-dessous) dans /portail/templates/beez3/css/position.css (ligne 139 chez moi). Essayer différentes valeurs (4.2em, 4.3em, etc.) jusqu'à trouver la meilleure position :

#header ul {
    position: absolute;
    left: 0;
    [COLOR=#ff0000]top: 5em;[/COLOR]
    right: 0;
    display: block;
    margin: 0 0 1px 0;
    text-align: right;
    list-style-type: none;
    padding: 10px 0
}

2) Adapter l'image

Plutôt que de modifier le menu et l'alignement, il est peut-être plus simple de modifier l'image qui n'est pas alignée avec le bas du menu (environ 10px) ni avec le bas du bandeau ROUHLING.NET (environ 2px). Cette image est définie dans /portail/templates/beez3/css/nature.css (lignes 155 à 175) :

body
{
  background: #fff url(../images/nature/[COLOR=#ff0000]header_outer.gif[/COLOR]) repeat-x left 0;
  color: #333;
  font-family: arial, helvetica, sans-serif;
}

Cette image qui est dans /portail/templates/beez3/images/nature/header_outer.gif est assez simple pour pouvoir facilement modifier la hauteur des deux zones bleues :


Amicalement,
Rajoz

[Bege]

Re : alignement ligne de menu

alors j'ai essayé la première solution, mais en mettant "4em" ça remonte de trop, j'ai donc modifié l'image, c'est bon, faut juste que je la refasse bien parce que comme c'est un dégradé faut que je m'y prenne autrement avec toshop

merci à toi

[Rajoz]

Re : alignement ligne de menu

Bonjour Bege,

en mettant "4em" ça remonte de trop

Juste pour info, on peut mettre des décimales pour être plus précis, comme j'avais proposé : 4.2em, 4.25em, 4.3em etc.

Si la solution de l'image fonctionne, tu peux mettre le post en "réglé".

Amicalement,
Rajoz

[Bege]

Re : alignement ligne de menu

ah ben oui, j'avais essayé avec une virgule, mais en mettant un point ça fonctionne très bien, et je préfère ça que la modification de l'image, c'est super! merci beaucoup!

[edit] j'ai même bien pu affiner en mettant 4.35

[Bege]

Re : alignement ligne de menu

Hello, je rouvre ce sujet car après la mise à jour tout était de nouveau complètement décalé, j'ai mis la valeur de TOP: 0em à zéro mais ce n'est pas assez, je pensais mettre une valeur négative mais à priori ça ne fonctionne pas,
que faire?
c'est par ici :

http://www.rouhling.net/portail/

merci pour ta patience

[Rajoz]

Re : alignement ligne de menu

Bonjour Bege,

après la mise à jour tout était de nouveau complètement décalé

Pour qu'un template de Joomla! comme Beez3 ne soit pas écrasé lors d'une mise à jour il faut toujours travailler sur une copie : Extensions > Gestion des templates > Templates > Beez3 Détails et fichiers > Copier le template

Les outils pour analyser les modifications à faire dans le CSS sont : Firebug pour Firefox, Inspecter l'élément avec Chrome. C'est d'ailleurs ce dernier que je viens d'utiliser pour faire mes propositions de modifications.

Mes propositions n'ont été testées que via l'outil de Chrome, il se peut donc qu'il y ait encore à affiner quelques valeurs pour un meilleur résultat.

Les numéros de ligne sont ceux que je vois chez moi, ils peuvent être un différents dans le fichier, en particulier pour nature.css qui m'apparaît avec de nombreux sauts de ligne.

1) Remonter le bandeau Ruhlinger.net pour corriger l'écart en bas

Dans positions.css ligne 295 remplacer margin: -7px 0 0 -30px; par margin: -10px 0 0 -30px;
Résultat :

#logo img {
    display: block;
    margin: [COLOR=#ff0000]-10px[/COLOR] 0 0 -30px;
}

2) Mettre le menu sur toute la largeur pour ne pas que l'on voit l'écart à gauche et à droite

Dans layout.css ligne 730 remplacer margin: 0 10px; par margin: 0 0 0 2px;
Résultat :

#header ul.menu {
    padding: 0;
    width: auto;
    text-align: left;
    display: block;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    margin: [COLOR=#ff0000]0 0 0 2px;[/COLOR]
}

3) Réduire la hauteur des éléments du menu pour diminuer la hauteur du menu

Dans nature.css il faut remplacer à plusieurs endroits padding: 10px; par padding: 7px 10px; (réduction du padding des éléments en haut et en bas). Cette réduction pourrait impacter aussi la hauteur des niveaux suivants de menu s'il y en avait un jour.

ligne 639

#header ul.menu li a:link,
#header ul.menu li a:visited
{
    color:#fff;
    border:0;
    border-right:solid 1px #237D85;
    background:transparent;
    padding: [COLOR=#ff0000]7px[/COLOR] 10px ;
}

ligne 675

#header ul.menu li a:hover,
#header ul.menu li a:active,
#header ul.menu li a:focus
{
    color:#333;
    background:#bddfb3;
    padding: [COLOR=#ff0000]7px[/COLOR] 10px
}

ligne 711

#header ul li.active a:link,
#header ul li.active a:visited
{
    color:#333;
    border-right:solid 1px #237D85;
    background:#bddfb3 !important;
    padding: [COLOR=#ff0000]7px[/COLOR] 10px  ;
}

Amicalement,
Rajoz

[Bege]

Re : alignement ligne de menu

merci pour ton aide, ça a fonctionné.

Et je vais suivre tes conseils en faisant une copie du template, mais je vois que j'avais déjà du faire des essais et j'ai plusieurs Beez3, par exemple un beez3_copie, comment faire pour le supprimer?
j'ai été voir dans "Détails et fichiers" et j'ai ce message :
Alerte

Enregistrement relatif à l'extension non trouvé dans la base de données

[edit]
alors je viens de faire une copie de beez3 que j'ai nommée "2014", mais tout est écrit en Anglais dans le template, j'ai pu louper quoi?

[Rajoz]

Re : alignement ligne de menu

Bonjour Bege,

Comment as-tu fait la copie du template ?
beez3_copie correspond-t-il à une simple copie des fichiers (donc sans véritable installation) ou à une copie du template comme indiqué dans mon post précédent ?
Perso, je n'ai jamais eu ce type de problème et pourtant je fais souvent des copies/suppressions ne serait-ce que pour tester les modifs quand je réponds à un post.

Pour supprimer un template :

• Extensions > Gestion des extensions > Gestion
• Filtre sur type = Template
• Sélectionnez la case à cocher du template à supprimer
• cliquer sur Désinstaller dans la barre d'outils

Si ça ne marche pas et que le problème persiste, je recommande de clore cette conversation sur "Alignement ligne de menu" par un "Réglé" et d'en ouvrir une autre avec un intitulé du type "Désinstaller un template" pour que davantage de personnes puissent aider.

Amicalement,
Rajoz

[Bege]

Re : alignement ligne de menu

oui oui j'ai fais la copie comme tu me l'as indiqué plus haut : "Extensions > Gestion des templates > Templates > Beez3 Détails et fichiers >"

Pour la suppression des templates (copies précédemment créées) j'ai bien fais aussi comme tu l'indiques, mais certains n'apparaissent pas, je vais peut être tenter la suppression par ftp?

et oui, si ça ne fonctionne pas j'ouvrirais un autre sujet.

Mais donc pour en revenir à mon problème d'images et d'alignement etc. donc tu me confirme que si j'utilise la copie du template il n'y aura plus ces soucis lors d'une prochaine mise à jour, c'est bien ça?

[Rajoz]

Re : alignement ligne de menu

Mais donc pour en revenir à mon problème d'images et d'alignement etc. donc tu me confirme que si j'utilise la copie du template il n'y aura plus ces soucis lors d'une prochaine mise à jour, c'est bien ça?

C'est tout l'intérêt de travailler sur une copie, elle est installée comme si c'était un nouveau template. Joomla! mettra à jour les fichiers de ses templates par défaut mais pas des autres, copiés ou installés.

Voir la documentation sur http://docs.joomla.org/J3.3:Modifyin...omla!_Template

Amicalement,
Rajoz

[Bege]

Re : alignement ligne de menu

très bien, donc c'est fait et ça fonctionne, je vais donc laisser cette copie et travailler dessus

euh, le lien que tu m'indiques est en Anglais, je vais voir si je trouve la même chose en Français