Article
Get Cooking with Photoshop and CSS - 3 Low-fat Recipes
Layout Touchup
For the graphic element in the top left column, I'll set a non-repeating background image for the #leftcol div. While I'm at it, I'll set padding for the content areas and use the box model hack to make sure the layout works for IE5 as well as more recent browsers.
eecWeb/styles.css (excerpt)
#leftcol {
width: 168px;
float: left;
background: url('images/eec-leftcoltop.gif') no-repeat;
padding: 10px 8px 8px 10px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 152px;
}
html>body #leftcol { width: 152px; }
#maincol {
width: 545px;
float: left;
padding: 10px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 525px;
}
html>body #maincol { width: 525px; }
When I add padding and use the box model hacks, I'll sometimes find that my divs no longer float side-by-side, but the second div gets knocked underneath the first. If that happens, I would add background colors to the divs for testing purposes, and play with the pixel amounts until I find numbers that work. Eventually, I'll end up with a site that looks like this:
Link Bar with Hover Image
For the vertical menu, I'll start with the basic structure we made in the Clean and Crisp flavor, but I'll adjust the width and strip out the border/background code:
eecWeb/index.htm (excerpt)
<div id="leftcol">
<div class="verticalmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
eecWeb/styles.css (excerpt)
.verticalmenu ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.verticalmenu a:link, .verticalmenu a:visited, .verticalmenu a:hover {
display: block;
font: bold 1.1em Verdana, Arial, Helvetica, sans-serif;
color: #1A286E;
text-decoration: none;
padding: 5px;
width: 153px;
height: 26px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 143px;
height: 16px;
}
html>body .verticalmenu a:link, html>body .verticalmenu a:visited, html>body .verticalmenu a:hover {
width: 143px;
height: 16px;
}
When the mouse is over the link, I want the hovered-state graphic to appear. The standard technique is to set it as the background image of the link hover psuedoclass:
eecWeb/styles.css (excerpt)
.verticalmenu a:hover {
background: url('images/eec-vertical.gif') no-repeat;
}
Because the graphic is a transparent gif, it allows the background to show through. Here's what the vertical menu looks like now (with the About Us hover state showing):
Almost done! All I have to do is add a few extra styles for headings, and my site design is complete!
Click to view larger screenshot in a new window.
Click to view HTML page in a new window.
Click to view CSS file in a new window.
Three-column Static-width Layout
Creating a fixed-width, centered, three-column layout is easy when you already have the two-column layout.
We'll modify the HTML code so that there are three divs: one for each column.
eecWeb/3col.htm (excerpt)
<div id="body">
<div id="leftcol">left column</div>
<div id="centercol">center column</div>
<div id="rightcol">right column</div>
<br class="clear">
</div>
In the style sheet, we set #centercol to be very much like #maincol, with a narrower width.
eecWeb/styles.css (excerpt)
#centercol { /* basically a modification of "maincol" */
width: 395px;
float: left;
padding: 10px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 375px;
}
html>body #centercol { width: 375px; }
Then, we'll add code for the right column div (with float: left defined).
eecWeb/styles.css (excerpt)
#rightcol {
width: 150px;
float: left;
padding: 10px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 130px;
}
html>body #rightcol { width: 130px; }
And the result looks like this:
If you want a border to separate the middle and right columns, remember that the two-column look is achieved by a background image. So all you need to do is modify the background image with a section for the right column. In the diagram below, you can see a very faint thin blue line marking the right column border:
Create a new #wrapper3col selector to use that background image (instead of #wrapper, which uses the two column background image), and change the HTML code to reference the new selector:
eecWeb/styles.css (excerpt)
#wrapper3col {
margin: 0px auto; /* to fix centering in Mozilla */
background: url('images/eec-bg3col.gif') repeat-y;
text-align: left;
width: 749px; /* width should be the same as the background image */
padding: 0px 17px 0px 17px;
/* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 715px;
}
eecWeb/3col.htm (excerpt)
<div id="wrapper3col">
<div id="header">logo</div>
….
Here's the final three-column layout:
Click to view larger screenshot in a new window.
Click to view HTML page in a new window.
Click to view CSS file in a new window.
Summary of Edgy Eye-Candy Flavor
Let's review the additional skills you've learned in this section.
In Photoshop, you learned to:
- Create a Drop Shadow layer effect.
- Create gradients.
- Use the Magic Wand tool to create a selection based on the pixels in that layer.
- Lock the transparent pixels in a layer to easily re-color layers.
- Hide layers from view by clicking the "eye" icon in the Layers Palette.
- Use the Custom Shape tool.
- Adjust the opacity of a layer.
- Duplicate, crop, and save images for the Web (in more detail).
- Adjust the Canvas size (to ensure the borders are the same width).
- Create, duplicate, and move a Layer Set.
With HTML/CSS, you learned to:
- Create a static-width, centered, two-column layout with a header and footer.
- Create a static-width, centered, three-column layout with a header and footer.
- Use background images for a two-column and three-column effect that stretches the height of the total content area, and make sure they show up in Netscape and Firefox.
- Get divs to center in all browsers.
- Use background images as "hover" navigation buttons.