13 Replies - 1673 Views - Last Post: 07 December 2013 - 07:19 AM

#1 murukessan   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 05-December 13

add text to padded area to the right of image

Posted 05 December 2013 - 10:02 PM

hi,
i want to add text to the right side of an image and in the padded area

img {
  padding-right: 200px;
}

<img src ="" />hello



i wish the "hello" to be inside the padded area of 200px..
thanks,
muru
Is This A Good Question/Topic? 0
  • +

Replies To: add text to padded area to the right of image

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: add text to padded area to the right of image

Posted 05 December 2013 - 11:29 PM

apply a negative margin to the element containing the text.
Was This Post Helpful? 1
  • +
  • -

#3 murukessan   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 05-December 13

Re: add text to padded area to the right of image

Posted 06 December 2013 - 03:44 AM

View PostDormilich, on 05 December 2013 - 11:29 PM, said:

apply a negative margin to the element containing the text.


it works fine...but when i add more text it goes awry...please help
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: add text to padded area to the right of image

Posted 06 December 2013 - 04:28 AM

what do you mean by that?
Was This Post Helpful? 0
  • +
  • -

#5 murukessan   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 05-December 13

Re: add text to padded area to the right of image

Posted 06 December 2013 - 04:33 AM

View PostDormilich, on 06 December 2013 - 04:28 AM, said:

what do you mean by that?

i mean that the text thats contained in the font(here i set the margin to negative value) tab spills out of the image,whereas i want it to be within the padding area to the right of the image.

thanks
muru
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: add text to padded area to the right of image

Posted 06 December 2013 - 04:48 AM

try display: inline-block for the text container.
Was This Post Helpful? 0
  • +
  • -

#7 murukessan   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 05-December 13

Re: add text to padded area to the right of image

Posted 06 December 2013 - 08:07 AM

View PostDormilich, on 06 December 2013 - 04:48 AM, said:

try display: inline-block for the text container.

i tried but in vain...
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: add text to padded area to the right of image

Posted 06 December 2013 - 08:13 AM

what does your code look like?
Was This Post Helpful? 0
  • +
  • -

#9 murukessan   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 05-December 13

Re: add text to padded area to the right of image

Posted 06 December 2013 - 08:19 AM

View PostDormilich, on 06 December 2013 - 08:13 AM, said:

what does your code look like?


this s the fileAttached File  list_procktr.zip (133.67K)
Number of downloads: 65
Was This Post Helpful? 0
  • +
  • -

#10 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: add text to padded area to the right of image

Posted 06 December 2013 - 11:43 AM

sorry, I am not downloading an unknown file. please either post the code using [code] [/code] tags or set it up on a public server or put it into one of the existing code pages (pastebin, github, etc.).
Was This Post Helpful? 0
  • +
  • -

#11 Sandi   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 40
  • Joined: 18-November 07

Re: add text to padded area to the right of image

Posted 06 December 2013 - 01:43 PM

If your text is wider than your box, the only option is to add CSS to have it hidden, or add scroll bars.

overflow: visible
overflow: hidden
overflow: scroll
overflow: auto
overflow: inherit

Was This Post Helpful? 0
  • +
  • -

#12 Glitchy   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 09-November 13

Re: add text to padded area to the right of image

Posted 06 December 2013 - 02:28 PM

I agree, if I was in your shoes I would add a scroll Bar. Also, if your still cant figure it out, adding pictures might help me understand your problem.
Was This Post Helpful? 0
  • +
  • -

#13 murukessan   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 05-December 13

Re: add text to padded area to the right of image

Posted 06 December 2013 - 08:34 PM

View PostDormilich, on 06 December 2013 - 11:43 AM, said:

sorry, I am not downloading an unknown file. please either post the code using
 
tags or set it up on a public server or put it into one of the existing code pages (pastebin, github, etc.).

the file home.png is how it sud be
but when i add more text it goes like in error.png

thanks
muru

Attached image(s)

  • Attached Image
  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#14 Glitchy   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 09-November 13

Re: add text to padded area to the right of image

Posted 07 December 2013 - 07:19 AM

WWW.w3schools.com try it out and go to HTML then CSS because there are a few solutions to this. One is try to format a paragraph, [p], so that it is next to your picture. I don't really know what your code looks like though so I can't say for sure.

(W3schools is for beginners, I assume your pretty experienced with HTML so if it doesn't help Google your problem or YouTube it and you will get answers.)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1