Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts

    How to display text beside an image?

    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.

  • #2
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    This is my code...any help is appreciated!....
    Code:
    <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.

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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..

  • #4
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    I just want a image displayed and just text displayed beside the image...no mouse overs or anything?

  • #5
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    yeah could u possibly write out a sample code?will be much appreciated!

  • #6
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    I'v tried this way..is this right?
    Code:
    <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.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Change
    Code:
    <p class="nanistory">Nani is good!</p>
    to
    Code:
    <span class="nanistory">Nani is good!</span>
    You should try to learn the difference between inline and block level elements, before moving ahead with the development.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    shakoor6 (05-07-2011)

  • #8
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    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?

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    #Newsbar img{
    vertical-align:middle;
    }
    ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    shakoor6 (05-07-2011)

  • #10
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    am i placing this code...in the css for each image?

  • #12
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    also the image are going underneath each other and the text beside each image?

  • #13
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    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. ?

  • #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •