Barre de séparation menu en CSS

**Olive13013** · 21/06/2012, 08h23

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

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

Voici le CSS :

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
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 !

**saymoneu** · 21/06/2012, 09h50

Bonjour!

Un truc du genre

Code :

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

1
2
3
4
#menu ul li {
	display: inline;
        border-right:1px solid black;
}

et l'enlever pour le dernier élément

Code :

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

1
2
3
.page_item page-item-20{
        border-right:none;
}

Ca devrait être bon?

**Olive13013** · 21/06/2012, 10h59

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

Bonne journée à vous !

**Olive13013** · 21/06/2012, 15h46

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 :

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
/*-------------------------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 :

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

**saymoneu** · 21/06/2012, 16h53

C'est ma faute

J'ai mis

Code :

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

1
2
3
.page_item page-item-20{
        border-right:none;
}

alors qu'il te faut mettre

Code :

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

1
2
3
#menu .page-item-20{
        border-right:none;
}

Ca devrait être mieux

**Olive13013** · 21/06/2012, 17h11

Cela fonctionne !

Merci beaucoup pour ton aide et ta rapidité !

A charge de revanche,

Amicalement,

Barre de séparation menu en CSS

CSS

Discussions similaires

Partager

Partager