klange
July 9th, 2009, 02:05 PM
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
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:
<!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:
http://cce.phpwnage.com/newsite/background_tile.png
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:
http://blog.phpwnage.com/~klange/shadow-fixed-width.png
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 (http://cce.phpwnage.com).
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
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:
<!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:
http://cce.phpwnage.com/newsite/background_tile.png
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:
http://blog.phpwnage.com/~klange/shadow-fixed-width.png
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 (http://cce.phpwnage.com).