Anderssen Jones by PVII: CSS Guide: Interior Pages

Anderssen Jones by PVII 1
Anderssen Jones by PVII: CSS Guide

This Guide provides a rule-by-rule discussion covering the 6 page layouts included with
the Anderssen Jones Page Pack Plus!™ product. There is also a bonus section that
discusses several key style rules in your PMM menu style sheet.
Interior Pages
The interior page style sheets are found in the ajones_styles folder. The style sheets are written once you
use the PagePack interface to create a page. If you have not yet created a page, the style sheets will not be
there.
• CSS-P 2-column [aj_2colcssp.css]

• CSS-P 3-column [aj_3colcssp.css]
• CSS Table 2-column [aj_2coltable.css]
• CSS Table 3-column [aj_3coltable.css]
Portal Pages
The portal page style sheets are found in the ajones_styles folder – once you’ve created the relative
PagePack page.
• CSS-Positioned [aj_introcssp.css]
• CSS Table-based [aj_introtable.css]
Menu Styles:
The menu style sheet is found in the p7pm folder – once you’ve created a PagePack page with either the
Pop Menu Magic or Single Level CSS Buttons options.
• Vertical PMM Menu [p7pmv16.css]
(c) Copyright 2005 Project Seven Development. All Rights Reserved 1 of 52

CSS-P 2-column interior page

aj_2colcssp.css
body {
background-color: #C8C7B5;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 0 0 24px 0;
padding: 0;
}
Background color for the page is set to light brown (which only appears from the footer
down). Base text color, font-family, and font size are set. Page margins are set using
CSS shorthand values. The four margin values start with the top, then run clockwise to
right, bottom, and left. Padding is set to zero.
#pagewrapper {
background-color: #FFFFFF;
}
The pagewrapper rule describes a DIV that wraps the entire page - except for the footer.
Its white background color allows the content portion of the layout to be white, while the
footer, and any remaining space below the footer, displays in the light brown background
color assigned to the body element.
h1 {
color: #B685B4;
font-size: 0.75em;
font-weight: normal;
margin: 0;
padding-bottom: 3px;
}
The level-1 heading is set to a small font size because of its placement and how it is
used within the scope of the page design. It's accessibility and search engine weighting
is not affected. To Googlebot it is still a perfectly normal and acceptable level-1 heading.

