Replies to This Discussion

Permalink Reply by JenSocial on August 7, 2013 at 12:49pm

Hi Neil,

Try this tip: http://jensocial.com/group/ningnetworktips/forum/topics/html-101-ad...

It will show you how to add to a table. However, you really only need a table for easier editing. You can add images side-by-side, row after row, by simply adding the link/image/end link, and wrap each row in a DIV.

For example, I will use the same code from the tip above, and remove the table and table cells, and wrap the first row in a DIV. Then, I will copy/paste the same code and add a second row. Critical Key: Each row is wrapped in a DIV, and no line breaks (pressing enter or any spaces) between each link/image. The Ning Editor will throw in an actual line break <br> if you don't watch that. I will make the first link/image in RED so you can see where a link and image starts and ends:

 

<div align="center"><a href="http://www.facebook.com/pages/yourfanpage/12345678" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/301625658?profile=original" alt="Join Our Facebook Fan Page" width="128" height="128" border="0"></a><a href="http://www.myspace.com/yourpage" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/301627289?profile=original" alt="Check Us Out On MySpace" width="128" height="128" border="0"></a><a href="http://twitter.com/yourtwitter" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/301628949?profile=original" alt="Follow Us On Twitter" width="128" height="128" border="0"></a></div>
<div align="center"><a href="http://www.facebook.com/pages/yourfanpage/12345678" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/301625658?profile=original" alt="Join Our Facebook Fan Page" width="128" height="128" border="0"></a><a href="http://www.myspace.com/yourpage" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/301627289?profile=original" alt="Check Us Out On MySpace" width="128" height="128" border="0"></a><a href="http://twitter.com/yourtwitter" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/301628949?profile=original" alt="Follow Us On Twitter" width="128" height="128" border="0"></a></div>

Here's how that would look:

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, just like our other code:

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>

• ▶ Reply

Permalink Reply by Neil Norton on August 8, 2013 at 12:22pm

Thanks Jen, that is perfect!

• ▶ Reply

Permalink Reply by JenSocial on August 10, 2013 at 11:09am

Great, thanks for the feedback!

• ▶ Reply