wrap text around an curved image [Archive]

Click to See Complete Forum and Search --> : wrap text around an curved image

k0r54

02-01-2008, 11:11 AM

Hi,

I am not struggling with the concept of curving the text its actually a problem when the text is enlarged or shrunk.

I have the image in the background of the main div.

I then float divs left and then under all the divs put the <p>.

My code is below but what i think but cannot figure out is, can i not somehow get the line-height to be the same as the <p> as it is to the div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/* MAIN
-------------------------------------------------------------------- */
#main, #mainCurve {
font-size:12px;
text-align:left;
color:#666666;
}

#main h2 {
margin:0 0 0 0;
padding:0;
text-align:right;
/*color:#FF9900;
color:#006600;*/
color:#006600;
}

#main hr {
margin:5px 0 0 0;
padding:0;
margin:10px 0 10px 0;
}

#main p, #mainCurve p {
line-height:16px;
}

#main a, #main a:visited {
text-decoration:none;
color:#0066CC;
font-weight:bold;
}

#main a:hover {
text-decoration:underline;
}

/* Breadcrumb
-------------------------------------------------------------------- */
#breadcrumb {
position:relative;
float:left;
width:460px;
margin:-10px 0 22px 20px;
padding:0 0 0 5px;
text-align:left;
}

/* MAIN
-------------------------------------------------------------------- */
#main {
position:relative;
float:left;
width:680px;
padding:10px;
background:url(../images/mainbg_about.png) top left no-repeat;
}

#mainCurve {
float:left;
clear:left;
border-right:1px solid #000;
}
/* Breadcrumb - after main due to font-weight:bold
-------------------------------------------------------------------- */
#breadcrumb a, #breadcrumb a:visited {
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
color:#0066CC;
text-decoration:none;
font-weight:normal;
}

#breadcrumb a:hover {
text-decoration:underline;
}

#breadcrumb p {
margin:10px 0 0 0;
padding:0;
}

#breadcrumb span {
font-size:10px;
color:#FF9900;
}
</style>
</head>

<body>


<div id="main">
<div style="width:187px; height:85px; float:left; position:relative; margin:-10px -10px 0 -10px; clear:left;">
</div>


<div id="breadcrumb">
<p>
<a href="?m=0">xx</a>
</p>
</div>

<div style="width:166px;" id="mainCurve"> </div>
<div style="width:150px;" id="mainCurve"> </div>
<div style="width:133px;" id="mainCurve"> </div>
<div style="width:108px;" id="mainCurve"> </div>

<div style="width:80px;" id="mainCurve"> </div>
<div style="width:50px;" id="mainCurve"> </div>
<div style="width:5px;" id="mainCurve"> </div>

<h2>House Group test</h2>
<hr>
<p>This is test text. This is test text. This is test text. This is test text. This is test text. </p>
<p>This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text.</p>
<p>This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. This is test text. </p>

<p>This is test text. This is test text. This is test text. </p>
</div>

</body>
</html>

It just appears that the divs are always out of sync with the <p>

Thanks
k0r54

WebJoel

02-01-2008, 12:19 PM

<div style="width:166px;" id="mainCurve"> </div>
<div style="width:150px;" id="mainCurve"> </div>
<div style="width:133px;" id="mainCurve"> </div>
<div style="width:108px;" id="mainCurve"> </div>

<div style="width:80px;" id="mainCurve"> </div>
<div style="width:50px;" id="mainCurve"> </div>
<div style="width:5px;" id="mainCurve"> </div> should be class="". You cannot re-use an ID more than once per any page.

Also, -why populate a block-level DIV with an image? Why not slice the image and float each slice float:left;, and give then a margin-right:15px (or thereabouts)? Then, the textual content will wrap around the floated images with a 15px gutter..

k0r54

02-01-2008, 01:04 PM

Hi,

I changed it all to class but it didn't make any difference? Im not sure why? I did think of the image in the divs but I decided against it just incase it didn't piece together and that i want to change the image from page to page so it would complicate it the process.

I still have the problem where the divs are different size to the <p> lines.

Any idea why?

Thanks
k0r54

WebJoel

02-01-2008, 03:11 PM

Hi,

I changed it all to class but it didn't make any difference? Im not sure why? ... Not intended to 'fix' anything except the incorrectness of the code. One use of any ID per page :). Only "class" can be re-used.

I wrote a quick example. See if this gives you any ideas...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
@charset "utf-8";
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