#c1 {
float: left;
width: 180px;
border: 1px solid #666666;
margin: 0 12px 0 0;
background-image: url(../images/aj_pbg.jpg);
background-repeat: repeat-x;
background-position: 0px 200px;
}
The left column of our layout is floated to the left and given a width of 180 pixels. Floated
elements are outside the normal page flow, making it possible to display elements on the
page in an order different from their order in the page source code. The left column (#c1)
actually comes after the right column (#c2) in the page source code - but by floating one
to the left and the other to the right, we can make the browser display the columns in the
order we want them to display. We do this so that people looking at the page in a
browser see the menu on the left, while search engines and assistive readers "see" and
read the main content first. This is not to say that you will be the beneficiary of
miraculous placement on search engines just because your page is structured like this.
But it can't hurt, it might help, and it's a positive by-product of using CSS for positioning
that we might as well take advantage of it.
Now that we understand floating, let's note that we are also assigning a 1px border
around the column, a 12px right margin, and a white background. The margin serves to
create a gap between the right border of the left column and the right column. We also
set a background image. This particular background image is a subtle green gradient
that is color coordinated with the green image that sits at the top of the column. The
background image is tall and skinny, green at the top and fading to white at the bottom.
We set it to repeat along the x-axis, which means that the browser draws it once then
repeats it horizontally across the column. We set its position to 0px 200px. The first
value tells the browser to start drawing at the left edge of the column and the second
value tells the browser to start drawing 200px down from the top. This allows the
background to clear the image at the top of the column and the menu. If you add more
root-level menu items you can increase the background's top position accordingly. And if
the image that you place at the top of the column is red, instead of green, edit the
background image in the included Fireworks document to match.
#c2 {
float: right;
width: 548px;
}
The right column is floated to the right and given a width of 548px and a 1px border.

#layoutwrapper {
width: 744px;
margin: 0 auto;
}
The layoutwrapper is a DIV that contains the two column DIVs and serves to center it in
the window. Centering requires a width that is equal to the sum of the two column
widths. Adding the width of #c1 (180) to that of #c2 (548) equals 728. Modern browsers
add borders and padding to the outside of a box, so we need to add any padding and
borders assigned to the left and right sides of our columns. Each column has a 1px
border on either side, so we need to increase our sub-total by 4px to 732. Left and right
margins need to be added, as well, as they are part of what makes up the horizontal
"space" occupied by our columns. Column 1 (#c1) has a 12px right margin assigned, so
we add 12px to our sub-total, making our total 744.
To center this DIV, we set left and right margin values to "auto". The value pair "0 auto"
is CSS shorthand. The first value represents both top and bottom and the second value
represents the left and right. Using auto margins to center a box is supported in modern
browsers, but not in MSIE5.x for Windows. To center the box in MSIE5.x, we use a
Microsoft Conditional comment. See the Browser Workaround section at the end of
this style sheet guide.
.c1-text {
font-size: .75em;
padding: 12px;
}
This class is assigned to a DIV that is nested inside the left column. We set font-size and
padding. By setting padding on an element nested inside the column box "#c1", the
calculations we used to establish the layoutwrapper width are not affected.
.c1-text p {
margin: 6px 0 8px 0;
}
By appending a "p" to the end of the class, we tell the browser to assign the styles in this
rule only to paragraphs that are inside elements that have the "c1-text" class assigned.
This class assigns a top and bottom margin to these paragraphs.

.c2-text {
font-size: .85em;
padding: 16px 30px;
}
This class is assigned to a DIV that is nested inside the right column. We set font-size
and padding. As with the "c1-text" rule, this technique does not affect the calculations we
used to establish the layoutwrapper width.
.c2-text p {
line-height: 1.5em;
}
We style paragraphs inside the element assigned the "c2-text" class.
.pictureprgh {
margin: 0;
text-align: center;
}
This class is assigned to the paragraph at the top of the first column, which contains an
image. We set margins to zero and use text-alignment to ensure the image is centered.
Since our default image fills the entire width of the column, centering is moot - but if you
insert a narrower image, it will automatically be centered.
Note: This is a good time to mention that since column 1 is set to 180px wide, any image you use should not
exceed that width. Should you need to use a wider image, you will need to make column 1 wider and
recalculate the layoutwrapper width - or you can opt to use one of the table-based layouts included with this
Page Pack.
h2 {
margin: 0;
font-size: 1.4em;
}
We set margin and font-size for all level 2 headings.
h3, h4 {
margin: 24px 0 0 0;
font-size: 1.1em;
}
We set margin and font-size for all level 3 and level 4 headings.

.zeromargin {
margin: 0 !important;
}
This is a utility class that we can assign to any element when we wish to override
existing margin settings to zero. The "!important" notation serves to ensure that this rule
will take precedence in any situation. In the 2-column CSS layout, for example, this class
is assigned to the level 4 heading below the menu in the left column and overrides the
24px top margin it would ordinarily have.
.clearit {
clear: both;
height: 0;
line-height: 0;
font-size: 1px;
}
When the float property is used to position columns, the floated elements are taken out
of the normal page flow. Our floated columns are wrapped inside the pagewrapper DIV,
which serves to provide a white background color for all elements above the footer.
Because the columns are floated, the pagewrapper needs an element placed in the
page flow, below the floated columns, to enable the pagewrapper's background color to
stretch to the full height of the floated columns. To accomplish this task, we use a <br>
tag assigned the "clearit" class and we place the tag just inside the closing DIV tag for
the pagewrapper:
<br class="clearit">
</div>
Setting this element to clear: both ensures that it spans the aggregate width of columns
1 and 2. To ensure that this element does not create unwanted space, we set height and
line-height to zero and font-size to 1px.
Note: There are several ways to accomplish this "clearing" task. We chose this one for its simplicity and
because it is supported by all modern browsers, and also by IE5.x Windows and Mac. If you opt to use
another method please be sure to test it diligently.

#footer {
border-top: 1px solid #666666;
font-size: 0.7em;
color: #FFFFFF;
padding-top: 6px;
margin-top: -1px;
}
The footer DIV is assigned a top border, font-size, color, top padding, and a negative top
margin. The 1px negative top margin serves to draw the top border up so that it
seamlessly overlaps the bottom borders of the left and right columns - eliminating a
double border where they meet.
#footertext {
margin: 0 auto;
width: 744px;
}
Text inside the footer is wrapped inside its own DIV "footertext". This enables us to keep
the window-wide border while centering the inner DIV to align with the two floated
columns. We accomplish the centering by assigning auto left and right margins and a
width equal to the layoutwrapper's.
.c1-text a:link, .c2-text a:link {

color: #A66DA7;
}
.c1-text a:visited, .c2-text a:visited {
color: #BC93BD;
}
.c1-text a:hover, .c1-text a:active, .c1-text a:focus,
.c2-text a:hover, .c2-text a:active, .c2-text a:focus {
color: #77AC7C;
}
We assign link styles for all links inside "c1-text" and ".c2-text" classed elements. That
includes the main content in the right column and the text below the menu in the left
column. Different colors are assigned for the default link state, the visited link state - and
the hover, active, and focus states.
Note: "Active" describes a link while you are in the process of clicking it - when your left mouse button is
depressed. When the mouse button is released, the link reverts back to its default or visited states. The
exception is MSIE Windows, which maintains the active state until you click somewhere else on the page.
"Focus" describes a link that is accessed by using your keyboard (usually the Tab key). The link will remain
in the focus state until you press your Tab key again or click your mouse on another part of the page.

#footer a:link, #footer a:visited {

color: #FFFFFF;
}
#footer a:hover, #footer a:active, #footer a:focus {
color: #333333;
}
We assign link styles for all links inside the "footer" DIV.
#p7PMnav {
font-size: .8em;
border-bottom: 1px solid #FFFFFF;
border-right: 0;
border-left: 0;
width: 100%;
}
This rule sets the font-size for the navigation menu, as well as page layout-specific
border and width values.
#p7PMnav ul {
width: 13em;
}
This rule changes sub-menu widths from the menu style sheet default of 180px to a
proportional 13em, allowing the menu width to expand if users resize browser text size.

MSIE Windows Workarounds

Fixing MSIE5.x
We use a proprietary Microsoft feature called Conditional Comments to target specific

Windows-only browser versions with CSS workarounds. If you look in the head region of
your Anderssen Jones 2-column CSS-P page, you'll find a Conditional Comment block.
Let's examine it and see what it does:

The first line begins the comment and sets the version to be targeted. In this case, the
version targets the IE5 range, which spans IE5.0 through 5.99. Between the opening
and closing comment markers are a style tag pair. Whatever is contained inside the
comments will only be read by MSIE5.x Windows browsers. All other browsers will
ignore the code. The first thing we need to do is to make sure that IE5.x centers the
layoutwrapper DIV.
The IE5.x Windows series has a quirk whereby text alignment on an element not only
centers text, but also any boxes that are contained inside it. Setting text-alignment on
the body to "center" centers all text and also centers the layoutwrapper DIV in the
window. We want the box centered, but not the text (or images) inside, so we need to
turn off text centering inside several boxes. This is accomplished by using a multiple
selector: "#masthead, #layoutwrapper, #footertext" to set text-alignment back to the
default "left".
IE5.x also has a different way of sizing boxes. Instead of adding padding and borders to
the outside of the box, it adds those attributes inside the box. Column 1 is set to 180px
but has a left and right border, which is added to the rendered width in modern browsers.
MSIE5.x adds those borders to the outside of column 1, effective making the column 2px
wider. This would not be an issue worth addressing except for the fact that we want the
navigation menu to fit perfectly inside the left column. To make this happen in MSIE5.x
we need to add 2px of width to #c1.
We also need to fix a margin anomaly with the footer. The default #footer rule sets a
negative 1px top margin. IE5.x needs an additional 2px to make this work the way we
need it to.

