Grow your CSS skills. Land your dream job.

Using CSS for list type menu

  • # June 15, 2009 at 9:25 pm

    I created this wordpress theme to carry my graphics blog, but I used the same list image to create my menu as my RSS in the sidebar. The only problem I want to loose the images on the Title "RSS" and the icon. How can this be done?
    [img]http://www.chriscarvergraphics.com/images/pic1.jpg[/img]
    Below I have included the xhtml i used in coding the list. and the css for the list as well. Any help would be greatly appreciated.
    The site is athttp://chriscarvergraphics.com
    HTML

    Code:
  • Categories

CSS

Code:
/* RSS Sidebar Nav. */
#rss-458890601 ul {
padding-right: 200px;
padding-bottom: 0;
padding-left: 0;
font-family: Arial, Helvetica, sans-serif;
margin-right: 0;
margin-bottom: 0;
margin-left: 0px;
font-size: 9pt;
text-align: center;
vertical-align: middle;
margin-top: 2px;
height: auto;
width: 275px;
background-color: transparent;
}
#rss-458890601 li {
width: auto;
}
#autoXML85751168575116 {
width: auto;
}
#rss-458890601 a:link, #rss-458890601 a:visited {
color: #C1C7B8;
background-color: transparent;
background-image: url(http://cdn.css-tricks.com/images/hoverlinklong.png);
background-repeat: no-repeat;
height: 25px;
width: 288px;
background-position: center bottom;
float: left;
margin-top: 3px;
vertical-align: middle;
padding-top: 5px;
}
#rss-458890601 a:active {
color: #000000;
background-color: transparent;
background-image: url(http://cdn.css-tricks.com/images/hoverlinklong.png);
background-repeat: no-repeat;
height: 25px;
width: 288px;
background-position: center bottom;
float: left;
margin-top: 3px;
vertical-align: middle;
padding-top: 5px;
}
#rss-458890601 a:hover {
color: #000000;
background-color: transparent;
background-image: url(http://cdn.css-tricks.com/images/hover2linklong.png);
background-repeat: no-repeat;
height: 25px;
width: 288px;
background-position: center bottom;
float: left;
margin-top: 3px;
vertical-align: middle;
padding-top: 5px;
}
#rss-458890601 h2 a{
font-family: Arial, Helvetica, sans-serif;
background-image: none;
}
# June 16, 2009 at 5:38 pm

Any help? Please?

# June 16, 2009 at 6:31 pm

I don’t particularly understand the question. Can you quickly mock up in Photoshop what you mean?

# June 17, 2009 at 11:27 pm

This is the desired results. These to list items be w/out a background.
[img]http://www.chriscarvergraphics.com/images/1pic1.jpg[/img]

# June 18, 2009 at 2:39 am

To be honest with you, the code looks like one big jumble to me, nothing really makes sense. Perhaps somebody else can have a look.

I mean, logically you just need to remove those items from the <ul>, but it looks like the <ul> starts well before those items.

Are you using WP tag to display that stuff?

# June 18, 2009 at 3:35 am

The Doc is right, those two items don’t belong in that list. If you can’t take them out of the list then just give them a class and remove the styling via that class.

# June 18, 2009 at 8:24 am

The only problem is that this is a WordPress theme and the list is coming from a RSS widget. I guess I will need to determine where the widget file is and then edit this directly?

# June 18, 2009 at 8:51 am

If you are using the default rss widget then you are looking at editing core files which is never a good idea. Perhaps you want to look at using something like this which will give you a lot more control http://wordpress.org/extend/plugins/kb-advanced-rss-widget/

# June 19, 2009 at 5:42 pm

This worked. Thanks for the help apostraphe. Please feel free to check out the results http://chriscarvergraphics.com

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".