Solved

How do I style xsl?

Posted on 2013-01-18
3
347 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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…

724 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