10

I have a html page which looks like the following:

enter image description here

I want to display some text on the left pane, but the problem is that the text should be inside the oval shaped area only. How do I achieve this? Note that the oval shaped image is the background image, however if required, I can also use a <img> tag for it if it would help. One lame way is to use <p> tags with padding, but that is not an efficient way, so kindly suggest some good methods.

EDIT: HTML:

<div id="leftStage" class="rounded-corners">
  <div id="questionDisp" align="center">

  </div>
</div>

CSS:

#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}

JS: (When the appropriate function is called: )

$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1);  //data read from xml

EDIT: What I need is a div or something above the oval background, & the text should fit in it. I am getting the text from an xml file, so it is not that I have a fixed text size to be displayed

gopi1410
  • 6,567
  • 9
  • 41
  • 75
  • +1 why the image is note appearing ! i faced the same problem tell me how you solve it when you do please :) – shareef Jun 06 '12 at 07:06
  • I suppose, you are talking about something like that: http://www.csstextwrap.com/. Am I right? But it still use Java Script. It's not pure CSS. Is it ok? Or CSS solution only? – Sófka Jun 06 '12 at 07:53
  • @Sófka: yep, css text wrapper would serve the purpose for the time being, but a css solution is what I required (I didnt tag javascript in my question) – gopi1410 Jun 06 '12 at 08:29

5 Answers5

2

There's actually a pure CSS/XHTML code generator on csstextwrap that does exactly what you want.

EDIT:

The concept here is to float <div>'s on either side of your text so that your content is forced to "flow" in between them. By setting the width of your floated <div>'s, you can create a wide variety of cascading "stencils."

See concept illustrated here: fiddle

Funktr0n
  • 1,711
  • 2
  • 16
  • 23
  • read the comments on the question before posting an answer. This had already been mentioned in the comments.. – gopi1410 Jun 12 '12 at 05:53
  • @gopi1410 The comments made mention of the javascript solution. What I've linked to does not require/contain ANY javascript, and should therefore fit your requirements. – Funktr0n Jun 12 '12 at 12:11
  • @gopi1410 Is there something I'm missing? Did you check out the link and/or my edit + fiddle? Based on your description, I'm pretty sure I've done everything you've asked. – Funktr0n Jun 12 '12 at 14:31
  • Well I saw the edit now. Had seen the link earlier only when it was posted in comments, even the css way. Its good but I didn't like the way it implements it, using a number of divs. That I can code by myself rather than using this. I wanted a friendly & clean way to do this.. – gopi1410 Jun 12 '12 at 14:36
  • Well I think you're limited to floating elements as suggested by me/csstextwrap to create a "stencil", or using padded `

    ` tags (like you mentioned) or a `

    ` implementation to separate your text onto successive, shaped rows. Neither way is supremely elegant, and it all stems from the fact that block elements are rectangular by nature. You're kind of screwed until we're allowed to draw text within a `` sans javascript.
     – Funktr0n Jun 12 '12 at 14:42
  • hm.. I know. anyways I had solved it before using the same concept but less number of divs (around 5-6). Anyways thanks for the answer – gopi1410 Jun 12 '12 at 14:47
1

If it is background-image then use the position:absolute with proper margins (top and left), and set the width less than that the oval background-image. Then display property 'block'.

RAN
  • 1,443
  • 3
  • 19
  • 30
  • that wont help because the width of text should be gradually increasing as I move downwards still remaining inside the oval. – gopi1410 Jun 06 '12 at 07:41
1

Maybe you could try the jQuery plugin Text Fill

also see: https://stackoverflow.com/a/688362/753676

Community
  • 1
  • 1
1

I removed my answer since only the left float worked.

If you paste this code: it'll show you exactly how it works. I did a border-radius instead of creating a circle png.

<div style="width:250px;height:230px; border-radius:125px;background:#efefef;padding-top:20px; text-align:center">
The code for my<br /> fix isn't pretty but it should<br />work It's not automatic, but it<br /> does the job that you need it<br /> to do.
</div>
Brian Noah
  • 2,962
  • 18
  • 27
0

You have not shared any HTML, The working code is with some assumption

The HTML is,

<div id="main">
<div class="text">This is text</div>
</div>​

Where div with classtext is the text container.

The CSS for same will be,

#main{
    background-image:url('https://i.stack.imgur.com/bw2HK.png');
    height:563px;
    width:691px;
}
#main .text{
    color:#FF0000;
    width:240px;
    text-align:center;
    top:100px;
    border:1px solid;
    float:left;
    position:absolute;
}

​Here .text is the class that represent the text styling. The main part is position:absolute;. This will set the text div position to absolute. Now you can move the div above image div using top and left styles.

Please do review working example here

P.S. The border, color and other styles can be changed as per your need.

Umesh Aawte
  • 4,590
  • 7
  • 41
  • 51
  • Well I can share the html if needed, will edit soon. & btw, your answer just brings the text down, I dont want that, I want it to start from top & gradually come down with the width increasing – gopi1410 Jun 06 '12 at 07:39
  • So its not a proper solution. – gopi1410 Jun 06 '12 at 07:39
  • I want it to start from top & gradually come down with the width increasing. This was not mention in the question itself. You need to use jQuery for same. Please share your code – Umesh Aawte Jun 06 '12 at 07:42
  • done. I want a predefined div #questionDisp starting from top in which I can directly paste html reading it from a xml & the text in it should fit in the oval. – gopi1410 Jun 06 '12 at 07:49