Barre de séparation menu en CSS

Bonjour,

J'utilise Wordpress pour la création de mon site internet et j'ai un petit soucis de menu.

Le menu sur mon template choisi n'ai pas très clair, j'aimerai y ajouter entres chaques catégorie une barre vertical qui séparerai mieux les menus. Une barre "|".

J'ai regardé sur le net et essayé pas mal de chose mais rien n'y fait :calim2:

Voici l'url de mon site : www.maisondulagon.com

Voici le CSS :

Code:

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
/*-------------------------MENU---------------------------------*/
#menu-container {
	float: left;
	margin-top: 45px;
	margin-right: 10px;
	max-width: 2000px;
margin-left: 10px;
}
 
#menu ul {
	text-align: right;
}
 
#menu ul li {
	display: inline;
}
 
#menu ul li a {
	text-transform: uppercase;
	padding-right: 5px;
	padding-left: 5px;
	font-size: 11px;
	line-height: 0.2em;
	color: #535353;
	height: 10px;
	font-style: normal;
	letter-spacing: 1px;
}
 
#menu ul li a:hover {
	color: #004080;
	text-decoration: none
}
 
#menu ul li.selected a {
	color: #535353;
}
 
.drop-arrow {
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	position: relative;
	top: -1px;
	left: 2px;
}
 
/*---------- DROP DOWN ------------*/
#menu ul ul {
	width: 170px;
	top: 15px;
	left: 5px;
	padding-top: 12px;
	text-align: left;
	display: none;
	z-index: 20000;
}
 
#menu ul ul ul {
	top: -1px;
	left: 170px;
	padding: 0px;
	border: 1px solid #ebebeb;
}
 
#menu ul ul li a {
	font-size: 11px;
	padding-right: 10px;
	height: auto;
	text-align: left;
	line-height: 30px;
	padding-left: 10px;
	display: block;
}
 
#menu ul ul li:hover {
	background-color: #f1f1f1;
}
 
#menu ul ul li {
	display: block;
	border-bottom: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
	border-right: 1px solid #ebebeb;
	background-color: #fff;
}
 
#menu ul ul ul {
	border-bottom-width: 0px;
	border-left-width: 0px;
}
 
a.sf-with-ul {
	display: inline;
}
 
#menu ul .sf-sub-indicator {
	top: 6px;
	right: 18px;
}
 
#menu ul ul li .sf-sub-indicator {
	top: 0px;
	right: 7px;
}

Merci à vous !

Bonjour!

Un truc du genre
Code:

1 2 3 4 #menu ul li { display: inline; border-right:1px solid black; }
et l'enlever pour le dernier élément
Code:

1 2 3 .page_item page-item-20{ border-right:none; }
Ca devrait être bon?

Merci bien, je vais essayé et je vous tiens au jus.

Bonne journée à vous !

Rheu,

Merci c'est nickel par contre la barre à la fin du menu apparait toujours si je l'ajoute dans le fichier CSS.

Il faut que j' appel le style css .page_item page-item-20 dans le fichier PhP je présume ?

Code:

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
/*-------------------------MENU---------------------------------*/
.page_item page-item-20{
        border-right:none;
}
 
#menu-container {
	float: left;
	margin-top: 45px;
	margin-right: 10px;
	max-width: 2000px;
margin-left: 5px;
}
 
#menu ul {
	text-align: right;
}
 
#menu ul li {
	display: inline;
border-right:1px solid black;
}
 
#menu ul li a {
	text-transform: uppercase;
	padding-right: 5px;
	padding-left: 5px;
	font-size: 10px;
	line-height: 0.2em;
	color: #535353;
	height: 10px;
	font-style: normal;
	letter-spacing: 1px;
}
 
#menu ul li a:hover {
	color: #004080;
	text-decoration: none
}
 
#menu ul li.selected a {
	color: #535353;
}
 
.drop-arrow {
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	position: relative;
	top: -1px;
	left: 2px;
}

