[HELP] [HTML] background-color

[iExplicit]

Hey Guys,

I am honestly very 'crap' at html i've started actually learning it 'properly' since Saturday i've picked up css along the way, but i keep getting this problem
When i hover over my tab it only highlights it, but i want the whole tab to turn that colour



But when i hover over it it keeps the tab the same colour but it just highlights the text in the dark red

a:hover {
text-decoration: underline;
color: #F3F781;
background-color: #610B0B;

}

 

[VaginaMuncher]

Try removing
background-color? I don't use basic css no more

 

[Keydose]

Unfortunately that's not how background-color works, background-color when used with texts only places a 'background' behind the text which makes it looks like it's been highlighted.

 

[iExplicit]

Try removing
background-color? I don't use basic css no more

If i remove it it wont change the background colour at all....

 

[iExplicit]

Unfortunately that's not how background-color works, background-color when used with texts only places a 'background' behind the text which makes it looks like it's been highlighted.

How can i fix this :S

 

[Keydose]

How can i fix this :S

Could you possibly take a screenshot of how the website looks so I can see what you're trying to achieve?

 

[Stallone]

Make a div tag for the tab?

 

[iExplicit]

Could you possibly take a screenshot of how the website looks so I can see what you're trying to achieve?

I want it so when i hover over the tab it'll change the WHOLE background colour like the home one so imagine my mouse is on home it turns like that [Im not explainin this well]

 

[Keydose]

I want it so when i hover over the tab it'll change the WHOLE background colour like the home one so imagine my mouse is on home it turns like that [Im not explainin this well]

Then surely you should be modifying the background-color of the tab's <div> tag or whatever it's contained in as opposed to the text.

 

[iExplicit]

Then surely you should be modifying the background-color of the tab's <div> tag or whatever it's contained in as opposed to the text.

what do u mean

 

[Markshall]

I honestly don't understand what you mean, it looks as if you've done it in that screenshot.

Wrap your links in a div with an id of navigation and apply this to your CSS

div#navigation a {
    text-decoration: none;
    color: yellow;
    background-color: red;
}

    div#navigation a:hover {
        text-decoration: underline;
        color: #f3f781;
        background-color: #610b0b;
    }

 

[iExplicit]

I honestly don't understand what you mean, it looks as if you've done it in that screenshot.

Wrap your links in a div with an id of navigation and apply this to your CSS

div#navigation a {
    text-decoration: none;
    color: yellow;
    background-color: red;
}

    div#navigation a:hover {
        text-decoration: underline;
        color: #f3f781;
        background-color: #610b0b;
    }

Didn't work the tab is gone, nevermind just close the thread please

 

[Markshall]

I think I understand now, wrap your a's in div's

So your markup would be like this

<div id="navigation">
    <div class="nav-tab"><a href="#">Home</a></div>
    <div class="nav-tab"><a href="#">About</a></div>
    <div class="nav-tab"><a href="#">Contact</a></div>
</div>

Then your CSS similar to this:

div#navigation div.nav-tab a {
    text-decoration: none;
    color: yellow;
    background-color: red;
}

    div#navigation div.nav-tab:hover a {
        text-decoration: underline;
        color: #f3f781;
        background-color: #610b0b;
    }

...I think, lol.

 

[iExplicit]

I think I understand now, wrap your a's in div's

So your markup would be like this

<div id="navigation">
    <div class="nav-tab"><a href="#">Home</a></div>
    <div class="nav-tab"><a href="#">About</a></div>
    <div class="nav-tab"><a href="#">Contact</a></div>
</div>

Then your CSS similar to this:

div#navigation div.nav-tab a {
    text-decoration: none;
    color: yellow;
    background-color: red;
}

    div#navigation div.nav-tab:hover a {
        text-decoration: underline;
        color: #f3f781;
        background-color: #610b0b;
    }

...I think, lol.

Thanks it works!

 

[Markshall]

Closed.