Solved

How do I style xsl?

Posted on 2013-01-18
3
344 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 You Need a DevOps Toolchain

IT needs to deliver services with more agility and velocity. IT must roll out application features and innovations faster to keep up with customer demands, which is where a DevOps toolchain steps in. View the infographic to see why you need a DevOps toolchain.

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
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

734 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