Textpattern CMS

#1 2006-04-29 19:03:23

Dorian

New Member

Registered: 2006-04-11

Posts: 5

problem with id="current" in navigation

heya,
I have a styled list navigation, using the glx_hl_current plugin to mark the current section with a

<code><li class=“current”>navigationlink here</li></code>

I don’t get the style assigned to the class “current” to override the style of the wrapping div ( .navbuttons li a )
can anybody help me with how to organise css and html the best way to get this working?

I changed the “class” to “id” in the plugin output because I thought id is more likely to overun another id than is a class.. does that make sense?

here’s the code:

css:
<code>#navcontainer
{ width: 150px;
}
</code>
<code>#navbuttons li a
{ color: #666; background: #F5F6F7 url(../images/24.gif) no-repeat; padding: 2px; padding-left: 15px; display: block; border-bottom: 1px solid #999; font: 11px Arial, sans-serif; font-weight: bold; text-decoration: none; text-align: left; _height: 1.2em; /* IE win only */
}
</code>
<code>#navbuttons li a:hover
{ color: #999; background: #fff url(../images/25.gif) no-repeat; text-decoration: none; padding-left: 16px;
}
</code>
<code>#current a
{ margin-left: 3px; color: #999; background: #fff url(../images/25.gif) no-repeat;
}
</code>

html:
<code><div id=“navcontainer”>
<div id=“navbuttons”>
<ul>
<li<txp:glx_hl_current_section section=“default” />><a href=”#”>Home</a></li>
<li<txp:glx_hl_current_section section=“about” />><a href=”#”>About</a></li>
<li<txp:glx_hl_current_section section=“articles,news-announcments” />><a href=”#”>Articles</a></li>
<li<txp:glx_hl_current_section section=“archive” />><a href=”#”>Archive</a></li>
<li<txp:glx_hl_current_section section=“contact” />><a href=”#”>Contact</a></li>
<li<txp:glx_hl_current_section section=“portfolio” />><a href=”#”>Portfolio</a></li>
</ul>
</div>
</div>
</code>

the
<code><li<txp:glx_hl_current_section section=“default” />></code>
will result in <code><li id=“current”></code> in the current section. this works fine!

I’m still struggling with css, it might be a pretty straightforward thing to solve.. I hope.. :)
thanks in advance!

Last edited by Dorian (2006-04-29 19:22:40)

#2 2006-04-29 19:29:42

bancroft

Member

Registered: 2005-09-30

Posts: 39

Re: problem with id="current" in navigation

Hi Dorian,

You could try this without the plugin;
<code><li<txp:if_section name=”“> class=“active”</txp:if_section>><a href=”/”>Home</a></li>
<li<txp:if_section name=“about”> class=“active”</txp:if_section>><a href=”/about”>About</a></li></code>
and so on…

And the CSS to target the active link;

<code>#navbuttons li.active a {
margin-left: 3px;
color: #999;
background: #fff url(../images/25.gif) no-repeat;
}
</code>

Hope that’s a help

Graham

#3 2006-04-29 19:50:08

Dorian

New Member

Registered: 2006-04-11

Posts: 5

Re: problem with id="current" in navigation

oh.. this works.. perfectly!!

thank you so much!