CODEWITHSUNDEEP
csshtml
user3642983
user3642983

Reputation: 1

navigation taking over other <a href> tags

my problem is that i have styled my navigation bar with a block/button style graphic. that works just fine it's just when i put any tags it resorts to that styling? is there a way on the css style sheet to stop that style and having a different one. i've had this problem on other pages too, but it didnt end up being a problem. can anyone help?

css: 

nav { 
    position:relative; 
    z-index:3; 
    position: absolute; 
    margin-left: 420px; 
    margin-top: -15px; 
    float: right;
}

ul { 
    list-style-type: none; 
    margin-top: 2px; padding: 0; 
    overflow: hidden; 
}

li { 
    float: left; 
    margin-top: 0px; 
}

a:link,a:visited { 
    display: block; 
    width: 100px; 
    height: 25px; 
    font-weight: bold; 
    font-size: 12px; 
    color: #000000; 
    background-image: url(images/buttonreg.png); 
    text-align: center; padding-top: 5px; 
    text-decoration: none; 
    font-variant: small-caps; 
}

a:hover,a:active { 
    color: #FFAA50; 
    background-image: url(images/buttonhover.png); 
}

html: just an unordered list

             <nav>
        <ul>
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="portfolio.html">portfolio</a></li>
            <li><a href="services.html">services</a></li>
            <li><a href="contact.html">contact</a></li>
        </ul> 
    </nav>

Upvotes: 0

Views: 33

Answers (2)

ralph.m
ralph.m

Reputation: 14365

It's not clear what your question is, but I'm sure what you want to do is easy enough. Sounds like you need to add a class or ID to your elements, or to make your CSS more specific. E.g.

nav ul { 
    list-style-type: none; 
    margin-top: 2px; padding: 0; 
    overflow: hidden; 
}

nav li { 
    float: left; 
    margin-top: 0px; 
}

nav a:link,a:visited { 
    display: block; 
    width: 100px; 
    height: 25px; 
    font-weight: bold; 
    font-size: 12px; 
    color: #000000; 
    background-image: url(images/buttonreg.png); 
    text-align: center; padding-top: 5px; 
    text-decoration: none; 
    font-variant: small-caps; 
}

nav a:hover,a:active { 
    color: #FFAA50; 
    background-image: url(images/buttonhover.png); 
}

Upvotes: 1

Dai
Dai

Reputation: 155443

Simply make your CSS selector more specific by making it only select <a> elements that are descendants of <nav>:

nav a:link,
nav a:visited { 
    display: block; 
    width: 100px; 
    height: 25px; 
    font-weight: bold; 
    font-size: 12px; 
    color: #000000; 
    background-image: url(images/buttonreg.png); 
    text-align: center; padding-top: 5px; 
    text-decoration: none; 
    font-variant: small-caps; 
}

nav a:hover,
nav a:active { 

    color: #FFAA50; 
    background-image: url(images/buttonhover.png); 
}

Upvotes: 0

Related Questions