Create Boxes With CSS

mortgage-pro-seo · 10-17-2004, 11:22 AM

Please have a look at the attachment. What is the easiest way to make this box in just css?

I don't care about the rounded corners because that is more advanced. Just the plain square box for now.

Is there a site with tutorials on creating boxes around elements?

**LazyJim** · 10-17-2004, 12:22 PM

you mean give the element a square border?

Code:

border: solid black 1px;

mortgage-pro-seo · 10-17-2004, 12:39 PM

Hiya Lazyjim,

I am speaking about making a box look like the image which I posted.

**LazyJim** · 10-17-2004, 01:23 PM

ah ha

well start with a div and set its class to something useful that we can use to reference the box in the CSS code.

Code:

<div class="bluebox">
</div>

wherever your CSS is, add a rule for our blue box, make the bg lightblue (or whatever) and maybe specify a size...

Code:

div.bluebox {
	background: lightblue;
	width: 260px;
}

now add the box heading, assuming you've got 2 levels of heading in the page already, add a third level heading...

Code:

<div class="bluebox">
	<h3></h3>
</div>

you can reference the heading with a new rule in your CSS (and also make it whatever colour you want)...

Code:

div.bluebox {
	background: lightblue;
	width: 300px;
	height: 200px;
}
div.blue_box h3 { 
	background: blue;
	margin: 0px;
	padding: 5px;
	text-align: center;
}

Now you can add <p> paragraphs for the next boxes, give one (I've done the white one) a class so you can provide different CSS to <p>'s that have that class.

Here's the whole lot hope it's the sort of thing you were after:

Code:

<html>
<head>
<style>
div.blue_box { /* Our blue boxes */
	background: lightblue;
	width: 260px;
}
div.blue_box h3 { /* level 3 headings inside our blue boxes */
	background: blue;
	margin: 0px;
	padding: 5px;
	text-align: center;
}
div.blue_box p.white_box { /* the white box pragraph in our blue boxes */
	background: white;
	margin: 5px;
	padding: 5px;
	text-align: left;
}
div.blue_box p { /* ordinary paragraphs in our blue boxes */
	padding: 5px;
	text-align: left;
}
</style>

</head>
<body>
<div class="blue_box">
	<h3>Box Title or image</h3>
	<p class="white_box">
		white box content here with links and whatever
	</p>
	<p>Have one to sell? [Image]</p>
</div>
</body>
</html>

mortgage-pro-seo · 10-17-2004, 01:59 PM

Thanks Lj!

That did get the juices flowing!

**LazyJim** · 10-18-2004, 07:25 AM

If you mean I helped you out and you learned something in the process then great!