By MikeyGYSE on

Hi guys and gals. I'm having some issues with my theme, namely trying to get it to separate the sidebar menus ul and li elements by class. Can someone tell me what's wrong with the code below:

/************************************************
*	Left Sidebar 					     	    * 
************************************************/

#l_sidebar {
	float: left;
	width: 225px;
	margin: 25px 0px 0px 20px;
	padding: 0px 0px 20px 0px;
	border-top: 2px solid #000000;
	}
	
#l_sidebar ul {
	margin: 0px;
	padding: 0px;
	}

#l_sidebar ul li {
	display: inline;
	padding: 0px;
	margin: 0px;
	}
	
#l_sidebar ul li a {
    list-style: circle url(images/menu-leaf.gif);
	display: block;
	color: #FF6600;
	text-decoration: none;
	margin: 0px;
	padding: 5px 0px 5px 0px;
	border-bottom: 1px solid #C0C0C0;
	}

#l_sidebar ul.menu li.leaf {
	list-style: circle url(images/menu-leaf.gif);
	}
	
#l_sidebar ul.menu li.collapsed {
	list-style: circle url(images/menu-collapsed.gif);
	}
#l_sidebar ul.menu li.expanded {
	list-style: circle url(images/menu-expanded.gif);
	}

#l_sidebar ul li a:hover {
	background: #EFEFEF;
	color: #3366FF;
	}
		
#l_sidebar p{
	padding: 3px 0px 0px 0px;
	margin: 0px;
	line-height: 20px;
	}

Thanks

⋅ Categories: Drupal 5.x

Comments

Tmanagement’s picture

Tmanagement commented

I have no idea what you mean with seperating ul and li elements. Could you explain it some more and maybe provide a screenshot of what you would like to accomplish?

MikeyGYSE’s picture

MikeyGYSE commented

I want to put an image in front of list elements, so that instead of spawning directly below each other there's an arrow to the site. To separate the menus and make it easier to follow. Much like the navigation menu on Drupal.org

-----------------------------------------------------------------
Michael O'Toole

Gay Youth :: South East - Chair & Operations Administrator

geddon’s picture

geddon commented

I'm having trouble understanding what you're asking for as well. Could you do a little Photochopping and throw together a visual to help explain?

(cR)

MikeyGYSE’s picture

MikeyGYSE commented

My menus currently look like menu (A) I want to make them look like menu (B).

http://imageserver.gyse.org.uk/dmenu.png

-----------------------------------------------------------------
Michael O'Toole

Gay Youth :: South East - Chair & Operations Administrator

Tmanagement’s picture

Tmanagement commented

Try this:

li .leaf {
list-style-image: url(images/menu-leaf.gif);
}
li .expanded {
list-style-image: url(images/menu-leaf.gif);
}

etc.

MikeyGYSE’s picture

MikeyGYSE commented

That hasn't worked. Thanks for trying though.

-----------------------------------------------------------------
Michael O'Toole

Gay Youth :: South East - Chair & Operations Administrator

geddon’s picture

geddon commented

First off, grab Firebug. I wouldn't recommend designing with CSS without it. This will allow you to see where the holes in your code reside and clue you in on how to fix them.

Secondly, download the Zen Theme. It's a work in progress but they do illustrate the menu controls better than any other theme. It helps to see how to change the menus so that you can see where your menu is going wrong.

Hope that helps!

Tmanagement’s picture

Tmanagement commented

#block-user-1 li .leaf {
list-style-image: etc

I guess it has something to do with default Drupal settings. By calling the div of the named block you do not have to deal with settings for it set by Drupal. The theory could be that, when you call #l_sidebar your settings are overruled by the settings of #block-user-1.