CODEWITHSUNDEEP
htmlcsshtml-listsstyling
Craig van Tonder
Craig van Tonder

Reputation: 7687

HTML/CSS - Lists - Applying a background color to an entire row when using a list-style?

I am trying to redesign my websites menu configuration a bit.

I am using a list to display the menu options and the list has a style type of circle.

Here is a picture:

1

And here is the code:

<li class='category'><a href='$docPath/category/$catDirPath/'>$catName</a></li>

li.listCategory {
    list-style-type: circle;
    margin-left: 17px;
}

What i want to do with this, is have the entire row highlighted in yellow, once the person has selected this section of the navigation menu.

All of the code relating to this is working, but the problem that I am having is in regard to the styling of this row, or <li> tag.

My first attempt at this produces an unwanted effect:

2

<li class='category' id='selectedCat'><a href='$docPath/category/$catDirPath/'>$catName</a></li>

li#selectedCat {
    background-color: #FFCC00;
    list-style-type: disc;
}

So I remove the margin set in the category class and in turn end up with this:

3

Notice that now my nice list style that shows too that this option has been selected has just disappeared...

So what I am basically trying to do is to style this area:

4

Does anyone have any suggestions or ideas on how I could accomplish this task?

Thanks in advance for taking the time to read through this!!

Upvotes: 1

Views: 1214

Answers (2)

Ana
Ana

Reputation: 37169

This will do: 

li#selectedCat {
    padding: 5px;
    background-color: #FFCC00;
    list-style-position: inside;
    list-style-type: disc;
}

Demo: http://dabblet.com/gist/2775371

Upvotes: 1

feeela
feeela

Reputation: 29932

You need an additional list-style-position: inside; to move the bullet inside the list item.

https://developer.mozilla.org/en/CSS/list-style-position

Upvotes: 7

Related Questions