Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Help On Highlighting Current Page

This is a discussion on Help On Highlighting Current Page, within the CSS section. This forum and the thread "Help On Highlighting Current Page" are both part of the Designing Your Website category.

 
 Reply to this topicStart new topic
> Help On Highlighting Current Page
unitedcraig
post Feb 14 2008, 06:52 PM
Post #1


Rapid Squeezer
****

Group: Advisors
Posts: 427
Joined: 14-February 08
From: Stockport
Member No.: 75
Hi, here's my first asking for help post.

On a template i am designing, http://simplyfreeware.co.uk/db/prices.php, when i have the current page highlighted, the bottom border extends past the actual text, can anyone figure out why?

CODE
/***NAVIGATION***/

#navigation {
    float: right;
    width: 300px;
    margin-right: 0px;
}

#navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#navigation ul li {
    float: left;
    width: 90px;
    padding-top: 20px;
}

#navigation ul li a {
    display: block;
    height: 30px;
    text-transform: uppercase;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    margin-right: 32px;
    padding-top: 5px;
    letter-spacing: 1px;
    font: 10px Tahoma, Geneva, sans-serif;
}

#navigation ul li a.last {
    margin-right: 0;
}

#navigation ul li a:hover {
    background-color: #669933;
    border-bottom: 5px solid #003300;
}

#active {
    display: block;
    width: 200px;
    height: 30px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    padding: 5px 0 0 0;
    margin: 0;
    letter-spacing: 1px;
    font: 10px Tahoma, Geneva, sans-serif;
    border-bottom: 5px solid #FF0000;
}



Especially karinne the inspiration for this came from your site wink.gif

Thanks in advance

Craig


--------------------

Working progress
Go to the top of the page
 
+Quote Post
paintingtheweb
post Feb 14 2008, 07:16 PM
Post #2


Squeezing
***

Group: Members
Posts: 53
Joined: 14-February 08
From: Las Vegas, NV
Member No.: 122
Well I'm not exactly sure what you mean, but I'm guessing it has something to do with #active? You have it set to a fixed width of 200px so when you hover over the anchors, it extends beyond simply because they're not 200 px wide. Does that make sense?

QUOTE (unitedcraig @ Feb 14 2008, 03:52 PM) *
Hi, here's my first asking for help post.

On a template i am designing, http://simplyfreeware.co.uk/db/prices.php, when i have the current page highlighted, the bottom border extends past the actual text, can anyone figure out why?

CODE
/***NAVIGATION***/

#navigation {
     float: right;
     width: 300px;
     margin-right: 0px;
}

#navigation ul {
     list-style: none;
     margin: 0;
     padding: 0;
}

#navigation ul li {
     float: left;
     width: 90px;
     padding-top: 20px;
}

#navigation ul li a {
     display: block;
     height: 30px;
     text-transform: uppercase;
     color: #333;
     text-decoration: none;
     font-weight: bold;
     text-align: center;
     margin-right: 32px;
     padding-top: 5px;
     letter-spacing: 1px;
     font: 10px Tahoma, Geneva, sans-serif;
}

#navigation ul li a.last {
     margin-right: 0;
}

#navigation ul li a:hover {
     background-color: #669933;
     border-bottom: 5px solid #003300;
}

#active {
     display: block;
     width: 200px;
     height: 30px;
     color: #333;
     text-decoration: none;
     font-weight: bold;
     text-align: center;
     padding: 5px 0 0 0;
     margin: 0;
     letter-spacing: 1px;
     font: 10px Tahoma, Geneva, sans-serif;
     border-bottom: 5px solid #FF0000;
}



Especially karinne the inspiration for this came from your site wink.gif

Thanks in advance

Craig


--------------------
The great thing about Object Oriented code is that it can make small, simple problems look like large, complex ones.
Go to the top of the page
 
+Quote Post
unitedcraig
post Feb 14 2008, 07:20 PM
Post #3


Rapid Squeezer
****

Group: Advisors
Posts: 427
Joined: 14-February 08
From: Stockport
Member No.: 75
sorry the 200px was simply to see if it did it at all lengths, i will change it back to the original length, 1 minute :S


--------------------

Working progress
Go to the top of the page
 
+Quote Post
unitedcraig
post Feb 14 2008, 07:23 PM
Post #4


Rapid Squeezer
****

Group: Advisors
Posts: 427
Joined: 14-February 08
From: Stockport
Member No.: 75
CODE
#active {
    display: block;
    width: 90px;
    height: 30px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    padding: 5px 0 0 0;
    margin: 0;
    letter-spacing: 1px;
    font: 10px Tahoma, Geneva, sans-serif;
    border-bottom: 5px solid #FF0000;
}


Sorry, here is the new code, i have changed the css file that's online and as you can see the same problem is there.


--------------------

Working progress
Go to the top of the page
 
+Quote Post
karinne
post Feb 14 2008, 07:46 PM
Post #5


