How do I do this?

Hey guys,

First of all I am pretty new to the whole coding game. I have taken two college classes about how to create web pages (I'm a Senior in High School -- Running Start program). So I am still learning. I aim to get a degree in some type of Computer Science, I haven't decided yet. Anyways, on to my question:

I am designing version 2.0 of my website and want to incorporate what I would consider a "highlight/border" on my content. Here's an example: http://www.bespokecycling.com

The "black" part (grey color is the background) of that website covers all of the content and even extends when there is more content as seen on it's other pages. How would I create something like this? I don't even know if it is HTML/CSS (if not could some point me in the right direction?).

Thanks guys!

What the author of the example page did was apply a background color to the html tag via css:

html {
background-color:#242929;
text-align:center;
}

Then the body tag was given a specific width:

body {
font-family:Verdana,Arial,sans-serif;
margin:0pt auto;
position:relative;
text-align:left;
width:935px;

Then a box was created to house the content:

<div id="primary">

and styled like so:

#primary {
background-color:black;
margin:0pt;
padding:0pt 30px;
top:0pt;
width:875px;
}

Inside that box goes all the content, which can be as tall as you want when you don't define a specific height. Notice only the width was defined in this example. It is 60px narrower than its immediate ancestor, the body, and it has 30px of padding on each side. This padding forces the content in from the sides, allowing the background color (black) to show thru the box. It is a nice effect, looks very stylish.

One of the best free tools you can use to examine and deconstruct web pages is the Firebug addon to Firefox.

Gary

http://litmusapp.com/cssvista/

This program will also enable you to edit in IE

Frank

http://litmusapp.com/cssvista/

This program will also enable you to edit in IE

Frank

What does this have to do with the question? Please only contribute if you actually have something to contribute (to the solution of the respective problem/question). If you don’t, well… just don’t reply.

Guys,

Thanks a lot. Now I know what I'm doing for the next while or so!