4 replies to this topic

[Root23]

I have a site where the top navigation bar looks like blocks that change color when you mouse over them.
Now I have the problem that when I try adding a simple navigation at the bottom of the page, it appears as blocks like the top.

My CSS is as follows:

/* THIS IS THE NAVIGATION LAYER */
#main-nav {
    background: #EC2028;
    height: 25px;
}
/* THIS IS FOR THE TOP NAVIGATION BAR */
#main-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
align: center;
overflow: hidden;
}

#main-nav li {
float: left;
}

#main-nav a:link,a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #EC2028;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}

#main-nav a:hover,a:active {
background-color: #EF5127;
}

I was hoping by using the #main-nav parents that when I used anchor tags outside of the #main-nav div they wouldn't be affected.

However at the bottom of the page I have my 'footer' div with simple a href links, and they appear as blocks. There is one extra link at the bottom, that isn't on the top, and it appears as normal text like it should.

Here's snippets of the HTML:

    <div id="main-nav">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#tech">Vehicle Tech</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div><!-- MAIN-NAV DIV END -->

<div id="footer">
                    <a href="#home">home</a> |
                    <a href="#products">products</a> |
                    <a href="#tech">vehicle tech</a> |
                    <a href="#about">about</a> |
                    <a href="#contact">contact</a> |
                    <a href="#legal">legal</a>
            </div>

What gives? Any help would be appreciated. (It's 4AM... it could be something staring me in the face I'm not seeing.)

Thanks

[Root23]

I've tried making a separate class for the normal links, and that didn't work. Not only did it not work, but it also messed with the color of the text in the navigation bar.

I tried making the navigation bar a class, instead of using the parent/child selector method, and that didn't work either (plus is not 'allowed' in xhtml).

Anyone have ideas?

[Sphexa]

Not sure if this would work, but try adding this to your style:

#footer a:link {color: #2b2b2b; text-decoration: none;background-color:none; }
#footer a:active {color: #2b2b2b; text-decoration: none;background-color:none; }
#footer a:visited {color: #2b2b2b; text-decoration: none;background-color:none; }
#footer a:hover {color: #1b465c; text-decoration: underline;background-color:none; }

Of course change the decoration and color to yours desired.

Also if its online post a link to the website. Also do you have #footer in your style?

[Root23]

Hey

I'll give that a shot. The site is not online.. I would attach them to this thread, but since I made this post I've altered the CSS a bit and messed things up, lol.

Thanks

[Root23]

Figured I'd update this since I've got things straightened out.

Here's the code from css, and how it's implemented into the html.

/* Navigation Bar Links */
a.nav:link, a.nav:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #EC2028;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a.nav:hover, a.nav:active {
    background-color: #EF5127;
}

/* Normal Links */
a.reg:link, a.reg:visited {
    color: #EF5127;
    text-transform: uppercase;
}
a.reg:hover {
    color: #EC2028;
    text-transform: uppercase;
}
a.reg:active {
    color: #EF5127
    text-transform: uppercase;
}

That's the proper way to give links different class. Then to use it properly in HTML is as follows:

<!--These are the Navigation Bar links! -->
                <ul>
                    <li><a class="nav" href="#root">Link</a></li>
                    <li><a class="nav" href="#root">Link2</a></li>
                    <li><a class="nav" href="#root">Link3</a></li>
                    <li><a class="nav" href="#root">Link4</a></li>
                    <li><a class="nav" href="#root">Link5</a></li>
                </ul>

<!-- These are the normal links -->
                <a class="reg" href="#home">home</a> |
                <a class="reg" href="#products">products</a> |
                <a class="reg" href="#tech">vehicle tech</a> |
                <a class="reg" href="#about">about</a> |
                <a class="reg" href="#contact">contact</a> |
                <a class="reg" href="#legal">legal</a>

Hopefully this helps someone!