Search code examples
htmlcssalignmentjqtouch

Replace layout (refer to screenshot) created using HTML table with CSS with jQTouch

I'm trying to achieve something just like screenshot below using CSS. Currently, it is implemented using HTML tables and as far as I know HTML table is usually not recommended.

What I want to achieve is:

  • the date on right must be a vertically aligned, middle to the image on the left, just like the screenshot
  • there is a gap between each photo (which right now I can only think of <br/>)
  • every image and dates are supposed to be different too.

Screenshot of what I want to achieve

HTML below:

wrapper and scroller are iScroll CSS classes.

<div id="wrapper">
                <div id="scroller">


                    <script type="text/javascript">
                        var i=0;
                        for (i=0;i<=20;i++)
                        {   
                            document.write('<table>');
                            document.write('<tr>');
                            document.write('<td><img src="gimages/photo1.JPG" width="50%"></td>');
                            document.write('<td>11 December 2011</td>');
                            document.write('</tr>');
                            document.write('</table>');
                        }                           
                    </script>
                </div>
            </div>
Solution

  • Use list <ul> and <li>, don't use list-style-image, use background image instead:

    <html>
    <header>
    </header>
    <body>
        <ul class="myul">
            <li id="first">11 December 2011</li>
            <li id="second">11 December 2011</li>
            <li id="third">11 December 2011</li>
        </ul>
    </body>
</html>

<style type="text/css">
.myul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
.myul li {
    line-height: 35px;
    padding-left: 50px;
    background-repeat: no-repeat;
    background-position: 0;
}
.myul li#first {
    background-image: url(temp.png);
}
.myul li#third {
    background-image: url(temp.png);
}
</style>

    enter image description here

    [EDIT]

    Unlike class, id must be unique. You can assign both class and id attribute to a tag. Above is an example to give an image to the first and third list, but not the second. All first, second and third contains style defined in the class ".myul li".