Home/ Questions/Q 6664703
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T02:38:26+00:00

I’m trying to achieve something just like screenshot below using CSS. Currently, it is

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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”.

    • 0