Discussion :

[Archinformatique]

Bonjour à tous,

Comme dit dans le titre, je souhaiterai que les sous éléments de ma barre de navigation s'affiche les uns à côté des autres et non pas sous forme de liste.

Voici le code actuel qui correspond :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/* main nav menu global styles*/
.header_menu_res ul, .header_menu_res ul ul, .header_menu_res ul ul ul { float:left; margin:0; padding:0; list-style:none;}
.header_menu_res ul li.first { padding-left:0; background:none;}
.header_menu_res ul li a { color:#fff; text-decoration:none;}
.header_menu_res ul li:hover a { color:#555555; background:#fff; text-shadow:0 1px 0 #fff; z-index:999;}
.header_menu_res ul { z-index:99; margin:0; padding:0; list-style:none; line-height:1; }
.header_menu_res ul a { padding:5px 10px;position:relative; color:#555; z-index:100; display:block;line-height:18px; text-decoration:none; }
.header_menu_res ul li:hover a {-khtml-border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.header_menu_res ul li.current_page_item, .header_menu_res ul li.current-menu-item, .header_menu_res ul li.current-menu-parent a { color:#555; background:#f4f4f4; text-shadow:0 1px 0 #fff; -khtml-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
.header_menu_res ul li li.current_page_item, .header_menu_res ul li li.current-menu-item { background:none; }
.header_menu_res ul li.current_page_item a, .header_menu_res ul li.current-menu-item a { color:#555; -khtml-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
.header_menu_res ul.children li a { background:#fff; border-top: none; border-left: none; }
.header_menu_res ul li { float:left; margin:0 3px; width: auto; font:normal 14px/1.2em Arial, Helvetica, sans-serif;z-index:999;}
.header_menu_res ul li ul { margin-top:-2px; background:#fff; position:absolute; left:-999em; width:180px; border:1px solid #dbdbdb; border-width:1px 1px 0; z-index:998; -khtml-border-radius: 0 3px 3px 3px; -moz-border-radius: 0 3px 3px 3px; -webkit-border-radius: 0 3px 3px 3px; border-radius: 0 3px 3px 3px; }
 
.header_menu_res ul.menu ul { margin:-2px 0 0 0; padding:0 0 8px; position:absolute; background:#fff; border:1px solid #eee; border-top:none;z-index:998; -khtml-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; -webkit-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px; -moz-box-shadow: 1px 1px 5px #b7b7b7; -webkit-box-shadow: 1px 1px 5px #b7b7b7; box-shadow: 1px 1px 5px #b7b7b7;}
.header_menu_res ul.menu ul ul.children { background-color: #FFF; border:1px solid #eee; border-top:none;z-index:998; -khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 1px 1px 5px #b7b7b7; -webkit-box-shadow: 1px 1px 5px #b7b7b7; box-shadow: 1px 1px 5px #b7b7b7;}
.header_menu_res ul.menu li ul li {margin:0; padding:0px;}
.header_menu_res ul.menu li ul li:hover { background:#f4f4f4;}
.header_menu_res ul.menu li ul li a {background:none; padding:7px 12px; width:560px; color:#555; font-size:12px; line-height:18px; text-shadow:0 1px 0 #fff; }
.header_menu_res ul.menu li ul li a:hover  { text-decoration:underline; -khtml-border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.header_menu_res ul.menu li ul ul  { margin:-32px 0 0 181px; -khtml-border-radius: 0 3px 3px 3px; -moz-border-radius: 0 3px 3px 3px; -webkit-border-radius: 0 3px 3px 3px; border-radius: 0 3px 3px 3px;}
.header_menu_res ul.menu ul.sub-menu {display:none; position:absolute; margin:-2px 0 0; -khtml-border-radius:0 3px 3px 3px; -moz-border-radius:0 3px 3px 3px; -webkit-border-radius:0 3px 3px 3px; border-radius:0 3px 3px 3px;}
.header_menu_res ul.menu li:hover ul.sub-menu {display:block;}
.header_menu_res ul.menu ul.sub-menu li ul.sub-menu {display:none; top:2px; left:180px; -khtml-border-radius:0 3px 3px 0; -moz-border-radius:0 3px 3px 0; -webkit-border-radius:0 3px 3px 0; border-radius:0 3px 3px 0;}
.header_menu_res ul.menu ul.sub-menu li:hover ul.sub-menu {display:block;}
.header_menu_res ul li:hover, .header_menu_res ul li.hover  { position:static; color: #555555; }
.header_menu_res ul li:hover ul ul, .header_menu_res ul li:hover ul ul ul, .header_menu_res ul li:hover ul ul ul ul { left:-999em; }
.header_menu_res ul li:hover ul, .header_menu_res ul li li:hover ul, .header_menu_res ul li li li:hover ul, .header_menu_res ul li li li li:hover ul { left:auto; }
.header_menu_res ul li img.dropdown { padding:2px 0 2px 8px; border:none;}
.header_menu_res ul.sub-menu { width: auto; }
.header_menu_res ul.sub-menu li { clear: left; margin: 8px 4px 0; }
 
/* category menu */
div#adv_categories, .header_menu_res ul.sub-menu { margin:-2px 0 0 0; padding:0 0 8px; position:absolute; background:#fff; border:1px solid #eee; border-top:none;z-index:998; -khtml-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; -webkit-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px; -moz-box-shadow: 1px 1px 5px #b7b7b7; -webkit-box-shadow: 1px 1px 5px #b7b7b7; box-shadow: 1px 1px 5px #b7b7b7;}
div#adv_categories {display:none; padding:0 5px 8px;}
#menu-header li:hover #adv_categories, .header_menu .menu li:hover #adv_categories{display:block;}
div#adv_categories ul {position:relative; background:none; border:none; border-radius:0; box-shadow:none; left:0;}
div#adv_categories ul li {border:none; font-size:12px; text-shadow:0 1px 0 #FFFFFF; }
div#adv_categories ul li a  { display:inline; }
div#adv_categories ul li a:hover  { background:#f4f4f4;}
div#adv_categories li.maincat a { }
div#adv_categories li.maincat a:hover { }
div#adv_categories .catcol {float:left; padding:0 12px 0 12px; width:200px; border-left:none; vertical-align:top; margin-top:20px;}
div#adv_categories .catcol ul {padding:8px 0; list-style:none;}
div#adv_categories .catcol ul li {float:none; margin:0; padding:0;}
div#adv_categories .catcol ul li a {margin:0; padding:4px 0; color:#545454; text-decoration:none; background: none;}
div#adv_categories .catcol ul.maincat-list {margin:0; padding:0;}
div#adv_categories .catcol ul li.maincat { width:180px; background: url(images/gray-grad.png) repeat-x scroll left top #E0E0E0; text-transform:uppercase; font-weight:bold; color:#545454; float:left; margin:0 0 15px; padding:6px 10px; -khtml-border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
div#adv_categories .catcol ul li.maincat a { background:none; display:inline; line-height:20px; }
div#adv_categories .catcol ul li.maincat a:hover {background:none; text-decoration:underline !important;}
div#adv_categories .catcol ul li.maincat > ul.subcat-list { margin:6px -10px -6px -15px; padding:5px 10px 5px 15px; width:100%; }
div#adv_categories .catcol ul.subcat-list { clear:both; padding:5px; width:auto; background-color:#FFFFFF; }
div#adv_categories .catcol ul.subcat-list ul.subcat-list {margin:0;}
div#adv_categories .catcol ul li.cat-item { clear:both; width:auto; background:url(images/bullet-grey.png) no-repeat scroll 4px 6px transparent; padding:0 0 0 12px; font-size:12px; text-transform:none; float:left;}
div#adv_categories .catcol ul li.cat-item a {display:inline-block; float:left; padding:0; line-height:20px; width:auto;}
div#adv_categories .catcol ul li.cat-item a:hover {text-decoration:underline !important;}
div#adv_categories .catcol ul li.cat-item span {display:inline-block; float:left; padding:0; line-height:20px; margin-left:3px; width:auto;}
div#adv_categories .first {border-left:none;}

Cette fonction marche parfaitement dans "category menu" : div#adv_categories .catcol ul li.maincat a { background:none; display:inline; line-height:20px;En d'autres terme je souhaite avoir le même chose dans le "header menu". J'ai testé plusieurs solution mai rien ne fonctionne.

Avez-vous une piste pour la modification.

CDT

[black-hawk-down]

Salut,

Pour commencer, tu voudrais pas mettre ton code entre balise [CODE][/CODE] s'il te plaît ? Parce que là c'est illisible.

Et deuxièmement, tu pourrais mettre ton code HTML qu'on voit ta structure ?

Merci.

[Archinformatique]

Tout d'abord merci pour la réponse rapide

Bon le ridicule ne tuant pas... comment fait-on pour mettre entre balise . Car le code fourni est édité avec Notepadd d'un fichier nommé Styles et qui regroupe l'ensemble des CSS du logiciel utilisé.

Concernant le code HTML je peux faire un copié/collé du code source ou bien joindre par exemple le fichier tpl catégorie.

Désolé pour le manque de connaissance!!!!

cdt

[black-hawk-down]

Tu as l'air d'avoir trouvé comment on fait finalement

Poste nous l'HTML dans un message.

[Archinformatique]

Re,

Je mets un lien... pas trop longtemps


cdt

[black-hawk-down]

On va avoir du mal à afficher la page puisque tu nous donnes un lien local, uniquement accessible depuis ta machine. Copie-colle donc le code source de la page générée (Firefox : Controle + U).