View Full Version : How to display text beside an image?

05-07-2011, 01:48 PM
i want to display text beside the image, which need to include some sort of ID...so i can change the font colour and text.

05-07-2011, 02:04 PM
This is my code...any help is appreciated!....

<div id="Newsbar">
<img src="Homepage/NewsBar.png" width="546" height="50" alt="News Bar"/>

<p class="nanistory">Nani is good!</p>

<img class="nani" src="Homepage/Nani.jpg" width="85" height="54" alt="Nani"/>

<img class="cricket" src="Homepage/Cricket.png" width="85" height="54" alt="Kevin Pieterson"/>

<img class="tennis" src="Homepage/tennis.jpg" width="85" height="54" alt="Roger Federer" />

<img class="boxing" src="Homepage/khan.jpg" width="85" height="54" alt="Amir Khan v"/>

I'm concentrating for now on 'nanistory' is the text and nani is the image..then I want to have text displayed on the other images such as cricket,tennis boxing.

05-07-2011, 02:25 PM
What exactly are you trying to do... ? :) you can add title="sometext" in <img> if you want to display text when mouse is on image. In other hand if you want text over the image you have to use image as a background so you can write text over the image. I would use div's myself and then in css define image bacground, width, height etc...and the simple write text in created box. I think it's the simplest way.
If i understood you right..

05-07-2011, 02:28 PM
I just want a image displayed and just text displayed beside the image...no mouse overs or anything?

05-07-2011, 02:31 PM
yeah could u possibly write out a sample code?will be much appreciated!

05-07-2011, 02:33 PM
I'v tried this way..is this right?

<img border="0" class="ID goes here" src="Link to image" width="85" height="54" alt="Nani" align="left" <p class="CSS ID">Text goes here</p>

but it then moves my image below this out of place.

05-07-2011, 02:35 PM
<p class="nanistory">Nani is good!</p>

<span class="nanistory">Nani is good!</span>

You should try to learn the difference between inline and block level elements (http://css.flepstudio.org/en/css-tips/inline-block-elements.html), before moving ahead with the development.

05-07-2011, 02:46 PM
thtz very useful mate!thx...i have my images as blocks to displays them vertically inline but wnt my text inline with each image..is this possible?

05-07-2011, 02:52 PM
#Newsbar img{
} ?

05-07-2011, 02:54 PM
thx abduraooft...where would i place this?in the html?and what wud i be replacing it with...sorri im new wid all this..thx.

05-07-2011, 02:59 PM
am i placing this code...in the css for each image?

05-07-2011, 03:10 PM
also the image are going underneath each other and the text beside each image?

05-07-2011, 03:14 PM
The code does work for images to be displayed beside each other but my images are placed below each other..then i want the text beside each image. ?

05-07-2011, 03:31 PM
That's a CSS snippet and should be placed inside your CSS file.

I'd recommend you to spend some time at http://www.htmldog.com/guides/cssbeginner/