I have Home,Products,Gallery,Sitemap,Enquiry in the navigation bar. This is a css styled navigation bar. It has images for the list items. I am getting the list items in navigation bar correctly. But i can't get images. I dont know how to get images, i used xslt to get the list items in navigation. How can i get images in the navigation bar? Help me....
it would help if you showed at least what you've got so far. How are we able to help if you don't provide enough info about your css, location of images and/or your current xslt? there's so many ways to solve things, but each solution is quite unique, so hence the need for your current implementation details!
I used xslt navigation prototype and replaced my html code with that macro. By using it i'm getting only my list items and i'm not getting my images. How can i get that in my navigation bar?
How to display images in navigation bar?
I have Home,Products,Gallery,Sitemap,Enquiry in the navigation bar. This is a css styled navigation bar. It has images for the list items. I am getting the list items in navigation bar correctly. But i can't get images. I dont know how to get images, i used xslt to get the list items in navigation. How can i get images in the navigation bar? Help me....
Thanks in advance
Hari
Hari,
it would help if you showed at least what you've got so far. How are we able to help if you don't provide enough info about your css, location of images and/or your current xslt? there's so many ways to solve things, but each solution is quite unique, so hence the need for your current implementation details!
Looking forward to more info.
Cheers,
/Dirk
Hi Hari,
Can you please tell us how you are planning to display your images? Those images need to be in a drop down menu or on the first level itself?
Thanks here is my html tags for that navigation
<ul class="navigation">
<li class="current"><a href="#"><em class="home"></em><b>Home</b></a></li>
<li><a href="#"><em class="templates"></em><b>Products</b></a></li>
<li><a href="#"><em class="psd"></em><b>PhotoGallery</b></a></li>
<li><a href="#"><em class="contact"></em><b>ContactUs</b></a></li>
<li><a href="#"><em class="shop"></em><b>Sitemap</b></a></li>
<li><a href="#"><em class="tutorials"></em><b>Enquiry</b></a></li>
</ul>
and the css for this is
.navigation {
padding:0 0 0 20px;
margin:0;
list-style:none;
height:40px;
background:#1841c8 url(images/nav_background.gif);
}
.navigation li {
float:left;
}
.navigation li a {
display:block;
float:left;
height:40px;
line-height:40px;
color:#FFFFFF;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
padding:0 0 0 10px;
cursor:pointer;
font-size:11px;
}
.navigation li a b {
float:left;
display:block;
padding:0 16px 0 8px;
}
.navigation li.current a {
color:#FFFFFF;
background:url(images/nav_hover.gif);
}
.navigation li a:hover {
color:#00CCFF;
background: url(images/nav_hover.gif);
}
.navigation li a em {
display:block;
float:left;
width:30px;
height:40px;
}
/* ICON ELEMENTS */
.navigation li a em.home {
background-image: url(images/home.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.templates {
background-image: url(images/templates.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.psd {
background-image: url(images/psd.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.tutorials {
background-image: url(images/tutorials.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.shop {
background-image: url(images/shop.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.contact {
background-image: url(images/contact.png);
background-repeat: no-repeat;
background-position: center center;
}
Hi Hari,
Are you trying to get the images from your CSS stylesheet?
Probably no image display because you're using relative refs for your images in css, try using a '/' in front, like:
(Mind the leading '/' in front of 'images')
Hope this helps.
Regards,
/Dirk
Yes i'm trying to get the images from my stylesheet.
Well just try Dirk solution in your Stylesheet like for example
to
background:#1841c8 url("/images/nav_background.gif");I used '/ ' in front of my 'images'. But I haven't got my images in the navigation bar. Need to change anything in the xslt?
My xslt look like this
<xsl:output method="xml" omit-xml-declaration="yes" /><xsl:param name="currentPage"/>
<xsl:variable name="level" select="1"/>
<xsl:template match="/">
<ul class="navigation">
<li class="current"><a href="/">Home</a></li>
<xsl:for-each select="$currentPage/ancestor-or-self::* [@isDoc and @level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']">
<li>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:if test="$currentPage/ancestor-or-self::*/@id = current()/@id">
<xsl:attribute name="class">selected</xsl:attribute>
</xsl:if>
<xsl:value-of select="@nodeName"/>
</a>
</li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>
I think this will work
is working on a reply...