Hi

 

I need some help on my nav I would like to get the background white and the text black so its a contrast

I have hosted my website on a free website so you can see,

the url is:

www.slippywebsite.webs.com

 

And my Css code is

body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 15px;
   color: white;
   text-align: center;
   margin: 0px;
   padding-top: 20px;
   padding-right: 0px;
   padding-bottom: 20px;
   padding-left: 0px;
}


#wrapper
{
width:1074px;
height:0 auto;
margin:0 auto;
}

div#container
{
margin-left: 10%;
margin-right: 10%;
}


#header

{
height:180px;
width:1074px;
background-color:black;
padding-bottom:5px;
}



#nav

{
height:30px;
background-color:black;
width:1074px;
word-spacing: 2em;

}

#nav ul
{
list-style: none;
padding: 0;
margin: 0;

}

#nav-menu li
{
float: right;
margin: 0 0.15em;

} 

#nav-menu li a:link, #nav li a:visited, #nav li a:active, #nav li a.hover <-----------This is my atempt
{
   color:white;
   text-decoration: none;
   display: block;

   width: 130px;
}



#nav li a
{

height: 2em;
line-height: 2em;
float: right;
width: 9em;
display: block;
border-left:0.1em solid #FFFFFF;
color: white;

}

#content1
{
height:0 auto;
width:1074px;
background-color:black;
padding-top:5px;
margin-top:10px;
float:inline;

}

#content2
{
height:0 auto;
width:532px;
background-color:black;
margin-top:10px;
float:left;
margin-right:5px;
}

#content3
{
height:0 auto;
width:532px;
background-color:black;
margin-top:10px;
float:right;
margin-left:5px;
}

Any finaly

 

Happy New Year

Don't get too drunk..

change a.hover to a:hover

I have done that but it doesn't affect it.

Thanks

I have done that but it doesn't affect it.

Thanks

 

Maybe webs.com doesn't allow a:hover.

It doesn't work when I open it without the hosting if you know what I mean

The problem is in this code here:

 

#nav-menu li a:link, #nav li a:visited, #nav li a:active, #nav li a.hover
{
color:white;
text-decoration: none;
display: block;

width: 130px;
}

 

You have a:hover in the group of css properties.

 

Split them up like so:

 

#nav-menu li, #nav li, #nav li a:active, #nav li  {

color:white;
text-decoration: none;
display: block;
width: 130px;

}

 

a.hover {
selector:value;
}
a:visited {
selector:value;
}

Let me reword that.

 

You have a:hover and a:active and a:link properties all grouped so then you will apply that css to all of them.

 

So what you need to do is split them up and assign styles to them.

Ok ive put this in

a.hover

{

color:white;

}

 

a:active

{

color:black;

}

Ok what I want it to do is hightlight the surrounding area of the like so that it blends into the margin and all that code does is put the a white line under it

You have lots of anomalies in your css.

For example:

a.hover:white;

inside the declarations for #nav, #nav ul and nav-menu li.

Definitely remove that first.

Secondly, this line is targetting an element with the id nav-menu

#nav-menu li a:link

but looking at your source code, you don't have an element with that id.

If you want the #nav to have a white background-color, use #fff and for black text, use

#navl li a {
color:#000;
}

However, I'm not quite sure what you want to achieve. Do you want the link to change to black only on hover or black all of the time?

What I want to happen is the link and the surrounding area when the cursor is over it to turn white blending in to the margin

I think im just going to leave it any adress it later

OK, amending your css slightly, the following will do what you're after.

Just change the background-color and color values on hover.

#nav li a {
height: 2em;
line-height: 2em;
float: right;
width: 9em;
display: block;
border-left:1px solid #FFFFFF;
color: #fff;
background-color:#000;
}
#nav li a:hover {
background-color:#fff;
color:#000;
}

Thankyou Very Much!