A Table grid placement for your pictures or products or whatever! =)

  • 2
  • Idea
  • Updated 9 years ago
I made this code for someone on this forum and I thought I should share with everyone! This is a really nice way to effectively organize your pictures or products in a simple pleasing way. You can easily change the background color and border size and add or take way columns/rows. I found it really easy to manipulate in a text widget - just click on the HTML button and paste the code!

Here's a screenshot:



Here's the code:
<!--<style type="text/css">
.grid {
display: table;
border-spacing: 4px;
}
.row {
display: table-row;
}
.image {
display: table-cell;
width: 300px;
background-color: #ffffff;
border: 2px solid #000;
vertical-align: top;
padding-top:10px;
text-align: center;
}
.image p {
color: #000;
font-size: 100%;
text-align: left;
padding-top: 8px;
padding-left: 5px;
}
</style>-->

<!--<div align="center"><div class="grid">
<div class="row">
<div class="image">
<img src="resources/Autumn%20Leaves.jpg?timestamp=1242522133965">
<p style="text-align: center;"><font style="color: rgb(0, 102, 0);" size="2"><span style="font-weight: bold;">Autumn Beauty</span></font><br></p><div style="text-align: center;"><font style="font-family: Arial;" size="2">Beautiful foliage on a beautiful day!</font><br></div><p><br></p>
</div>
<div class="image">
<img src="resources/Creek.jpg?timestamp=1242522186801">
<p style="text-align: center;"><font style="color: rgb(68, 102, 0);" size="2"><span style="font-weight: bold;">Creek</span></font><br></p><div style="text-align: center;"><font style="font-family: Arial;" size="2">A picturesque creek with flowers.</font><br style="font-family: Georgia;"></div><p><br></p>
</div>
<div class="image">
<img src="resources/Desert%20Landscape.jpg?timestamp=1242522251178">
<p style="text-align: center;"><font style="color: rgb(0, 102, 0);" size="2"><span style="font-weight: bold;">Desert Landscape</span></font><br></p>
</div>
</div>
<div class="row">
<div class="image">
<img src="resources/Dock.jpg?timestamp=1242522290545">
<div style="text-align: center;"><font style="font-family: Verdana; font-weight: bold;" size="2"><span style="color: rgb(102, 0, 0);"><br><span style="color: rgb(68, 102, 0);">Beautiful Blues</span></span></font><br></div><p><br></p>
</div>
<div class="image">
<img src="resources/Forest%20Flowers.jpg?timestamp=1242522348075">
<p style="text-align: center;"><font style="color: rgb(68, 102, 0);" size="2"><span style="font-weight: bold;">Forest Flowers</span></font><br></p>
</div>
<div class="image">
<img src="resources/Forest.jpg?timestamp=1242522384711">
<p style="text-align: center;"><font style="color: rgb(68, 102, 0);" size="2"><span style="font-weight: bold;">Misty Forest</span></font><br></p><p><br></p>
</div>
</div>
<div class="row">
<div class="image">
<img src="resources/Frangipani%20Flowers.jpg?timestamp=1242522419746">
<p style="text-align: center;"><font style="color: rgb(68, 102, 0);" size="2"><span style="font-weight: bold;">Lovely Flowers</span><span style="font-weight: bold;"> </span></font><br></p><p><font style="font-family: Arial;" size="2"><br></font><br></p>
</div>
<div class="image">
<img src="resources/Garden.jpg?timestamp=1242522452170">
<p style="text-align: center;"><font style="color: rgb(68, 102, 0);" size="2"><span style="font-weight: bold;">Orange Garden</span></font><br></p>
</div>
<div class="image">
<img src="resources/Green%20Sea%20Turtle.jpg?timestamp=1242522484118">
<p style="text-align: center;"><font style="color: rgb(68, 102, 0);" size="2"><span style="font-weight: bold;">Green Sea Turtle</span></font><br></p><p><font style="font-family: Arial;" size="2"><br></font><br></p>
</div>
</div>
</div></div>-->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
  • really happy!

Posted 9 years ago

  • 2
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
What a beautiful "w..Oh..dget" Littleus..

Going into the special sections reserved! Congratulations and thank you!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
OOPS - I shoulda re-read my post to make sure it accurately reflected what I was thinking! I just wanted to clarify. I should not have said "I made this...". What I should have said was "I found this.... My apologies to everyone. I don't want to give the wrong impression!
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
It's ok. I will keep the secret between us ;)! Thanks for finding and posting the code. Don't know what I will use if for, but since you already found it for someone and posted it, I might as well use it.

Thanks-Dan
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Here's an example of what I posted in the other thread Littleus.