CSS-P 3-column interior page

aj_3colcssp.css
body {
color: #333333;
font-size: 100%;
margin: 0 0 24px 0;
padding: 0;
}
#pagewrapper {
}
h1 {
color: #B685B4;
font-size: 0.75em;
margin: 0;
}

#c1 {
float: left;
width: 180px;
margin: 0 6px 0 0;
}
The left column of our layout is floated to the left and given a width of 180 pixels. Floated
elements are outside the normal page flow, making it possible to display elements on the
page in an order different from their order in the page source code. The left column (#c1)
actually comes after the right column (#rightbox) in the page source code - but by
floating one to the left and the other to the right, we can make the browser display the
columns in the order we want them to display. We do this so that people looking at the
page in a browser see the menu on the left, while search engines and assistive readers
"see" and read the main content first. This is not to say that you will be the beneficiary of
miraculous placement on search engines just because your page is structured like this.
But it can't hurt, it might help, and it's a positive by-product of using CSS for positioning
that we might as well take advantage of it.
Now that we understand floating, let's note that we are also assigning a 1px border
around the column, a 6px right margin, and a white background. The margin serves to
create a gap between the right border of the left column and the next column to its right.
We also set a background image. This particular background image is a subtle green
gradient that is color coordinated with the green image that sits at the top of the column.
The background image is tall and skinny, green at the top and fading to white at the
bottom. We set it to repeat along the x-axis, which means that the browser draws it once
then repeats it horizontally across the column. We set its position to 0px 200px. The first
background to clear the image at the top of the column and the menu. If you add more
root-level menu items you can increase the background's top position accordingly. And if
the image that you place at the top of the column is red, instead of green, edit the
background image in the included Fireworks document to match.
#c2 {
float: left;
width: 410px;
margin-right: 6px;
}
This is the middle column. It's nested inside a containing element named "#rightbox" and
is floated to the left within its containing element. Width is set to 410px and a 1px border
assigned. A right margin of 6px is set to create a gap between its right border and the
left border of the next column.

#c3 {
float: right;
width: 140px;
background-image: url(../images/aj_pbg2.jpg);
}
This is the right column. It's nested inside "#rightbox" and is floated to the right within its
containing element. Width is set to 140px and a 1px border assigned.
We also set a background image. This particular background image is a lavender
gradient that is color coordinated with the image that sits at the top of the column. The
background image is tall and skinny, lavender at the top and fading to white at the
bottom. We set it to repeat along the x-axis, which means that the browser draws it once
then repeats it horizontally across the column. We set its position to 0px 120px. The first
background to clear the image at the top of the column.
#rightbox {
float: right;
width: 560px;
}
The rightbox is a container for the middle and right columns. It's floated to the right and
given a width of 560px. The width is calculated based on the widths of the middle and
right columns: #c2 and #c3. The middle column width is 410px and the right column
width is 140px. The sum of both columns is 550px. We need to add 4px for the left and
right borders assigned to both the middle and right columns, bringing our total to 554px.
The last value we need to add is the 6px right-margin assigned to the middle column, for
a grand total of 560px.

#layoutwrapper {
width: 748px;
margin: 0 auto;
}
The layoutwrapper is a DIV that contains the two column DIVs and serves to center it in
the window. Centering requires a width that is equal to the sum of the left column and
rightbox widths. Adding the width of #c1 (180) to that of #rightbox (560) equals 740.
Modern browsers add borders and padding to the outside of a box, so we need to add
up any padding and borders assigned to the left and right sides of #c1 and #rightbox.
Column 1 (#c1) has a 1px border on either side, so we need to increase our sub-total by
2px to 742px. Column 1 (#c1) has a right margin which also needs to be added. The #c1
right margin is 6px, which makes our total 748.
.c1-text {
font-size: .75em;
padding: 12px;
}
padding. By setting padding on an element nested inside the column box "#c1", the
.c1-text p {
}
.c2-text {
font-size: 0.8em;
padding: 16px 24px;
}
This class is assigned to a DIV that is nested inside the middle column. We set font-size

.c2-text p {
line-height: 1.5em;
}
.c3-text {
font-size: .7em;
padding: 12px;
}
This class is assigned to a DIV that is nested inside the middle column. We set font-size
.c3-text p {
}
.pictureprgh {
margin: 0;
text-align: center;
}
Page Pack.
h2 {
margin: 0;
font-size: 1.4em;
}
We set margin and font-size for all level 2 headings.

h3, h4 {
margin: 24px 0 0 0;
font-size: 1.1em;
}
.col-topheading {
margin: 16px 12px 0 12px;
}
This class is assigned to the top heading in the third column and overrides the default h4
margin settings.
.zeromargin {
margin: 0 !important;
}
This is a utility class that we can assign to any element when we wish to override
existing margin settings to zero. The "!important" notation serves to ensure that this rule
will take precedence in any situation. In the 2-column CSS layout, for example, this class
is assigned to the level 4 heading below the menu in the left column and overrides the
24px top margin it would ordinarily have.
.clearit {
clear: both;
height: 0;
line-height: 0;
font-size: 1px;
}
the pagewrapper:
</div>

#footer {
font-size: 0.7em;
color: #FFFFFF;
padding-top: 6px;
margin-top: -1px;
}
margin. The 1px negative top margin serves to draw the top border up so that it blends
into the bottom borders of the left and right columns.
#footertext {
margin: 0 auto;
width: 748px;
}
the window-wide border while centering the inner DIV to align with the two floated

