Create a Fixed-Width Page with Shadow (like b.net)
The fixed-width page has long been an easy way to ensure proper rendering and layout of a site while also offering compatibility with smaller display resolutions. Over the years, bland centered pages evolved into the heavily styled pages we see today at places like bungie.net. The epitome of centered fixed-width pages is the centered-fixed-width-content-block-with-shadow and now your site can be added to the list of remarkable pages with this beautiful style!
Tools needed:
- A graphic editor such as GIMP or Photoshop with alpha transparency support, and preferably gradients.
- A text editor, preferably one geared towards proper coding and not something shitty like Notepad/Wordpad or something pointlessly complex like Dreamweaver. If you really need something, go get Notepad++
- An IQ over 90 points
Procedure:
The first step in getting a fixed-width page at all is to determine what width you're looking for. Previously, many sites used an 800px width for their content, ensuring that it would fit on the 800x600 displays many of their customers were using. Nowadays, the smallest display you should really be caring about is 1024x600 - a netbook. When a stylistic element like a shadow is thrown in, we need to consider something else: do we want our visitors using this lower resolution to see these elements? If your background image or your shadow are key points, you may want to shrink your page even further. In this tutorial, I'll be using a 1000px page width, giving room for the reader to see the shadow and the basic coloring of the background on a smaller display.
First we need to get our CSS and HTML ready. This is mostly copy-and-paste, and hopefully you weren't reading this tutorial solely for the "fixed page width" part:
CSS
Code:
body {
padding: 0px;
margin: 0px;
background-image: url(site-background-image.png);
background-repeat: repeat;
background-position: 50% 50%;
background-attachment: fixed;
}
.main {
width: 1000px;
background-color: #FFF;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
.shadow {
background-image: url(shadow.png);
background-repeat: repeat-y;
background-position: top center;
width: 100%;
left: 0px;
right: 0px;
margin: 0px;
padding: 0px;
}
(Save this as main.css)
Note that our body has its own background image and we will be using three sections to get the job done. The body has been set up to remove any page margins, giving us the full page to work with and ensuring the top of our content is flush with the top of the browser viewport.
Next, note the fixed width in the 'main' class: this is our content width. Here is where we style the main content. I've given it a white background to ensure that it works well with the shadow image I'll be making later.
Finally, we have the "shadow" class, in which is our centered shadow background image (shadow.png). Also note that multiple declarations are used to ensure our <div> will span the entire page.
Next comes the HTML, which is very simple:
Code:
<!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" dir="ltr" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div class="shadow">
<div class="main">
Content goes here!
</div>
</div>
</body>
</html>
Note that the only content of the shadow <div> is the main <div>.
But we're not done yet, now we that we have the framework complete, it's time for the final piece of the puzzle: a shadow.
Open up your image editor and create a new image that is slightly larger than your page content width. For my sample, I used 1024px by 2px. Using 2 pixels for the height helped me see what I was doing.
To ensure that our shadow is properly centered on the page, we'll want to select a specific number of pixels in width from either side (I'd start with the left, seeing as we all live in LTR societies here, amiright?). This width should be half the number of pixels you added to get the image's total width. Ie, for my example, 12 pixels.
Using your gradient tool, fill this area with a black-to-transparent gradient. Do the same (in the opposite direction) for the right side. Fill the middle with black.
You should now have something like this:
Save this as your shadow.png, and load up your page in your browser. If all went as planned, you should see something like the following:
Just fill in the main <div> with your content and viola, a fixed-width page with a shadow, just like b.net!
For a better preview of what you can do with this, see Cerebrum.
Re: Create a Fixed-Width Page with Shadow (like b.net)
Re: Create a Fixed-Width Page with Shadow (like b.net)
I'm half glad and half annoyed that you made this before me.
Oh well. Rep must be given where rep is due ;).
Re: Create a Fixed-Width Page with Shadow (like b.net)
Nice, might use this to border my site.
Re: Create a Fixed-Width Page with Shadow (like b.net)
Thanks, guys. Tune in next time where I'll show you how to write a simple discussion forum from scratch!
Re: Create a Fixed-Width Page with Shadow (like b.net)
How would you edit your code to have the shadow extend to the very bottom of the page, regardless of content? So this: http://timo.modacity.net/2007/ would have the shadow extend to the bottom instead of cutting off.
Re: Create a Fixed-Width Page with Shadow (like b.net)
I don't see any cut off, but I'm only on a 1280x800 atm... Getting things to stretch vertically only when needed can be a pain in CSS, but I'll try and find something. Also, your background attachment should be set to fixed... that doesn't scroll well at all...
Re: Create a Fixed-Width Page with Shadow (like b.net)
I tried the same thing, but it is easier to just get it done the quick and dirty way and put another image on the bottom that fades out as well.
Also, Timo, two quick suggestions. Make the shadows darker to give it more contrast. Right now it just looks like the content block bleeds into the picture, so it looks a bit sloppy. Also, your links should be where you are putting that white text. Put the links where people expect them to be. Right now, they are in an awkward position, and make the buttons larger.
