Site with curves

[jasonweb]

Hiya people, I'm designing a site that uses curves and I don't want to encase the design in a box, I was wondering if theres anyway either through CSS or HTML to make the edges of the curve always be 100% of the window without loosing quality?

[weegillis]

By using left and right floats, repeated in succession you can lay in graphic and /or text slices then have your text follow a curve. Check Big Bear's site for a sample.

If you mean rounded corners in a fluid layout, then you will need four separate graphics set in the background of four separate transparent layers, with corner orientation. "rounded corners"+css should return some useful articles on the subject.

In a fixed width layout, cap and bottom slices is the most common method. This would only require two layers, the main content holder with l&r border shade background, and header/footer containers in the layer above that containing cap and bottom slices, respectively.

Fixed height, fluid width works the same way.

However, a fully fluid layout requires more layers. Consider this example:

<div class="container">
<div class="left top">
	<div class="right bottom">
		<div class="right top">
			<div class="left bottom">

			</div>
		</div>
	</div>
</div>
</div>

div.container{
	width:50%;
	height:auto;
	color:#000;
	background:#fff;
)
div.right,div.left,div.top,div.bottom{
	width:100%;
	height:auto;
}
div.left.top{
	color:inherit;
	background:transparent url(left_top.jpg) no-repeat 0% 0%;
}
div.right.bottom{
	color:inherit;
	background:transparent url(right_bottom.jpg) no-repeat 100% 100%;
}
div.right.top{
	color:inherit;
	background:transparent url(right_top.jpg) no-repeat 100% 0%;
}
div.left.bottom{
	color:inherit;
	background:transparent url(left_bottom.jpg) no-repeat 0% 100%;
}

The left_top image may contain top and left border though it puts limits on the container size due the the size of the graphic. Same goes for right_bottom, which would be a 180 degree translation of left_top. right_top caps that corner, and its translation the other.

This is the basic idea in one version you'll likely run across. Lots of code structure, but it works, at least theoretically, here.

[jasonweb]

Whos Big Bear and whats the link to the site? I'll have a look into thoose techniques or I might just breat up my curves.

[weegillis]

My mistake: Big Baer. It took a little digging, but here is the link:
CSS Image Text Wrap Tutorial

While searching for the above, I ran across an article by Trenton Moss, "CSS and Round Corners: Build Boxes with Curves," but I can't post the link since it's a competing forum. Search for the title and you're sure to find it. It's strikingly similar to the method conjectured above.