displaying 3 lines of vertical aligned images

trfletch 598 posts 604 karma points

May 06, 2010 @ 11:59

Hi,

I have the following XSLT on my homepage that currently display 3 logos that are vertically and horizontally aligned within 3 boxes. I usually never use tables but I have been struggling to get them vertically aligned just using CSS. The boxes that they sit in are fixed at 150px wide and 100px high. The table solution in my XSLT works for how it is at the moment with 3 logos in 3 boxes but now the customer whats 3 rows of 3 boxes so 9 logo's in all displayed as follows:

Logo Logo Logo

Now if I was using divs then this would not be a problem because I would just have my logo divs as 150px wide and 100px height floating left then have a div around the whole lot that is 450px wide which would mean that as soon as 3 logos where displayed the 4th one would jump down onto the next line. The problem is I don't know how I would do this by using the table and cell I currently have in my XSLT, I suppose one option would be to have each logo displayed in its own table and those tables in a div but surely there must be a better way? The logo's are pulled in randomly and they will vary in size but never exceed 150px wide by 100px high. Can anyone give me any advice on this, ideally I would like to do away with the tables altogether but I have tried various methods on the internet and can't find a CSS solution to vertically align the images in all browsers! This is my current XSLT:

<xsl:variable name="numberOfItems" select="number(3)"/>

<xsl:template match="/">
<table>
<tr>
<xsl:for-each select="umbraco.library:GetXmlNodeById(1129)/node[@nodeTypeAlias='Recruiter'] [string(data [@alias='featuredrecruiter']) = '1']">
<xsl:sort select="randomTools:GetRandom(0,count(umbraco.library:GetXmlNodeById(1129)/node[@nodeTypeAlias='Recruiter']))" order="ascending" />
<xsl:if test="position() &lt;= $numberOfItems">
<td class="recruiterlogocell">
<a href="{umbraco.library:NiceUrl(@id)}">
<img>
      <xsl:attribute name="src">
          <xsl:value-of select="umbraco.library:GetMedia(data  [@alias='recruiterlogo'], 'false')/data [@alias='umbracoFile']" />
      </xsl:attribute>
      <xsl:attribute name="width">
          <xsl:value-of select="umbraco.library:GetMedia(data  [@alias='recruiterlogo'], 'false')/data [@alias='umbracoWidth']" />
      </xsl:attribute>
      <xsl:attribute name="height">
          <xsl:value-of select="umbraco.library:GetMedia(data  [@alias='recruiterlogo'], 'false')/data [@alias='umbracoHeight']" />
      </xsl:attribute>
   <xsl:attribute name="alt">
   <xsl:value-of select="@nodeName"/> logo</xsl:attribute>
      </img>
</a>
</td>
</xsl:if>
</xsl:for-each>
</tr>
</table>
</xsl:template>
<msxsl:script language="c#" implements-prefix="randomTools">
    <msxsl:assembly href="../bin/umbraco.dll"/>
    <![CDATA[
        /// <summary>
        /// Gets a random integer that falls between the specified limits
        /// </summary>
        /// <param name="lowerLimit">An integer that defines the lower-boundary of the range</param>
        /// <param name="upperLimit">An integer that defines the upper-boundary of the range</param>
        /// <returns>A random integer within the specified range</returns>
        public static int GetRandom(int lowerLimit,int upperLimit) {
            Random r = umbraco.library.GetRandom();
            int returnedNumber = 0;
            lock (r)
            {
                returnedNumber = r.Next(lowerLimit, upperLimit);
            }
            return returnedNumber;
        }
    ]]>
  </msxsl:script>

Copy Link

Dan 1288 posts 3921 karma points c-trib

May 06, 2010 @ 12:55

Hi,

I've not got time right now to work up a full solution, but if I were you I'd ditch the tables altogether and just left-floated divs. There isn't a non-javascript client-side way of vertically aligning content in a block level element (like a div) so you'll need to either use javascript, or (my prefered option) inline CSS ouput by XSLT.