color: #A66DA7;
}
color: #BC93BD;
}
color: #77AC7C;
}


color: #FFFFFF;
}
color: #333333;
}
#p7PMnav {
font-size: .8em;
border-right: 0;
border-left: 0;
width: 100%;
}
This rule sets the font-size for the navigation menu, as well as page layout-specific
border and width values..
#p7PMnav ul {
width: 13em;
}
This rule changes sub-menu widths from the menu style sheet default of 180px to a
proportional 13em, allowing the menu width to expand if users resize browser text size.


Fixing MSIE5.x

your Anderssen Jones 3-column CSS-P page, you'll find a Conditional Comment block.
Let's examine it and see what it does:

layoutwrapper DIV.
default "left".
We also need to fix a margin anomaly with the footer. The default #footer rule sets a
negative 1px top margin. IE5.x needs an additional 2px to make this work the way we
need it to.

CSS-Table 2-column interior page

aj_3coltable.css
body {
font-size: 100%;
color: #333333;
margin: 0;
padding: 0;
min-width: 750px;
}
Background color for the page is set to white. Base text color, font-family, and font size
are set. Page margins and padding are set to zero. Min-width is set to 750px, which
causes the browser to spawn a horizontal scrollbar when users make their windows
narrower than 750px.
Note: MSIE does not support min-width, but we've created a special CSS expression that emulates it. See
the MSIE Windows Workarounds topic at the end of this section.
#pagewrapper {
margin: 0;
}
The pagewrapper rule describes a DIV that wraps the entire page. It's used as the target
element for a special CSS expression that emulates min-width in MSIE. A margin value
is required for the expression - do not remove it.
h1 {
color: #B685B4;
font-size: 0.75em;
margin: 0 0 3px 1%;
}
#mainTable {
}
The main layout table is assigned a 1px border.

td {
vertical-align: top;
}
All TDs are set to align top and are given a white background color.
#c1 {
width: 180px;
}
The left column is given a width of 180 pixels. We also set a background image. This
particular background image is a subtle green gradient that is color coordinated with the
green image that sits at the top of the column. The background image is tall and skinny,
green at the top and fading to white at the bottom. We set it to repeat along the x-axis,
which means that the browser draws it once then repeats it horizontally across the
column. We set its position to 0px 200px. The first value tells the browser to start
drawing at the left edge of the column and the second value tells the browser to start
drawing 200px down from the top.
.c1-text {
font-size: .75em;
padding: 12px;
}
padding.
.c1-text p {
}

#c2 {
width: auto;
font-size: .9em;
padding: 16px 24px;
}
The right column is the fluid (stretchy) one and contains the page's main content. We set
width to auto, assign a 1px border, set font size, and padding.
#c2 p {
line-height: 1.5em;
}
We style paragraphs inside the #c2 (right column) element.
.pictureprgh {
margin: 0;
text-align: center;
}
h2, h3, h4 {
margin: 0;
line-height: normal;
}
We set margin and line-height for all level 2-4 headings.
h2 {
font-size: 1.35em;
}
We set font-size for all level 2 headings.

h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
#footer {
font-size: 0.75em;
padding: 12px;
color: #FFFFFF;
}
The footer is assigned a border, font-size, padding, color, and a background color.

color: #A66DA7;
}
color: #BC93BD;
}
color: #77AC7C;
}


color: #FFFFFF;
}
color: #333333;
}
We assign link styles for all links inside the "footer".
#p7PMnav {
font-size: .8em;
border-right: 0;
border-left: 0;
width: 100%;
}
This rule sets the font-size for the main menu, and customize border and width
properties specific to this layout.


Fixing MSIE5.x

your Anderssen Jones 2-column CSS-Table page, you'll find a Conditional Comment
block. Let's examine it and see what it does:

target is all versions less than or equal to (lte) IE6. Between the opening and closing
comment markers are a style tag pair. Whatever is contained inside the comments will
only be read by MSIE Windows browsers from version IE5.0 to IE6.99. All other
browsers will ignore the code.
There is a single style rule inside the Conditional Comment. It's a special rule that uses
another proprietary Microsoft feature called "CSS Expressions", which are mini scripts
that act on specific elements. In this case, the script is acting on the pagewrapper DIV
and sets a minimum width of 750px. If you want to change the minimum width, change
both instances of "750" to a new value (both values must be the same).
Note: to display the expression in the above box, we had to insert 2 line breaks as noted by the gray
comments. The expression (everything between the opening and closing curly braces "{ }" must be on a
single line.

CSS-Table 3-column interior page

aj_3coltable.css
body {
font-size: 100%;
color: #333333;
margin: 0;
padding: 0;
min-width: 750px;
}
are set. Page margins and padding are set to zero. Min-width is set to 750px, which
causes the browser to spawn a horizontal scrollbar when users make their windows
narrower than 750px.
Note: MSIE does not support min-width, but we've created a special CSS expression that emulates it. See
the MSIE Windows Workarounds topic at the end of this section.
#pagewrapper {
margin: 0;
}
The pagewrapper rule describes a DIV that wraps the entire page. It's used as the target
element for a special CSS expression that emulates min-width in MSIE. A margin value
is required for the expression - do not remove it.
h1 {
color: #B685B4;
font-size: 0.75em;
margin: 0 0 3px 1%;
}
#mainTable {
}
The main layout table is assigned a 1px border.

