Tip: How to display images inline?

[Bernard Lama]

Not all NCs are " TECH SAVVY" but we must believe that everybody wants to learn or try something new in life.
I assume that everyone knows what images are, as we all have seen images on web pages.

Know some important points:

* Inline: having images arranged in a line.
* src: The src attribute is used to specify the URL of the image (i.e. the address or filename the browser uses to retrieve the image file), e.g. <img src="http://planet-earth.bogus.us/icons/secret.pictures.gif"> <img src="grandchild.gif">
* alt: alt is used to provide an text alternative to the image for readers whose browsers do not support graphics.
* href: The href attribute specifies the link's destination: e.g. <a href="www.google.com">Google</a>

Steps:

1. Copy and paste the following "CSS Code" into Custom CSS Box. Make sure "div.desc" width size is equal to image width size. I have used width=183px for both.
2.Copy and paste the following "HTML code" into notepad.
3. Now go to HTML/Text Box and click on image icon> Chose file> select Your Image> Copy image link from Link field> Go to "HTML Code" Remove "YOUR_IMAGE_LINK.JPG" and replace with your image link just now you have copied.
4. Copy the html code from notepad and paste it into Html/Text Box> Update> and Save.
You are done!

CSS Code :

/***DISPLAY PHOTO OR IMAGES INLINE***/
div.imgs{
height:auto;
width:auto;
float:left;
text-align:center;
}
div.imgs img {
display: inline;
padding: 5px;
}
div.desc {
text-align: center;
font-weight: normal;
width: 183px;
margin: 3px;
padding: 5px;
}
/***DISPLAY PHOTO OR IMAGES INLINE***/

 

HTML Code:

<div class="imgs">
<a target="_blank" href="www.google.com">
<img src="YOUR_IMAGE_LINK.JPG" alt="First Image" width="183" height="122">
</a>
<div class="descp">First Image</div>
</div>
<div class="imgs">
<a target="_blank" href="www.google.com">
<img src="YOUR_IMAGE_LINK.JPG" alt="Second Image" width="183" height="122">
</a>
<div class="descp">Second Image</div>
</div>
<div class="imgs">
<a target="_blank" href="www.google.com">
<img src="YOUR_IMAGE_LINK.JPG" alt="Third Image" width="183" height="122">
</a>
<div class="descp">Third Image</div>
</div>

Want to go beyond this tip? If you are looking for someone to re-design your ning site, or any kind of ning help, feel free to contact me via my email id [e-mail]

Live Preview: Here
Preview:

[Dr. Krishna Kumari Challa]

Thank you so much for this useful tip. Happy Diwali!

[Bernard Lama]

You are welcome Challa, and same to you...

[Monica Diaz]

Nice tip, Bernard! 

[Bernard Lama]

Thank you Monika...

[Bernard Lama]

Hi Riccardo, not sure about your issues because the codes you have provided is related to column set up. But this tip is all about "how to display image inline" ?

Hope you understand.

[Bernard Lama]

Hi Riccardo, not sure about your issues because the codes you have provided is related to column set up. But this tip is all about "how to display image inline" ?

Hope you understand.