Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Hari 21 posts 41 karma points
    Aug 23, 2011 @ 13:48
    Hari
    0

    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

  • Dirk De Grave 4532 posts 5977 karma points MVP 3x admin
    Aug 23, 2011 @ 14:05
    Dirk De Grave
    0

    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

  • Fuji Kusaka 2202 posts 4219 karma points
    Aug 23, 2011 @ 14:07
    Fuji Kusaka
    0

    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?

     

     

  • Hari 21 posts 41 karma points
    Aug 23, 2011 @ 14:29
    Hari
    0

    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;

    }

    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?

     

  • Fuji Kusaka 2202 posts 4219 karma points
    Aug 23, 2011 @ 14:33
    Fuji Kusaka
    0

    Hi Hari,

    Are you trying to get the images from your CSS stylesheet?

     

  • Dirk De Grave 4532 posts 5977 karma points MVP 3x admin
    Aug 23, 2011 @ 14:33
    Dirk De Grave
    0

    Probably no image display because you're using relative refs for your images in css, try using a '/' in front, like:

    .navigation li a em.contact {
    background-position: center center;
    background-image: url(/images/contact.png);
    background-repeat: no-repeat;
    }

    (Mind the leading '/' in front of 'images')

    Hope this helps.

    Regards,

    /Dirk

  • Hari 21 posts 41 karma points
    Aug 23, 2011 @ 14:38
    Hari
    0

    Yes i'm trying to get the images from my stylesheet.

  • Fuji Kusaka 2202 posts 4219 karma points
    Aug 23, 2011 @ 14:42
    Fuji Kusaka
    0

    Well just try Dirk solution in your Stylesheet like for example

    background:#1841c8 url(images/nav_background.gif); 

    to

    background:#1841c8 url("/images/nav_background.gif");
  • Hari 21 posts 41 karma points
    Aug 23, 2011 @ 14:50
    Hari
    0

     

    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"><href="/">Home</a></li>
    <xsl:for-each select="$currentPage/ancestor-or-self::* [@isDoc and @level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']">
    <li>
    <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>

     

  • Fuji Kusaka 2202 posts 4219 karma points
    Aug 23, 2011 @ 15:03
    Fuji Kusaka
    0

    I think this will work

    background:#1841c8 url("../images/nav_background.gif");
Please Sign in or register to post replies

Write your reply to:

Draft