Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Another question about txp:section_list
How can I specify the active_class for the link container?
I’m generating a beautiful unordered list using this tag in a form, like this:
<txp:section_list active_class="active" break="li" class="nav" default_title="Home" exclude="article" include_default=“1” wraptag=“ul” />
Works a treat and generates this:
<ul class="nav">
<li><a href="http://gavnosis.dev/">Home</a></li>
<li><a href="http://gavnosis.dev/about/">About</a></li>
<li><a href="http://gavnosis.dev/contact/">Contact</a></li>
<li><a class="active" href="http://gavnosis.dev/gavnosis/">Gavnosis</a></li>
</ul>So now I’ve got a hook to highlight the link into the current section: a class=“active”
However, I really want a hook into the parent <li> element for my CSS to work as intended, so I can do something
like this:
li.active{
background-image:url(/images/6.jpg);
background-repeat: no-repeat;
background-position:left top;
height:30px;}If I have to use the <a> element then I can’t emulate a button for my section navigation
li a.active{
background-image:url(/images/6.jpg);
background-repeat: no-repeat;
background-position:left top;
height:30px;}…obviously I can just write the section navigation manually, but I was so pleased with the elegance of
txp:section_list that I’d like to make it work!
Many thanks in advance,
Gavnosis
Offline
Re: Another question about txp:section_list
Why you can’t use the a for the background image? Because you can, you just have to make the a to be block-element. And if its horizontal navigatiotion you will need to add float and display: inline; to the list-element.
ul.nav li a.active {
background: url(/images/6.jpg) no-repeat 0 0;
height: 30px;
display: block;
}If horizontal, add these:
ul.nav li {
float: left;
display: inline;
}
ul.nav li a {
float: left;
}And ofcourse if it’s not horizontal, you will need to do some fixes for IE6:
<!--[if lte IE 6]>
<style type="text/css">
ul.nav li a.active,ul.nav li a {
height: 1px;
}
</style>
<![endif]-->Cheers!
Offline
Re: Another question about txp:section_list
Thanks Gocom,
That’s almost done the trick – I’ve just got to get the padding for the list elements right, and then it’ll be exactly what I was after… it’s now down to my less-special CSS ;-)
#navigation {
padding:40px 0 40px;
float: left;
width: 185px;}
#navigation ul{
list-style:none;
margin: 0;
padding: 0;}
#navigation ul.nav li a{
background: url(/images/5.jpg) no-repeat 0 0;
height:28px;
display:block;
margin: 0;
padding:2px 0 0 22px;}
#navigation ul.nav li a.active {
background: url(/images/6.jpg) no-repeat 0 0;
height: 28px;
display: block;
margin: 0;}
#navigation a{
color:#fff;
text-decoration:none;}
<!--[if lte IE 6]>
<style type="text/css">
ul.nav li a.active,ul.nav li a {
height: 1px;
}
</style>
<![endif]-->I’ll post a link when it’s done!
Thanks again,
Gavnosis
Offline
Offline