How to add images side-by-side in a Ning text box, page, or any HTML web page.

There are 2 methods:

  • Adding Images to a Table
    • The table method is not considered the "accepted" method with web designers.
    • But, it's easy, and it works well. As of this writing, there is absolutely no plan by the W3C (World Wide Web Consortium) to deprecate the use of tables.
  • Adding Floating Images in DIV - See NO TABLE version at bottom of this tip.


Table Method Using Social Media icons and example links:

Join Our Facebook Fan Page Check Us Out On MySpace Follow Us On Twitter


CODE FOR EXAMPLE ABOVE:

<div align="center"><table cellpadding="0" width="400" cellspacing="0"><tr><td><a href="http://www.facebook.com/pages/yourfanpage/12345678" target="_blank"><img src="http://api.ning.com/files/MDqSwhCErxpAQCHv4V6BYNGSo6HZtPRtmdNol8nUrh*9kn1SnIvLjlpZd6Ko*QzkrV*cTHhej40aypylc9FNyuGQpVsVCJyS/facebooks3_128.png" alt="Join Our Facebook Fan Page" width="128" height="128" border="0"></a></td><td><a href="http://www.myspace.com/yourpage" target="_blank"><img src="http://api.ning.com/files/DsEd0qFuUcwu-OqK9dBmlNVWoJnSrPzFfHychkrtcyfIjc3ClCHytCj7mN4-pm0ueyEsbXFWSsCmgbKKk87IKMBhWf9093Ba/myspaces3_128.png" alt="Check Us Out On MySpace" width="128" height="128" border="0"></a></td><td><a href="http://twitter.com/yourtwitter" target="_blank"><img src="http://api.ning.com/files/DsEd0qFuUcyyy80lToFsf7IsEIyNbOEfUNaXKa1B3Jg6Oyf*PzQO3DZuQ3sltrfVqgifMzcq59A7ip8S0KYYtSYbsFhBFNrX/twitters3_128.png" alt="Follow Us On Twitter" width="128" height="128" border="0"></a></td></tr></table></div>


Notes:

  • I have added my side-by-side or horizontally placed images, within a table.
  • The table contains one row, and multiple columns or cells.
  • The example contains images and links for Social Media sites like Twitter and Facebook. Each of these 3 images are within a "link" or HREF tag. If you do not want links, remove the entire tag for "a href=" and be sure to remove the ending </a>.
  • The main key is to add a table, one row (TR), and multiple column cells (TD). Always end your tags with the appropriate </tag>.
  • If you do not want to center the images within your text box or page, remove the align="center" from the DIV tag.
  • Within the TABLE TAG, adjust your table width to suit your needs.
  • Please use your image paths, and be sure to either remove or change the HREF tag links.

 


SIMPLE CODE, NO TABLE:

Let's do this without using a TABLE. We don't have to use a table, because images will automatically float left one after the other when contained within a DIV. A DIV is a little more difficult to edit or harder on the eyes, but all-in-all it's cleaner code.

Now, let's simplify the code, and you can add your links and images. I will add 2 rows and 3 links/images per row:
<div align="center"><a href="yourlink.com" target="_blank"><img src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img src="yourimage.jpg"></a></div><div align="center"><a href="yourlink.com" target="_blank"><img src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img src="yourimage.jpg"></a></div>
Note - Non-Ning Sites: If you're not on a Ning site and your images are not floating left automatically, simply add this CSS as an inline style. I don't want to suggest adding as a global style because all of your site images would float left. I will add float:left to each image src. So, use this code instead:
<div align="center"><a href="yourlink.com" target="_blank"><img style="float:left;" src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img style="float:left;" src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img style="float:left;" src="yourimage.jpg"></a></div><div align="center"><a href="yourlink.com" target="_blank"><img style="float:left;" src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img style="float:left;" src="yourimage.jpg"></a><a href="yourlink.com" target="_blank"><img style="float:left;" src="yourimage.jpg"></a></div>
Hope this tip helps solve the mystery of images being displayed side-by-side in HTML. It's very simple, but not until you know the proper way to write the HTML.
Best,
Jen

 

Views: 37431

Replies to This Discussion

Thanks, we are going to need you all over the web, lol
I'll be here, and hope you are too. I'm working hard to switch over to "all social networking platforms" as our new focus.
;-)
That would be great. WOW
Indeed!
Like I understood that! OMG thats so greek to me....

Hi Jen, It has been a while. I am trying to use tables on the page http://phuzemthonjeni.com/learnerships-internships but the content does not line up. Please help

Phuze,

I tried to edit your code, but too much of it. There are so many divs, it's difficult to see where a table cell <td> starts and ends </td>. Ideally, you need to set the valign of the table row <tr> to top. But that didn't seem to help due to so many styles within the DIVs.

http://www.htmlcodetutorial.com/tables/_TR_VALIGN.html

Best,

Jen

Hi Jen

Thank you valign. I have simplified the code and only have one table but still not aligning. Please check once more if you can't see anything strange.

http://phuzemthonjeni.com/learnerships-internships

Regards

Hi Phuze,

I looked, and way too much code to go through. Bottom line, if you want these rows to line up, the best way is with a table and cells. Use valign to force all cell content to go to top.

 

<table>
<tbody>
<!-- Row #1 -->
<tr>
<td>Row 1-Column 1</td>
<td>Row 1-Column 2</td>
<td>Row 1-Column 3</td>
</tr>
<!-- Row #2 -->
<tr>
<td>Row 2-Column 1</td>
<td>Row 2-Column 2</td>
<td>Row 2-Column3</td>
</tr>
<!-- Row #3 -->
<tr>
<td>Row 3-Column 1</td>
<td>Row 3-Column 2</td>
<td>Row 3-Column3</td>
</tr>
</tbody>
</table>

RSS

Members

© 2017   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips