Solved

How do I style xsl?

Posted on 2013-01-18
3
338 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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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 …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

911 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now