Need help

liam_d · Aug 10, 2006

Ok guys, i am rubbish with css so i need someones help on this.

I have attatched my design in .psd format.

What i need is a css layout of that, but, each corner needs to be its own image (done by slicing), and for the borders to all the their own images (so they can stretch).

If you know what i mean?

Trying to explain myself...

So there would be 4 corner divs, a div for the top line, a div for the bottom line, divs for the sides, and a main content div.

All Would have to stick together and expand/get smaller like tables would.

I really have no idea how to do it or explain myself better.

JYM · Aug 11, 2006

Well, this is actually quite simple. There are two methods (at least) of doing this, but this is the way I prefer.

Let the top left corner = A
Let the top right corner = B
Let the bottom left corner = C
Let the bottom right corner = D

Here is the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Corners - The Efficient Way</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	background: #d4d4d4;
	}
#container {
	margin: 9px;
	padding: 0;
	}
#top {
	height: 10px;
	background: url("top.gif") repeat-x top;
	}
#topleft {
	width: 100%;
	height: 10px;
	background: url("A.gif") no-repeat top left;
	}
#topright {
	height: 10px;
	background: url("B.gif") no-repeat top right;
	}
#content {
	background: #fff;
	border-left: 1px solid #868686;
	border-right: 1px solid #868686;
	}
#bottom {
	height: 10px;
	background: url("bottom.gif") repeat-x bottom;
	}
#bottomleft {
	height: 10px;
	background: url("C.gif") no-repeat bottom left;
	}
#bottomright {
	height: 10px;
	background: url("D.gif") no-repeat bottom right;
	}
</style>
</head>

<body>
<div id="container">
<div id="top"><div id="topleft"><div id="topright"></div></div></div>
<div id="content">This is where your content and everything else goes</div>
<div id="bottom"><div id="bottomleft"><div id="bottomright"></div></div></div>
</div>
</body>
</html>

Hope this helps!

Edit: I've attached the file and the images for reference... also I took into account the grey margins you wanted.

liam_d · Aug 11, 2006

You sir are a god.

I have sent all my NP$ to you, sorry it is not much.

This is very appreciated!

There is one small problem, if you look in IE the top and bottom are rather seperated from the middle, do you know a possible fix?

JYM · Aug 11, 2006

That is a really strange phenomenon... It happened with my website too, and it makes no sense whatsoever. I will try some other methods of doing the corners and see if it works better.

EDIT: I found a solution, here's the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Corners - The Efficient Way</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	background: #d4d4d4;
	}
#container {
	margin: 9px;
	padding: 0;
	}
#top {
	height: 10px;
	background: url("top.gif") repeat-x top;
	}
#topleft {
        display: block;
	width: 100%;
	height: 10px;
	background: url("A.gif") no-repeat top left;
	}
#topright {
        display: block;
	height: 10px;
	background: url("B.gif") no-repeat top right;
	}
#content {
	background: #fff;
	border-left: 1px solid #868686;
	border-right: 1px solid #868686;
	}
#bottom {
	height: 10px;
	background: url("bottom.gif") repeat-x bottom;
	}
#bottomleft {
	height: 10px;
	background: url("C.gif") no-repeat bottom left;
	}
#bottomright {
	height: 10px;
	background: url("D.gif") no-repeat bottom right;
	}
</style>
</head>

<body>
<div id="container">
<div id="top"><span id="topleft"><span id="topright"></div></div></div>
<div id="content">This is where your content and everything else goes</div>
<div id="bottom"><div id="bottomleft"><div id="bottomright"></div></div></div>
</div>
</body>
</html>

Need help

The original NP Emo KidEstablished Member

Established Member

The original NP Emo KidEstablished Member

Established Member

RLUSD.cn

Thon.ma

TheJetStore.com

ProperAF.com

floravel.com

iqoj.com

fuelinspection.com

seoFlip.com

VertiportsDesign.com

EnchantedVenue.com

Similar threads

We're social

RLUSD.cn

Thon.ma

TheJetStore.com

ProperAF.com

floravel.com

iqoj.com

fuelinspection.com

seoFlip.com

VertiportsDesign.com

EnchantedVenue.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling