Menu Color Problem

  • Dorsa
  • Novice
  • Novice
  • Dorsa
  • Posts: 23

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

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
  • Dorsa
  • Posts: 23

Post 3+ Months Ago

gah!
savior!
thank you so much!
  • Dorsa
  • Novice
  • Novice
  • Dorsa
  • Posts: 23

Post 3+ Months Ago

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
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

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
  • Dorsa
  • Posts: 23

Post 3+ Months Ago

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

im in FF3.
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

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
  • Dorsa
  • Posts: 23

Post 3+ Months Ago

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
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

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.

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 28 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.