&lt;style type=&quot;text/css&quot;&gt;
.grid {
display: table;
border-spacing: 4px;
}
.row {
display: table-row;
}
.image {
display: table-cell;
width: 300px;
background-color: #ffffff;
border: 2px solid #000;
vertical-align: top;
padding-top:10px;
text-align: center;
}
.image p {
color: #000;
font-size: 100%;
text-align: left;
padding-top: 8px;
padding-left: 5px;
}
&lt;/style&gt;--&gt;

&lt;!--&lt;div align=&quot;center&quot;&gt;&lt;div class=&quot;grid&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;image&quot;&gt;
&lt;img src=&quot;resources/Autumn%20Leaves.jpg?timestamp=1242522133965&quot;&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;font style=&quot;color: rgb(0, 102, 0);&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;Autumn Beauty&lt;/span&gt;&lt;/font&gt;&lt;br&gt;&lt;/p&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;font style=&quot;font-family: Arial;&quot; size=&quot;2&quot;&gt;Beautiful foliage on a beautiful day!&lt;/font&gt;&lt;br&gt;&lt;/div&gt;&lt;p&gt;&lt;br&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;image&quot;&gt;
&lt;img src=&quot;resources/Creek.jpg?timestamp=1242522186801&quot;&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;font style=&quot;color: rgb(68, 102, 0);&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;Creek&lt;/span&gt;&lt;/font&gt;&lt;br&gt;&lt;/p&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;font style=&quot;font-family: Arial;&quot; size=&quot;2&quot;&gt;A picturesque creek with flowers.&lt;/font&gt;&lt;br style=&quot;font-family: Georgia;&quot;&gt;&lt;/div&gt;&lt;p&gt;&lt;br&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;image&quot;&gt;
&lt;img src=&quot;resources/Desert%20Landscape.jpg?timestamp=1242522251178&quot;&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;font style=&quot;color: rgb(0, 102, 0);&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;Desert Landscape&lt;/span&gt;&lt;/font&gt;&lt;br&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;image&quot;&gt;
&lt;img src=&quot;resources/Dock.jpg?timestamp=1242522290545&quot;&gt;
&lt;div style=&quot;text-align: center;&quot;&gt;&lt;font style=&quot;font-family: Verdana; font-weight: bold;&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;color: rgb(102, 0, 0);&quot;&gt;&lt;br&gt;&lt;span style=&quot;color: rgb(68, 102, 0);&quot;&gt;Beautiful Blues&lt;/span&gt;&lt;/span&gt;&lt;/font&gt;&lt;br&gt;&lt;/div&gt;&lt;p&gt;&lt;br&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;image&quot;&gt;
&lt;img src=&quot;resources/Forest%20Flowers.jpg?timestamp=1242522348075&quot;&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;font style=&quot;color: rgb(68, 102, 0);&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;Forest Flowers&lt;/span&gt;&lt;/font&gt;&lt;br&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;image&quot;&gt;
&lt;img src=&quot;resources/Forest.jpg?timestamp=1242522384711&quot;&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;font style=&quot;color: rgb(68, 102, 0);&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;Misty Forest&lt;/span&gt;&lt;/font&gt;&lt;br&gt;&lt;/p&gt;&lt;p&gt;&lt;br&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;image&quot;&gt;
&lt;img src=&quot;resources/Frangipani%20Flowers.jpg?timestamp=1242522419746&quot;&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;font style=&quot;color: rgb(68, 102, 0);&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;Lovely Flowers&lt;/span&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt; &lt;/span&gt;&lt;/font&gt;&lt;br&gt;&lt;/p&gt;&lt;p&gt;&lt;font style=&quot;font-family: Arial;&quot; size=&quot;2&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;br&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;image&quot;&gt;
&lt;img src=&quot;resources/Garden.jpg?timestamp=1242522452170&quot;&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;font style=&quot;color: rgb(68, 102, 0);&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;Orange Garden&lt;/span&gt;&lt;/font&gt;&lt;br&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;image&quot;&gt;
&lt;img src=&quot;resources/Green%20Sea%20Turtle.jpg?timestamp=1242522484118&quot;&gt;
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;font style=&quot;color: rgb(68, 102, 0);&quot; size=&quot;2&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;Green Sea Turtle&lt;/span&gt;&lt;/font&gt;&lt;br&gt;&lt;/p&gt;&lt;p&gt;&lt;font style=&quot;font-family: Arial;&quot; size=&quot;2&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;br&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Still a bit long isn't it ??
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Yah.. it's still long, but it's very cool looking!! =)
Photo of Kent T Carter

Kent T Carter

  • 230 Posts
  • 3 Reply Likes
