Quote:
Originally Posted by pdiddles03
I am working on a site for a client, they want their text on their home page to be in an oval shape. I thought maybe I could use a div with the border-radius in css. Problem with this is the text won't hold true to the shape of the div. Is there a way I can do this tha anyone knows of?
Thanks
|
I am not aware of any "direct" way to do that...
But...
Getting imaginative, I would think that you could float some empty elements (of sizes necessary for your needs) both left and right within the container, and then let the text wrap iteslf in the remaining space.
Something like this (tested and working in IE9 and FF 7):
Code:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Oval Orifice</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background-color:#222;font-size:16px;}
#oval{cursor:default;width:25em;margin:50px auto 0px;background-color:rgba(0,255,0,1.0);border-radius:20em;background-color:#444;color:#f4f4f4;border:2px solid #a4a4a4;}
#oval p{line-height:1.33em;font-size:0.75em;font-family:'verdana';font-weight:bold;text-align:center;}
.left,.right{height:0.96em;}
.left{float:left;}
.right{float:right;}
.upper_1,.lower_1{width:3em;}
.upper_2,.lower_2{width:0.8em;height:1em;}
.upper_3,.lower_3{width:0.2em;height:1.1em;}
.left.upper_2{clear:left;}
.left.upper_3{clear:left;}
.left.lower_2{clear:left;}
.left.lower_1{clear:left;}
#oval:hover div{background-color:rgba(255,255,0,0.5);}
</style>
<body>
<div id="oval">
<div class="left upper_1"></div>
<div class="right upper_1"></div>
<div class="left upper_2"></div>
<div class="right upper_2"></div>
<div class="left upper_3"></div>
<div class="right upper_3"></div>
<div class="left lower_2"></div>
<div class="right lower_2"></div>
<div class="left lower_1"></div>
<div class="right lower_1"></div>
<p>This is some text within the oval. If all goes according to plan it should wrap within the shape of the oval since the floated elements take up the correct amount of space in the correct places... If I write more content here it stays in bounds at all times.</p>
</div>
<div style="clear:both;"></div>
</body>
</html>
It should be noted that this is sloppy coding practice. Empty elements are a bad thing and this is going to require a bunch of them.
Also, this solution is not completely "fluid," given its requirements. This is based on "em" measurements so it is flexible, but at certain font sizes the bottom line gets wrapped into a new line which stretches the oval out for another row of text, but leaves the "bumper" up on the previous line which means that the second-to-last row is squeezed a but when it doesn't need to be. Anyway, for a somewhat strictly controlled layout you might be able to get by with something like the above.