td {
}
All TDs are set to align top and are given a white background color.
#c1 {
width: 180px;
}
The left column is given a width of 180 pixels. We also set a background image. This
particular background image is a subtle green gradient that is color coordinated with the
green image that sits at the top of the column. The background image is tall and skinny,
green at the top and fading to white at the bottom. We set it to repeat along the x-axis,
which means that the browser draws it once then repeats it horizontally across the
#c2 {
width: auto;
font-size: .9em;
padding: 16px 24px;
}
The right column is the fluid (stretchy) one and contains the page's main content. We set
width to auto, assign a 1px border, set font size, and padding.

#c3 {
width: 140px;
background-image: url(../images/aj_pbg2.jpg);
}
The right column is given a width of 140 pixels. We also set a background image. This
particular background image is a lavender gradient that is color coordinated with the
image that sits at the top of the column. The background image is tall and skinny,
lavender at the top and fading to white at the bottom. We set it to repeat along the x-
axis, which means that the browser draws it once then repeats it horizontally across the
.c1-text {
font-size: .75em;
padding: 12px;
}
padding.
.c1-text p {
}
#c2 p {
line-height: 1.5em;
}
We style paragraphs inside the #c2 (middle column) element.

.c3-text {
font-size: 0.8em;
padding: 16px 24px;
}
This class is assigned to a DIV that is nested inside the right column. We set font-size
and padding.
.c3-text p {
line-height: 1.5em;
}
.pictureprgh {
margin: 0;
text-align: center;
}
.col-topheading {
margin: 16px 12px 0 12px;
}
This class is assigned to the top heading in the third column and overrides the default h4
margin settings.
h2, h3, h4 {
margin: 0;
line-height: normal;
}
We set margin and line-height for all level 2-4 headings.

h2 {
font-size: 1.35em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
#footer {
font-size: 0.75em;
padding: 12px;
color: #FFFFFF;
}
The footer is assigned a border, font-size, padding, color, and a background color.
.c1-text a:link, .c2-text a:link, .c3-text a:link {

color: #A66DA7;
}
.c1-text a:visited, .c2-text a:visited, .c3-text a:visited {
color: #BC93BD;
}
color: #77AC7C;
}
We assign link styles for all links inside "c1-text", "c2-text", and ".c3-text" classed
elements. Different colors are assigned for the default link state, the visited link state -
and the hover, active, and focus states.


color: #FFFFFF;
}
color: #333333;
}
We assign link styles for all links inside the "footer".
#p7PMnav {
font-size: .8em;
border-right: 0;
border-left: 0;
width: 100%;
}


Fixing MSIE5.x

your Anderssen Jones 2-column CSS-Table page, you'll find a Conditional Comment
block. Let's examine it and see what it does:

target is all versions less than or equal to (lte) IE6. Between the opening and closing
comment markers are a style tag pair. Whatever is contained inside the comments will
only be read by MSIE Windows browsers from version IE5.0 to IE6.99. All other
browsers will ignore the code.
There is a single style rule inside the Conditional Comment. It's a special rule that uses
another proprietary Microsoft feature called "CSS Expressions", which are mini scripts
that act on specific elements. In this case, the script is acting on the pagewrapper DIV
and sets a minimum width of 750px. If you want to change the minimum width, change
both instances of "750" to a new value (both values must be the same).
Note: to display the expression in the above box, we had to insert 2 line breaks as noted by the gray
comments. The expression (everything between the opening and closing curly braces "{ }" must be on a
single line.

CSS-P intro page

aj_introcssp.css
body {
color: #333333;
font-size: 100%;
margin: 0 0 24px 0;
padding: 0;
}
#pagewrapper {
}
h1 {
color: #B685B4;
font-size: 0.75em;
margin: 0;
}
is not affected. To Googlebot, it is still a perfectly normal and acceptable level-1 heading.

#c1, #c2, #c3, #c4 {

float: right;
width: 180px;
margin-right: 6px;
}
Since the 4 columns in our layout share the same values, we use a multiple selector.
The column order in the source code is:
1. #c4
2. #c3
3. #c2
4. #c1 (contains the "Quick Links" menu)
By floating them all to the right, the visual order is reversed. That is, the browser displays
them in the following order, left to right:
1. #c1 (contains the "Quick Links" menu)

2. #c2
3. #c3
4. #c4
We do this so that people looking at the page in a browser see the menu on the left,
while search engines and assistive readers "see" and read the main content first. This is
not to say that you will be the beneficiary of miraculous placement on search engines
just because your page is structured like this. But it can't hurt, it might help, and it's a
positive by-product of using CSS for positioning that we might as well take advantage of
it.
Now that we have the float straightened out, let's discuss the other properties used in
this rule. All 4 columns are set to a width of 180px. We also set a 1px border around
each column, as well as 6px of right margin to provide a gap between each of the
columns.
#c4 {
margin: 0;
}
This is the rightmost column. Since there are no other columns displayed to its right,
there is no need to provide a gap - so we set margin to zero..

#layoutwrapper {
width: 746px;
margin: 0 auto;
}
The layoutwrapper is a DIV that contains the four column DIVs and serves to center
them in the window. Centering requires a width that is equal to the sum of all four
column widths. Each column is set to a width of 180px, a sum that equals 720. Modern
browsers add borders and padding to the outside of a box, so we need to add any
padding and borders assigned to the left and right sides of our columns. Each column
has a 1px border on either side, so we need to increase our sub-total by 8px to 728. Left
and right margins need to be added, as well, as they are part of what makes up the
horizontal "space" occupied by our columns. Three of the columns have right-margin set
to 6px, so we need to add 18px to our sub-total, making the total 746.
.columntext {
font-size: .75em;
padding: 12px;
}
This class is assigned to DIVs that are nested inside the columns. We set font-size and
padding. By setting padding on an element nested inside the column boxes, the
.columntext p {
line-height: 1.4em;
}
rule only to paragraphs that are inside elements that have the "columntext" class
assigned. This class assigns a top and bottom margin to these paragraphs, as well as
line-height.

