[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How do I style xsl?

Posted on 2013-01-18
3
Medium Priority
?
356 Views
Last Modified: 2013-01-28
Hi,

I have designed a rotating banner using xsl, css and html. The basic structure I have designed it around it shown below:

<div id="slider">
<ul>
	<li><img src="images/01.jpg" alt="" /></li>
	<li><img src="images/02.jpg" alt="" /></li>
	<li><img src="images/03.jpg" alt="" /></li>
	<li><img src="images/04.jpg" alt="" /></li>
	<li><img src="images/05.jpg" alt="" /></li>
</ul>
</div>

Open in new window


Below is my final xsl:

<div id="slider">
<div class="item">
       <xsl:if test="string-length($SafeImageUrl) != 0">
          <div class="image-area-left">
          <!-- <a href="{$SafeLinkUrl}" onclick="return OpenDialog('{$SafeLinkUrl}');">
                              <xsl:if test="$ItemsHaveStreams = 'True'">
                                <xsl:attribute name="onclick">
                                  <xsl:value-of select="@OnClickForWebRendering"/>
                                </xsl:attribute>
                              </xsl:if>
                              <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
                                <xsl:attribute name="onclick">
                                  <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
                                </xsl:attribute>
                              </xsl:if>
                         </a> -->
               <img class="image" src="{$SafeImageUrl}" title="{@ImageUrlAltText}">
            <xsl:if test="$ImageWidth != ''">
              <xsl:attribute name="width">
                <xsl:value-of select="$ImageWidth" />
              </xsl:attribute>
            </xsl:if>
            <xsl:if test="$ImageHeight != ''">
              <xsl:attribute name="height">
                <xsl:value-of select="$ImageHeight" />
              </xsl:attribute>
            </xsl:if>
          </img>
        </div>
      </xsl:if>

       <div class="link-item">
        <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
          <a href="{$SafeLinkUrl}" title="{@LinkToolTip}" onclick="return OpenDialog('{$SafeLinkUrl}');">
                    <xsl:if test="$ItemsHaveStreams = 'True'">
                      <xsl:attribute name="onclick">
                        <xsl:value-of select="@OnClickForWebRendering"/>
                      </xsl:attribute>
                    </xsl:if>
                    <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
                      <xsl:attribute name="onclick">
                        <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
                      </xsl:attribute>
                    </xsl:if> 
            		<strong>
						<xsl:value-of select="$DisplayTitle"/> –  <xsl:value-of select="$Created"/>
					</strong> 
		  	</a>
			<div>
				<xsl:value-of select="substring(@Description,1,550)" disable-output-escaping="yes" />
				<xsl:if test="string-length(@Description) &gt; 550">...</xsl:if>
			</div>
      </div>
    </div>
 </div>

Open in new window


Below is my final css:

#slider
	{
	    width:1026px !important;
	}
	
	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:1025px;
		overflow:hidden; 
		height:200px;
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:71px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:696px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:30px;
		height:77px;
		background:url(btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(btn_next.gif) no-repeat 0 0;	
		}	
	
	.image-area-left
	{
	    float:left;
	    padding-left:0px;
	    padding-right:5px;
	}
	
	.ms-wpContentDivSpace
    {
        margin:0 !important;
    }

    .item
    {
        padding:0 !important;
    }
    
    .link-item, .link-item a, .link-item a:link, .link-item a:visited
    {
        color: #FFFFFF !important;
        font-size:10pt; 
        font-family: Tahoma,Arial,Verdana,sans-serif;
        text-decoration:none;
        background-color:#655C59;
        height:200px;
    }
    
    .link-item a:hover
    {
        color: #CDD315 !important;
    }

Open in new window


The above code results in the attached banner, but I want the text on the right to actually be part of the image, i.e. sit above the image with a dark transparent (alpha) background that makes the text easier to read with the image as it's background. Can any experts advise how to change my css to achieve this?

Thanks.
0
Comment
Question by:aspnet-scotland
  • 2
3 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38792813
i dont see the attachment.

can you post a link to the page?
0
 

Author Comment

by:aspnet-scotland
ID: 38793110
Sorry, attachement attached. I can't post a link to the page as it's within my development environment.
banner.jpg
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 38793359
.item{
position:relative;
}

.link-item{
position:absolute;
right:0;
z-index:100;
}

Open in new window


You could try adding the above rules to your style sheet.

If you post the rendered HTML, it'll be much easier to help. I can't recreate your banner with just the code you posted, so the above may not be exactly correct, as I have to guess.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question