The way I'd do this would be to get the height of the image within the XSLT, then do a simple bit of maths to calculate a top margin for the image (in your case it would be (100 - x)/2 where x is your image height. You can then add this margin to each image via inline CSS.

You can get the height of the media item in XSLT I think - it should be documented here: http://our.umbraco.org/wiki/reference/umbracolibrary/getmedia.

Let us know if you can't get the syntax for this to work and I'll have a look when I've got more time if someone doesn't beat me to it!

Copy Link

Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib

May 06, 2010 @ 12:56

Hi trfletch,

For the CSS approach, have you tried...

display: table-cell;
vertical-align: middle;

... guessing you might have already?

For the <table> approach, you could add a new <tr> after every 3rd item:

<xsl:if test="position() mod 3 = 0">
    <xsl:text disable-output-escaping="yes"><![CDATA[</tr><tr>]]></xsl:text>
</xsl:if>

... add that between the closing </td> and </xsl:if>

Good luck, Lee.

Copy Link

Dan 1288 posts 3921 karma points c-trib

May 06, 2010 @ 13:17

Good suggestions from Lee, but there are potential issues with those in that 'display: table' doesn't work properly in any version of IE as far as I remember. Also, with the table row method I've always found it more robust to add in the extra table cells where your items aren't a multiple of 3 - I've had layout issues before in not doing that.

Copy Link

Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib

May 06, 2010 @ 13:22

@Dan, true, true and true... damn you IE!

@trfletch, maybe your original suggestion of <table> within a floated <div> is the quickest approach? (The HTML will be ugly, but its that time/effort ratio!)

Copy Link

Chris Koiak 700 posts 2626 karma points

May 06, 2010 @ 13:55

I'd think about the javascript powered solution a bit more.

What if you output everything in <ul><li> , with 3 items per <ul>, and then auto height the ul 'rows' using jquery? http://plugins.jquery.com/project/openSocial-jquery-autoHeight

This would allow (semi) semantic markup with JS just tidying up the styles?

Chris

Copy Link

trfletch 598 posts 604 karma points

May 06, 2010 @ 14:27

Hi Guys,

Thanks for the responses, I especially like Dan's idea if I can get it to work. I have actually just made all the images the same size for now with whitespace making up the difference in height and width but when I get a chance I will give some of these suggestions a try. It is something that I often come across so to find a good solution will be great.

Copy Link

Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib

May 06, 2010 @ 14:46

... or if you need to make all the images the same size, consider using ImageGen?

ImageGen.ashx?Image=/image.jpg&Height=150&Width=100&BgColor=FFFFFF&Crop=Resize&Pad=True

You'd probably need to play around with the params, but saves you manually editing the images.

Copy Link

Donald St. Martin 83 posts 128 karma points

May 06, 2010 @ 14:58

trfletch,

Have you taken a look at http://www.jakpsatweb.cz/css/css-vertical-center-solution.html? All of his examples work in IE7 and IE8 but there are a couple that don't work in the latest version of Firefox. (There might be something simple to fix it though.) If anything, this should give the structure of how to get it working. Getting things to center vertically across all browsers has been a thorn in my side - I usually don't even attempt it!

--
Donald

Copy Link

trfletch 598 posts 604 karma points

May 07, 2010 @ 12:26

Lee, I did try using imagegen but I couldn't get it to resize properly, what would the parameters you specified do because I don't want distorted images.

Donald, thanks for the link, I have saved that to my favorites and run through that when I get a chance.

Copy Link

Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib

May 07, 2010 @ 12:48

trfletch, not 100% sure what the output image would be... when I tested it with those params, I got an image that was 100x150, white background with the main image in the middle (slightly resized). You'd need to read over the documentation for ImageGen for various config params.

Copy Link

is working on a reply...

Flag this post as spam?

Displaying 3 lines of vertical aligned images