.pictureprgh {
margin: 0;
text-align: center;
}
This class is assigned to the paragraphs at the top of each column, which contain
images. We set margins to zero and use text-alignment to ensure the image is centered.
Page Pack.
h2 {
margin: 0;
font-size: 1em;
padding: 6px 12px;
}
We set margin and font-size, and padding for all level 2 headings. Padding is set
because the level 2 headings are outside of the columntext DIVs - just above or just
below the images that are at the top of the columns. Since the parent columns (#c1-#c4)
have no padding assigned, the level 2 headings need to be padded in order to align
horizontally with the padded columntext content.
h3, h4 {
margin: 0;
font-size: 1em;
}

.clearit {
clear: both;
height: 0;
line-height: 0;
font-size: 1px;
}
the pagewrapper:
</div>
#footer {
font-size: 0.7em;
color: #FFFFFF;
padding-top: 6px;
margin-top: -1px;
}
margin. The 1px negative top margin serves to draw the top border up so that it
seamlessly overlaps the bottom borders of the left and right columns - eliminating a
double border where they meet.

#footertext {
margin: 0 auto;
width: 746px;
}
the window-wide border while centering the inner DIV to align with the four floated
.columnlinks {
margin: 0 0 20px 0;
padding: 0;
}
The columnlinks class is assigned to ULs in columns c2, c3, and c4. We turn indenting
off by setting left margin and left padding to zero. We set a bottom margin of 20px to
provide separation between each link list and the content below it.
.columnlinks li {
list-style-type: none;
}
We turn off bullets and numbering for the columnlinks lists.
.columnlinks a {
text-decoration: none;
border-bottom: 1px solid #E4E4E4;
color: #637194;
padding: 2px 0;
display: block;
}
.columnlinks a:visited {
color: #637194;
}
.columnlinks a:hover, .columnlinks a:active, .columnlinks a:focus {
color: #FFFFFF;
background-color: #608BD0;
}
We assign link styles for all links inside "columnlinks" classed elements. Different colors
are assigned for the default link state, the visited link state - and the hover, active, and
focus states.

#c2 .columnlinks a:hover, #c2 .columnlinks a:active, #c2 .columnlinks a:focus {

background-color: #C896C7;
}
We change just the hover, active, and focus background color for links in #c2 so that
they match the image at the top of the column.

background-color: #9CC0B6;
}

background-color: #8A9ABC;
}

color: #FFFFFF;
}
color: #333333;
}
#p7PMnav {
border-bottom: 1px solid #666666;
border-right: 0;
border-left: 0;
width: 100%;
font-size: .8em;
}
#p7PMnav a, #p7PMnav a:hover, #p7PMnav .p7PMon {

border: 0;
}
This rule turns borders off for all links in the menu.


Fixing MSIE5.x

your Anderssen Jones CSS-P intro page, you'll find 2 Conditional Comment blocks. Let's
examine the first one and see what it does:

layoutwrapper DIV.
default "left". Setting .columnlinks li to display inline fixes an IE5 bug that causes gaps
to appear in lists. We also need to fix a margin anomaly with the footer. The default
#footer rule sets a negative 1px top margin. IE5.x needs an additional 2px to make this
work the way we need it to.

A Fix for MSIE5.x and MSIE6.x

Here is the second Conditional Comment:

Setting the a tag to a height allows both IE5 and IE6 to properly support display: block
on links. That is, it allows the entire link box, padding included, to be clickable. Without
this fix, the link cursor (pointing finger) would only appear when pointing directly to the
text.

CSS-Table intro page

aj_introtable.css
body {
color: #333333;
font-size: 100%;
margin: 0 0 24px 0;
padding: 0;
}
are set. Page margins are set using CSS shorthand values. The four margin values start
with the top, then run clockwise to right, bottom, and left. Padding is set to zero.
h1 {
color: #B685B4;
font-size: 0.75em;
margin: 0 0 3px 0;
}
is not affected. To Googlebot, it is still a perfectly normal and acceptable level-1 heading.
#mainTable {
}
We assign the main layout table a 1px border.
Note: Width (760), cellspacing (6), and center alignment are set as attributes on the table tag.
#c1, #c2, #c3, #c4 {

width: 180px;
}
A column ID is assigned each of the 4 columns in the top row of the layout table. Each
column is assigned a 1px border, a width of 180px, and vertical alignment is set to top.
The combination of borders around the individual columns, a border around the main
table, and cellspacing set to "6", enables us to achieve a "boxes within a box" double-
border effect.

.columntext {
font-size: .75em;
padding: 12px;
}
This class is assigned to DIVs that are nested inside the columns. We set font-size and
padding. By setting padding on an element nested inside the column boxes, the
.columntext p {
line-height: 1.4em;
}
rule only to paragraphs that are inside elements that have the "columntext" class
assigned. This class assigns a top and bottom margin to these paragraphs, as well as
line-height.
.pictureprgh {
margin: 0;
text-align: center;
}
This class is assigned to the paragraphs at the top of each column, which contain
images. We set margins to zero and use text-alignment to ensure the image is centered.
Page Pack.
h2 {
margin: 0;
font-size: 1em;
padding: 6px 12px;
}
We set margin and font-size, and padding for all level 2 headings. Padding is set
because the level 2 headings are outside of the columntext DIVs - just above or just
below the images that are at the top of the columns. Since the parent columns (#c1-#c4)
have no padding assigned, the level 2 headings need to be padded in order to align
horizontally with the padded columntext content.

h3, h4 {
margin: 0;
font-size: 1em;
}
#footer {
font-size: .7em;
color: #FFFFFF;
padding: 6px;
}
The footer cell is assigned a border, font-size, color, padding, and a light brown
background color.
.columnlinks {
margin: 0 0 20px 0;
padding: 0;
}
The columnlinks class is assigned to ULs in columns c2, c3, and c4. We turn indenting
off by setting left margin and left padding to zero. We set a bottom margin of 20px to
provide separation between each link list and the content below it.
.columnlinks li {
list-style-type: none;
}
We turn off bullets and numbering for the columnlinks lists.

