Solved

How do I style xsl?

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

708 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

13 Experts available now in Live!

Get 1:1 Help Now