[RÉGLÉ] adapter le menu

[raph_egg]

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) :



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

[cb75ter]

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 :

#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 :

#picture ul {
margin-left:90px;
}

Enfin, il faudrait indenter les enfants des menus de premier niveau:

#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.

[raph_egg]

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/