.columnlinks a {
border-bottom: 1px solid #E4E4E4;
color: #637194;
padding: 2px 0;
display: block;
}
.columnlinks a:visited {
color: #637194;
}
.columnlinks a:hover, .columnlinks a:active, .columnlinks a:focus {
color: #FFFFFF;
background-color: #608BD0;
}
We assign link styles for all links inside "columnlinks" classed elements. Different colors
are assigned for the default link state, the visited link state - and the hover, active, and
focus states.

background-color: #C896C7;
}

background-color: #9CC0B6;
}

background-color: #8A9ABC;
}


color: #FFFFFF;
}
color: #333333;
}
#p7PMnav {
border-bottom: 1px solid #666666;
border-right: 0;
border-left: 0;
width: 100%;
font-size: .8em;
}
#p7PMnav a, #p7PMnav a:hover, #p7PMnav .p7PMon {

border: 0;
}
This rule turns borders off for all links in the menu.


Fixing MSIE5.x and MSIE6.x

your Anderssen Jones CSS-P intro page, you'll find 2 Conditional Comment blocks. Let's
examine the first one and see what it does:

version targets IE browsers less than or equal to IE6, which spans IE5.0 through IE6.99.
Between the opening and closing comment markers are a style tag pair. Whatever is
contained inside the comments will only be read by MSIE5.x Windows browsers. All
other browsers will ignore the code.
Setting the a tag to a height allows both IE5 and IE6 to properly support display: block
on links. That is, it allows the entire link box, padding included, to be clickable. Without
this fix, the link cursor (pointing finger) would only appear when pointing directly to the
text.
Setting .columnlinks li to display inline fixes an IE5 bug that causes gaps to appear in
lists.

Customizing the PMM Menu Styles

p7pmv16.css
One of several points that make Pop Menu Magic Dreamweaver’s finest menu-making
tool is that your menu’s style is powered by CSS. This gives you total control over your
menu’s presentation in a central, editable CSS file. While some other menu tools give
you limited styling choices in their user interfaces, the results are, more often or not,
deployed via invalid HTML attributes or inefficient inline styles. Pop Menu Magic is
centered on valid and accessible markup - and efficient CSS.
As you work to customize your Anderssen Jones pages you’ll probably want to change
your menu to match your own colors. The menu ships with a green background for the
root-level links that rolls over to lavender on hover. The sub-menu links have a white
background that rolls over to lavender on hover. There is an on style, which is assigned
to links that trigger sub-menus – while the sub-menu is being shown. There’s also a
current-marked link style, which is assigned to all links related to the current page. This
guide will show you how to edit several key CSS rules inside your p7pmv16.css file.
• #p7PMnav a – The root-level links.

• #p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus – The root-level
hover, active, and focus states.
• #p7PMnav ul a – The sub-menu links.
• #p7PMnav .p7Pmmark – The current-marked links.
• #p7PMnav .p7Pmon – The on link.
Let’s see how easy it is to edit a PMM menu, starting with the default, root-level menu
link rules…

#p7Pmnav a {
display: block;
background-color: #A1C6A5;
border-bottom: 1px solid #A1C6A5;
padding: 3px 10px;
color: #FFFFFF;
line-height:1;
}
This rule styles the menu links. Starting from the root menu level and working down
through the sub-menu levels, all links will inherit these style properties – unless another
more specific rule intercedes and takes precedence. We’ll see how that works later—
but for now, let’s focus in on this rule as if it were relevant only to the root-level menu
links. The properties that we’ll key in on are highlighted in white text over a red (dark)
background.
Note: Display, text-decoration, and line-height properties should not be changed. Padding affects the height
of the link block and the left/right offset of the link text.
The background color and the bottom border are the same color, which means you don’t
see the border. Crazy? We want the border to show when we hover over the link. If we
did not set a border on the default link state, while setting one on the hover state, the link
would appear to bounce when hovered over as the browser draws a 1px border where
there was none before.
Let’s set the root-level links to yellow, and the text to black. The border will be yellow, to
match the background color:
#p7Pmnav a {
display: block;
background-color: #FFCC00;
border-bottom: 1px solid #FFCC00;
padding: 3px 10px;
color: #000000;
line-height:1;
}
We now have a yellow root menu with black text.
Now let’s move to the hover, active, focus rule…

#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {

background-color: #C0A3BF;
border-bottom: 1px solid #C2DAC5;
color: #333333;
letter-spacing: 0.01px;
}
This rule styles the root-level links’ hover, active, and focus states.
Note: The letter-spacing property is used to fix a rendering bug in IE5 (Mac) and should not be changed.
Let’s set the background-color to medium blue, the border to light gray, and the text to
white:
#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {
background-color: #6666CC;
border-bottom: 1px solid #DDDDDD;
color: #FFFFFF;
letter-spacing: 0.01px;
}
Here’s how it looks:
Now let’s change the sub-menu link text color by editing the #p7Pmnav ul a rule…

