Looking for suggestions for arcs on the page

HTML & CSS
1

I have a client I am working with who has a yellow pages ad and wants to replicate it’s look on their website. I submitted a proposal, and he liked it, but wanted more of the ad design carried over to the website. I am not completely sure what the best method (or if there is even one) to use to proceed.

I’m attaching a rough sample of what the background looks like. What I’m curious about is how some people might tackle the arcs of this design. What about when people resize the browser? Is there a way to have the arcs automatically fill? What are some creative solutions some of you people might have?

The blue in the middle is actually a vertical gradient, and the bottom arc in the original is not actually a part of the full oval (it’s a different sized arc from the top one, I just did this quick drawing since it was going to be a little difficult to truly explain what I was looking at.

Hoping some of you more creative than me have a solution that will have me smacking my forehead with a “why didn’t I think of that” answer!

Greg

2

I’ve moved this thread to the CSS forum, because that’s really what you’ll need to use when doing the site, even if you use images.

Could you say a bit more about the page design? Is the blue area for content, yellow for head section etc?

3

Sorry, thought it would be OK under the Design heading, thanks for making the change for me. In the ad there really is no definite head/footer breakdown, but from my thinking it would be just that, the yellow section would be the header, red would be footer, and the blue would grow/shrink vertically page to page based on the content included.

4

If it’s just a fixed width affair, you could have the red part as a background image on the <body> of the page, placed at the bottom, and the yellow top as a background image on a content div. Then the background color on the <body> could just be blue. You’d set a minimum height on the content div to stop the two background images overlapping.

5

You could probably do something close with border-radius and gradients for modern browsers.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin:0;
	padding:0;
}
h1, p { margin:0 0 1em }
body { background:#ccc; }
#outer {
	min-width:600px;
	max-width:1200px;
	margin:auto;
	background:yellow;
}
* html #outer{width:80%}
#header {background:yellow; }
#content {
	background:blue;
	position:relative;
	z-index:2;
}
#header, #content, #footer { padding:10px;zoom:1.0}
#header, #footer {text-align:center; }
#footer {
	background:red;
	position:relative;
	z-index:1;
	padding-top:100px;
	margin-top:-100px;
}
#content {
	-moz-border-radius:500px/100px;
	-webkit-border-radius:500px/100px;
	border-radius:500px/100px;
	-moz-box-shadow:0px 0px 2px #000000;
	-webkit-box-shadow:0px 0px 2px #000000;
	box-shadow:0px 0px 2px #000000;
	background-image: -moz-linear-gradient(top, #08d3ff, #1f2eff);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#08d3ff), to(#1f2eff));
	background-image: -o-linear-gradient(top, #08d3ff, #1f2eff);
	background-image: linear-gradient(top, #08d3ff, #1f2eff);
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	padding:70px 30px;
}
</style>
</head>

<body>
<div id="outer">
		<div id="header">
				<h1>Heading</h1>
		</div>
		<div id="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum consequat magna. Pellentesque turpis sapien, commodo a iaculis nec, ullamcorper ut lorem. Quisque aliquam risus quis nibh sollicitudin consequat elementum felis pulvinar. Fusce sagittis, sem sed vulputate sodales, magna ipsum dignissim justo, fringilla volutpat purus quam sit amet ante. Ut quam massa, lobortis quis vehicula sagittis, gravida in mauris</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum consequat magna. Pellentesque turpis sapien, commodo a iaculis nec, ullamcorper ut lorem. Quisque aliquam risus quis nibh sollicitudin consequat elementum felis pulvinar. Fusce sagittis, sem sed vulputate sodales, magna ipsum dignissim justo, fringilla volutpat purus quam sit amet ante. Ut quam massa, lobortis quis vehicula sagittis, gravida in mauris</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum consequat magna. Pellentesque turpis sapien, commodo a iaculis nec, ullamcorper ut lorem. Quisque aliquam risus quis nibh sollicitudin consequat elementum felis pulvinar. Fusce sagittis, sem sed vulputate sodales, magna ipsum dignissim justo, fringilla volutpat purus quam sit amet ante. Ut quam massa, lobortis quis vehicula sagittis, gravida in mauris</p>
		</div>
		<div id="footer">
				<p>footer</p>
		</div>
</div>
</body>
</html>

You have to ask though whether this is a viable proposition for the web as the web is not print and was never meant to be :slight_smile:

6

ralph.m - I was hoping to not be stuck at fixed width, that would be a pretty simple solution, but then the age-old question… “What default width do you design for?”

Paul - that actually works just about like I wanted it to. Set a minimum width and let it grow to a pre-defined maximum. Slightly different look in the browsers (Chrome and Firefox look the same, but IE9 doesn’t show the same blue background gradient and I haven’t tried it yet in older browsers). I’ll just have to show the client how it looks and see what he thinks about it.

Thanks guys, I knew it was quite a simple solution, just didn’t have enough trust in myself to pull it off.

Now I am off to dissect Paul’s code and do my best to get my head around how it works!

Greg

7

Which is the polite way of saying what I immediately thought – kick the artsy fartsy designer right square between the legs as that’s not a ‘viable for web deployment’ concept.

8

It’s not actually a viable solution for print either unless it’s a small amount of content. Anytime you have a block of text, that’s what it is, a block. When you try to fit that into a circular graphic like that, what are you doing but fitting a square into a circle. It makes for an inefficient use of space in any medium. Unless it’s for something like “NEW!” I avoid placing bodies of copy into a circular frame. It can easily lead to trouble if client starts adding text. Paul’s example demonstrates that. When you add more copy it stops being a circle and become a regular old header and footer with curves.

9