html, body {min-height:100%; /*for compliant browsers*/
padding-bottom:25px; /* IE does not understand "margin-bottom" on BODY, so padding-bottom instead*/
font:x-small Arial, Verdana, sans-serif;voice-family: "\"}\"";voice-family:inherit;font-size:small;/*for IE 5.5 */
font-size:100%; line-height:1.125em;}

#wrapper p {color:black; line-height:1.32em; }
/*non-content: e.g., -navigation lists, etc. Slightly smaller than content text {font-size:0.75em;} */

html>body {font-size:small; height:auto;/* Assist IE6 and earlier, 100% height */
font-size: small; voice-family: "\"}\"";voice-family: inherit; font-size: medium}
/* Assist IE rendering height, keyword-font sizes, etc. */

#menu ul li {float: left; /* cure IE5.x "whitespace in lists" problem */width: 100%;}
#menu ul li a {height: 1%; /* make links honour display: block; properly */}

#wrapper {min-height:100%; overflow:hidden;} /* 100% height for compliants, enwraps content*/
* html #wrapper {height:100%;}/* and feed IE what it needs */

html, body, p, th, td, li, dd, dt { font:0.875em Arial, Helvetica, verdana sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, 'times new roman', sans-serif;}

h1 { font-size: 2.0em;}
h2 { font-size: 1.5em;}
h3 { font-size: 1.2em;}
h4 { font-size: 1.0em;}
h5 { font-size: 0.9em;}
h6 { font-size: 0.8em;}/* Defined default Header sizes*/

a:link, a:visited, a:focus, a:hover, a:active {background-color:none;}/*s.508 Accessibility*/