#p7PMnav ul a {
border: 0;
color: #B28FB0;
}
This rule styles the sub-level links.
white:
#p7PMnav ul a {
border: 0;
color: #333333;
}
The text links in the sub-menu are now dark gray (#333333) instead of lavender
(#B28FB0)
TIP: #p7PMnav is the id given to the first UL in the PMM menu. By appending a ul tag to the selector name,
#p7PMnav ul, we tell the browser to look at ULs inside the first UL – which describes the sub-menu levels.
In the absence of an additional and more specific rule, #p7PMnav ul a describes all sub-menu links – no
matter how deep in the hierarchy they might be. But if we did want to have a specific style for third-level
menus, then that rule would use a selector named: #p7PMnav ul ul a.
Now let’s change the current-marked link…

#p7PMnav .p7PMmark {
Text-transform: uppercase;
Font-weight: bold;
}
This class is assigned programmatically by the PMM scripts to the link that matches the
current page. It also assigns the class to any parent links in the menu – creating a visual
breadcrumb trail as you operate the menu.
The default Anderssen menu transforms the current-marked link text to uppercase (all
capital letters) and bold. Let’s simply delete that property so your current-marked links
are just bold:
#p7PMnav .p7PMmark {
Font-weight: bold;
}
Now let’s edit the on link…

#p7PMnav .p7PMon {
background-color: #C0A3BF;
border-bottom: 1px solid #C2DAC5;
color: #333333;
}
This rule styles the sub-level links.
white to match the hover state:
#p7PMnav .p7PMon {
background-color: #6666CC;
border-bottom: 1px solid #DDDDDD;
color: #FFFFFF;
}
The text links in the sub-menu now roll over to white text on a medium blue background.
For more menu style editing tips and techniques, be sure to visit the online Pop Menu
Magic User Guide’s Styles Section.
For other support issues, please visit the Support Page at Project Seven.

Anderssen Jones by PVII: CSS Guide: Interior Pages

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Anderssen Jones by PVII: CSS Guide: Interior Pages

Încărcat de

Drepturi de autor:

Formate disponibile

Anderssen Jones by PVII 1

Anderssen Jones by PVII: CSS Guide

• CSS-P 2-column [aj_2colcssp.css]

• Vertical PMM Menu [p7pmv16.css]

(c) Copyright 2005 Project Seven Development. All Rights Reserved 1 of 52

CSS-P 2-column interior page

(c) Copyright 2005 Project Seven Development. All Rights Reserved 2 of 52

(c) Copyright 2005 Project Seven Development. All Rights Reserved 3 of 52

(c) Copyright 2005 Project Seven Development. All Rights Reserved 4 of 52

(c) Copyright 2005 Project Seven Development. All Rights Reserved 5 of 52

(c) Copyright 2005 Project Seven Development. All Rights Reserved 6 of 52

.c1-text a:link, .c2-text a:link {

(c) Copyright 2005 Project Seven Development. All Rights Reserved 7 of 52

#footer a:link, #footer a:visited {

(c) Copyright 2005 Project Seven Development. All Rights Reserved 8 of 52

MSIE Windows Workarounds

We use a proprietary Microsoft feature called Conditional Comments to target specific

(c) Copyright 2005 Project Seven Development. All Rights Reserved 9 of 52

CSS-P 3-column interior page

(c) Copyright 2005 Project Seven Development. All Rights Reserved 10 of 52

(c) Copyright 2005 Project Seven Development. All Rights Reserved 11 of 52

(c) Copyright 2005 Project Seven Development. All Rights Reserved 12 of 52

(c) Copyright 2005 Project Seven Development. All Rights Reserved 13 of 52

(c) Copyright 2005 Project Seven Development. All Rights Reserved 14 of 52

(c) Copyright 2005 Project Seven Development. All Rights Reserved 15 of 52

.c1-text a:link, .c2-text a:link {

(c) Copyright 2005 Project Seven Development. All Rights Reserved 16 of 52

#footer a:link, #footer a:visited {

(c) Copyright 2005 Project Seven Development. All Rights Reserved 17 of 52

MSIE Windows Workarounds

We use a proprietary Microsoft feature called Conditional Comments to target specific

(c) Copyright 2005 Project Seven Development. All Rights Reserved 18 of 52

CSS-Table 2-column interior page

(c) Copyright 2005 Project Seven Development. All Rights Reserved 19 of 52

(c) Copyright 2005 Project Seven Development. All Rights Reserved 20 of 52

(c) Copyright 2005 Project Seven Development. All Rights Reserved 21 of 52

.c1-text a:link, .c2-text a:link {

(c) Copyright 2005 Project Seven Development. All Rights Reserved 22 of 52

#footer a:link, #footer a:visited {

(c) Copyright 2005 Project Seven Development. All Rights Reserved 23 of 52

MSIE Windows Workarounds

We use a proprietary Microsoft feature called Conditional Comments to target specific

<!--[if lte IE 6]>

(c) Copyright 2005 Project Seven Development. All Rights Reserved 24 of 52

CSS-Table 3-column interior page

(c) Copyright 2005 Project Seven Development. All Rights Reserved 25 of 52

(c) Copyright 2005 Project Seven Development. All Rights Reserved 26 of 52

(c) Copyright 2005 Project Seven Development. All Rights Reserved 27 of 52

(c) Copyright 2005 Project Seven Development. All Rights Reserved 28 of 52

.c1-text a:link, .c2-text a:link, .c3-text a:link {

(c) Copyright 2005 Project Seven Development. All Rights Reserved 29 of 52

#footer a:link, #footer a:visited {

(c) Copyright 2005 Project Seven Development. All Rights Reserved 30 of 52

MSIE Windows Workarounds

We use a proprietary Microsoft feature called Conditional Comments to target specific

<!--[if lte IE 6]>

(c) Copyright 2005 Project Seven Development. All Rights Reserved 31 of 52

CSS-P intro page

(c) Copyright 2005 Project Seven Development. All Rights Reserved 32 of 52

#c1, #c2, #c3, #c4 {

1. #c1 (contains the "Quick Links" menu)

(c) Copyright 2005 Project Seven Development. All Rights Reserved 33 of 52

(c) Copyright 2005 Project Seven Development. All Rights Reserved 34 of 52