Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 179
  • Last Modified:

Change my css to for tab navigation

I want to change the navigation to have no underline. I also want tabs for top  links.  I also want when you hover  for the tabs to change color. Now Iwany to make the tabs taller to cover each link








#navbar {
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
font-size: .65em;
text-align: center;
margin-top: 0;
padding-bottom: 15px;
font-weight: bold;
padding-top: 8px;
background-color: #265057;
color: #ffffff;
word-spacing: 8px;
border-bottom: 2px #dfa9d2 solid;
}

#navbar a:link, #navbar a:visited {
color: #ffffff;
word-spacing: none;
}

#navbar a.current {
color: #ff4700;
}

#navbar a:hover {
color: #ff4700;
text-decoration: underline;
}

#navigation{

margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
font-size: .69em;
text-align: center;
margin-top: 0;
padding-bottom: 8px;
font-weight: bold;
padding-top: 23px;
background-color: #265057;
color: #ffffff;
word-spacing: .8px;
}



#navigation a
{
color: #000;
background: silver url(tableftB.gif) no-repeat left top;
text-decoration: none;
padding-left: 10px
}


#navigation a span
{
background: url(tabrightB.gif) right top no-repeat;
padding-right: 10px
}

#navigation a, #navigation a span
{
display: block;
float: left
}

/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */

#navigation a:hover
{
background:  url(tableftB.gif) left top no-repeat;
padding-left: 10px
}

#navigation a:hover span
{
background: url(tabrightB.gif) right top no-repeat;
padding-right: 10px
}

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

#navigation li
{
float: left;
margin: 0;
}
0
jcw20
Asked:
jcw20
1 Solution
 
AnimasuCommented:
I want to change the navigation to have no underline.

text-decoration:none;

I also want when you hover  for the tabs to change color.

a{background: #111;}
a:hover{background: #000;}

if you want images you can use

background: #000 url("image.jpg");

Now Iwany to make the tabs taller to cover each link

height:10px;


hope this helps

- Animasu
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now