a:link {color: #00f;}
a:visited {color: #009;}
a:focus: {color: #06f;}/*for non-mouse pointers: e.g. "hotkeys", etc. s.508*/
a:hover {color: #06f;}
a:active {color: #0cf;}

img {background-color:wheat;}
</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="wrapper" style="width:700px; padding:25px;">
<h1>Image slices, float:left; with text-wrapping</h1>

<img src="#" style="border:1px solid black; margin-right:20px; width:335px; height:35px; clear:left; float:left;" />
<img src="#" style="border:1px solid black; margin-right:20px; width:350px; height:35px; clear:left; float:left;" />
<img src="#" style="border:1px solid black; margin-right:20px; width:365px; height:35px; clear:left; float:left;" />
<img src="#" style="border:1px solid black; margin-right:20px; width:350px; height:35px; clear:left; float:left;" />
<img src="#" style="border:1px solid black; margin-right:20px; width:335px; height:35px; clear:left; float:left;" />

<img src="#" style="border:1px solid black; margin-right:20px; width:300px; height:35px; clear:left; float:left;" />
<img src="#" style="border:1px solid black; margin-right:20px; width:250px; height:35px; clear:left; float:left;" />
<img src="#" style="border:1px solid black; margin-right:20px; width:200px; height:35px; clear:left; float:left;" />
<img src="#" style="border:1px solid black; margin-right:20px; width:150px; height:35px; clear:left; float:left;" />
<img src="#" style="border:1px solid black; margin-right:20px; width:100px; height:35px; clear:left; float:left;" />

<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and
I will give you a complete account of the system, and expound the actual teachings of the great explorer of
the truth, the master-builder of human happiness.<br/>

No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how
to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances
occur in which toil and pain can procure him some great pleasure.<br/>

To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some
advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that
has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?<br/>

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized
by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that
are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is
the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.<br/>

In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best,
every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.
The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure
other greater pleasures, or else he endures pains to avoid worse pains.
</p>

</div>
</body>
</html>

k0r54

02-02-2008, 07:18 AM

Hi,

Thanks for doing that, I do understand how they have done it but I dont think it is practicle because I want to change the image on a few different pages.

Second to that, your code also has the same problem mine does where each img is not the same height as the text and <p>.

Thanks
k0r54

k0r54

02-04-2008, 01:26 AM

i have been fiddling with font size/line-height and height but i cannot get the right combination.

Any ideas?
k0r54

gtiluke

02-04-2008, 08:51 AM

Don't know if you've ever seen this tutorial, but it might help. Hope it does.

http://meyerweb.com/eric/css/edge/curvelicious/demo.htmlhttp://meyerweb.com/eric/css/edge/curvelicious/demo.html

WebJoel

02-04-2008, 12:43 PM

Don't know if you've ever seen this tutorial, but it might help. Hope it does.

http://meyerweb.com/eric/css/edge/curvelicious/demo.htmlhttp://meyerweb.com/eric/css/edge/curvelicious/demo.html
That is actually where the bulk of my suggestion comes from. :) I am just using 'empty image placeholders' hence, the 'jerky corner' appearance. The visual aspect would look to be smooth, but the height of each image versus the line-height of the "<p>" issue would remain... :o

Another solution might be a series of relative-position "<span>" tags that are just several pixels tall, all floated-left and clear:left; float:left (to make the be vertically stacked), and every one just a few pixels wider than the one before... You'd need a hundred or so, but it could work for space-sensitive layout and still provide a EVERY-page-has-it place where "position:absolute;" image/s could be located and be un-affected by content....

Here is maybe another way, variant of described above:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
@charset "utf-8";
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

html, body {min-height:100%; /*for compliant browsers*/
padding-bottom:25px; /* IE does not understand "margin-bottom" on BODY, so padding-bottom instead*/
font:x-small Arial, Verdana, sans-serif;voice-family: "\"}\"";voice-family:inherit;font-size:small;/*for IE 5.5 */
font-size:100%; line-height:1.125em;}

#wrapper p {color:black;}
/*non-content: e.g., -navigation lists, etc. Slightly smaller than content text {font-size:0.75em;} */

html>body {font-size:small; height:auto;/* Assist IE6 and earlier, 100% height */
font-size: small; voice-family: "\"}\"";voice-family: inherit; font-size: medium}
/* Assist IE rendering height, keyword-font sizes, etc. */

#menu ul li {float: left; /* cure IE5.x "whitespace in lists" problem */width: 100%;}
#menu ul li a {height: 1%; /* make links honour display: block; properly */}

#wrapper {min-height:100%; overflow:hidden;} /* 100% height for compliants, enwraps content*/
* html #wrapper {height:100%;}/* and feed IE what it needs */

html, body, p, th, td, li, dd, dt { font:0.875em Arial, Helvetica, verdana sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, 'times new roman', sans-serif;}

h1 { font-size: 2.0em;}
h2 { font-size: 1.5em;}
h3 { font-size: 1.2em;}
h4 { font-size: 1.0em;}
h5 { font-size: 0.9em;}
h6 { font-size: 0.8em;}/* Defined default Header sizes*/

a:link, a:visited, a:focus, a:hover, a:active {background-color:none;}/*s.508 Accessibility*/

a:link {color: #00f;}
a:visited {color: #009;}
a:focus: {color: #06f;}/*for non-mouse pointers: e.g. "hotkeys", etc. s.508*/
a:hover {color: #06f;}
a:active {color: #0cf;}

.curvy {height:5px; clear:left; float:left; border-right:1px solid black; margin-right:10px;}
</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="wrapper">
<span class="curvy" style="width:150px;"></span>
<span class="curvy" style="width:145px;"></span>
<span class="curvy" style="width:140px;"></span>
<span class="curvy" style="width:135px;"></span>
<span class="curvy" style="width:130px;"></span>
<span class="curvy" style="width:125px;"></span>
<span class="curvy" style="width:120px;"></span>
<span class="curvy" style="width:115px;"></span>
<span class="curvy" style="width:110px;"></span>
<span class="curvy" style="width:105px;"></span>
<span class="curvy" style="width:100px;"></span>
<span class="curvy" style="width:95px;"></span>
<span class="curvy" style="width:90px;"></span>
<span class="curvy" style="width:85px;"></span>
<span class="curvy" style="width:80px;"></span>
<span class="curvy" style="width:75px;"></span>
<span class="curvy" style="width:70px;"></span>
<span class="curvy" style="width:65px;"></span>
<span class="curvy" style="width:60px;"></span>
<span class="curvy" style="width:55px;"></span>
<span class="curvy" style="width:50px;"></span>
<span class="curvy" style="width:45px;"></span>
<span class="curvy" style="width:40px;"></span>
<span class="curvy" style="width:35px;"></span>
<span class="curvy" style="width:30px;"></span>
<span class="curvy" style="width:25px;"></span>
<span class="curvy" style="width:20px;"></span>
<span class="curvy" style="width:15px;"></span>
<span class="curvy" style="width:10px;"></span>
<span class="curvy" style="width:5px;"></span>

<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and
I will give you a complete account of the system, and expound the actual teachings of the great explorer of
the truth, the master-builder of human happiness.</p>

<p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how
to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances
occur in which toil and pain can procure him some great pleasure.</p>

<p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some
advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that
has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p>

</div>
</body>
</html> Some creative width alterations could yeild of 'curvy' effects... Effects could not exceed 90~degrees as text won't accomodate of course.. but this is more 'fluid' than image-slice method described above and it prepares the upper-left corner region for image-population..

Basically, -if the height of the "<span>" is less-than the height of the line-height text, -problem is solved.