PDA

View Full Version : Current page indicator with css



OurJud
Mar 14th, 2011, 03:44 AM
If this is not straight forward, then I'd rather be told that, as it's no big deal and I can live without it - it's just something I've seen on other sites that I like.

On my blog http://uk451.blogspot.com/ I have a set of links across the top of the page (just under the header). What I want to do is underline the link relating to the page that a given user is on. So, for instance, when you arrive at the blog 'home' would be underlined. But if you then navigate to 'about' it would be this link that is underlined. I'd also like each of these links to underline when hovered over, but I suspect that would need java??

I have done a number of searches on this and found a few tutorials, but either they don't work when implemented or they're too complicated.

As I say, if this is a simple and straight forward thing to do, then great. If it's a ball-ache and something for the experinced only, then I'd rather be told :)

Thanks in advance.

Excavator
Mar 14th, 2011, 03:55 AM
Hello OurJud,
It is pretty a pretty simple straight forward thing once you understand how it works. I have a demo that shows how at http://nopeople.com/CSS%20tips/h_ul_menu-with_images/index.html

oesxyl
Mar 14th, 2011, 04:24 AM
Hello OurJud,
It is pretty a pretty simple straight forward thing once you understand how it works. I have a demo that shows how at http://nopeople.com/CSS%20tips/h_ul_menu-with_images/index.html
i apologise, this is off topic. I follow the link,( i'm cat and usualy curious, :)), in http://nopeople.com/sitewide/CSS/preview_global.css to the nav element there is a line-height: 48px;, i guess is accidently there because nav overlap the h1 with few pixels.

best regards

Excavator
Mar 14th, 2011, 05:09 AM
I'm not sure what you mean...
On that page, #nav is position: fixed; ... the heading scrolls under that #nav.

oesxyl
Mar 14th, 2011, 06:10 AM
I'm not sure what you mean...
On that page, #nav is position: fixed; ... the heading scrolls under that #nav.
yes is fixed but have 58px height and the h6 from div#mainWrap have a margin-top of 46px in my browser, probably because of fonts settings. This show like in the attached pictures. Probably my first suggestion to remove line-height is not a good idea because will remove the top and bottom space around menu. Maybe if you add a line-height: 3.0em or something > 2.0em to the h6?

best regards

Excavator
Mar 14th, 2011, 10:14 AM
yes is fixed but have 58px height and the h6 from div#mainWrap have a margin-top of 46px in my browser, probably because of fonts settings. This show like in the attached pictures. Probably my first suggestion to remove line-height is not a good idea because will remove the top and bottom space around menu. Maybe if you add a line-height: 3.0em or something > 2.0em to the h6?

best regards

I see it now. You must be using IE7.
I specified the margin on the h6 tag, looks like that fixed it. Dang IE anyway :mad:

oesxyl
Mar 14th, 2011, 01:49 PM
I see it now. You must be using IE7.
I specified the margin on the h6 tag, looks like that fixed it. Dang IE anyway :mad:
no, i use firefox 3.5.16, in fact Iceweasel, ffox for debian, but as far as i know only the name is different. user agent is:

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1.16) Gecko/20110302 Iceweasel/3.5.16 (like Firefox/3.5.16)

best regards

OurJud
Mar 14th, 2011, 03:23 PM
Excavator - I only understand your demo to a certain extent. For instance in your preview you say the CSS is:

body#about a#about-us,
body#hirenav a#hire,
body#salesnav a#sales,
body#servicenav a#service,
body#contactnav a#contact-us { styling here }

I think I see why 'body' is there, and the #about-us, #hire, etc, is the ids for each individual link, but what are the #about, #hirenav , #salenav, etc for?

In basic terms, and from what I can gather from other tutorials, I give each link a class name (or is it id?) and then use CSS to style those classes/ids, right?

abduraooft
Mar 14th, 2011, 03:43 PM
Try to follow http://www.codingforums.com/showpost.php?p=605564&postcount=3

OurJud
Mar 14th, 2011, 04:23 PM
Thanks, abduraooft.

The bit I'm struggling with is the id for each page. I'm using the blogger platform, so I don't have access to the individual pages - I just have a single template that combines the html and css for the entire blog/site. I thought I could get the id for each page by looking at what's written on the end of the url of each page. So for instance, I presume the id for the about page is 'about' because the url for that page is: http://uk451.blogspot.com/p/about.html

So then I gave the 'about' link its own id like so: <li id='nav_about'><a href='http://uk451.blogspot.com/p/about.html'>About</a></li>

and tried to target it in my css with: body.about #nav_about { font-weight: bold; }

I also tried: body#about #nav_about { font-weight: bold; }

But neither work?

abduraooft
Mar 14th, 2011, 04:54 PM
But neither work? That method works only if you've a way to show the <body> tags of each page with different id, as indicated in that post.

OurJud
Mar 14th, 2011, 05:23 PM
That method works only if you've a way to show the <body> tags of each page with different id, as indicated in that post.

Okay, I have no idea what you just said to me, but I did say that as soon as this got too complicated I would quit. We're now about there as far as complicated gets, so I'm quitting.

Thanks to everyone who replied.

Excavator
Mar 14th, 2011, 06:01 PM
The bit I'm struggling with is the id for each page. I'm using the blogger platform, so I don't have access to the individual pages

That's how this works though. If you don't have access to the individual .html documents to assign each a unique id then it doesn't work.

Does blogger have any menu plug-ins available?

OurJud
Mar 14th, 2011, 06:08 PM
That's how this works though. If you don't have access to the individual .html documents to assign each a unique id then it doesn't work.

Ahh, I see! Ah well, it's no biggy. I don't know of any menu plug-ins, Excavator.

oesxyl
Mar 14th, 2011, 11:23 PM
Ahh, I see! Ah well, it's no biggy. I don't know of any menu plug-ins, Excavator.
if you could put some javascript in the template so you could add individual style to the link for the curent page when the page is loaded.

best regards

OurJud
Mar 14th, 2011, 11:36 PM
Well I posted this on the google blogger help forum too and have finally got an answer. They say all I need to do is use a:active but I still can't get it to work.

If the markup for my links is:

<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
<li><a href='http://uk451.blogspot.com/p/about.html'>About</a></li>
<li><a href='http://uk451.blogspot.com/p/disclaimer.html'>Disclaimer</a></li>
<li><a href='http://uk451.blogspot.com/p/contact.html'>Contact</a></li>


</ul>
</div>

What would the CSS be to bold the link for the current page?

I tried: #menu a:active { font-weight: bold; } but it didn't work.

Excavator
Mar 14th, 2011, 11:43 PM
BAH! Blogger forums may not be the greatest advice. The :active selector is active when you click on the link. Let go of the mouse click (ie: not active) and that styling goes away.

See how :active works here (http://www.w3schools.com/Css/sel_active.asp).

Now it could be the answer you got was suggesting a class of active which would look like .active in your CSS and be applied like <a href="link.html" class="active"></a> in your markup. That's a totally different thing. You would still need access to each .html document to change that class to the necessary anchor for that to work.

OurJud
Mar 14th, 2011, 11:45 PM
Thanks, Excavator. And you're right, blogger forums are about as useless at this place is helpful.