CODEWITHSUNDEEP
htmlcss
gopi1410
gopi1410

Reputation: 6625

Containing a text in an oval shaped area

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

Upvotes: 10

Views: 4461

Answers (5)

Brian Noah
Brian Noah

Reputation: 2972

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>

Upvotes: 1

Funktr0n
Funktr0n

Reputation: 1842

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

Upvotes: 2

user753676
user753676

Reputation:

Maybe you could try the jQuery plugin Text Fill

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

Upvotes: 1

RAN
RAN

Reputation: 1453

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'.

Upvotes: 1

Umesh Aawte
Umesh Aawte

Reputation: 4690

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.sstatic.net/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.

Upvotes: 0

Related Questions