uuups. i own an answer here.
Individual graphics for navigation...
First, you need to inlcude the ID in your navigation RT:
Code: Select all
<div class="vertnavi1">{NAV_LIST_UL:F,2,,act_path,active,id}</div>
Every navigation point gets a unique id now:
Code: Select all
<div class="vertnavi1">
<ul id="id_2">
<li id="li_id_4" class="sub_no sub_first"><a href="index.php?discover">DISCOVER</a></li>
<li id="li_id_5" class="sub_no sub_ul_true"><a href="index.php?features-media">FEATURES & MEDIA</a></li>
<li id="li_id_6" class="sub_no"><a href="index.php?action">ACTION</a></li>
<li id="li_id_7" class="sub_no"><a href="index.php?give">GIVE</a></li>
<li id="li_id_8" class="sub_no"><a href="index.php?funpage">FUNPAGE</a></li>
</ul>
</div>
Then the CSS:
Code: Select all
vertnavi1 ul li#li_id_4 a {
height: 27px;
background: url(images/navi_discover.png) no-repeat 0 0;
display: block;
text-indent: -800px;
margin-bottom: 5px;
}
.vertnavi1 ul li#li_id_4 a:hover {
background-position: 0 -30px;
text-indent: -800px;
margin-bottom: 5px;
}
.vertnavi1 ul li.active#li_id_4 a, .vertnavi1 ul li.act_path#li_id_4 a {
text-indent: -800px;
margin-bottom: 5px;
background-position: 0 -60px;
}
Now, you will face a problem; All the following submenu elements (li li) are classes and have a lower priority as the id css. Means.. if you switch off the image in a following class, it will not work. The browser will ignor the changes in your css classes. Only additional changes will be rendered by the browser. example: the id has no border. in the following class you set a border. A border will be rendered because it was not defined before. For overwriting css settings of an ID, you need to add
after every setting you want to overwrite ID settings with.
Here example:
Code: Select all
.vertnavi1 ul ul li.sub_no a,
.vertnavi1 ul ul li.sub_no a:link,
.vertnavi1 ul ul li.sub_no a:visited,
.vertnavi1 ul ul li.sub_no a:active,
.vertnavi1 ul ul li.sub_ul a,
.vertnavi1 ul ul li.sub_ul a:link,
.vertnavi1 ul ul li.sub_ul a:visited,
.vertnavi1 ul ul li.sub_ul a:active {
font-weight: normal;
font-style: normal;
padding: 3px 0 !important;
background-image: none !important;
background-color: #c3c3c3 !important;
color: black;
border-bottom: 1px solid white;
height: auto !important;
text-indent: 20px !important;
margin: 0 !important;
Santscho
