I am not too nifty with HTML and I am struggling with aligning images within a textbox to be adjacent to each other. The images are 40 pixels and I want to stack in 2 x 3 table with each image containing a link. The text box only seems to be able to stack them on top of each other using the wysiwyg. The images are links to my social networks using their icons. Maybe I should place in the header like you do.  Any recommendations?  Thank you.

Views: 186

Reply to This

Replies to This Discussion

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://api.ning.com/files/MDqSwhCErxpAQCHv4V6BYNGSo6HZtPRtmdNol8nUrh*9kn1SnIvLjlpZd6Ko*QzkrV*cTHhej40aypylc9FNyuGQpVsVCJyS/facebooks3_128.png" 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://api.ning.com/files/DsEd0qFuUcwu-OqK9dBmlNVWoJnSrPzFfHychkrtcyfIjc3ClCHytCj7mN4-pm0ueyEsbXFWSsCmgbKKk87IKMBhWf9093Ba/myspaces3_128.png" alt="Check Us Out On MySpace" width="128" height="128" border="0"></a><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></div>
<div align="center"><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><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><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></div>

Here's how that would look:

Join Our Facebook Fan PageCheck Us Out On MySpaceFollow Us On Twitter
Join Our Facebook Fan PageCheck Us Out On MySpaceFollow Us On Twitter
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>
Hope that helps!
Jen

Thanks Jen, that is perfect!

Great, thanks for the feedback!

RSS

Members

© 2017   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips