CHAPTER 11
CASE STUDY: HIGH-CONTENT CSS DESIGN
The design explained in this chapter uses many of the same techniques as the layouts in Chapters 9 and 10; the key difference is that it contains more content. The technical structure is a hybrid of the two designs in that it uses a header <DIV> across the top, as in Chapter 9, and incorporates a three-column layout below, as does the design in Chapter 10. It is designed to display more content than many sites, whether the purpose is to sell product, provide large amounts of content, or even a combination of the two.
Design 123 Example
The design explained in this chapter is design 123 online (photo credits: www.idlerphotography.com).
UNDERSTANDING THE DESIGN’s STRUCTURE
Figure 11.1 illustrates the design explained in this chapter. It is designed to work easily as either a fixed or a liquid design. Because the header area stretches across the entire design, elements can be added, edited, or removed without having to modify other areas of the site.
Figure 11.1
The high-content CSS design explained in this chapter.
© 2014 Cengage Learning.
Design Width
This design, along with those in Chapters 9 and 10, was written at a time when the resolution for which designers created sites was 800 × 600. The principles of this design are still the same, no matter what the resolution or width of the design is. The width from 770 pixels would simply need to be changed to 1,000 pixels. The designer would merely need to widen any or all of the columns to take on the additional 230 pixels (1,000 – 770 = 230).
Reasoning Behind Guides and Creating Slices in Photoshop Files
There are 15 slices used in the main Photoshop file and one in a secondary file to create the images for the homepage design. Figure 11.2 shows all the slices used in the homepage file and outlines the 10 most important guides and slices necessary in constructing the design with XHTML and CSS.
Figure 11.2
Ten of the most important guides and slices used to build the design in this chapter.
© 2014 Cengage Learning.
Following are explanations of the 10 most important guides and slices used in Figure 11.2:
1. The guide above number 1 is used to separate the header row from the bottom portion of the design, which includes the left, center, and right columns.
2. The guide to the left of number 2 is used to separate the left column, which includes the menu, from the right column, which includes the nested center and right columns.
3. The guide above number 3, which is difficult to differentiate from the black line it abuts, is used to separate the menu area from the content below.
4. The slice to the top left of number 4 is used to save the header-left image, which includes the company’s logo.
5. The two images in the header row to the far right of number 5 are mortised together, along with their text. The first image found to the right of number 5 is the background image that is repeated horizontally across the header file. This works even if the design is changed to a liquid format.
6. Number 6 does not represent a slice in the homepage file shown in Figure 11.2 but highlights the image behind the form that is saved as a background image in a separate file (see Figure 11.3). Similar to the Chapter 9 and 10 designs, a separate Photoshop file is used to save such an image. Although a slice could be created to save this background image in the main Photoshop file, a designer may want the image to run down the left column behind content other than the form. For this reason, the image was created in a separate Photoshop file. Number 1 represents this slice in Figure 11.3.
Figure 11.3
A Photoshop file that includes the background image behind the form, saved separately from the homepage file.
© 2014 Cengage Learning.
7. The slice to the top left of number 7 is used to save the Search button. If the designer were to continue building this ecommerce site, it would require additional buttons that would, most likely, be consistent with this image. Therefore, the designer might want to crop and save the button in a separate Photoshop file, which would make saving separate files easier.
8. The slice to the top left of number 8 represents a banner ad saved from the homepage file. The important thing to note about this image is that it is saved with extra space to the left and right sides, which gives the designer room to be flexible if the image needs to be moved to the left or right down the road or if a larger image needs to be added.
9. Number 9 represents a product used in the homepage design. Although each of the four products is saved individually in this homepage file, they could be saved as their own separate Photoshop files for the same reason the button image could be saved individually.
10. Number 10 represents two slices. The slice to the top left of the number is used to provide a line at the bottom of the right column to give it a sense of closure. Because the column is assigned absolute positioning, it will not automatically maintain the same height as the center column. This line could also be created by simply adding a bottom border to the area with CSS. The slice to the bottom left of number 10 is used as the background image of the title area for the second-level pages.
Understanding the Placement of CSS Containers
Slightly more <DIV> tags are used in this design than in the designs explained in Chapters 9 and 10 because more individual content elements are used here. Structurally, all three designs require the same number of <DIV> tags to build their infrastructures. They are merely placed differently. As mentioned earlier, this design, as shown in Figure 11.4, is a hybrid of those two designs in that it uses a horizontal header container and a three-column format below the header.
Figure 11.4
Ten of the most important containers used to build the design.
© 2014 Cengage Learning.
Following are explanations for 10 of the most useful containers in Figure 11.4:
The <DIV> tag to the right of number 1 is used for centering the design in IE 5 and 5.5.
Number 2 represents the header <DIV>, which contains the nested content to the right of the number.
The <DIV> tag to the top left of number 3 represents the left column’s container.
Number 4 represents the banner ad that is saved for the left column. It also shows how the left column, which is assigned absolute positioning, extends past the boundaries of the containers within which it is nested.
The <DIV> to the top left of number 5 is the a5- column-right container, which includes the menu row and center and right columns.
Number 6 points out the <DIV> in the left column that contains the search form.
Number 7 represents the container within which the menu is nested.
The center column of content is nested inside the container indicated by number 8.
The right column container begins at the top-left corner of number 9.
Number 10 represents a <DIV> tag that is used to nest additional content in the right column.
BUILDING THE STRUCTURE
Following are the step-by-step instructions for building the design. It is assumed that the Photoshop file has already been created or customized and that the designer only needs to position the images and text.
Creating the XHTML and CSS Framework
The first step to build the design is to create the XHTML framework and initial CSS containers. Listing 11.1 is the code that is used to output the page shown in Figure 11.5.
Figure 11.5
Basic XHTML and CSS framework for the design.
© 2014 Cengage Learning.
Listing 11.1 Code for Figure 11.5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en"><head><title>Design 123</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">
/* ++++++++++ global general styles start ++++++++++*/
html, body {
margin:0px;
padding:0px;
font: 13px Arial, Helvetica, sans-serif;
color:#000000;
background:#ffffff;
}
/* ++++++++++ global general styles end ++++++++++*/
/* ++++++++++ global structure styles start ++++++++++*/
#a5-body-center {
text-align:left;
border:1px solid #000000;
}
#a5-body {
position: relative;
width: 770px; /* change this to a specific amount for a fixed
design or a relative amount if the design should expand to
a percentage of the screen. E.g., 770px or 100%, respectively. */
/* remove these comment tags if the page is to be centered
margin-left: auto;
margin-right: auto;*/
text-align:left;
padding-bottom:10px;
border:1px solid #000000;
}
/* ++++++++++ global structure styles end ++++++++++*/
</style>
</head>
<body>
<div id="a5-body-center">
<div id="a5-body">
</div>
</div>
</body>
</html>
There are several things to note about the code in Listing 11.1:
The CSS style sheet is commented into a couple of different sections. The global general styles comment tags contain the general styles, such as the formatting of the <HTML> and <BODY> tags, hyperlinks, and fonts. The global structure styles comment tags include the styles used to define the structure of the design and elements included in that structure.
Several rules define the <HTML> and <BODY> tags. The margin and padding properties are used to ensure that the design is placed in the very top-left corner of the browser, with no space between the design and the edges. The default font style for the site is set using the shorthand FONT property. Defining the default font color is accomplished with the COLOR property. The background color is assigned to ensure that all browsers display the same color because not all browsers show the same color.
The a5-body-center and a5-body rules are used to force the design to the left side of the browser screen with a fixed width of 770 pixels. If the designer wanted to fill the full width of the screen, the value of 770px would need to be changed to 100%. If, however, the designer wanted to simply justify the design to the left, the value of the text-align property in the a5-body-center rule would need to be changed from center to left. The margin-left and margin- right properties in the a5-body rule ensure that the extra white space is split evenly on both sides. While this system tends to be more complex, it allows the designer flexibility when more than one site is going to be built. By adding this code to every design, it does not take much work to quickly modify a design to fit a client’s needs.
Both the a5-body-center and a5-body rules have their borders turned on using the following code: border:1px solid #000000;. For demonstration purposes, the code was added to both rules to show what the structure of the <DIV> tags looks like without content added. Turning on the borders helps a designer when building a site because it is not always apparent where elements are placed or expanding. Rather than removing these rules, it is easier to change the value of 1px to 0px, turning the borders off instead. Troubleshooting often involves turning the borders back on, so it saves time and takes up very little download size to keep them in the style sheet.
Because the <div id=“a5-body”> is nested inside the <div id=“a5-body-center”> tag, it is indented. This allows for quicker recognition of tags that are nested inside each other, which becomes a useful technique when the page has more code added to it.
Adding the Header Row
Once the XHTML and basic CSS framework have been added, the header area is then added into the code. Listing 11.2 is the code that is used to create the updated page in Figure 11.6.
Figure 11.6
The header row that is added to the design.
© 2014 Cengage Learning.
The newly added code is bolded to differentiate it from the existing code that is being built upon in this case study.
Listing 11.2 Code for Figure 11.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en"><head><title>Design 123</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">
/* ++++++++++ global general styles start ++++++++++*/
html, body {
margin:0px;
padding:0px;
font: 13px Arial, Helvetica, sans-serif;
color:#000000;
background:#ffffff;
}
a:link { color:#FF7800; }
a:visited { color:#FF5A00; }
a:active { color:#FFC600; }
a:hover { color:#000000; }
a.linklist1:link { text-decoration:none;color:#0EC0FF;}
a.linklist1:visited { text-decoration:none;color:#0EC0FF;}
a.linklist1:active { text-decoration:none;color:#0EC0FF;}
a.linklist1:hover { text-decoration:none;color:#D5EE03;}
/* ++++++++++ global general styles end ++++++++++*/
/* ++++++++++ global structure styles start ++++++++++*/
#a5-body-center {
text-align:left;
}
#a5-body {
position: relative;
width: 770px; /* change this to a specific amount for a fixed
design or a relative amount if the design should expand to
a percentage of the screen. E.g., 770px or 100%, respectively. */
/* remove these comment tags if the page is to be centered
margin-left: auto;
margin-right: auto;*/
vvtext-align:left;
padding-bottom:10px;
border:0px solid #000000;
}
#a5-header{
position:relative;
left:0px;
top:0px;
height:78px;
background: #000000 url(images/bg-header.gif) repeat-x;
border:0px solid #000000;
}
#a5-login {
position:absolute;
top:24px;
right:186px;
width:165px;
font: 15px Arial, Helvetica, sans-serif;
border:0px solid #ffffff;
}
#a5-call {
position:absolute;
top:8px;
right:0px;
width:177px;
font: 13px Arial, Helvetica, sans-serif;
color:#ffffff;
border:0px solid #000000;
}
/* ++++++++++ global structure styles end ++++++++++*/
</style>
</head>
<body>
<div id="a5-body-center">
<div id="a5-body">
<!-- ###### header start ###### -->
<div id="a5-header">
<div><a href="index.htm"><img src="images/logo.gif"
width="357" height="78" alt="" border="0" /></a></div>
<div id="a5-login">
<span style="float:left;"><a href="x.htm"><img
src="images/reseller-button.gif" width="33"
height="23" alt="" border="0" /></a></span>
<a href="x.htm" class="linklist1"><b>Reseller Login
</b><br />
Forgot Password?</a>
</div>
<div id="a5-call">
<span style="float:left;padding-right:6px;"><a href=
"x.htm"><img src="images/photo-header-right.jpg"
width="58" height="64" alt="" border="0"
/></a></span>
<div style="margin-top:8px;">
<span style="font: 14px Arial, Helvetica, sans-
serif;"><b>Need Help?</b></span><br />
Call us at<br />
1-800-555-5555
</div>
</div>
</div>
<!-- ###### header end ###### -->
</div>
</div>
</body>
</html>
There are several things to note about the code in Listing 11.2:
Both the default link colors and linklist1 link rules are added. While the default colors are added before they will actually be used, the linklist1 style is used for the Reseller Login link.
The a5-header rule and code are added to provide a container for the nested elements. The rule has relative positioning assigned to it, so it expands to the full width of the screen. It is assigned a height of 78 pixels, which is the height of the images in the header. Using the background property, the bg-header.gif is repeated horizontally across the header.
The logo.gif file is included in a <DIV> tag. This ensures that the image will appear at the top-left corner of the header with no additional space around it in some browsers, such as IE 5, 5.5, and 6 (see Figure 11.7).
Figure 11.7
Header after the logo.gif image is added to the left side of the container.
© 2014 Cengage Learning.
The a5-login container is added after the logo. gif image in the header. The rule is given absolute positioning, locating the container 186 pixels from the right. This allows space for the final <DIV> to be added within those 186 pixels between it and the right side (see Figure 11.8).
Figure 11.8
The header after the a5-login container has been added to the right of the logo.gif image.
© 2014 Cengage Learning.
The reseller-button.gif image is floated to the left of the “Reseller Login. Forgot Password?” text. In this instance, the float property is assigned to the image using a <SPAN> tag at the local level in the code. Because the button image does not take up the full height of the header, the container is positioned 24 pixels from the top of the header, using the top property.
The final container in the header is included using the a5-call rule (see Figure 11.9). This rule is assigned absolute positioning, similar to the a5-login container. The former, however, is located 0 pixels from the right, with a width of 177 pixels. This not only guarantees that the <DIV> will abut the right side of the container, but it will also have 9 pixels of padding between it and the a5- login container because the a5-login <DIV> is located 186 pixels from the right (186 - 177 = 9 pixels).
Figure 11.9
After the final container a5-call is added, the header has all the elements added to it.
© 2014 Cengage Learning.
The layout of this content is a bit more involved than the previous containers in the a5-header row. It has two nested elements: the photo-header-right.jpg (which is floated to the left of the text, including 6 pixels of padding to the right) and a <DIV> that contains the text (which also has a <SPAN> tag styling the “Need Help” text). Barring the default font color and size, the majority of styling is completed at the local level.
Creating the Left Column
After the a5-header container has been added, the left column needs to be added. This column includes a search form, a content area, and the image used as a banner ad. Figure 11.10 shows what the design looks like after the code in Listing 11.3 has been added.
Figure 11.10
The design after the left column has been added under the header row.
© 2014 Cengage Learning.
The newly added code is bolded to differentiate it from the existing code that is being built upon in this case study.
Listing 11.3 Code for Figure 11.10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en"><head><title>Design 123</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">
/* ++++++++++ global general styles start ++++++++++*/
html, body {
margin:0px;
padding:0px;
font: 13px Arial, Helvetica, sans-serif;
color:#000000;
background:#ffffff;
}
a:link { color:#FF7800; }
a:visited { color:#FF5A00; }
a:active { color:#FFC600; }
a:hover { color:#000000; }
a.linklist1:link { text-decoration:none;color:#0EC0FF;}
a.linklist1:visited { text-decoration:none;color:#0EC0FF;}
a.linklist1:active { text-decoration:none;color:#0EC0FF;}
a.linklist1:hover { text-decoration:none;color:#D5EE03;}
.color-1-text-13 { font-family: arial, geneva, sans-serif; font-size:
13px; color: #FFAE00;}
.color-1-text-14 { font-family: arial, geneva, sans-serif; font-size:
14px; color: #FFAE00;}
.color-2-text-14 { font-family: arial, geneva, sans-serif; font-size:
14px; color: #000000;}
/* ++++++++++ global general styles end ++++++++++*/
/* ++++++++++ global structure styles start ++++++++++*/
#a5-body-center {
text-align:left;
}
#a5-body {
position: relative;
width: 770px; /* change this to a specific amount for a fixed
design or a relative amount if the design should expand to
a percentage of the screen. E.g., 770px or 100%, respectively. */
/* remove these comment tags if the page is to be centered
margin-left: auto;
margin-right: auto;*/
text-align:left;
padding-bottom:10px;
border:0px solid #000000;
}
#a5-header {
position:relative;
left:0px;
top:0px;
height:78px;
background: #000000 url(images/bg-header.gif) repeat-x;
border:0px solid #000000;
}
#a5-login {
position:absolute;
top:24px;
right:186px;
width:165px;
font: 15px Arial, Helvetica, sans-serif;
border:0px solid #ffffff;
}
#a5-call {
position:absolute;
top:8px;
right:0px;
width:177px;
font: 13px Arial, Helvetica, sans-serif;
color:#ffffff;
border:0px solid #000000;
}
#a5-column-left {
position:absolute;
left:0px;
top:78px;
width:207px;
color:#ffffff;
padding:0px 12px 50px 15px;
background: #000000 url(images/bg-left-column.jpg) no-repeat;
border:0px solid yellow;
voice-family:""}"";
voice-family:inherit;
width:180px;
}
html>body #a5-column-left {
width:180px;
}
#date {
position:relative;
top:16px;
left:0px;
color:#ffffff;
border:0px solid #ffffff;
}
#formsearch {
position:relative;
top:35px;
left:0px;
border:0px solid yellow;
}
#a5-column-left-content {
position:relative;
left:0px;
top:35px;
color:#ffffff;
border:0px solid #ffffff;
}
#a5-copyright {
position:relative;
left:0px;
top:10px;
bottom:5px;
font: 10px Arial, Helvetica, sans-serif;
color:#9D9D9D;
text-align:left;
border:0px solid #000000;
}
/* ++++++++++ global structure styles end ++++++++++*/
</style>
</head>
<body>
<div id="a5-body-center">
<div id="a5-body">
<!-- ###### header start ###### -->
<div id="a5-header">
<div><a href="index.htm"><img src="images/logo.gif"
width="357" height="78" alt="" border="0" /></a></div>
<div id="a5-login">
<span style="float:left;"><a href="x.htm"><img src=
"images/reseller-button.gif" width="33"
height="23" alt="" border="0" /></a></span>
<a href="x.htm" class="linklist1"><b>Reseller Login
</b><br />
Forgot Password?</a>
</div>
<div id="a5-call">
<span style="float:left;padding-right:6px;"><a href=
"x.htm"><img src="images/photo-header-right.jpg"
width="58" height="64" alt="" border="0" /></a>
</span>
<div style="margin-top:8px;">
<span style="font: 14px Arial, Helvetica,
sans-serif;"><b>Need Help?</b></span><br />
Call us at<br />
1-800-555-5555
</div>
</div>
</div>
<!-- ###### header end ###### -->
<!-- ###### left column start ###### -->
<div id="a5-column-left">
<div id="date">
January 31, 2006
</div>
<div id="formsearch" class="color-1-text-13">
<form method="post" action="x.htm" name="search"
style="margin-top:0px;">
<b>Keyword Search</b>
<div style="padding:5px 0px 10px 0px;"><input
type="text" size="15" name="keywords"
value="View All Titles" /></div>
<b>Categories</b>
<div style="padding:5px 0px 15px 0px;">
<select name="categories" size="1">
<option value="All">Select Category</
option>
<option value="sample">This is a sample
entry</option>
</select>
</div>
<input type="image" src="images/button-
search.gif" />
</form>
</div>
<div id="a5-column-left-content">
<div style="padding:15px 0px 10px 0px;color:
#ffffff;"><span class="color-1-text-14"><b>
Duis autem vel</b></span> eum iriure dolor in
hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla.
MORE</div>
<div style="padding:10px 0px 10px 0px;color:
#ffffff;"><a href="x.htm"><img src="images/
banner-left-bottom.jpg" width="180"
height="96" alt="" border="0" /></a></div>
<div id="a5-copyright">
© copyright 2006 | your company | all
rights reserved
</div>
</div>
</div>
<!-- ###### left column end ###### -->
</div>
</div>
</body>
</html>
There are several things to note about the code in Listing 11.3:
The a5-column-left container, which contains all the content in the left column, is assigned absolute positioning. It remains on the left side of the design and begins 78 pixels from the top of the page, exactly below the header. It is assigned a width of 207 pixels. Using the padding property, the entire column is given padding on the left and right sides. Because the box model bug used to be prevalent, the Tantek hack was included so that the left and right padding is interpreted properly and similarly by both compliant and noncompliant browsers. Fortunately, for the most part, this is no longer necessary. This is why the width is changed to 180 pixels for compliant browsers, because 17 pixels need to be subtracted from the original specified width.
The date container is the first content added. Although in this design the date is static text, scripts to output the date using JavaScript or a database-driven programming language can be added easily. Two more things to note about this container are that it is assigned relative positioning, which makes it take up the entire width of the column, and it is positioned 16 pixels from the top of the column using the top property.
After the date container has been added, the formsearch <DIV> is added. It contains all the form elements, such as the “Keyword Search” text and input field, “Categories” text and drop-down menu, and the Search button. The positioning of the elements in the form occurs at the local level. One style to note is style=“margin-top:0px;”, which is included in the parent <FORM> tag. This helps override the default margin settings of some browsers so the form is positioned similarly among browsers. The color- 1-text-13 rule is added to style the text in the formsearch <DIV>.
The a5-column-left-content <DIV> is added after the formsearch <DIV>. The first three words are not only styled with the color-1-text-14 rule that was added to the style sheet, but also the container is assigned local padding to the top and bottom.
Adding the Center Column
After the left column is completed, the right column is added to the design, completing it. Figure 11.11 shows what the design looks like after it has been completed (see Listing 11.4).
Figure 11.11
The design after the entire right column has been added.
© 2014 Cengage Learning.
New Code Is in Bold
The newly added code is bolded to differentiate it from the existing code that is being built upon in this case study.
Listing 11.4 Code for Figure 11.11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en"><head><title>Design 123</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">
/* ++++++++++ global general styles start ++++++++++*/
html, body {
margin:0px;
padding:0px;
font: 13px Arial, Helvetica, sans-serif;
color:#000000;
background:#ffffff;
}
a:link { color:#FF7800; }
a:visited { color:#FF5A00; }
a:active { color:#FFC600; }
a:hover { color:#000000; }
a.linklist1:link { text-decoration:none;color:#0EC0FF;}
a.linklist1:visited { text-decoration:none;color:#0EC0FF;}
a.linklist1:active { text-decoration:none;color:#0EC0FF;}
a.linklist1:hover { text-decoration:none;color:#D5EE03;}
.color-1-text-13 { font-family: arial, geneva, sans-serif; font-size:
13px; color: #FFAE00;}
.color-1-text-14 { font-family: arial, geneva, sans-serif; font-size:
14px; color: #FFAE00;}
.color-2-text-14 { font-family: arial, geneva, sans-serif; font-size:
14px; color: #000000;}
/* ++++++++++ global general styles end ++++++++++*/
/* ++++++++++ global structure styles start ++++++++++*/
#a5-body-center {
text-align:left;
}
#a5-body {
position: relative;
width: 770px; /* change this to a specific amount for a fixed
design or a relative amount if the design should expand to
a percentage of the screen. E.g., 770px or 100%, respectively. */
/* remove these comment tags if the page is to be centered
margin-left: auto;
margin-right: auto;*/
text-align:left;
padding-bottom:10px;
border:0px solid #000000;
}
#a5-header {
position:relative;
left:0px;
top:0px;
height:78px;
background: #000000 url(images/bg-header.gif) repeat-x;
border:0px solid #000000;
}
#a5-login {
position:absolute;
top:24px;
right:186px;
width:165px;
font: 15px Arial, Helvetica, sans-serif;
border:0px solid #ffffff;
}
#a5-call {
position:absolute;
top:8px;
right:0px;
width:177px;
font: 13px Arial, Helvetica, sans-serif;
color:#ffffff;
border:0px solid #000000;
}
#a5-column-left {
position:absolute;
left:0px;
top:78px;
width:207px;
color:#ffffff;
padding:0px 12px 50px 15px;
background: #000000 url(images/bg-left-column.jpg) no-repeat;
border:0px solid yellow;
voice-family:""}"";
voice-family:inherit;
width:180px;
}
html>body #a5-column-left {
width:180px;
}
#date {
position:relative;
top:16px;
left:0px;
color:#ffffff;
border:0px solid #ffffff;
}
#formsearch {
position:relative;
top:35px;
left:0px;
border:0px solid yellow;
}
#a5-column-left-content {
position:relative;
left:0px;
top:35px;
color:#ffffff;
border:0px solid #ffffff;
}
#a5-copyright {
position:relative;
left:0px;
top:10px;
bottom:5px;
font: 10px Arial, Helvetica, sans-serif;
color:#9D9D9D;
text-align:left;
border:0px solid #000000;
}
#a5-column-right {
position:relative;
right:0px;
top:0px;
margin-left:207px;
border:0px solid #000000;
}
#a5-menu-box {
position:relative;
top:0px;
left:0px;
height:42px;
width:100%;
color:#ffffff;
line-height:42px;
vertical-align:30%;
background:url(images/bg-menu.gif) repeat-x 0px 0px;
border:0px solid #000000;
}
#a5-menu a {
display:inline;
text-decoration:none;
color:#94CCDE;
font-weight:normal;
}
#a5-menu a:hover {
font-weight:normal;
color:#ffffff;
}
#a5-column-right-left {
position:relative;
left:0px;
top:0px;
padding:10px 10px 10px 10px;
margin-right:177px;
border:0px solid #000000;
}
.a5-products {
height:300px;
border: 0px solid #000000;
}
.a5-individual-product {
float: left;
margin:0px 2px 0px 2px;
border:0px solid #000000;
}
.a5-individual-product p {
border-top:1px solid #BFBFBF;
width:170px;
text-align: center;
}
#a5-column-right-right {
position:absolute;
right:0px;
top:42px;
width:177px;
height:365px;
color:#ffffff;
padding:0px 9px 0px 9px;
background:#215F5F url(images/bg-bottom-line-right-column.gif)
no-repeat left bottom;
border:0px solid red;
voice-family:""}"";
voice-family:inherit;
width:159px;
}
html>body #a5-column-right-right {
width:159px;
}
.a5-title-right {
font-family: arial, geneva, sans-serif;
font-size: 13px;
color: #D5EE03;
line-height:25px;
font-weight:bold;
margin:0px -9px 0px -9px;
padding-left:5px;
margin-bottom:10px;
background:#000000;
border:0px solid #000000;
}
#a5-right-nested-box {
position:relative;
right:0px;
top:23px;
width:159px;
padding:10px 10px 0px 10px;
background:#000000;
color:#ffffff;
border:1px solid #0EC0FF;
voice-family:""}"";
voice-family:inherit;
width:139px;
}
html>body #a5-right-nested-box {
width:139px;
}
/* ++++++++++ global structure styles end ++++++++++*/
</style>
</head>
<body>
<div id="a5-body-center">
<div id="a5-body">
<!-- ###### header start ###### -->
<div id="a5-header">
<div><a href="index.htm"><img src="images/logo.gif" width=
"357" height="78" alt="" border="0" /></a></div>
<div id="a5-login">
<span style="float:left;"><a href="x.htm"><img
src="images/reseller-button.gif" width="33"
height="23" alt="" border="0" /></a></span>
<a href="x.htm" class="linklist1"><b>Reseller Login
</b><br />
Forgot Password?</a>
</div>
<div id="a5-call">
<span style="float:left;padding-right:6px;"><a
href="x.htm"><img src="images/photo-header-
right.jpg" width="58" height="64" alt=""
border="0" /></a></span>
<div style="margin-top:8px;">
<span style="font: 14px Arial, Helvetica,
sans-serif;"><b>Need Help?</b></span><br />
Call us at<br />
1-800-555-5555
</div>
</div>
</div>
<!-- ###### header end ###### -->
<!-- ###### left column start ###### -->
<div id="a5-column-left">
<div id="date">
January 31, 2006
</div>
<div id="formsearch" class="color-1-text-13">
<form method="post" action="x.htm" name="search"
style="margin-top:0px;">
<b>Keyword Search</b>
<div style="padding:5px 0px 10px 0px;"><input
type="text" size="15" name="keywords"
value="View All Titles" /></div>
<b>Categories</b>
<div style="padding:5px 0px 15px 0px;">
<select name="categories" size="1">
<option value="All">Select Category
</option>
<option value="sample">This is a sample
entry</option>
</select>
</div>
<input type="image" src="images/
button-search.gif" />
</form>
</div>
<div id="a5-column-left-content">
<div style="padding:15px 0px 10px 0px;color:
#ffffff;"><span class="color-1-text-14"><b>
Duis autem vel</b></span> eum iriure dolor in
hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla.
MORE</div>
<div style="padding:10px 0px 10px 0px;color:
#ffffff;"><a href="x.htm"><img src="images/
banner-left-bottom.jpg" width="180"
height="96" alt="" border="0" /></a></div>
<div id="a5-copyright">
© copyright 2006 | your company | all
rights reserved
</div>
</div>
</div>
<!-- ###### left column end ###### -->
<!-- ###### right column start ###### -->
<div id="a5-column-right">
<div id="a5-menu-box">
<div id="a5-menu">
<a href="index.htm">menu item 1</a>
.
<a href="menu-item-2.htm">longer menu item 2
</a> .
<a href="menu-item-3.htm">menu item 3</a>
.
<a href="index.htm">menu item 4</a>
.
<a href="index.htm">menu item 5</a>
.
</div>
</div>
<!-- ###### column right left start ###### -->
<div id="a5-column-right-left">
<span class="color-2-text-14" style="padding-
bottom:5px;"><b>View Our Latest Products</b></span>
<br /><br />
<div class="a5-products">
<div class="a5-individual-product">
<a href="x.htm"><img src="images/
product-1.jpg" width="175" height="95"
alt="" border="0" /></a><br />
<p><a href="x.htm">Product 1 title</a></p>
</div>
<div class="a5-individual-product">
<a href="x.htm"><img src="images/
product-2.jpg" width="175" height="95"
alt="" border="0" /></a><br />
<p><a href="x.htm">Product 2 title</a></p>
</div>
<div class="a5-individual-product">
<a href="x.htm"><img src="images/
product-3.jpg" width="175" height="95"
alt="" border="0" /></a><br />
<p><a href="x.htm">Product 3 title</a></p>
</div>
<div class="a5-individual-product">
<a href="x.htm"><img src="images/
product-4.jpg" width="175" height="95"
alt="" border="0" /></a><br />
<p><a href="x.htm">Product 4 title</a></p>
</div>
</div>
<br />
<div class="color-2-text-14"><b>Learn About Our
Technical Classes</b></div>
Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla ... <a href=
"x.htm">MORE</a>
</div>
<!-- ###### column right left end ###### -->
<!-- ###### column right right start ###### -->
<div id="a5-column-right-right">
<div class="a5-title-right">
<b>View Our Specials</b>
</div>
<div>Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat.
</div>
<div id="a5-right-nested-box"><span class="color-1-
text-14"><b>Duis autem vel</b></span> eum
iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu
feugiat nulla.
<div style="margin:24px 0px 20px 0px;"><img
src="images/banner-right-middle.jpg"
width="136" height="73" alt="" border="0"
/></div>
</div>
</div>
<!-- ###### column right right end ###### -->
</div>
<!-- ###### right column end ###### -->
</div>
</div>
</body>
</html>
There are several things to note about the code in Listing 11.4:
All the content in the right column, including the menu, the center column (which includes the products), and the right column, are nested inside the a5-column-right container. It is assigned relative positioning, with a margin-left value of 207 pixels. This guarantees that the container will be positioned 207 pixels from the left, which is the width of the left column.
To ensure that the menu occurs consistently on every page, including the different second-level pages, the a5-menu-box container is added with relative positioning above the rest of the content in the <DIV>. Figure 11.12 shows what the design looks like with just the menu added.
Figure 11.12
The menu is the first element to be added to the right column.
© 2014 Cengage Learning.
The content in the right column is nested inside the a5-column-right container. Because it is assigned absolute positioning, it is placed 42 pixels from the top of the container. These 42 pixels force the column down past the menu area. Otherwise, the column would begin in the area where the menu runs (see Figure 11.13).
Figure 11.13
An image of how the right column would look if it were not positioned 42 pixels from the top.
© 2014 Cengage Learning.
Because the container is assigned absolute positioning, it is given a height value of 365 pixels to ensure that the nested content inside it does not run below the container. The <DIV> is assigned the bg-bottom-line-right-column.gif background image, which is the black line at the bottom of the column. No matter what the height of the column is, the background image will automatically place itself at the bottom because of the bottom value included in the shorthand background property.
The a5-title-right <DIV>, which is the first item nested in the right column, is placed at the top of the column. One of the most useful properties assigned to the rule is margin- bottom, which has a value of 10 pixels. This creates some visual space between the title area and the text below it.
The a5-right-nested-box rule is added to create the nested <DIV> in the column, which contains the text and image. Because padding is added to the container, the width of the <DIV> needs to be adjusted for various browsers using the Tantek hack. The image is positioned using a local style that is included in the <DIV> tags wrapped around it.
One thing to consider about such a menu is it is limited in the amount of items that can be added because of limited horizontal space. This is where drop-down CSS, JavaScript, or Flash menus can become useful because more menu items can be added when the user mouses over a menu item. The menu in this instance works fine because the site is created to be driven by the search form on the left, which can be used to navigate hundreds or thousands of pages. The menu itself is designed more for general sections, such as About, Customer Service, and Specials.
While the menu code looks the same as that in the designs in Chapters 9 and 10, it is styled slightly differently. The display property in the a5-menu rule in this design is assigned a value of inline instead of block, meaning the items will be output horizontally across a line, as opposed to vertically.
The a5-column-right-left rule is used to output the content in the center column of the design. It is assigned relative positioning, with a margin-right value of 177 pixels, which keeps it from crossing over into the right column. One unique aspect of this container, compared to any others in this design or in Chapters 9 or 10, is that it includes repeated floating <DIV> tags, which contain each product. Normally handled with an XHTML table, these products wrap around to form separate columns and rows. If the width of the design were expanded to fill 1024 × 768 resolution, three products would appear in the first row, as opposed to two in the 800 × 600 version. While they do not have to expand, by doing so, they fill the extra whitespace of the design that would normally exist because only two products are used to fill it. This function is accomplished by adding a container that is assigned the a5-products rule. The one thing to note about this rule is that it is assigned a height of 300 pixels. If this height is not set, the text below the images will randomly reposition itself in different browsers at 1024 × 768 resolution. Because the height value is assigned, the developer cannot output more products than the height will allow, which is four in this example. Each product is positioned and styled inside the a5-products container, using the a5-individual-product and a5-individual-product p rules. Figure 11.14 shows the design with the center column added with the border of the products table turned on to show the space it takes up.
Figure 11.14
The center column added to the design with the border of the products table turned on.
© 2014 Cengage Learning.
Using Comment Tags in an Intuitive Way
Using comment tags to separate code makes finding particular sections much easier. Using an intuitive system is important for designers to understand their code. In this section of code, the “right column” is the parent column, while “column right left” represents the left column of the right section. Visually, though, in the design, this column is the center column. A designer could also name this section the “center column,” or name the “right column” the “parent right column,” signifying that there will be a child right column.
CONSTRUCTING SECOND-LEVEL PAGES
Similar to the designs in Chapters 9 and 10, the homepage is duplicated and modified for second-level templates. This design includes both three- and two-column versions to provide the design layout with more flexibility.
Constructing a Second-Level Page with Three Columns
The first second-level template created is the page that appears when the designer clicks on the menu item titled Longer Menu Item 2. This page contains three columns. Such a design offers the designer the ability to supplement content with a right column that could contain information that could be included on more than one page, such as photos and descriptions. Figure 11.15 shows what the design looks like when the final code is added to the page (see Listing 11.5).
Figure 11.15
A three-column second-level template created from a customized version of the homepage design.
© 2014 Cengage Learning.
New Code Is in Bold
The newly added code is bolded to differentiate it from the existing code that is being built upon in this case study.
Listing 11.5 Code for Figure 11.15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en"><head><title>Design 123</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">
/* ++++++++++ global general styles start ++++++++++*/
html, body {
margin:0px;
padding:0px;
font: 13px Arial, Helvetica, sans-serif;
color:#000000;
background:#ffffff;
}
a:link { color:#FF7800; }
a:visited { color:#FF5A00; }
a:active { color:#FFC600; }
a:hover { color:#000000; }
a.linklist1:link { text-decoration:none;color:#0EC0FF;}
a.linklist1:visited { text-decoration:none;color:#0EC0FF;}
a.linklist1:active { text-decoration:none;color:#0EC0FF;}
a.linklist1:hover { text-decoration:none;color:#D5EE03;}
.color-1-text-13 { font-family: arial, geneva, sans-serif; font-size:
13px; color: #FFAE00;}
.color-1-text-14 { font-family: arial, geneva, sans-serif; font-size:
14px; color: #FFAE00;}
.color-2-text-14 { font-family: arial, geneva, sans-serif; font-size:
14px; color: #000000;}
/* ++++++++++ global general styles end ++++++++++*/
/* ++++++++++ global structure styles start ++++++++++*/
#a5-body-center {
text-align:left;
}
#a5-body {
position: relative;
width: 770px; /* change this to a specific amount for a fixed
design or a relative amount if the design should expand to
a percentage of the screen. E.g., 770px or 100%, respectively. */
/* remove these comment tags if the page is to be centered
margin-left: auto;
margin-right: auto;*/
text-align:left;
padding-bottom:10px;
border:0px solid #000000;
}
#a5-header {
position:relative;
left:0px;
top:0px;
height:78px;
background: #000000 url(images/bg-header.gif) repeat-x;
border:0px solid #000000;
}
#a5-login {
position:absolute;
top:24px;
right:186px;
width:165px;
font: 15px Arial, Helvetica, sans-serif;
border:0px solid #ffffff;
}
#a5-call {
position:absolute;
top:8px;
right:0px;
width:177px;
font: 13px Arial, Helvetica, sans-serif;
color:#ffffff;
border:0px solid #000000;
}
#a5-column-left {
position:absolute;
left:0px;
top:78px;
width:207px;
color:#ffffff;
padding:0px 12px 50px 15px;
background: #000000 url(images/bg-left-column.jpg) no-repeat;
border:0px solid yellow;
voice-family:""}"";
voice-family:inherit;
width:180px;
}
html>body #a5-column-left {
width:180px;
}
#date {
position:relative;
top:16px;
left:0px;
color:#ffffff;
border:0px solid #ffffff;
}
#formsearch {
position:relative;
top:35px;
left:0px;
border:0px solid yellow;
}
#a5-column-left-content {
position:relative;
left:0px;
top:35px;
color:#ffffff;
border:0px solid #ffffff;
}
#a5-copyright {
position:relative;
left:0px;
top:10px;
bottom:5px;
font: 10px Arial, Helvetica, sans-serif;
color:#9D9D9D;
text-align:left;
border:0px solid #000000;
}
#a5-column-right {
position:relative;
right:0px;
top:0px;
margin-left:207px;
border:0px solid #000000;
}
#a5-menu-box {
position:relative;
top:0px;
left:0px;
height:42px;
width:100%;
color:#ffffff;
line-height:42px;
vertical-align:30%;
background:url(images/bg-menu.gif) repeat-x 0px 0px;
border:0px solid #000000;
}
#a5-menu a {
display:inline;
text-decoration:none;
color:#94CCDE;
font-weight:normal;
}
#a5-menu a:hover {
font-weight:normal;
color:#ffffff;
}
#a5-column-right-left {
position:relative;
left:0px;
top:0px;
padding:10px 10px 10px 10px;
margin-right:177px;
border:0px solid #000000;
}
.a5-products {
height:300px;
border: 0px solid #000000;
}
.a5-individual-product {
float: left;
margin:0px 2px 0px 2px;
border:0px solid #000000;
}
.a5-individual-product p {
border-top:1px solid #BFBFBF;
width:170px;
text-align: center;
}
#a5-column-right-right {
position:absolute;
right:0px;
top:42px;
width:177px;
height:365px;
color:#ffffff;
padding:0px 9px 0px 9px;
background:#215F5F url(images/bg-bottom-line-right-column.gif)
no-repeat left bottom;
border:0px solid red;
voice-family:""}"";
voice-family:inherit;
width:159px;
}
html>body #a5-column-right-right {
width:159px;
}
.a5-title-right {
font-family: arial, geneva, sans-serif;
font-size: 13px;
color: #D5EE03;
line-height:25px;
font-weight:bold;
margin:0px -9px 0px -9px;
padding-left:5px;
margin-bottom:10px;
background:#000000;
border:0px solid #000000;
}
#a5-right-nested-box {
position:relative;
right:0px;
top:23px;
width:159px;
padding:10px 10px 0px 10px;
background:#000000;
color:#ffffff;
border:1px solid #0EC0FF;
voice-family:""}"";
voice-family:inherit;
width:139px;
}
html>body #a5-right-nested-box {
width:139px;
}
/* ++++++++++ global structure styles end ++++++++++*/
/* ++++++++++ second level start ++++++++++*/
#a5-column-right-left-sl {
position:relative;
left:0px;
top:0px;
padding:0px 10px 0px 10px;
margin-right:177px;
border:0px solid #000000;
}
#a5-sl-title {
margin:0px -10px 10px -10px;
padding:5px 0px 0px 40px;
height:25px;
color:#000000;
background:#DBDBDB url(images/bg-sl-title.gif) no-repeat left top;
border:0px solid #000000;
font:bold 14px italic Arial, Helvetica, sans-serif;
voice-family:""}"";
voice-family:inherit;
height:20px;
}
html>body #a5-sl-title {
height:20px;
}
#a5-column-left-full {
position:relative;
left:0px;
top:1px;
color:#000000;
padding:0px 10px 0px 10px;
}
/* ++++++++++ second level end ++++++++++*/
</style>
</head>
<body>
<div id="a5-body-center">
<div id="a5-body">
<!-- ###### header start ###### -->
<div id="a5-header">
<div><a href="index.htm"><img src="images/logo.gif"
width="357" height="78" alt="" border="0" /></a></div>
<div id="a5-login">
<span style="float:left;"><a href="x.htm"><img
src="images/reseller-button.gif" width="33"
height="23" alt="" border="0" /></a></span>
<a href="x.htm" class="linklist1"><b>Reseller Login
</b><br />
Forgot Password?</a>
</div>
<div id="a5-call">
<span style="float:left;padding-right:6px;"><a href=
"x.htm"><img src="images/photo-header-right.jpg"
width="58" height="64" alt="" border="0" /></a>
</span>
<div style="margin-top:8px;">
<span style="font: 14px Arial, Helvetica,
sans-serif;"><b>Need Help?</b></span><br />
Call us at<br />
1-800-555-5555
</div>
</div>
</div>
<!-- ###### header end ###### -->
<!-- ###### left column start ###### -->
<div id="a5-column-left">
<div id="date">
January 31, 2006
</div>
<div id="formsearch" class="color-1-text-13">
<form method="post" action="x.htm" name="search"
style="margin-top:0px;">
<b>Keyword Search</b>
<div style="padding:5px 0px 10px 0px;"><input
type="text" size="15" name="keywords"
value="View All Titles" /></div>
<b>Categories</b>
<div style="padding:5px 0px 15px 0px;">
<select name="categories" size="1">
<option value="All">Select Category
</option>
<option value="sample">This is a sample
entry</option>
</select>
</div>
<input type="image" src="images/
button-search.gif" />
</form>
</div>
<div id="a5-column-left-content">
<div style="padding:15px 0px 10px 0px;color:
#ffffff;"><span class="color-1-text-14"><b>
Duis autem vel</b></span> eum iriure dolor in
hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla.
MORE</div>
<div style="padding:10px 0px 10px 0px;color:
#ffffff;"><a href="x.htm"><img src="images/
banner-left-bottom.jpg" width="180"
height="96" alt="" border="0" /></a></div>
<div id="a5-copyright">
© copyright 2006 | your company | all
rights reserved
</div>
</div>
</div>
<!-- ###### left column end ###### -->
<!-- ###### right column start ###### -->
<div id="a5-column-right">
<div id="a5-menu-box">
<div id="a5-menu">
<a href="index.htm">menu item 1</a>
.
<a href="menu-item-2.htm">longer menu item 2
</a> .
<a href="menu-item-3.htm">menu item 3</a>
.
<a href="index.htm">menu item 4</a>
.
<a href="index.htm">menu item 5</a>
.
</div>
</div>
<!-- ###### column right left start ###### -->
<div id="a5-column-right-left-sl">
<div id="a5-sl-title">
longer menu item 2
</div>
Enter text here.
</div>
<!-- ###### column right left end ###### -->
<!-- ###### column right right start ###### -->
<div id="a5-column-right-right">
<div class="a5-title-right">
<b>View Our Specials</b>
</div>
<div>Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat.</div>
<div id="a5-right-nested-box"><span class="color-
1-text-14"><b>Duis autem vel</b></span> eum
iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu
feugiat nulla.
<div style="margin:24px 0px 20px 0px;"><img
src="images/banner-right-middle.jpg"
width="136" height="73" alt="" border="0"
/></div>
</div>
</div>
<!-- ###### column right right end ###### -->
</div>
<!-- ###### right column end ###### -->
</div>
</div>
</body>
</html>
There are several things to note about the code in Listing 11.5:
The second level start and second level end comment tags are added to separate the rules specifically added for the second-level area from the rest of the style sheet. Unlike the design in Chapter 9, the two style sheets are included as one in this chapter, which is more an issue of preference. Sometimes a designer may include everything in one style sheet to keep all the code together or may want to break it up into separate style sheets for more of a distinct separation.
The rules added in the second-level template have –sl appended to their names to signify that they are to be used for secondary pages.
The a5-column-right-left-sl rule is added to the style sheet for the second-level template. It replaces the a5-column-right-left rule, which is the container for the center column on the homepage. The only difference between the two styles is that the content on the second-level page, which is styled by the a5-column-right-left-sl rule, adds 10 pixels of padding to the top and bottom of the container to position itself with the menu and to add extra spacing on the bottom.
The a5-sl-title rule is added to include the page title for secondary pages at the top of the page. This rule sets the height of the <DIV> at 25 pixels, using the height property. Padding also is used to position the title from the top and left sides in the container. To ensure that the color of the bg-title.gif is continued across the screen, the shorthand background property is assigned a background color value of #DBDBDB. Because padding is used to position the text within the container, the Tantek hack is added to ensure that the height of the container is the same for both compliant and noncompliant browsers.
Constructing a Second-Level Page with Two Columns
The full-width second-level template included with this design is the page the designer comes to when clicking on the Menu Item 3 link in the menu. The purpose of this template is to provide a page with more white space for the designer to work with. Figure 11.16 shows what the design looks like when the final code is added to the page and the right column is removed from the design (see Listing 11.6).
Figure 11.16
A two-column second-level template created from a customized version of the homepage design.
© 2014 Cengage Learning.
New Code Is in Bold
The newly added code is bolded to differentiate it from the existing code that is being built upon in this case study.
Listing 11.6 Code for Figure 11.16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en"><head><title>Design 123</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">
/* ++++++++++ global general styles start ++++++++++*/
html, body {
margin:0px;
padding:0px;
font: 13px Arial, Helvetica, sans-serif;
color:#000000;
background:#ffffff;
}
a:link { color:#FF7800; }
a:visited { color:#FF5A00; }
a:active { color:#FFC600; }
a:hover { color:#000000; }
a.linklist1:link { text-decoration:none;color:#0EC0FF;}
a.linklist1:visited { text-decoration:none;color:#0EC0FF;}
a.linklist1:active { text-decoration:none;color:#0EC0FF;}
a.linklist1:hover { text-decoration:none;color:#D5EE03;}
.color-1-text-13 { font-family: arial, geneva, sans-serif; font-size:
13px; color: #FFAE00;}
.color-1-text-14 { font-family: arial, geneva, sans-serif; font-size:
14px; color: #FFAE00;}
.color-2-text-14 { font-family: arial, geneva, sans-serif; font-size:
14px; color: #000000;}
/* ++++++++++ global general styles end ++++++++++*/
/* ++++++++++ global structure styles start ++++++++++*/
#a5-body-center {
text-align:left;
}
#a5-body {
position: relative;
width: 770px; /* change this to a specific amount for a fixed
design or a relative amount if the design should expand to
a percentage of the screen. E.g., 770px or 100%, respectively. */
/* remove these comment tags if the page is to be centered
margin-left: auto;
margin-right: auto;*/
text-align:left;
padding-bottom:10px;
border:0px solid #000000;
}
#a5-header {
position:relative;
left:0px;
top:0px;
height:78px;
background: #000000 url(images/bg-header.gif) repeat-x;
border:0px solid #000000;
}
#a5-login {
position:absolute;
top:24px;
right:186px;
width:165px;
font: 15px Arial, Helvetica, sans-serif;
border:0px solid #ffffff;
}
#a5-call {
position:absolute;
top:8px;
right:0px;
width:177px;
font: 13px Arial, Helvetica, sans-serif;
color:#ffffff;
border:0px solid #000000;
}
#a5-column-left {
position:absolute;
left:0px;
top:78px;
width:207px;
color:#ffffff;
padding:0px 12px 50px 15px;
background: #000000 url(images/bg-left-column.jpg) no-repeat;
border:0px solid yellow;
voice-family:""}"";
voice-family:inherit;
width:180px;
}
html>body #a5-column-left {
width:180px;
}
#date {
position:relative;
top:16px;
left:0px;
color:#ffffff;
border:0px solid #ffffff;
}
#formsearch {
position:relative;
top:35px;
left:0px;
border:0px solid yellow;
}
#a5-column-left-content {
position:relative;
left:0px;
top:35px;
color:#ffffff;
border:0px solid #ffffff;
}
#a5-copyright {
position:relative;
left:0px;
top:10px;
bottom:5px;
font: 10px Arial, Helvetica, sans-serif;
color:#9D9D9D;
text-align:left;
border:0px solid #000000;
}
#a5-column-right {
position:relative;
right:0px;
top:0px;
margin-left:207px;
border:0px solid #000000;
}
#a5-menu-box {
position:relative;
top:0px;
left:0px;
height:42px;
width:100%;
color:#ffffff;
line-height:42px;
vertical-align:30%;
background:url(images/bg-menu.gif) repeat-x 0px 0px;
border:0px solid #000000;
}
#a5-menu a {
display:inline;
text-decoration:none;
color:#94CCDE;
font-weight:normal;
}
#a5-menu a:hover {
font-weight:normal;
color:#ffffff;
}
#a5-column-right-left {
position:relative;
left:0px;
top:0px;
padding:10px 10px 10px 10px;
margin-right:177px;
border:0px solid #000000;
}
.a5-products {
height:300px;
border: 0px solid #000000;
}
.a5-individual-product {
float: left;
margin:0px 2px 0px 2px;
border:0px solid #000000;
}
.a5-individual-product p {
border-top:1px solid #BFBFBF;
width:170px;
text-align: center;
}
#a5-column-right-right {
position:absolute;
right:0px;
top:42px;
width:177px;
height:365px;
color:#ffffff;
padding:0px 9px 0px 9px;
background:#215F5F url(images/bg-bottom-line-right-column.gif)
no-repeat left bottom;
border:0px solid red;
voice-family:""}"";
voice-family:inherit;
width:159px;
}
html>body #a5-column-right-right {
width:159px;
}
.a5-title-right {
font-family: arial, geneva, sans-serif;
font-size: 13px;
color: #D5EE03;
line-height:25px;
font-weight:bold;
margin:0px -9px 0px -9px;
padding-left:5px;
margin-bottom:10px;
background:#000000;
border:0px solid #000000;
}
#a5-right-nested-box {
position:relative;
right:0px;
top:23px;
width:159px;
padding:10px 10px 0px 10px;
background:#000000;
color:#ffffff;
border:1px solid #0EC0FF;
voice-family:""}"";
voice-family:inherit;
width:139px;
}
html>body #a5-right-nested-box {
width:139px;
}
/* ++++++++++ global structure styles end ++++++++++*/
/* ++++++++++ second level start ++++++++++*/
#a5-column-right-left-sl {
position:relative;
left:0px;
top:0px;
padding:0px 10px 0px 10px;
margin-right:177px;
border:0px solid #000000;
}
#a5-sl-title {
margin:0px -10px 10px -10px;
padding:5px 0px 0px 40px;
height:25px;
color:#000000;
background:#DBDBDB url(images/bg-sl-title.gif) no-repeat left top;
border:0px solid #000000;
font:bold 14px italic Arial, Helvetica, sans-serif;
voice-family:""}"";
voice-family:inherit;
height:20px;
}
html>body #a5-sl-title {
height:20px;
}
#a5-column-left-full {
position:relative;
left:0px;
top:1px;
color:#000000;
padding:0px 10px 0px 10px;
}
/* ++++++++++ second level end ++++++++++*/
</style>
</head>
<body>
<div id="a5-body-center">
<div id="a5-body">
<!-- ###### header start ###### -->
<div id="a5-header">
<div><a href="index.htm"><img src="images/logo.gif"
width="357" height="78" alt="" border="0" /></a></div>
<div id="a5-login">
<span style="float:left;"><a href="x.htm"><img src=
"images/reseller-button.gif" width="33"
height="23" alt="" border="0" /></a></span>
<a href="x.htm" class="linklist1"><b>Reseller Login
</b><br />
Forgot Password?</a>
</div>
<div id="a5-call">
<span style="float:left;padding-right:6px;"><a
href="x.htm"><img src="images/photo-header-
right.jpg" width="58" height="64" alt=""
border="0" /></a></span>
<div style="margin-top:8px;">
<span style="font: 14px Arial, Helvetica,
sans-serif;"><b>Need Help?</b></span><br />
Call us at<br />
1-800-555-5555
</div>
</div>
</div>
<!-- ###### header end ###### -->
<!-- ###### left column start ###### -->
<div id="a5-column-left">
<div id="date">
January 31, 2006
</div>
<div id="formsearch" class="color-1-text-13">
<form method="post" action="x.htm" name="search"
style="margin-top:0px;">
<b>Keyword Search</b>
<div style="padding:5px 0px 10px 0px;"><input
type="text" size="15" name="keywords"
value="View All Titles" /></div>
<b>Categories</b>
<div style="padding:5px 0px 15px 0px;">
<select name="categories" size="1">
<option value="All">Select Category
</option>
<option value="sample">This is a sample
entry</option>
</select>
</div>
<input type="image" src="images/
button-search.gif" />
</form>
</div>
<div id="a5-column-left-content">
<div style="padding:15px 0px 10px 0px;color:
#ffffff;"><span class="color-1-text-14"><b>
Duis autem vel</b></span> eum iriure dolor in
hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla.
MORE</div>
<div style="padding:10px 0px 10px 0px;color:
#ffffff;"><a href="x.htm"><img src="images/
banner-left-bottom.jpg" width="180"
height="96" alt="" border="0" /></a></div>
<div id="a5-copyright">
© copyright 2006 | your company | all
rights reserved
</div>
</div>
</div>
<!-- ###### left column end ###### -->
<!-- ###### right column start ###### -->
<div id="a5-column-right">
<div id="a5-menu-box">
<div id="a5-menu">
<a href="index.htm">menu item 1</a>
.
<a href="menu-item-2.htm">longer menu item 2
</a> .
<a href="menu-item-3.htm">menu item 3</a>
.
<a href="index.htm">menu item 4</a>
.
<a href="index.htm">menu item 5</a>
.
</div>
</div>
<!-- ###### column right left start ###### -->
<div id="a5-column-left-full">
<div id="a5-sl-title">
menu item 3
</div>
Enter text here.
</div>
<!-- ###### column right left end ###### -->
</div>
<!-- ###### right column end ###### -->
</div>
</div>
</body>
</html>
There are two things to note about the code in Listing 11.6:
The right column is removed by eliminating all the code between the column right right start and column right right end comment tags.
Once the right column is removed, the center column can expand to the full width of the screen. Before it can do this, though, the a5-column-rightleft-sl container needs to be duplicated and named a5-column-left-full. The style then needs to be changed by removing the margin-right property so the new container can expand all the way to the right edge of the screen. The left and right padding properties and values need to remain in the rule so the text in the container does not touch the left and right edges.
SUMMARY
Overall, the structure and CSS used in this design is a hybrid of the designs explained in Chapters 9 and 10. Several characteristics make it unique, though. Because it contains considerably more content, this design requires more rules to be created. Another difference is the homepage outputs products, which use a wrapping <DIV> technique that can be used in various sites and circumstances to output content in a similar “portfolio” manner. The final major difference of this design from the other chapters is that the menu is given a limited amount of space and is aligned horizontally rather than vertically. Therefore, the design relies on the search form in the left column to drive the majority of content. While not all sites will look and function similarly to the one in this chapter, elements of it can always be copied and modified to work in another design.