adapter le menu

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] adapter le menu

    Bonjour,

    je suis en train de créer un nouveau template pour un site internet sur joomla 1.6

    je souhaite obtenir le résultat suivant au niveau du menu (pour commencer) :

    Cliquez sur l'image pour l'afficher en taille normale

Nom : ecran2.jpg 
Affichages : 2 
Taille : 74,4 Ko 
ID : 1814113

    voici l'état actuel :

    http://www.lemusee.ch/site1/index.ph...e/presentation

    quelles sont les modifications à apporter à mon css ?

    /*** menu colonne ***/
    h3 {
    color: #9e9e9e;
    font-size: 14px;
    font-weight: bold;
    padding-left: 20px;

    }

    ul.menu li {
    background: #9e9e9e;
    border-bottom: 30px solid black;
    line-height: 10px;

    /*margin:5px 0 5px 0;*/

    }

    ul.menu li ul li{
    margin-left: 10px;
    background: #666;

    }

    ul.menu li a {
    color: #fff;
    text-decoration: none;
    line-height: 25px;
    padding-left: 10px;

    }

    ul.menu li a:hover {
    color: #000;
    }


    /*** module gris ***/
    div.moduletable_gris h3 {
    height: 36px;
    background: url(../images/titre_modulegris.png) left top repeat-x;
    line-height: 30px;
    color: #fff;
    font-weight: normal;

    }

    div.moduletable_gris {
    background: #9e9e9e url(../images/bas_modulegris.png) left bottom repeat-x;
    padding-bottom: 35px;
    color: #fff;
    margin-top: 10px;
    }

    div.moduletable_gris a {
    color: red;
    padding-left : 10px;
    line-height: 20px;
    }



    Merci pour votre aide

  • #2
    Re : adapter le menu

    Bonjour,

    Tu te lances dans un exercice relativement sportif. Il est souhaitable que tu maîtrises un minimum html/css.

    Il y a des multiples stratégies d'intégration possibles pour ce type de design et la première chose à faire est avoir une architecture html correcte.

    Pour cela, si je pars du principe que l'image derrière le menu n'est pas générée par un module (afin d'avoir une image aléatoire par exemple) alors, je dirais que :

    1 - Tu dois passer ta colonne de gauche (que tu as appelée #picture)à 310px de large puis adapter ensuite la largeur du conteneur principal afin qu'il flotte à droite.

    Ensuite,mettre en background de ta colonne de gauche l'image ainsi que le fond orange genre :
    Code:
    #picture {
    width:310px;
    background:url(../images/ton_image.xxx) no-repeat #cc8300;
    }
    2 - Ensuite, je déplacerai le module de menu vers la droite à l'intérieur de la colonne :

    Code:
    #picture ul {
    margin-left:90px;
    }
    Enfin, il faudrait indenter les enfants des menus de premier niveau:

    Code:
    #picture ul li li {
    text-indent:80px;
    color:white;
    background:none;
    }
    Une fois cette structure correcte, il deviendra facile de styler le tout.

    ps: Merci d'utiliser les balises [code] quand tu postes du code ET de poster dans les bonnes section. Je viens de déplacer le sujet de 1.5 vers 1.6.
    Dernière édition par cb75ter à 31/07/2011, 13h43

    Commentaire


    • #3
      Re : adapter le menu

      bonjour,

      j'ai fait les modifs que tu as indiquées. Ca commence à prendre forme.

      Plusieurs questions :
      • comment faire remonter la partie de droite (contenu) ?
      • les entrées de menu de premier niveau devraient se disposer sur les deux parties (image à gauche et contenu à droite).
      • Les entrées de menu de premier niveau doivent avoir le fond noir
      • Les entrées de menu de second niveau doivent être écrits en blanc et se trouver sur la partie de droite (contenu)
      • Les entrées de menu de second niveau doivent avoir un fond transparent (ils prendront donc l'orange)


      Un grand Merci pour ton aide

      Le résultat actuel : http://www.lemusee.ch/site1/

      Commentaire

      Annonce

      Réduire
      1 sur 2 < >

      C'est [Réglé] et on n'en parle plus ?

      A quoi ça sert ?
      La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

      Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

      Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
      Comment ajouter la mention [Réglé] à votre discussion ?
      1 - Aller sur votre discussion et éditer votre premier message :


      2 - Cliquer sur la liste déroulante Préfixe.

      3 - Choisir le préfixe [Réglé].


      4 - Et voilà… votre discussion est désormais identifiée comme réglée.

      2 sur 2 < >

      Assistance au forum - Outil de publication d'infos de votre site

      Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

      Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

      Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

      UTILISER À VOS PROPRES RISQUES :
      L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

      Problèmes connus :
      FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

      Installation :

      1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

      Archive zip : https://github.com/AFUJ/FPA/zipball/master

      2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

      3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

      4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

      5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

      6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
      et remplacer www. votresite .com par votre nom de domaine


      Exemples:
      Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
      Télécharger le script fpa-fr.php dans: /public_html/
      Pour executer le script: http://www..com/fpa-fr.php

      Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
      Télécharger le script fpa-fr.php dans: /public_html/cms/
      Pour executer le script: http://www..com/cms/fpa-fr.php

      En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

      Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
      Voir plus
      Voir moins

      Partenaire de l'association

      Réduire

      Hébergeur Web PlanetHoster
      Travaille ...
      X