Clearing rollover

Discussion in 'Web Design and Development' started by markgodley, Sep 23, 2009.

  1. markgodley macrumors regular

    Joined:
    Mar 25, 2009
    #1
    Hey,

    I've just created this site:
    www.diane-miller.co.uk

    But on the contact page (www.diane-miller.co.uk/contact.html) its holding the values i set for the top navigation. Any idea how to clear it so i can assign new values just for the email address (you will see when you roll over it)

    thanks


    CSS:
    .nav {
    background:#8D8D8D none repeat scroll 0 0;
    border:0px solid;
    color:#FFFFFF;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:bold;
    height:15px;
    padding-left:1px;
    padding-right:1px;
    padding-top:3px;
    padding-bottom:3px;
    position:relative;
    text-align:right;
    top:0;
    margin-left:auto;
    margin-right:20px;
    width:705px;
    }

    body {
    background:url(../images/greybackground.jpg) no-repeat #8D8D8D;
    }
    .page {
    background-color:#8D8D8D;
    width:773px;
    }
    .maincontent {
    bottom:0;
    color:#FFFFFF;
    float:right;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    left:0;
    margin:0;
    margin-right:20px;
    width:473px;
    position:relative;
    right:0;
    text-align:right;
    top:20px;
    border:0px solid;
    }
    a:link {
    border-color:#8D8D8D;
    border-style:solid;
    border-width:1px 7px;
    color:#FFFFFF;
    text-decoration:none;
    }

    h1 {
    font-family:Arial,Helvetica,sans-serif;
    font-size:18px;
    color:#FFFFFF;
    font-weight: bold;
    }
    a:visited {
    border-color:#8D8D8D;
    border-style:solid;
    border-width:1px 7px;
    color:#FFFFFF;
    text-decoration:none;
    }
    a:hover {
    background-color:#FFFFFF;
    border-color:#FFFFFF;
    border-style:solid;
    border-width:1px 7px;
    color:#000000;
    text-decoration:none;
    }
    a:active {
    border-color:#8D8D8D;
    border-style:solid;
    border-width:1px 7px;
    color:#8D8D8D;
    text-decoration:none;
    }

    .footer {
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    color:#FFFFFF;
    text-align: left;
    padding: 0em;
    position:relative;
    width: 400px;
    top:550px;
    margin-left: 1px;
    margin-right: auto;
    border:0px solid;
    }

    .bottom {
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    color:#FFFFFF;
    text-align:center;
    position:relative;
    width: 250px;
    top:550px;
    padding: 0px;
    border:0px solid;
    margin: auto;
    }

    h3 {
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    color:#8D8D8D;
    font-weight: bold;
    }

    .email {
    font-family:Arial,Helvetica,sans-serif;
    font-size:18px;
    color:#FFFFFF;
    font-weight: bold;
    }
     
  2. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #2
    Because you didn't set the :hover background for just the top navigation, you did it for all <a> tags. Since the email link is an <a> tag it is picking it up as well. Specify that the css you want for the nav links only applies to the <a> tags that are in the .nav div and then it will leave the email link alone.

    HTML:
    .nav a {
    border-color:#8D8D8D;
    border-style:solid;
    border-width:1px 7px;
    color:#FFFFFF;
    text-decoration:none;
    }
    .nav a:hover {
    background-color:#FFFFFF;
    border-color:#FFFFFF;
    border-style:solid;
    border-width:1px 7px;
    color:#000000;
    text-decoration:none;
    }
     
  3. markgodley thread starter macrumors regular

    Joined:
    Mar 25, 2009

Share This Page