Back To Website Design Forum

Menu Color Problem

  • Dorsa
  • Novice
  • Novice
  • No Avatar
  • Joined: Jul 16, 2006
  • Posts: 23
  • Status: Offline

Post August 10th, 2009, 10:37 am

Hi there, on my site http://owenconti.com , I want the current pages' menu title to be blue and have no rollover action. I've tried applying a "class" to the link stating link color as the blue but it doesn't accept that. I don't know how to accomplish this.

Please help?
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 10th, 2009, 10:37 am

  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Joined: May 29, 2005
  • Posts: 1417
  • Loc: 55° N, 3° W
  • Status: Offline

Post August 10th, 2009, 4:47 pm

Remove the link from the link text entirely and give the <li> element a class of "current" (or whatever name you like best). So, for the links page it would look like this:

Code: [ Select ]
<div id="header">
<ul>
<li><a href="http://owenconti.com/index.html">owenconti</a></li>
<li><a href="http://owenconti.com/photography.html">photography</a></li>
<li><a href="http://owenconti.com/work.html">work</a></li>
<li class="current">links</li>
</ul>
</div>
  1. <div id="header">
  2. <ul>
  3. <li><a href="http://owenconti.com/index.html">owenconti</a></li>
  4. <li><a href="http://owenconti.com/photography.html">photography</a></li>
  5. <li><a href="http://owenconti.com/work.html">work</a></li>
  6. <li class="current">links</li>
  7. </ul>
  8. </div>



The styling is now a little off, but not by much. To fix that, add the following rule to your css:

Code: [ Select ]
.current {padding: 0 45px}



Seems about right to me:

Image
  • Dorsa
  • Novice
  • Novice
  • No Avatar
  • Joined: Jul 16, 2006
  • Posts: 23
  • Status: Offline

Post August 11th, 2009, 12:16 am

gah!
savior!
thank you so much!
  • Dorsa
  • Novice
  • Novice
  • No Avatar
  • Joined: Jul 16, 2006
  • Posts: 23
  • Status: Offline

Post August 11th, 2009, 12:33 am

Actually, that only worked on links. If you view the site now you will see what I mean, I tried adjusting padding on both left and right and getting rid of it totally but no, something somewhere is pushing the items.
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Joined: May 29, 2005
  • Posts: 1417
  • Loc: 55° N, 3° W
  • Status: Offline

Post August 11th, 2009, 10:32 am

Didn't you forget the 45px padding?

When I look at the "work" page the spacing is off. If I add the padding of 45 px, like in my example, it look fine.
  • Dorsa
  • Novice
  • Novice
  • No Avatar
  • Joined: Jul 16, 2006
  • Posts: 23
  • Status: Offline

Post August 11th, 2009, 12:31 pm

it definitely does not fix it for me with 0 padding or 45 or anything.

im in FF3.
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Joined: May 29, 2005
  • Posts: 1417
  • Loc: 55° N, 3° W
  • Status: Offline

Post August 11th, 2009, 2:10 pm

You've applied the class "work" to some pages and the class "active" to others. There is no class "active" in your css. In your css, the "work" class has the 45px padding - which is why the "work" and "links" pages look fine and why the "photography" page is out of wack.

You need to apply the "work" class to active menu items on all pages, or change "work" to "active" on the menus and edit the css class name to "active" in the css.


You should be good to go now.
  • Dorsa
  • Novice
  • Novice
  • No Avatar
  • Joined: Jul 16, 2006
  • Posts: 23
  • Status: Offline

Post August 11th, 2009, 4:08 pm

i tried making a "work" class for the work page, a "link" class for the link page and so on.

each with the exact same padding.

but it didn't work for me. ???
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Joined: May 29, 2005
  • Posts: 1417
  • Loc: 55° N, 3° W
  • Status: Offline

Post August 12th, 2009, 11:35 am

I'm not sure what's going on at your end, since each page works perfectly for me.

This is my code for the "links" page:

Code: [ Select ]
<div id="header">
<ul>
<li><a href="http://owenconti.com/index.html">owenconti</a></li>
<li><a href="http://owenconti.com/photography.html">photography</a></li>
<li><a href="http://owenconti.com/work.html">work</a></li>
<li class="active">links</li>
</ul>
</div>
 
  1. <div id="header">
  2. <ul>
  3. <li><a href="http://owenconti.com/index.html">owenconti</a></li>
  4. <li><a href="http://owenconti.com/photography.html">photography</a></li>
  5. <li><a href="http://owenconti.com/work.html">work</a></li>
  6. <li class="active">links</li>
  7. </ul>
  8. </div>
  9.  


This is my code for the "work" page:

Code: [ Select ]
<div id="header">
<ul>
<li><a href="http://owenconti.com/index.html">owenconti</a></li>
<li><a href="http://owenconti.com/photography.html">photography</a></li>
<li class="active">work</li>
<li><a href="http://owenconti.com/links.html">links</a></li>
</ul>
</div>
  1. <div id="header">
  2. <ul>
  3. <li><a href="http://owenconti.com/index.html">owenconti</a></li>
  4. <li><a href="http://owenconti.com/photography.html">photography</a></li>
  5. <li class="active">work</li>
  6. <li><a href="http://owenconti.com/links.html">links</a></li>
  7. </ul>
  8. </div>


(Do the same kind of thing for the other two pages too, obviously)




CSS for the header looks like this:

Code: [ Select ]
#header ul {
list-style: none;
margin: 40px 0 0 28px;
float: left;
text-align: center;
}
#header ul li {
    display: inline;
    text-align: center;
    width: 850px;
}
#header ul li a {
   
color: #3D3D3D;
    padding: 0 45px;
    text-decoration: none;
}
#header ul li a:hover {
    color: #0083f2;
}
 
.active {padding: 0 45px;}
  1. #header ul {
  2. list-style: none;
  3. margin: 40px 0 0 28px;
  4. float: left;
  5. text-align: center;
  6. }
  7. #header ul li {
  8.     display: inline;
  9.     text-align: center;
  10.     width: 850px;
  11. }
  12. #header ul li a {
  13.    
  14. color: #3D3D3D;
  15.     padding: 0 45px;
  16.     text-decoration: none;
  17. }
  18. #header ul li a:hover {
  19.     color: #0083f2;
  20. }
  21.  
  22. .active {padding: 0 45px;}



If that doesn't work, then I've no idea what's going on. I swear it looks perfect at my end.

Page 1 of 1

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 106 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.