But how do you set customer interaction with it for the individual components?
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi Kent,

Not quite sure what customer interaction you mean?
Photo of Kent T Carter

Kent T Carter

  • 230 Posts
  • 3 Reply Likes
look to this page and even you do not need to recieve the file, click on a picture and you will see that it gives you the file to download. http://www.ac-monkeywrench-models.yol...
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
I see.
That would need some additional coding or an alternative action by your user to download
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Very nice! I have made a note of this one to share with people looking for ways to improve the layout of their page.
Photo of zoegell

zoegell

  • 17 Posts
  • 0 Reply Likes
hi this doesnt work when i copy and paste it!
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi Zoegell,

Did you replace "image src" links with your own?
Photo of irishshogun

irishshogun

  • 33 Posts
  • 1 Reply Like
Hi, How do you replace the "image src" links with your own, by that I mean how do you source the image address from your file folder, I can see it when I select the file but I'm not able to copy/paste it and I cant access a html link for the file to copy it from there, is there an easy way or do i have to manually type each address? i've a lot of images :( Thanks, Paul
Photo of irishshogun

irishshogun

  • 33 Posts
  • 1 Reply Like
Additional question: Can you make the image active, can you click on an image or the text to bring you to another page? Thanks Paul
Photo of jeremy

jeremy, Employee

  • 1349 Posts
  • 90 Reply Likes
Hi there Irishshogun,

You can replace the "image src" links with your own just remember your image links in your file manager will be resources/filename.jpg (where filename.jpg is the name of your file)

I am 100% sure whether you can make the images a link but will do some looking into it and will let you know.
Photo of irishshogun

irishshogun

  • 33 Posts
  • 1 Reply Like
Hi Jeremy, Thansk for the reply, It'd be great if I could hotlink, I'm running through ideas on how to get a 3x3 grid of images Plus spaces between the images that will link individually to another page within the same site. I know it can be done quite easily with singe images, if and when i sort it out I'll be sure to post the info on here. I'm sure there a a lot of people who could make use of it.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello irishshogun

Jeremy is currently offline right now. I hope you don't mind me stepping in on his behalf.

You can certainly add image links. You will need to add an a href tag in front of your image src tags. So, they would look like this:

<a href="http://yourlinkURL.com&quot;&gt;&lt;img src="resources/Autumn%20Leaves.jpg?timestamp=1242522133965"></a>

To increase the spacing between your photos, you can locate this code:

.grid {
display: table;
border-spacing: 4px;
}

Replace the border-spacing: 4px with a higher px number. This will increase the spacing.

Please let me know if you have any trouble with this.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
HI guys,

I thought I would use this to list members of the golf club as it was something I was looking for, but instead of having the boxes 3 in a row I have managed to make it into 2, but can someone tell me how to: -

1. Make the height smaller as the box is too big vertically

2. Can the text be moved closer to the picture and the description closer to the title??

3. When I have typed the "title" as a name and the "description" as a handicap the name doesnt seem to centre properly instead it look like it goes slightly to the right but the word handicap stays central??

Hope someone can help me out?

http://abbotsfordgolfsection.yolasite...
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Craig

1. To shrink the boxes vertically, all you need to do is take out this section:
<p style="text-align: center;"><font style="color: rgb(0, 102, 0);" size="2"><span style="font-weight: bold;">Autumn Beauty</span></font><br></p><div style="text-align: center;"><font style="font-family: Arial;" size="2">Beautiful foliage on a beautiful day!</font><br></div><p><br></p>

You can control the height with using just <p> and </p> or <br>

For question 2 & 3 - try replacing <p> and </p> with div codes. e.g.
<div style="text-align: center;"><font style="color: rgb(68, 102,
0);" size="2">Todd Smith</span></font><br></div><div
style="text-align: center;"><font style="font-family: Arial;"
size="2">Handicap 3.2</font><br></div><p><br></p>
</div>

I hope that helps. Please let me know if you're still having trouble with this.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Yeah got the boxes small and looks alot better thanks but I just need a little more space between my last entry and the bottom of the box is there anything I can add to get this done?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Can you try adding another <br> See if that works for you?
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Sanja,

I took all the
's out of the coding so not sure how this would now go into the coding I have or where to tell you the truth??
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Craig

Replace the last two div boxes with this code:

<div class="image">

<img src="resources/handicapicon.gif?timestamp=1242522419746">

<div style="text-align: center;"><font style="color: rgb(68,
102,0);" size="2">George Alexander</span></font><br></div><divstyle="text-align:
center;"><font style="font-family: Arial;"size="2">Handicap
4.0</font><br></div>

<div class="image">

