How do I create a box with a border?!

sing2trees · #1 (**permalink**) Dec 8th, 2007, 20:22

Hi all,

Just want some advice on the easiest way to create boxes with a colour border? Have attached a screen shot of another website to give an idea of what I have in mind! (Without the Christmas snow effect tho - but would be interested in learning the easiest way of doing this as well?!)

I am using Dreamweaver CS3, mainly in the design format. Am slowly learning (well teaching myself!) css and coding, but at the minute my knowledge is fairly basic.

All advice and comments welcome!

Thanks

Ben

Marc · #2 (**permalink**) Dec 8th, 2007, 20:30

Is the attatchment what you want it to look like or is that what you've already got?

A simple version would be:

HTML:

HTML: Select all

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

CSS:

Code: Select all

.box {
border: 2px solid #000;
min-height:100px;
}

That will give you a box with a black border which is 2 pixels wide.

sing2trees · #3 (**permalink**) Dec 8th, 2007, 20:56

Hi,
The attachement is what I would like - or something similar.

Do I copy both the HTML and CSS into my file, and if so, where?

Thanks for your help!
Ben

Marc · #4 (**permalink**) Dec 8th, 2007, 21:03

No, that won't give you that - you will need to do some extra things. That is a basic black border around a box.

I am sorry at the moment that i don't have time to do this - i have some other commitments. If someone hasn't replied before I'm back ill be sure to help you!

sing2trees · #5 (**permalink**) Dec 8th, 2007, 21:07

No worries Marc, thanks for your help so far anyway!

Anyone else viewing this message that can help - leave a message!!

Thanks

unitedcraig · #6 (**permalink**) Dec 8th, 2007, 21:43

I am not sure how much i can help but ill try.

what marc has given you is the code for a basic box.

the html section is what you place in your page code when you want the box to be, if you get me?

The Css code you put anywhere really in your css file, Do you have one of these?

Put this into your site and get the position right and everything.

if you want a larger border then increase the px number in the code.

to change colour use colour codes, i dont mean any offence here but do you know about them, i am not sure what your understnading of html is?

hope this helps, please comment if you need more help

craig

sing2trees · #7 (**permalink**) Dec 9th, 2007, 21:28

Hi Craig,

Thanks for that! I have an external CSS sheet - so will do what you suggested with Marcs coding!

Have to admit wasn't too sure which bit goes where from Marcs code, but you have clarified it for me!

And yep - The colour codes I am aware of, well the basic ones anyway!!

Thanks again - Craig and Marc - for your help!

Ben

unitedcraig · #8 (**permalink**) Dec 9th, 2007, 21:36

no problem, thats what this forums for

if theres anything to do with HTML or CSS that you need just post it, happy to help.

http://www.computerhope.com/htmcolor.htm this is a good resource for colour codes, more than you'll ever need lol.

Monie · #9 (**permalink**) Dec 10th, 2007, 01:49

I have free time so I coded it for you here:

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Bordered Color Div</title>

<!-- CSS Embeded Style Sheet -->
<style type="text/css">
.box {
    width: 300px;
    height: 500px;
    border: 2px solid #000;
    min-height:100px;
}
</style>
<!-- CSS Embeded Style Sheet -->

<!-- For External CSS stylesheet use this instead of the embeded style on top ^-->
<link rel="stylesheet" type="text/css" title="default" href="css/YourCSSTitleHere.css" />
<!-- For External CSS stylesheet use this -->

</head>
<body>
    <div class="box">
        Your content here...
    </div>
</body>
</html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Border on website	pritmadlani	Web Page Design	2	Apr 18th, 2008 09:14
how to make the border be red	checkmate	Web Page Design	17	Oct 29th, 2007 07:47
Graphical Border	Pheonix	Web Page Design	6	Dec 17th, 2006 05:00
Why only one border?	timmytots	Web Page Design	1	Nov 30th, 2005 21:32

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
How do I create a box with a border?!