Web Design Forums

replaya · 06-09-2005, 11:42

Hi

I am having problems trying to create a box like the test.gif file i have uploaded in css. I can't use

border: double;

because the outer line colour is the same as the inner line colour. Any ideas??

I want

just incase the image doesnt show)
border solid line - one colour
then a white space around the padding
then the padding - a different colour

thanks in advance

Brown · 06-09-2005, 12:00

probably many ways to do it, but i'd do this:

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>
	
	<style>

	#box {
		background-color: green;
		width: 200px;
		height: 200px;
		border: 3px solid white;
	}
	
	#boxContainer {
		border: 1px solid red;
		width: 206px;
	}
	
	</style>
	
</head>

<body>

<div id="boxContainer">
<div id="box">

</div>
</div>

</body>	

</html>

Transmogrify · 06-09-2005, 12:03

I did it like this -

Code:

.box {
	background-color: #C4DF9B;
	border: 5px solid #fff;
	width: 100%;
	height: 100%;
}

.boxBorder {
	border: 1px solid #E19D00;
	width: 230px;
	height: 230px;
}

for the CSS

and

Code:

<div class="boxBorder">
	<div class="box">
	Test
	</div>
</div>

for the html. works.

Transmogrify · 06-09-2005, 12:15

bah.. i prefer mine.

replaya · 06-09-2005, 12:17

Exactly what I wanted,

much appreciated guys, thankyou

Brown · 06-09-2005, 13:10

can you come over and make me a cup of tea in return?

06-09-2005, 11:42	#1 (permalink)
replaya Registered User Join Date: Apr 2005 Posts: 49	how would i create this box - css Hi I am having problems trying to create a box like the test.gif file i have uploaded in css. I can't use border: double; because the outer line colour is the same as the inner line colour. Any ideas?? I wantjust incase the image doesnt show) border solid line - one colour then a white space around the padding then the padding - a different colour thanks in advance Attached Thumbnails

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

06-09-2005, 12:15	#4 (permalink)
Transmogrify Rough Creep Arse™ Join Date: Jul 2005 Location: Vancouver, Canada Posts: 1,888	bah.. i prefer mine.

06-09-2005, 12:17	#5 (permalink)
replaya Registered User Join Date: Apr 2005 Posts: 49	Exactly what I wanted, much appreciated guys, thankyou

06-09-2005, 13:10	#6 (permalink)
Brown volkswagen yellow & gold Join Date: Apr 2003 Location: london, england. Posts: 6,147	can you come over and make me a cup of tea in return?

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)