Change colour of a specificlLi field

Here is the page in question.
http://www.theremotedoctor.co.uk/acc...llto=selection

I am trying to edit the background colour with the details shown below but not going to plan.

Code:

---

<li class="licenter"><a href="#home" class="scroll">Return to Menu</a></li>

---

Code:

---

li.licenter {
    text-align: center;
    color: #440000;
        background-color: #000000;

---

Can you advise where i have gone wrong please.

#000000 will be changed later,only used it so i could see the code has worked "still waiting for that bit"

Hi there theremotedr,

the "background-color" in question is controlled here...

Code:

---


#secondary-navigation ul li a {
        background:#E6E6E6;
        display:block;
        margin:5px 0;
        padding:10px;
        text-decoration:none;
        border-style: solid;
        border-width: 1px;
        border: #5d0e13;
        box-shadow:#000 4px 4px 8px
 }


#secondary-navigation ul li a:hover,
#secondary-navigation ul li.current a {
        background:#0099ff;
        color:#fff;
 }

---

coothead

Hi
That changes all the fields.
I am looking to just change the colour of a specific field "Return To Menu"

Hi there theremotedr,

in that case use this...

Code:

---


.scroll{
    background-color:#000!important;
    color:#f00!important;
 }
.scroll:hover{
    background-color:#f00!important;
    color:#000!important;
 }

---

coothead

I am a Newbie with all this so if I can have a look tomorrow and advise here if I get stuck.

Thanks very much.

Hi,
I have applied that to all the pages and pretty good.
One thing that i have noticed is with the standard class="scroll" applied it glides to the top nicely.
With this .scroll applied it jumps there.

Can it be altered so it glides smoothly.

Many thanks

Hi there theremotedr,

it does not scroll to ther top smooooooothly because you have changed this...

Code:

---


<li class="licenter"><a href="#home" class="scroll">Return to Menu</a></li>

---

...to this...

Code:

---


<li class="licenter"><a href="#home" class="rtmscroll">Return to Menu</a></li>

---

coothead

Morning,
I added the rtm so it would be unique to the Li in question only and not any other scroll that was on the site.
Learning all this i thought it was what i need to do.
I have since put it back to scroll.

Two alternatives. Add a new class (any object can belong to more than one class), or give your object an "id". Remember that there can only be one object with that "id" in the page, but I think that's what your want anyway.

You will need to add some extra code to your CSS file.

Code:

---

<li class="licenter"><a href="#home" class="scroll rtm">Return to Menu</a></li>

.rtm{
    background-color:#000!important;
    color:#f00!important;
 }
.rtm:hover{
    background-color:#f00!important;
    color:#000!important;
 }

---

Code:

---

<li class="licenter"><a href="#home" id="rtm" class="scroll">Return to Menu</a></li>

#rtm{
    background-color:#000!important;
    color:#f00!important;
 }
#rtm:hover{
    background-color:#f00!important;
    color:#000!important;
 }

---

Hi,
I think i will use your second example.

Can you advise please.
Here is the page.
http://www.theremotedoctor.co.uk/victorias_attic.html

I need to apply the code to the field Return To Remote Doctor Site BUT no have it scroll as its a link to my sites index page.
How would i write it up.
Currently as below.

Code:

---

<li class="licenter"><a href="index.html" >Return to Remote Doctor Site</a></li>

---

Thanks for your input