Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

CSS: nav bar and regular links problem

CSS

  • Please log in to reply
4 replies to this topic

#1 Root23

Root23

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 141 posts

Posted 19 March 2010 - 01:13 AM

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
  • 0
Posted Image

#2 Root23

Root23

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 141 posts

Posted 19 March 2010 - 11:57 PM

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?
  • 0
Posted Image

#3 Sphexa

Sphexa

    CC Newcomer

  • Just Joined
  • PipPip
  • 19 posts

Posted 23 March 2010 - 07:32 PM

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?
  • 0

#4 Root23

Root23

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 141 posts

Posted 23 March 2010 - 08:20 PM

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
  • 0
Posted Image

#5 Root23

Root23

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 141 posts

Posted 26 March 2010 - 12:52 AM

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!
  • 0
Posted Image





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download