[Yvan]

#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.7.1
#~ Nom de l'hébergeur : infomaniak
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.7.1
#~ Installed Modules:
#~ * CMSMailer: 2.0
#~ * FileManager: 1.0.2
#~ * MenuManager: 1.6.3
#~ * ModuleManager: 1.3.3
#~ * News: 2.10.5
#~ * nuSOAP: 1.0.1
#~ * Printing: 1.0.4
#~ * Search: 1.6.3
#~ * ThemeManager: 1.1.1
#~ * TinyMCE: 2.7.0
#~ * FrontEndUsers: 1.8.2
#~ * CustomContent: 1.5.3
#~ * CGExtensions: 1.18.3
#~ * CGCalendar: 1.5.2
#~ Config Information:
#~ * php_memory_limit:
#~ * process_whole_template: false
#~ * max_upload_size: 48000000
#~ * default_upload_permission: 664
#~ * assume_mod_rewrite: true
#~ * page_extension: /
#~ * internal_pretty_urls: false
#~ * use_hierarchy: true
#~ Php Information:
#~ * phpversion: 5.2.13
#~ * md5_function: On (Vrai)
#~ * gd_version: 2
#~ * tempnam_function: On (Vrai)
#~ * magic_quotes_runtime: Off (Faux)
#~ * E_STRICT: 0
#~ * memory_limit: 64M
#~ * max_execution_time: 10
#~ * safe_mode: Off (Faux)
#~ * session_save_path: Aucune vérification à cause de la restriction spécifiée par PHP open_basedir
#~ * session_use_cookies: On (Vrai)
#~ Server Information:
#~ * Server Api: apache2handler
#~ * Server Db Type: MySQL (mysql)
#~ * Server Db Version: 5.0.84
#~ ----------------------------------------------
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~

Salut,

j'ai commencé à bidouiller mon site au niveau du graphisme et j'aimerais réutiliser la base du menu shadow. Mon problème (entre autres) et que je n'arrive pas à spécifier que les entrée du menu doivent avoir une longueur relative au texte qu'elles contiennent.

Avec le menu CSSmenu, j'avais dû ajouter aux éléments <li> la propriété 'width: 100%' pour éviter qu'ils se mettaient à la suite, parfois sur la même ligne. À l'époque, je voulais avoir une image d'arrière fond, mais maintenant je veux du blanc, tout simple. Donc, ce serait bien que la taille des <li> soit aussi petite que possible pour que les pages filles s'affichent juste à la droite du titre dans le menu.

Vous me suivez ?

J'ai essayé de mettre 'width: auto' dans le CSS pour les <li>, mais ça ne sert à rien. Quelqu'un pourrait me donner un coup de main ?

[Yvan]

Bon, je bidouille, mais ça avance pas vite !
J'ai réussi à avoir des boutons de taille variable, mais les éléments de la liste ne passent pas à la ligne et se mettent à la suite les uns des autres, tant qu'ils en ont la place, ce qui est très moche. Et je ne comprends pas pourquoi ils ne passent pas à la ligne ! Les éléments d'une liste, ça passe normalement tjs à la ligne, non ? Sauf si on spécifie 'display:inline;'...

Un autre truc qui me dérange est que la bulle s'affiche par-dessus le texte du site sans effet de transparence alors qu'elle s'affiche avec 100% de transparence au-dessus du menu.

Voyez par vous-mêmes:

www.coord21.ch/test_cmsms

Et voici tout le code:

#menuwrapper {
width: 95%;
margin-left: 0px;
margin-bottom: 10px;
}
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
margin-left: 1px;
}

#primary-nav li {
margin-bottom: -1px;
position: relative;
padding: 0px 0px 4px 0px;
}