<img src="resources/Mic.gif?timestamp=1242522452170">

<div style="text-align: center;"><font style="color: rgb(68,
102,0);" size="2">Michael McCahery</span></font><br></div><divstyle="text-align:
center;"><font style="font-family: Arial;"size="2">Handicap
3.7</font><br></div>

</div>

Try that and see if that works for you.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Sanja,

Nope it never done a thing everything strayed the same im afraid!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I'll take another look at this. Please leave it with me and I'll get back to you. Thanks for your patience :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Craig!

Thanks for your patience. Try this:

<div class="image">

<img src="resources/handicapicon.gif?timestamp=1242522419746">

<div style="text-align: center;"><font style="color: rgb(68,
102,0);" size="2">George Alexander</span></font><br></div><divstyle="text-align:
center;"><font style="font-family: Arial;"size="2">Handicap
4.0</font><br><br></div>

<div class="image">

<img src="resources/Mic.gif?timestamp=1242522452170">

<div style="text-align: center;"><font style="color: rgb(68,
102,0);" size="2">Michael McCahery</span></font><br></div><divstyle="text-align:
center;"><font style="font-family: Arial;"size="2">Handicap
3.7</font><br><br></div>

</div>

All I did was add another <br> If you need more spacing, then add another one.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Yip thats it working now thanks Sanja for your hard work!!
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Sanja

My table as above has somehow went wrong I havent touched it so no idea why its went in a single line now, any ideas: -

<!-->
<style type="text/css"> .grid { display: table; border-spacing: 4px; } .row { display: table-row; } .image { display: table-cell; width: 300px; background-color: #ffffff; border: 2px solid #000; vertical-align: top; padding-top:10px; text-align: center; } .image p { color: #000; font-size: 100%; text-align: left; padding-top: 8px; padding-left: 5px; } </style> <div align="center"> <div class="grid"> <div class="row"> <div class="image"><img src="resources/Todd.gif?timestamp=1242522133965"> <div style="text-align: center;"><font style="color: rgb(68, 102, 0);" size="2">Todd Smith</font><br></div><divstyle="text-align: center;=""><font style="font-family: Arial;" size="2">Handicap 3.2</font><br><br></divstyle="text-align:><img src="resources/C.gif?timestamp=1242522186801"> <div style="text-align: center;"><font style="color: rgb(68, 102, 0);" size="2">Craig Williamson</font><br></div><divstyle="text-align: center;=""><font style="font-family: Arial;" size="2">Handicap 17.3</font><br><br></divstyle="text-align:> <div class="image"><img src="resources/G.jpg?timestamp=1242522419746"> <div style="text-align: center;"><font style="color: rgb(68, 102, 0);" size="2">Gordon Martin</font><br></div><divstyle="text-align: center;=""><font style="font-family: Arial;" size="2">Handicap 13.3</font><br><br></divstyle="text-align:><img src="resources/Mark.gif?timestamp=1242522348075"> <div style="text-align: center;"><font style="color: rgb(68, 102, 0);" size="2">Mark Williamson</font><br></div><divstyle="text-align: center;=""><font style="font-family: Arial;" size="2">Handicap 7.5</font><br><br></divstyle="text-align:> <div class="image"><img src="resources/DTH.gif?timestamp=1242522419746"> <div style="text-align: center;"><font style="color: rgb(68, 102, 0);" size="2">Danny Thomson</font><br></div><divstyle="text-align: center;=""><font style="font-family: Arial;" size="2">Handicap 13.3</font><br><br></divstyle="text-align:><img src="resources/D.jpg?timestamp=1242522452170"> <div style="text-align: center;"><font style="color: rgb(68, 102, 0);" size="2">David Ferrie</font><br></div><divstyle="text-align: center;=""><font style="font-family: Arial;" size="2">Handicap 7.5</font><br><br></divstyle="text-align:> <div class="image"><img src="resources/handicapicon.gif?timestamp=1242522419746"> <div style="text-align: center;"><font style="color: rgb(68, 102, 0);" size="2">George Alexander</font><br></div><divstyle="text-align: center;=""><font style="font-family: Arial;" size="2">Handicap 4.0</font><br><br></divstyle="text-align:><img src="resources/Mic.gif?timestamp=1242522452170"> <div style="text-align: center;"><font style="color: rgb(68, 102, 0);" size="2">Michael McCahery</font><br></div><divstyle="text-align: center;=""><font style="font-family: Arial;" size="2">Handicap 3.7</font><br><br></divstyle="text-align:></div></div></div></div></div></div></div>
<-->
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Its ok I have sorted it cheers!! Thank goodness
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
whew! :) I'm glad you were able to sort it out!