Co-Founder
******

Group: Co-Founders
Posts: 2,316
Joined: 13-February 08
From: Squeezin'
Member No.: 2
Yeah ... the problem is you have the #active set on the li as oppose to your a

You a { } has padding and margin and stuff so ... just move that id="active" to your <a ... >


--------------------
The Squeeze Store is now OPEN! Come on in and grab something!

a web design portfolio | web non-sense
I'm also on: del.icio.us | flickr | virb | facebook | twitter
The Web Squeeze is also on: virb | facebook | stumbleupon - JOIN IN!
Go to the top of the page
 
+Quote Post
unitedcraig
post Feb 14 2008, 08:03 PM
Post #6


Rapid Squeezer
****

Group: Advisors
Posts: 427
Joined: 14-February 08
From: Stockport
Member No.: 75
CODE
    <ul>
        <li><a<?php if ($page == 'aboutus') { echo ' id="active"'; }?> href="aboutus.php">About Us</a></li>
        <li><a<?php if ($page == 'prices') { echo ' id="active"'; }?> href="prices.php">Prices</a></li>
        <li><a<?php if ($page == 'contact') { echo ' id="active"'; }?> href="contact.php">Contact</a></li>
    </ul>


navigation is now this, but all it appears to have done is centre the underline?


--------------------

Working progress
Go to the top of the page
 
+Quote Post
Daygon
post Feb 15 2008, 02:01 AM
Post #7


Rapid Squeezer
****

Group: Members
Posts: 115
Joined: 13-February 08
From: Houston, Texas
Member No.: 12
im looking in safari and it looks ok, it just looks like the prices is a bit too far from the first link, but thats really all im getting on this end, im not seeing anything in the code, i think you could do without the padding though.


--------------------
Jonathon Harrelson
Portfolio: InterAction Media Inc
Available for work
Go to the top of the page
 
+Quote Post
ejg
post Feb 15 2008, 06:47 AM
Post #8


Squeezing
***

Group: Members
Posts: 67
Joined: 14-February 08
Member No.: 86
It's the width: 90px on #active.

When price is not active the <a> width is 58px. When it is active, the width is 90px. The <li> is already 90px so you can get rid of the width: 90px in #active.
Go to the top of the page
 
+Quote Post
craig
post Feb 15 2008, 06:57 AM
Post #9


Fresh Squeezed
**

Group: Members
Posts: 30
Joined: 13-February 08
Member No.: 17
Change these 2 properties in your CSS to:


CODE
#navigation ul li a {
    display: block;
    height: 20px;
    text-transform: uppercase;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    margin-right: 32px;
    padding-top: 5px;
    letter-spacing: 1px;
    font: 10px Tahoma, Geneva, sans-serif;
}

#active {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    padding: 5px 0 0 0;
    margin: 0;
    letter-spacing: 1px;
    font: 10px Tahoma, Geneva, sans-serif;
    border-bottom: 5px solid #FF0000;
}


--------------------
Craig Hamnett
Fast, Cheap, Good... choose two
Go to the top of the page
 
+Quote Post
unitedcraig
post Feb 15 2008, 08:29 AM
Post #10


Rapid Squeezer
****

Group: Advisors
Posts: 427
Joined: 14-February 08
From: Stockport
Member No.: 75
Thank you craig biggrin.gif

how come this worked by the way, for future reference?


--------------------

Working progress
Go to the top of the page
 
+Quote Post
craig
post Feb 15 2008, 09:33 AM
Post #11


Fresh Squeezed
**

Group: Members
Posts: 30
Joined: 13-February 08
Member No.: 17
There was only two changes, one was the height, which I thought was too tall, it made the border seem like it wasn't part of the navigation.

The other was the display:block; taken out of the #active section.

With a hover class things get inherited so if you have the main a:link as display:block, you don't need the hover to also be display:block, you just need to focus on the different style.

Just little things you pick up after debugging things for so long!

Craig smile.gif


--------------------
Craig Hamnett
Fast, Cheap, Good... choose two
Go to the top of the page
 
+Quote Post
unitedcraig
post Feb 15 2008, 06:08 PM
Post #12


Rapid Squeezer
****

Group: Advisors
Posts: 427
Joined: 14-February 08
From: Stockport
Member No.: 75
Thanks a lot for this, also decreased the bottom border width smile.gif


--------------------

Working progress
Go to the top of the page
 
+Quote Post
« Next Oldest · CSS · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   1 thunderrabbit 90 13th February 2008 - 11:21 PM
Last post by: Jacob
No New Posts   13 Rakuli 272 19th February 2008 - 09:53 AM
Last post by: karinne
No New Posts   8 Daniela 212 18th February 2008 - 05:28 PM
Last post by: Jasontor
No new   16 thewal 211 19th February 2008 - 02:34 PM
Last post by: thewal
No New Posts   13 welshstew 187 17th February 2008 - 04:30 AM
Last post by: Jacob