+ Start a Discussion
Uves RavatUves Ravat 

Image on the tab

Hi

 

I am trying to create an image on the tab as followers:

 

 

I have used the following code but the image doesnt appear. any reason why?

 

 #navigation ul li a {
     background-image:url({!$Resource.norm_right}) no-repeat 100% 0;
     color: #06C;
     padding: 5px 0;
     text-decoration: none;
 }

 

Thanks

 

vriavmvriavm

Try this:

            #navigation ul li a {
     content :element(header);
     color: #06C;
     padding: 5px 0;
     text-decoration: none;
 }
 
div.header {
    position: running(header);
}
 
<div class="header" style="height:50px;align: right">
<apex:image width="172px" height="30px" value="{!$Resource.Image}" />
</div>

Uves RavatUves Ravat

Yep that worked but how do create tabs of them and add text to (code is below)

 

<apex:page showHeader="false" sidebar="false" standardStylesheets="false" >

    <!-- Styles -->
    <apex:variable var="styleFontColor"                         value="#000000" />
    <apex:variable var="styleHeaderBGColor"                     value="#E4EAF4" />
    <apex:variable var="styleHeaderFontColor"                   value="#000000" />
    <apex:variable var="styleLineColor"                         value="#3B5E91" />
    
    <style>
#navigation ul, #navigation ul li {
     list-style: none;
     margin: 0;
     padding: 0;
 }


 #navigation ul {
     text-align: center;
 }

 #navigation ul li {
     display: inline;
     margin-right: .75em;
 }

 #navigation ul li.last {
     margin-right: 0;
 }
 
 #navigation li a {
     padding: 5px 1em;
 }

#navigation ul li a {
     content :element(header);
     color: #06C;
     padding: 5px 0;
     text-decoration: none;

 }


 #navigation ul li a span {
     background: url(“tab-left.gif”) no-repeat;
     padding: 5px 1em;
 }

 #navigation ul li a:hover span {
     color: #69C;
     text-decoration: underline;
 }
 div.header {
    position: running(header);
}

    </style>

<div id="navigation">
     <ul>
        <div class="header" style="height:50px;align: right">
        <apex:image width="172px" height="30px" value="{!$Resource.norm_left}" />
        <li><a href="#"><span>Home</span></a></li>
        </div>
          
          <li><a href="#"><span>About</span></a></li>
          <li><a href="#"><span>Our Work</span></a></li>
          <li><a href="#"><span>Products</span></a></li>
          <li class="last"><a href="#"><span>Contact Us</span></a></li>
     </ul>
 </div>
</apex:page>

 Thanks