#primary-nav li li {
width: 190px;
padding: 0px 10px;
background-image: none;
}
ul#primary-nav li a {
display: block;
font-size: 1em;
font-weight: normal;
color: black;
padding: 0.3em 0.8em 0.3em 0.8em;
text-decoration: none;
}
ul#primary-nav a span {
display: block;
line-height: 1.2em;
padding-left: 1.5em;
}
ul#primary-nav li a:hover {
color: RGB(0,130,220);
}
ul#primary-nav li li a:hover {
background-color: RGB(0, 130, 220);
color: white;
}
ul#primary-nav li a.menuactive {
color: RGB(90, 180, 0);
font-weight: bold;
}
ul#primary-nav li li a.menuactive {
background-color: RGB(90, 180, 0);
color: white;
}
ul#primary-nav li ul a {
text-align: left;
margin: 0px;
position: relative;
padding: 6px;
font-weight: normal;
color: #000;
background: none;
}
ul#primary-nav li ul {
list-style-type: none;
width: 209px;
height: auto;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px;
position: absolute;
left: 100%;
top: -10px;
display: none;
background: url(uploads/ngrey/ultoprt.png) no-repeat left top;
}
ul#primary-nav li ul ul {
list-style-type: none;
margin: 0px 0px 0px -8px;
padding: 0px;
padding-top: 10px;
position: absolute;
width: 209px;
height: auto;
top: -5px;
left: 100%;
display: none;
background: url(uploads/ngrey/ultoprt.png) no-repeat left top;
}
* html ul#primary-nav li ul {
background: url(uploads/ngrey/ultoprt.gif) no-repeat left top;
}
* html ul#primary-nav li ul ul {
background: url(uploads/ngrey/ultoprt.gif) no-repeat left top;
}
#primary-nav ul li.separator, #primary-nav .separator:hover {
width: 209px;
padding: 0px;
height: 9px;
margin: 0px 0px -9px;
background: url(uploads/ngrey/ulbtmrt.png) no-repeat left bottom;
}
* html #primary-nav li ul li.separator {
height: 2px;
background: url(uploads/ngrey/ulbtmrt.gif) no-repeat left bottom;
}
#primary-nav li, #primary-nav li.menuparent {
min-height: 1em;
}
#primary-nav li li.menuactive a.menuactive {
color: #FFF;
font-weight: normal;
background: url(uploads/ngrey/darknav.png) repeat-x left center;
}
#primary-nav li.menuparent span {
padding-left: 1.5em;
background: url(uploads/ngrey/active.png) no-repeat left center;
}
#primary-nav li.menuparent:hover li.menuparent span {
padding-left: 0;
background: url(uploads/ngrey/parent.png) no-repeat right center;
}
#primary-nav li.menuparenth li.menuparent span,
#primary-nav li.menuparenth li.menuparenth span {
padding-left: 0;
background: url(uploads/ngrey/parent.gif) no-repeat right center;
}
#primary-nav li.menuparent:hover span,
#primary-nav li.menuparent.menuactive span,
#primary-nav li.menuparent.menuactiveh span,
#primary-nav li.menuparenth span {
background: url(uploads/ngrey/parent.png) no-repeat left center;
}
#primary-nav li li span,
#primary-nav li.menuparent li span,
#primary-nav li.menuparent:hover li span,
#primary-nav li.menuparenth li span,
#primary-nav li.menuparenth li.menuparenth li span,
#primary-nav li.menuparent li.menuparent li span,
#primary-nav li.menuparent li.menuparent:hover li span {
background: none;
padding-left: 0px;
}
/* Styling the appearance of menu items on hover */
#primary-nav li:hover li a,
#primary-nav li.menuh li a,
#primary-nav li.menuparenth li a,
#primary-nav li.menuactiveh li a {
background: none;
color: #000;
}
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
display: block;
}
#primary-nav li, #primary-nav li.menuparenth {
float: left;
height: 1%;
}
#primary-nav li a {
height: 1%;
}
#primary-nav li.sectionheader {
border-left: 1px solid #006699;
border-top: 1px solid #006699;
font-size: 130%;
font-weight: bold;
padding: 1.5em 0 0.8em 0.5em;
background-color: #fff;
margin: 0;
width: 100%;
}
#primary-nav li hr.separator {
display: block;
height: 0.5em;
color: #abb0b6;
background-color: #abb0b6;
width: 100%;
border: 0;
margin: 0;
padding: 0;
border-top: 1px solid #006699;
border-right: 1px solid #006699;
}

S'il vous plaît, aidez-moi ! J'en peux plus de ce menu !

[Yvan]

Resalut ! Bon, j'ai pas réussi, mais je me suis décidé à changer mon menu pour l'avoir en haut. Je crois que c'est mieux.

Sinon, j'ai tjs ce problème avec les sous-menus. Quand ils apparaissent par-dessus le calendrier, ses liens apparaissent au travers du bloc du sous-menus et si on passe le curseur dessus, on quitte le sous-menu. C'est très gênant et je ne comprends pas d'où ça vient.

Quelqu'un aurait une idée ? Merci

[bess]

#primary-nav ul ul {
background:url("uploads/ngrey/ultoprt.png") no-repeat scroll left top transparent;
left:100%;
margin-left:-1px;
margin-top:0;
top:-9px;
z-index:100;
}

+

div#calendar {
clear:both;
padding:25px 5px;
z-index:0;
}

[Yvan]

Yes, merci !

Bon, je crois que j'ai réussi à faire mon menu comme je voulais.

Une dernière chose d'importance, cependant ! J'ai une partie membre sur mon site et je me dis que ce serait cool de changer les couleurs du menu (et du site en général) quand on arrive dans la partie membre, pour mieux noter la différence.

Est-ce qu'on peut mettre des {if} {else} dans le fichier CSS ? Est-ce qu'il y a une autre combine qui m'éviterait de dédoublé mes fichiers CSS ?

[Jean le Chauve]

Non, pas encore
Par contre :
1° Tu peux placer des if else autour d'un <link rel="stylesheet" dans la head de ton gabarit principal.
Ex :

Code :

{if $ccuser->loggedin()}<link rel="stylesheet" type="text/css" media="screen" href="http://www.tonDomaine.com/css/laCssSpecialeMembres" />{/if}

Dans ta css spéciale membre, tu n'auras plus qu'à ajouter des propriétés aux liens des menus que tu désires modifier.

2° Si tu veux affiner, tu auras pris soin de coder ton menu en suivant ce tuto pour qu'il aie une classe css supplémentaire, si besoin en est : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2680

N'oublie pas le [résolu] si ton problème est réglé