Page 1 of 1

CSS Menu Help

PostPosted: Mon Jun 18, 2012 11:49 am
by kevb8ll
I am using a couple of images for navigation. I want to use a separator image to well, separate the menu items!

I've set:

Code: Select all
#access {

      
   border-top: 1px solid #ccc;
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   border-left: 1px solid #ccc;
   

   
background: url(images/navbg.jpg);



display: block;

width: 948px;

height: 25px;

color: #555555;

line-height: 25px;

font-size: 12px;

overflow-x: hidden;

overflow-y: hidden;

text-align: center;

font-weight: bold;

   

}

#access .menu-header,

div.menu {

   font-size: 14px;

   margin-left: 12px;

   width: 928px;
   
   
   
   

}

#access .menu-header ul,

div.menu ul {

   list-style: none;

   margin: 0;
   
   

}

#access .menu-header li,

div.menu li {

background: url(images/separator.jpg) no repeat 0 0;

   float: left;

   position: relative;

}

#access a {

   color: #555;
   
      
   background: url(images/navbg.jpg);

   
   padding: 0 21px 0 16px;
   
   display: block;
   
width: 86px;

height: 25px;

line-height: 25px;

font-size: 12px;

overflow-x: hidden;

overflow-y: hidden;

text-align: center;

font-weight: bold;

}

#access ul ul {

   box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

   -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

   -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

   display: none;

   position: absolute;

   top: 38px;

   left: 0;

   float: left;

   width: 180px;

   z-index: 99999;

}

#access ul ul li {

   min-width: 180px;

}

#access ul ul ul {

   left: 100%;

   top: 0;

}

#access ul ul a {

   background: #333;

   line-height: 1em;

   padding: 10px;

   width: 160px;

   height: auto;

}

#access li:hover > a,


#access ul ul :hover > a {

   color: #FFFFFF;
   
   background: url(images/navonbg.jpg);

   color: #fff;

}

#access ul li:hover > ul {

   display: block;

}

#access ul li.current_page_item > a,

#access ul li.current-menu-ancestor > a,

#access ul li.current-menu-item > a,

#access ul li.current-menu-parent > a {

   color: #555;

}

* html #access ul li.current_page_item a,

* html #access ul li.current-menu-ancestor a,

* html #access ul li.current-menu-item a,

* html #access ul li.current-menu-parent a,

* html #access ul li a:hover {

   color: #fff;

}



For my main setup.

Where do I need to put:

Code: Select all
background: url(images/seperator.jpg) no repeat 0 0;


I've tried it in a number of different places but it hasn't worked. I'd appreciate your help.

Re: CSS Menu Help

PostPosted: Fri Jun 22, 2012 11:57 pm
by Sakecat
Use a fire fox app called fire bug to find out what file and what part of the pages rule over the section your trying to edite. If I remember correctly its a file called layout or some thing along those lines the last line of defense is to make a css map for the theme. I actually deleted the black background from the theme as i didn't want it there any more. I used fire bug to find its location and then manually edited it with eclipse by opening it threw filezilla.

Re: CSS Menu Help

PostPosted: Tue Mar 17, 2015 12:29 pm
by alsp722
to make a css map for the theme thanks