Le php correspondant au menu (enfin je l'espère... ;) )

En-tête (header.php) :

Code:

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes() ?>>
<head>
<meta http-equiv="Content-Type"
	content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title>
<?php if (is_home()) {
	echo bloginfo('name');
} elseif (is_category()) {
	echo __('Category &raquo; ', 'blank'); wp_title('&laquo; @ ', TRUE, 'right');
	echo bloginfo('name');
} elseif (is_tag()) {
	echo __('Tag &raquo; ', 'blank'); wp_title('&laquo; @ ', TRUE, 'right');
	echo bloginfo('name');
} elseif (is_search()) {
	echo __('Search results &raquo; ', 'blank');
	echo the_search_query();
	echo '&laquo; @ ';
	echo bloginfo('name');
} elseif (is_404()) {
	echo '404 '; wp_title(' @ ', TRUE, 'right');
	echo bloginfo('name');
} else {
	echo wp_title(' @ ', TRUE, 'right');
	echo bloginfo('name');
} ?>
</title>
 
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/nivo-slider.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/superfish.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/cssLoader.php" type="text/css" media="screen" charset="utf-8" />
<?php if(get_opt('_favicon')){ ?>
<link rel="shortcut icon" type="image/x-icon" href="<?php echo get_opt('_favicon'); ?>" />
<?php } ?>
 
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
 
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/script/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/script/jquery.tools.min.js"></script> 
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/script/script.js"></script>
 
<?php 
$enable_cufon=get_opt('_enable_cufon');
if($enable_cufon=='on'){
if(get_opt('_custom_cufon_font')!=''){
	$font_file=get_opt('_custom_cufon_font');
}else{
	$font_file=get_template_directory_uri().'/script/fonts/'.get_opt('_cufon_font');
}
?>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/script/cufon-yui.js"></script>
<script type="text/javascript" src="<?php echo $font_file; ?>"></script>
<?php 
}
 
?>
 
<script type="text/javascript">
pexetoSite.enableCufon="<?php echo $enable_cufon; ?>";
pexetoSite.ajaxurl="<?php echo admin_url('admin-ajax.php'); ?>";
pexetoSite.lightboxOptions = <?php echo json_encode(pexeto_get_lightbox_options()); ?>;
jQuery(document).ready(function($){
	pexetoSite.initSite();
});
</script>
 
<?php if (is_page_template('template-portfolio.php')) { 
//load the scripts for the portfolio template
	?>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/script/portfolio-previewer.js"></script>
 
<?php } ?>
 
<?php if (is_page_template('template-portfolio-gallery.php')) { 
//load the scripts for the portfolio gallery template
	?>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/script/portfolio-setter.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/script/jquery-easing.js"></script>
<?php } ?>
 
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<!-- enables nested comments in WP 2.7 -->
 
 
<!--[if lte IE 6]>
<link href="<?php echo get_template_directory_uri(); ?>/css/style_ie6.css" rel="stylesheet" type="text/css" /> 
 <input type="hidden" value="<?php echo get_template_directory_uri(); ?>" id="baseurl" /> 
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/script/supersleight.js"></script>
<![endif]-->
 
<!--[if IE 7]>
<link href="<?php echo get_template_directory_uri(); ?>/css/style_ie7.css" rel="stylesheet" type="text/css" />  
<![endif]-->
 
 
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
 
</head>
<?php $bodyclass=$enable_cufon=='on'?'class="cufon"':'';?>
<body <?php echo $bodyclass; ?>>
<div id="main-container">
 
<div class="center">
<div id="site">
  <div id="header" >
   <div id="header-top">
<div id="logo-container" class="center"><a href="<?php echo home_url(); ?>"></a></div>
<div id="menu-container">
      <div id="menu">
<?php wp_nav_menu(array('theme_location' => 'pexeto_main_menu' )); ?>
 
 </div>
     </div>
    </div>

Merci pour votre aide et désolé pour ma noobitude :aie:

C'est ma faute :ccool:
J'ai mis
Code:

1 2 3 .page_item page-item-20{ border-right:none; }
alors qu'il te faut mettre
Code:

1 2 3 #menu .page-item-20{ border-right:none; }
Ca devrait être mieux ;)

Cela fonctionne ! :D

Merci beaucoup pour ton aide et ta rapidité !

A charge de revanche,

Amicalement,