tags:

views:

57

answers:

2

Hi

I want to liste these images in 3 columns( see under). What is the HTML cod for this?

[IMAGE] [IMAGE] [IMAGE]
<div class="rparticle ">
    <div class="articleEntry Normal"><a href="[LINK]">[IMAGE]</a></div>
    <div><a href="[LINK]">[TITLE]</a></div>
</div>

.rparticle 
{
 display:inline;
    clear: both;
    text-align: center;
    margin-bottom : 25px;
 width:190px;
}
+3  A: 

Let 'em to float to right or left.

...
<head>
    <style>
        .rparticle{
           float: left;
           width: 33%;
           text-align: center;
           margin-bottom : 25px;
        }
        .clear{
           clear: both;
        }
    </style>
</head>
<body>
    <div class="rparticle">
        <div class="articleEntry Normal"><a href="[LINK]">[IMAGE1]</a></div>
        <div><a href="[LINK]">[TITLE]</a></div>
    </div>
    <div class="rparticle">
        <div class="articleEntry Normal"><a href="[LINK]">[IMAGE2]</a></div>
        <div><a href="[LINK]">[TITLE]</a></div>
    </div>
    <div class="rparticle">
        <div class="articleEntry Normal"><a href="[LINK]">[IMAGE3]</a></div>
        <div><a href="[LINK]">[TITLE]</a></div>
    </div>
    <br class="clear" />
</body>
...
Sepehr Lajevardi
Thank you! This work, but [IMAGE] point out unique image. Sow this code prints out 3 similar images in each row. Is there any way that this code can print out a uniuqe image on each row an column?
what are you using to generate [IMAGE] tag holders? whatever language it is, you can use a loop!
Sepehr Lajevardi
This is a DotNetNuke Article modul. And this HTML is for own styling for listing articles. Here is a list of tokens that I can use in the HTML styling. http://www.ventrian.com/Support/ProductForums/tabid/118/forumid/4/postid/5025/view/topic/Default.aspx
As I see, you've been provided with just one [IMAGE] token per template file )
Sepehr Lajevardi
Ok:D Thanks for the help :)
you're welcome =)
Sepehr Lajevardi
A: 

That's only possible if the container and the children have a width and the children are floated left. Here's a copy'n'paste'n'runnable SSCCE which demonstrates it.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2982423</title>
        <style>
            #container {
                width: 750px;
            }
            #container .image {
                float: left;
                width: 250px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="image"><img src="http://sstatic.net/so/img/logo.png"&gt;&lt;/div&gt;
            <div class="image"><img src="http://sstatic.net/so/img/logo.png"&gt;&lt;/div&gt;
            <div class="image"><img src="http://sstatic.net/so/img/logo.png"&gt;&lt;/div&gt;
            <div class="image"><img src="http://sstatic.net/so/img/logo.png"&gt;&lt;/div&gt;
            <div class="image"><img src="http://sstatic.net/so/img/logo.png"&gt;&lt;/div&gt;
        </div>
    </body>
</html>
BalusC