Jazz 05: User Guide

Jazz ‘05 by PVII Page 1 of 102
Jazz ‘05
A Pop Menu Magic CSS PagePack™ by PVII
User Guide
© 2005 Project Seven Development. All Rights Reserved
Page 1 of 102
Contents
Jazz ‘05.................................................................................................................1
User Guide ........................................................................................................1
Contents ........................................................................................................2
Fixed: 2-column – Vertical menu ...................................................................3
Fixed: 2-column – horizontal menu..............................................................16
Fixed: 3-column – Vertical menu .................................................................31
Flex Width: 2-column – Vertical menu .........................................................46
Flex Width: 2-column – Horizontal menu .....................................................58
Flex Width: 3-column – Vertical menu .........................................................72
Pop Menu Magic Jazz Style Sheet – Vertical Menu ....................................87
Pop Menu Magic Jazz Style Sheet – Horizontal Menu ................................91
The Jazz Images .............................................................................................97
Jazz_05.png ................................................................................................97
Jazz_05_2.png ............................................................................................98
Converting the curved boxes to rectangular boxes......................................98
Embedding a curved graphic .......................................................................99
Slices ...........................................................................................................99
Exporting ...................................................................................................100
Fonts used .................................................................................................101
Support..........................................................................................................102
pvii infobase...............................................................................................102
newsgroup discussion forums....................................................................102
Before you Contact us ...............................................................................102
Page 2 of 102
Fixed: 2-column – Vertical menu

jazz_fixed2col_vert.css
body {
background-color: #EEEBBE;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}
We set page background and text colors, font-family and size. Margin and padding are
set to zero all around.
#layoutwrapper {
margin: 0 auto;
width: 760px;
}
The layout wrapper serves as the container for the two main content columns: sidebox
and centerwrapper.
We set width to 760px and then center the layout wrapper by setting its right and left
margins to auto.
Note: To center a box element with CSS, we simply need to assign that element a width and set its right and
left margins to auto. This technique is supported in all modern browsers, but not in IE5.x on Windows. For
those older browsers, we will use a workaround described at the end of this style sheet’s analysis.
Page 3 of 102
#centerwrapper {
background-image: url(images/jazz_left_side.jpg);
background-repeat: repeat-y;
background-position: left top;
float: right;
width: 568px;
}
Centerwrapper is the containing box for the DIVs that comprise the main content area. It
is assigned a background image, positioned at the top left edge, that tiles vertically
(repeat-y) along the left side of the box… creating the border along the left edge of the
center column.
Centerwrapper s floated to the right and given a width of 568px.

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
centerwrapper DIV comes before the sidebox DIV in the page source code - but by
floating centerwrapper to the right, we can make the browser display it to the right of the
sidebox column – which is floated to the left. 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.
Note: Should you want to make this DIV wider, you must also make the layoutwrapper DIV wider by a like
amount.
Page 4 of 102
#masthead {
background-image: url(images/jazz_masthead_bg.jpg);
background-repeat: repeat-x;
}
The masthead sis at the top of the centerwrapper column and is the container for
the logodiv, which is nested inside. The masthead DIV carries a background
image, set to tile from left to right (repeat-x). The background image renders as
the textured green color that ties in with the logo – as it also creates the center
column’s top border.
#logodiv {
background-image: url(images/jazz_logo_bg.jpg);
background-repeat: no-repeat;
background-position: right top;
}
The logodiv contains the embedded Jazz logo, which also serves to create the top left
curve of the center column:
Logodiv is also assigned a non-repeating background image positioned at its top right
edge, which serves to create the curved right corner of the center column:
The embedded logo and logo background image appear side-by-side within the
masthead, creating a contiguous, seamless graphic.
Page 5 of 102
#centerbox {
background-image: url(images/jazz_right_side.jpg);
}
Centerbox comes after masthead, which are both nested inside the centerwrapper DIV.
Centerbox is assigned a background image positioned at the top right edge of the DIV
and set to tile vertically, which creates the right edge of the center column:
#centercontent {
font-size: .8em;
line-height: 1.5em;
background-image: url(images/jazz_greentile.jpg);
margin: 0px 12px;
padding: 12px 20px 20px 20px;
}
Centercontent is nested inside centerbox. This is the DIV that contains the main content.
Font-size and line-height are set. A background image is set, creating a seamless green
texture inside the center column.
The green texture must fit between the left and right side vertical tiles so that the cream-
colored outer edges of those two images are left enough space to be visible. To
accomplish this, we set left and right margin to 12px.
Padding is set to 12px on the top and 20px left, right, and bottom to provide a
comfortable text offset.
#centercontent .topmainHeader {
color: #DAD2AD;
font-size: 1em;
margin: 0 0 6px 0;
}
This custom class is assigned to the level 1 heading <h1> at the top if the centercontent
DIV. We set color to cream tone, font-size to 1em, and bottom margin to 6px. Font size
is set small for a level 1 heading because we want this heading to seem as if it’s a part
of the logo.
Page 6 of 102
#centercontent p, #sidecontent p {
margin: 0 0 12px 0;
}
We set margins for all paragraphs in the centercontent and sidecontent DIVs.
#centercontent h2, #centercontent h3 {

color: #DAD2AD;
font-size: 1.35em;
margin: 24px 0 6px 0;
}
We set color, font-size, and margin for all H2 and H3 elements in the centercontent DIV.
Note: if you use H4 and/or H5 elements append them to the selector name, like this: #centercontent h2,
#centercontent h3, #centercontent h5, #centercontent h5.
#centercontent h3 {
font-size: 1.2em;
}
We set a smaller font-size for the H3.
Note: if you use H4 and/or H5 elements and want them to have unique font-sizes, make separate selectors
for each.
.imageleft {
float: left;
padding: .4em 12px 0px 0px;
}
.imageright {
float: right;
}
These custom classes are assigned to images. It causes them to float either to the left or
to the right and text to wrap around them. We are using the imageleft rule in Jazz for the
“Peggy Lee” image. The padding provides offset between the image and the surrounding
text.
Page 7 of 102
#centerbottom {
background-image: url(images/jazz_bottom.jpg);
}
Centerbottom is nested inside the centerbox DIV, below the centercontent DIV. Its
background image repeats left-to-right to create the bottom edge of the center column:
#centerbottominfo {
background-image: url(images/jazz_bottom_right.jpg);
}
Centerbottominfo is nested inside the centerbottom DIV. Its non-repeating, right-aligned
background image creates curved corner at the bottom right edge of the center column.
An image embedded inside the centerbottominfo DIV creates the curved corner at the
bottom left edge of the center column. This image also carries a message:
Note: You can change the message by editing the included jazz.png file in Fireworks.
Page 8 of 102
#sidebox {
background-image: url(images/jazz_sidetile.jpg);
float: left;
width: 192px;
}
The sidebox DIV defines the left column in the layout. Three additional DIVs are nested
inside: sidebar, menubar, and sidecontent. Sidebox is given a width of 192px and floated
left – so it renders to the left of the centerwrapper DIV.
A vertical-tiling background image is assigned, which creates the background texture
and left and right borders of the sidebox column. The image is designed to fit sidebox’s
full declared width of 192px:
Note: If you change the width of the sidebox DIV, you must also change the width of the jazz_sidetile.jpg
background image.
Box model width calculation
Let’s pause for a moment and discuss how the widths of centerwrapper and sidebox
relate to the layout wrapper.
The layoutwrapper is set to a width of 760px. In order for our layout to work, the
aggregate width of all the elements nested inside layoutwrapper must be equal to (or
less than) 760px. The CSS box model defines the visible width of a box as the sum of its
stated width plus padding and borders. Let’s add up the widths of the elements nested
inside the layout wrapper:
Centerwrapper has a declared width of 568px. Sidebox has a declared width of 192px.
There are neither borders, padding, nor margins assigned. The widths of centerwrapper
plus sidebox equal the declared width of the layout wrapper: 568 + 192 = 760.
Note: should you need to change the width, padding, or borders of the sidebox or centerwrapper DIVs, you’ll
need to adjust the width of the layoutwrapper DIV, as well.
Page 9 of 102
#sidebar {
background-image: url(images/jazz_sidebottom.jpg);
background-position: left bottom;
}
This DIV is nested inside sidebox and serves to carry the bottom curve of the column via
a non-repeating background image positioned at the bottom:
#menubar {
background-image: url(images/jazz_sidetopper.jpg);
font-size: .8em;
padding: 150px 0 0 6px;
}
This element is the wrapper for the main navigation bar. We set the font-size for the
menu. We also set a non-repeating background image that creates the jam session
graphic at the top of the column.
Top padding is set to 150px, the height of the background image, so that the actual
menu is positioned at the bottom of the graphic. Right and bottom padding are set to
zero. Left padding is set to 6px to enable the menu to clear sidebox’s left border
background tile.
Page 10 of 102
#sidecontent {
font-size: 0.7em;
padding: 0 24px 20px 24px;
}
This DIV contains the content area below the main navbar. It’s assigned a relatively
small font-size. Right, bottom, and left adding are set to provide white space within the
box.
#sidecontent p {
margin: 0 0 12px 0;
}
We set margins for all paragraphs inside the sidecontent box.
#sidecontent h4 {
font-size: 1.25em;
}
We set font-size and margins for all H4 elements inside the sidecontent box.
#footer {
clear: both;
font-size: 0.7em;
padding: 12px 0 30px 0;
margin: 0 12px;
}
We clear the floated elements above. We set font-size to a small size. We set padding
top and bottom and margins left and right.
#footer p {
margin: 0 0 4px 0;
}
We set margins for all paragraphs inside the footer DIV.
Page 11 of 102
#centercontent a {
color: #DAD2AD;
}
We set the default color for all links in the centercontent DIV.
#centercontent a:visited {
color: #D2C99B;
}
We set the visited color for all centercontent links.
#centercontent a:hover {
color: #EAE6D0;
}
We set the hover color for all centercontent links.
#centercontent a:active, #centercontent a:focus {

color: #FFFFFF;
text-decoration: none;
background-color: #C8805C;
}
We set the active and focus colors for all links in the centercontent DIV. The active and
focus states occur when a visitor reaches a link using his keyboard instead of his mouse.
By setting white text against a dark background color, we provide extra visual feedback
to help keyboard surfers see which link is selected.
Page 12 of 102
#sidecontent a {
color: #747557;
}
#sidecontent a:visited {
color: #92936C;
}
#sidecontent a:hover {
color: #333333;
}
#sidecontent a:active, #sidecontent a:focus {
color: #F7E577;
background-color: #505050;
}
#footer a {
color: #747557;
}
#footer a:visited {
color: #92936C;
}
#footer a:hover {
color: #333333;
}
#footer a:active, #footer a:focus {
color: #F7E577;
}
We set link styles for sidecontent and footer areas using the same techniques we did for
the centercontent links.
Page 13 of 102
#skiplinks {
font-size: 0.8em;
margin: 0 0 10px 0;
}
The skiplinks DIV houses special links that assist keyboard and blind visitors to skip over
or skip to important parts of the page. The skiplinks box is the first element in the page
markup, coming just after the opening body tag. We set font-size and a bottom margin.
Note: Skip links are not links to other pages – they are links to sections of the current page. We can do this
by assigning the link a hash mark -#- followed by the ID of element we wish to skip to. For example, if we
want to skip to the main navbar, we assign the hyperlink: #p7PMnav. To skip to the sidebar, we assign the
hyperlink: #sidecontent.
#skiplinks a, #skiplinks a:visited, #skiplinks a:hover {

color: #EEEBBE;
cursor: default;
}
This multiple selector styles the default, visited, and hover states for all links inside the
skiplinks DIV. Color is set to match the page background, text decoration (underlining) is
turned off, and the cursor is set to default – to ensure that if a visitor happens to mouse
over the “invisible” links his cursor will not change to a pointer.
Note: We do not want these links apparent unless they are accessed using the keyboard or an assistive
reader.
.p7ie6Fix:active, #skiplinks a:active, #skiplinks a:focus {

color: #F7E577;
}
The active and focus states apply to our skiplinks when they are reached using the
keyboard. We set a light color over a dark background. When a keyboard surfer reaches
one these links, it will light up prominently.
Note: The p7ie6Fix:active selector fixes an IE6 bug that interferes with the active selector working when a
link is accessed with the keyboard tab key. This PVII fix enables IE6 to correctly light up the link.
Page 14 of 102
IE5 and 6 Fixes

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 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
comment targets all versions of IE5 – 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. We do this by setting text to align center for the body element. IE5
will now center everything on the page – not just text, but DIVs as well. So the second
rule sets text to align left inside the layoutwrapper – which remains centered.
The second Conditional Comment targets all IE Windows browsers that qualify as less
than or equal to IE6 – that is, all versions from IE5.0 through 6.99:

This works around a bug in IE that would cause the skiplink to not work properly.
Page 15 of 102
Fixed: 2-column – horizontal menu

jazz_fixed2col_hz.css
body {
color: #333333;
font-size: 100%;
margin: 0;
padding: 0;
}
#layoutwrapper {
margin: 0 auto;
width: 760px;
}
and centerwrapper.
margins to auto.
Page 16 of 102
#centerwrapper {
float: right;
width: 568px;
}
center column.
Centerwrapper s floated to the right and given a width of 568px.

elements on the page in an order different from their order in the page source code. The
centerwrapper DIV comes before the sidebox DIV in the page source code - but by
floating centerwrapper to the right, we can make the browser display it to the right of the
sidebox column – which is floated to the left. 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.
amount.
Page 17 of 102
#masthead {
}
#logodiv {
}
Page 18 of 102
#centerbox {
}
#navwrapper {
margin: 0px 20px;
font-size: .85em;
border-top: 1px solid #000000;
border-right: 1px solid #DAD2AD;
border-bottom: 1px solid #DAD2AD;
border-left: 1px solid #000000;
}
The navwrapper is the outer wrapper for the navbar, which contains the main navigation
bar. We set a green textured background tile to match the one used for the
centercontent DIV. We set left and right margin to line up the navbar vertically with the
center content below it. We set dark borders on the top and left; and lighter borders on
the right and bottom to give the navbar an inset look.
Page 19 of 102
#navbar {
background-image: url(images/jazz_hzmenutile.jpg);
border-right: 1px solid #505050;
border-bottom: 1px solid #505050;
}
This DIV is the container for the main navigation bar. We assign a charcoal gray
background color and a horizontally-tiling background image to create a gentle bevel
look across the top:
We set contrasting borders to that inset the navbar inside the navwrapper, resulting in a
three-dimensional effect.
.clearit {
clear: both;
height: 0;
line-height: 0;
font-size: 1px;
}
Because root level menu items are floated to make them display horizontally, we need to
clear that float in order for the menuwrapper to extend the full height of the actual root
menu items. To do this, we place a BR tag with the clearit class assigned to it, just after
the closing UL tag for our menu and just before the closing DIV tag for menuwrapper:
</ul>
<br class="clearit">
</div>
We set clear to a value of both. Height and line-height are set to zero to ensure that this
special BR has no rendered height that could affect our layout. IE Windows also needs
font-size set to 1px – to keep the BR from expanding.
Page 20 of 102
#centercontent {
font-size: .8em;
line-height: 1.5em;
margin: 0 12px;
}
Centercontent is nested inside centerbox – below the navwrapper. This is the DIV that
contains the main content. Font-size and line-height are set. A background image is set,
creating a seamless green texture inside the center column.
Padding is set to provide a comfortable text offset.
color: #DAD2AD;
font-size: 1.35em;
}
DIV. We set color to cream tone, font-size to 1.35em, top margin to 16px, and bottom
margin to 6px.
Page 21 of 102
margin: 0 0 12px 0;
}

color: #DAD2AD;
font-size: 1.35em;
}
#centercontent h3 {
font-size: 1.2em;
}
for each.
.imageleft {
float: left;
}
.imageright {
float: right;
}
text.
Page 22 of 102
#centerbottom {
}
#centerbottominfo {
}
Page 23 of 102
#sidebox {
float: left;
width: 192px;
}
inside: sidebar, menubar, and sidecontent. Sidebox is given a width of 192px and floated
left – so it renders to the left of the centerwrapper DIV.
background image.
Let’s pause for a moment and discuss how the widths of centerwrapper and sidebox
relate to the layout wrapper.
Centerwrapper has a declared width of 568px. Sidebox has a declared width of 192px.
There are neither borders, padding, nor margins assigned. The widths of centerwrapper
plus sidebox equal the declared width of the layout wrapper: 568 + 192 = 760.
Note: should you need to change the width, padding, or borders of the sidebox or centerwrapper DIVs, you’ll
need to adjust the width of the layoutwrapper DIV, as well.
Page 24 of 102
#sidebar {
}
#sidetop {
background-image: url(images/jazz_sidetopper_hz.jpg);
height: 150px;
}
This element is nested inside sidebar and serves to render the top curve and graphic.
We set a non-repeating background image that creates the jam session graphic at the
top of the column.
Height is set to 150px, the height of the background image, so that the entire
background image is rendered and the content below is positioned at the bottom of the
graphic.
Page 25 of 102
#sidecontent {
font-size: 0.7em;
}
box.
#sidecontent p {
margin: 0 0 12px 0;
}
#sidecontent h4 {
font-size: 1.25em;
}
#footer {
clear: both;
font-size: 0.7em;
margin: 0 12px;
}
#footer p {
margin: 0 0 4px 0;
}
Page 26 of 102
#centercontent a {
color: #DAD2AD;
}
color: #D2C99B;
}
color: #EAE6D0;
}

color: #FFFFFF;
}
Page 27 of 102
#sidecontent a {
color: #747557;
}
color: #92936C;
}
color: #333333;
}
color: #F7E577;
}
#footer a {
color: #747557;
}
#footer a:visited {
color: #92936C;
}
#footer a:hover {
color: #333333;
}
color: #F7E577;
}
Page 28 of 102
#skiplinks {
font-size: 0.8em;
margin: 0 0 10px 0;
}

color: #EEEBBE;
cursor: default;
}
reader.

color: #F7E577;
}
Page 29 of 102
IE5 and 6 Fixes

does:


The first rule works around a bug in IE that would cause the skiplink to not work properly.
The second two rules, are necessary for IE5.x and 6 to render the top-level menu items
in variable widths.
Note: for a complete discussion of variable root menu item widths, see the online PMM User Guide.
Page 30 of 102
Fixed: 3-column – Vertical menu

jazz_fixed3col_vert.css
body {
color: #333333;
font-size: 100%;
margin: 0;
padding: 0;
}
#layoutwrapper {
margin: 0 auto;
width: 760px;
}
and centerwrapper.
margins to auto.
Page 31 of 102
#leftboxwrapper {
float: left;
width: 192px;
}
The leftboxwrapper DIV defines the left column in the layout. Three additional DIVs are
nested inside: leftbox, menubar, and leftcontent. We set a width of 192px and float left –
so it renders to the left of the centerwrapper DIV.
and left and right borders of the column. The image is designed to fit the full declared
width of 192px:
background image.
#leftbox {
}
This DIV is nested inside leftboxwrapper and serves to carry the bottom curve of the
column via a non-repeating background image positioned at the bottom:
Page 32 of 102
#menubar {
font-size: 0.85em;
}
zero. Left padding is set to 6px to enable the menu to clear the left border background
tile.
#leftcontent {
font-size: 0.7em;
}
small font-size. Right, bottom, and left padding are set to provide white space within the
box.
#leftcontent h4, #rightcontent h4 {

font-size: 1.25em;
}
We set font-size and margins for all H4 elements inside the leftcontent and rightcontent
boxes.
Page 33 of 102
#centerwrapper {
float: left;
width: 376px;
}
center column.
Centerwrapper is floated to the left and given a width of 376px.

elements adjacently. By floating leftboxwrapper, centerwrapper, and rightboxwrapper
each to the left, browsers display the three DIVs side-by-side according to their order in
the source code.
amount.
#masthead {
}
Page 34 of 102
#logodiv {
}
Page 35 of 102
#centerbox {
}
#centercontent {
font-size: .8em;
line-height: 1.5em;
margin: 0 12px;
padding: 6px 20px;
}
color: #DAD2AD;
font-size: 1em;
margin: 0 0 6px 0;
}
of the logo.
Page 36 of 102
#centercontent p, #leftcontent p, #rightcontent p {

margin: 0 0 12px 0;
}
We set margins for all paragraphs in the centercontent, leftcontent, and rightcontent
DIVs.

color: #DAD2AD;
font-size: 1.35em;
}
#centercontent h3 {
font-size: 1.2em;
}
for each.
.imageleft {
float: left;
}
.imageright {
float: right;
}
text.
Page 37 of 102
#centerbottom {
}
#centerbottominfo {
}
Page 38 of 102
#rightboxwrapper {
background-image: url(images/jazz_sidetile3.jpg);
float: left;
width: 192px;
}
This DIV defines the rightmost column in the layout. Three additional DIVs are nested
inside: rightbox, rightheader, and rightcontent. Sidebox is given a width of 192px and
floated left.
and left and right borders of the column. The image is designed to fit the DIV’s full
declared width of 192px:
Note: If you change the width of the sidebox DIV, you must also change the width of the jazz_sidetile3.jpg
background image.
Let’s pause for a moment and discuss how the widths of leftboxwrapper, centerwrapper,
and rightboxwrapper relate to the layout wrapper.
Centerwrapper has a declared width of 376px. Leftboxwrapper and rightboxwrapper
each have a declared width of 192px. There are neither borders, padding, nor margins
assigned. The widths of centerwrapper plus the two side boxes equal the declared width
of the layout wrapper: 376 + 192 + 192 = 760.
Note: should you need to change the width, padding, or borders of either leftboxwrapper, rightboxwrapper,
or centerwrapper DIVs, you’ll need to adjust the width of the layoutwrapper DIV, as well.
Page 39 of 102
#rightbox {
background-image: url(images/jazz_sidebottom3.jpg);
}
This DIV is nested inside rightboxwrapper and serves to carry the bottom curve of the
#rightheader {
font-size: .7em;
color: #D7C8CA;
background-image: url(images/jazz_sidetopper3.jpg);
margin: 0;
}
This ID is assigned to a level-2 heading (H2) at the top of the rightbox DIV. We set the
font-size and color. We also set a non-repeating background image that creates the
ragtime graphic at the top of the column.
Top padding is set to 150px, the height of the background image, so that the actual text
heading (H2) is positioned at the bottom of the graphic. Right and left padding are set to
align the heading with the content below. Bottom padding is set to 8px. Margins are set
to zero.
Page 40 of 102
#rightcontent {
font-size: 0.7em;
}
This DIV contains the content area below the ragtime graphic in the right sidebar. It’s
assigned a relatively small font-size. Right, bottom, and left padding are set to provide
white space within the box.
#footer {
clear: both;
font-size: 0.7em;
margin: 0 12px;
}
#footer p {
margin: 0 0 4px 0;
}
Page 41 of 102
#centercontent a, #rightcontent a {
color: #DAD2AD;
}
We set the default color for all links in the centercontent and rightcontent DIVs.
#centercontent a:visited, #rightcontent a:visited {

color: #D2C99B;
}
We set the visited color for all centercontent and rightcontent links.
#centercontent a:hover, #rightcontent a:hover {

color: #EAE6D0;
}
We set the hover color for all centercontent and rightcontent links.
#centercontent a:active, #centercontent a:focus,

#rightcontent a:active, #rightcontent a:focus {
color: #FFFFFF;
}
We set the active and focus colors for all links in the centercontent and rightcontent
DIVs. The active and focus states occur when a visitor reaches a link using his keyboard
instead of his mouse. By setting light text against a dark background color, we provide
extra visual feedback to help keyboard surfers see which link is selected.
Page 42 of 102
#leftcontent a {
color: #747557;
}
#leftcontent a:visited {
color: #92936C;
}
#leftcontent a:hover {
color: #333333;
}
#leftcontent a:active, #sidecontent a:focus {
color: #FFFFFF;
}
#footer a {
color: #747557;
}
#footer a:visited {
color: #92936C;
}
#footer a:hover {
color: #333333;
}
color: #FFFFFF;
}
the centercontent and rightcontent links.
Page 43 of 102
#skiplinks {
font-size: 0.8em;
margin: 0 0 10px 0;
}

color: #EEEBBE;
cursor: default;
}
reader.

color: #F7E577;
}
Page 44 of 102
IE5 and 6 Fixes

does:


This works around a bug in IE that would cause the skiplink to not work properly.
Page 45 of 102
Flex Width: 2-column – Vertical menu

jazz_flex2col_vert.css
body {
color: #333333;
font-size: 100%;
margin: 24px 0 0 0;
padding: 0;
min-width: 770px;
}
We set page background and text colors, font-family and size. Top margin is set to 24px
to facilitate lining the top of the center columns with that of the sidebar, which is
absolutely positioned. Padding are set to zero all around. Min-width is set to 770px,
creating a limit for how narrow the browser window can be made before a horizontal
scrollbar is spawned. This prevents the center column from getting too narrow to read,
and from getting overlapped by the sidebar.
#centerwrapper {
margin: 0 12px 0 206px;
}
center column.
Margins are set to 0 top, 12px right, 0 bottom, and 206px left – creating sufficient space
on the left for the absolutely positioned sidebar. Because no width is assigned, the
center column is flexible, its width determined by the available width of your browser’s
window.
Note: Should you make the sidebox DIV wider or narrower, you need to make a corresponding change to
the left margin of the centerwrapper.
Page 46 of 102
#masthead {
}
#logodiv {
}
Page 47 of 102
#centerbox {
}
#centercontent {
font-size: .8em;
line-height: 1.5em;
margin: 0px 12px;
}
color: #DAD2AD;
font-size: 1em;
margin: 0 0 6px 0;
}
of the logo.
Page 48 of 102
margin: 0 0 12px 0;
}

color: #DAD2AD;
font-size: 1.35em;
}
#centercontent h3 {
font-size: 1.2em;
}
for each.
.imageleft {
float: left;
}
.imageright {
float: right;
}
text.
Page 49 of 102
#centerbottom {
}
#centerbottominfo {
}
Page 50 of 102
#sidebox {
width: 192px;
position: absolute;
top: 24px;
left: 12px;
}
inside: sidebar, menubar, and sidecontent. Sidebox is given a width of 192px and
positioned absolutely – 24px down from the top and 12px in from the left, rendering to
the left of the centerwrapper DIV – in the space created by that DIVs left margin.
Note: If you change the width of the sidebox DIV, you must change the width of the jazz_sidetile.jpg
background image and the left margin assigned to the centerwrapper.
#sidebar {
}
Page 51 of 102
#menubar {
font-size: .8em;
}
zero. Left padding is set to 6px to enable the menu to clear sidebox’s left border
background tile.
Page 52 of 102
#sidecontent {
font-size: 0.7em;
}
box.
#sidecontent p {
margin: 0 0 12px 0;
}
#sidecontent h4 {
font-size: 1.25em;
}
#footer {
font-size: 0.7em;
}
We set font-size to a small size, and padding top and bottom. Margins are set to 0 top,
20px right, 0 bottom, and 232px left (which aligns the footer under the center content
area).
#footer p {
margin: 0 0 4px 0;
}
Page 53 of 102
#centercontent a {
color: #DAD2AD;
}
color: #D2C99B;
}
color: #EAE6D0;
}

color: #FFFFFF;
}
Page 54 of 102
#sidecontent a {
color: #747557;
}
color: #92936C;
}
color: #333333;
}
color: #F7E577;
}
#footer a {
color: #747557;
}
#footer a:visited {
color: #92936C;
}
#footer a:hover {
color: #333333;
}
color: #F7E577;
}
Page 55 of 102
#skiplinks {
font-size: 0.8em;
position: absolute;
top: 0;
left: 0;
}
markup, coming just after the opening body tag. We set font-size, position absolute, and
set top and left positions to 0.

color: #EEEBBE;
cursor: default;
}
reader.

color: #F7E577;
}
Page 56 of 102
IE5 and 6 Fixes

does:

comment targets all versions of IE less than or equal to IE6 – that is, all versions from
IE5.0 through 6.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-6.99
Windows browsers. All other browsers will ignore the code.
The centerwrapper rule contains an expression. IE5-6 do not support the min-width
property so this expression is a simple programmatic solution allowing IE browsers to set
a minimum width for a specific element – beyond which, a horizontal scrollbar will
appear. The element used cannot be the body, so the only flexible element on the page
is the centerwrapper DIV. The actual minimum width can be calculated by adding the
element’s expression setting to any left or right offsets. In this case, you would add
centerwrapper’s left and right margins (206 + 12) and the left offset of the sidebox (12) to
the width declared in the expression.
206 +12 + 12 + 540 = 770.
The second rule in the comment, “div {height: 1%;}” works around a bug in IE that would
cause the skiplink to not work properly.
Page 57 of 102
Flex Width: 2-column – Horizontal menu

jazz_flex2col_hz.css
body {
color: #333333;
font-size: 100%;
margin: 24px 0 0 0;
padding: 0;
min-width: 770px;
}
to facilitate lining the top of the center columns with that of the sidebar, which is
absolutely positioned. Padding are set to zero all around. Min-width is set to 770px,
creating a limit for how narrow the browser window can be made before a horizontal
scrollbar is spawned. This prevents the center column from getting too narrow to read,
and from getting overlapped by the sidebar.
#centerwrapper {
}
center column.
on the left for the absolutely positioned sidebar. Because no width is assigned, the
center column is flexible, its width determined by the available width of your browser’s
window.
Note: Should you make the sidebox DIV wider or narrower, you need to make a corresponding change to
the left margin of the centerwrapper.
Page 58 of 102
#masthead {
}
#logodiv {
}
Page 59 of 102
#centerbox {
}
#navwrapper {
margin: 0px 20px;
font-size: .85em;
border-right: 1px solid #DAD2AD;
border-bottom: 1px solid #DAD2AD;
}
The navwrapper is the outer wrapper for the navbar, which contains the main navigation
bar. We set a green textured background tile to match the one used for the
centercontent DIV. We set left and right margin to line up the navbar vertically with the
center content below it. We set dark borders on the top and left; and lighter borders on
the right and bottom to give the navbar an inset look.
Page 60 of 102
#navbar {
background-image: url(images/jazz_hzmenutile.jpg);
}
This DIV is the container for the main navigation bar. We assign a charcoal gray
background color and a horizontally-tiling background image to create a gentle bevel
look across the top:
We set contrasting borders to that inset the navbar inside the navwrapper, resulting in a
three-dimensional effect.
.clearit {
clear: both;
height: 0;
line-height: 0;
font-size: 1px;
}
Because root level menu items are floated to make them display horizontally, we need to
clear that float in order for the menuwrapper to extend the full height of the actual root
menu items. To do this, we place a BR tag with the clearit class assigned to it, just after
the closing UL tag for our menu and just before the closing DIV tag for menuwrapper:
</ul>
<br class="clearit">
</div>
We set clear to a value of both. Height and line-height are set to zero to ensure that this
special BR has no rendered height that could affect our layout. IE Windows also needs
font-size set to 1px – to keep the BR from expanding.
Page 61 of 102
#centercontent {
font-size: .8em;
line-height: 1.5em;
margin: 0px 12px;
}
color: #DAD2AD;
font-size: 1.35em;
}
DIV. We set color to cream tone, font-size to 1.35em, top margin to 16px, and bottom
margin to 6px.
Page 62 of 102
margin: 0 0 12px 0;
}

color: #DAD2AD;
font-size: 1.35em;
}
#centercontent h3 {
font-size: 1.2em;
}
for each.
.imageleft {
float: left;
}
.imageright {
float: right;
}
text.
Page 63 of 102
#centerbottom {
}
#centerbottominfo {
}
Page 64 of 102
#sidebox {
width: 192px;
position: absolute;
top: 24px;
left: 12px;
}
inside: sidebar, sidetop, and sidecontent. Sidebox is given a width of 192px and
positioned absolutely – 24px down from the top and 12px in from the left, rendering to
the left of the centerwrapper DIV – in the space created by that DIVs left margin.
#sidebar {
}
Page 65 of 102
#sidetop {
background-image: url(images/jazz_sidetopper_hz.jpg);
height: 150px;
}
This element is nested inside sidebar and serves to render the top curve and graphic.
We set a non-repeating background image that creates the jam session graphic at the
top of the column.
Height is set to 150px, the height of the background image, so that the entire
background image is rendered and the content below is positioned at the bottom of the
graphic.
Page 66 of 102
#sidecontent {
font-size: 0.7em;
}
box.
#sidecontent p {
margin: 0 0 12px 0;
}
#sidecontent h4 {
font-size: 1.25em;
}
#footer {
font-size: 0.7em;
}
We set font-size to a small size, and padding top and bottom. Margins are set to 0 top,
20px right, 0 bottom, and 232px left (which aligns the footer under the center content
area).
#footer p {
margin: 0 0 4px 0;
}
Page 67 of 102
#centercontent a {
color: #DAD2AD;
}
color: #D2C99B;
}
color: #EAE6D0;
}

color: #FFFFFF;
}
Page 68 of 102
#sidecontent a {
color: #747557;
}
color: #92936C;
}
color: #333333;
}
color: #F7E577;
}
#footer a {
color: #747557;
}
#footer a:visited {
color: #92936C;
}
#footer a:hover {
color: #333333;
}
color: #F7E577;
}
Page 69 of 102
#skiplinks {
font-size: 0.8em;
position: absolute;
top: 0;
left: 0;
}
markup, coming just after the opening body tag. We set font-size, position absolute, and
set top and left positions to 0.

color: #EEEBBE;
cursor: default;
}
reader.

color: #F7E577;
}
Page 70 of 102
IE5 and 6 Fixes

does:

The centerwrapper rule contains an expression. IE5-6 do not support the min-width
a minimum width for a specific element – beyond which, a horizontal scrollbar will
appear. The element used cannot be the body, so the only flexible element on the page
is the centerwrapper DIV. The actual minimum width can be calculated by adding the
element’s expression setting to any left or right offsets. In this case, you would add
centerwrapper’s left and right margins (206 + 12) and the left offset of the sidebox (12) to
the width declared in the expression.
206 +12 + 12 + 540 = 770.
The last two rules, are necessary for IE5.x and 6 to render the top-level menu items in
variable widths.
Note: for a complete discussion of variable root menu item widths, see the online PMM User Guide.
Page 71 of 102
Flex Width: 3-column – Vertical menu

jazz_flex3col_vert.css
body {
color: #333333;
font-size: 100%;
margin: 24px 0 0 0;
padding: 0;
}
to facilitate lining the top of the center columns with those of the sidebars, which are
absolutely positioned. Padding are set to zero all around.
#layoutwrapper {
position: relative;
margin: 0;
min-width: 770px;
}
The layoutwrapper surrounds every element in the page. We position it relatively, so that
all elements nested inside are directly relative to layoutwrapper, rather than the body.
Min-width is set to 770px, creating a limit for how narrow the browser window can be
made before a horizontal scrollbar is spawned. This prevents the center column from
getting too narrow to read, and from getting overlapped by the sidebar.
Page 72 of 102
#leftboxwrapper {
width: 192px;
position: absolute;
top: 0;
left: 12px;
}
The leftboxwrapper DIV defines the left column in the layout. Three additional DIVs are
nested inside: leftbox, menubar, and leftcontent. This DIV is assigned a width of 192px
and positioned absolutely – zero pixels down from the top of layoutwrapper and 12px in
from the left, rendering to the left of the centerwrapper DIV – in the space created by that
DIVs left margin.
#leftbox {
}
This DIV is nested inside leftboxwrapper and serves to carry the bottom curve of the
Page 73 of 102
#menubar {
font-size: 0.85em;
}
zero. Left padding is set to 6px to enable the menu to clear the left border background
tile.
#leftcontent {
font-size: 0.7em;
}
small font-size. Right, bottom, and left padding are set to provide white space within the
box.
#leftcontent h4, #rightcontent h4 {

font-size: 1.25em;
}
We set font-size and margins for all H4 elements inside the leftcontent and rightcontent
boxes.
Page 74 of 102
#centerwrapper {
}
center column.
on the right and left for the absolutely positioned sidebars. Because no width is
assigned, the center column is flexible, its width determined by the available width of
your browser’s window.
Note: Should you make the sidebox DIVs wider or narrower, you need to make a corresponding change to
the left or right margin of the centerwrapper.
#masthead {
}
Page 75 of 102
#logodiv {
}
#centerbox {
}
Page 76 of 102
#centercontent {
font-size: .8em;
line-height: 1.5em;
margin: 0 12px;
padding: 6px 20px;
}
color: #DAD2AD;
font-size: 1em;
margin: 0 0 6px 0;
}
of the logo.
#centercontent p, #leftcontent p, #rightcontent p {

margin: 0 0 12px 0;
}
We set margins for all paragraphs in the centercontent, leftcontent, and rightcontent
DIVs.
Page 77 of 102

color: #DAD2AD;
font-size: 1.35em;
}
#centercontent h3 {
font-size: 1.2em;
}
for each.
.imageleft {
float: left;
}
.imageright {
float: right;
}
text.
Page 78 of 102
#centerbottom {
}
#centerbottominfo {
}
Page 79 of 102
#rightboxwrapper {
width: 192px;
position: absolute;
top: 0;
right: 12px;
background-image: url(images/jazz_sidetile3.jpg);
}
The rightboxwrapper DIV defines the right column in the layout. Three additional DIVs
are nested inside: rightbox, rightheader, and rightcontent. This DIV is assigned a width
of 192px and positioned absolutely – zero pixels down from the top of layoutwrapper and
12px in from the right, rendering to the right of the centerwrapper DIV – in the space
created by that DIVs right margin.
Note: If you change the width of the rightboxwrapper DIV, you must change the width of the
jazz_sidetile3.jpg background image and the right margin assigned to the centerwrapper.
#rightbox {
background-image: url(images/jazz_sidebottom3.jpg);
}
This DIV is nested inside rightboxwrapper and serves to carry the bottom curve of the
Page 80 of 102
#rightheader {
font-size: .7em;
color: #D7C8CA;
background-image: url(images/jazz_sidetopper3.jpg);
margin: 0;
}
This ID is assigned to a level-2 heading (H2) at the top of the rightbox DIV. We set the
font-size and color. We also set a non-repeating background image that creates the
ragtime graphic at the top of the column.
Top padding is set to 150px, the height of the background image, so that the actual text
heading (H2) is positioned at the bottom of the graphic. Right and left padding are set to
align the heading with the content below. Bottom padding is set to 8px. Margins are set
to zero.
#rightcontent {
font-size: 0.7em;
}
This DIV contains the content area below the ragtime graphic in the right sidebar. It’s
assigned a relatively small font-size. Right, bottom, and left padding are set to provide
white space within the box.
Page 81 of 102
#footer {
font-size: 0.7em;
}
We set font-size to a small size. We set padding top and bottom, and margins left and
right. The left margin serves to align the footer with the center content area.
#footer p {
margin: 0 0 4px 0;
}
Page 82 of 102
#centercontent a, #rightcontent a {
color: #DAD2AD;
}
We set the default color for all links in the centercontent and rightcontent DIVs.
#centercontent a:visited, #rightcontent a:visited {

color: #D2C99B;
}
We set the visited color for all centercontent and rightcontent links.
#centercontent a:hover, #rightcontent a:hover {

color: #EAE6D0;
}
We set the hover color for all centercontent and rightcontent links.
#centercontent a:active, #centercontent a:focus,

#rightcontent a:active, #rightcontent a:focus {
color: #FFFFFF;
}
We set the active and focus colors for all links in the centercontent and rightcontent
DIVs. The active and focus states occur when a visitor reaches a link using his keyboard
instead of his mouse. By setting light text against a dark background color, we provide
extra visual feedback to help keyboard surfers see which link is selected.
Page 83 of 102
#leftcontent a {
color: #747557;
}
#leftcontent a:visited {
color: #92936C;
}
#leftcontent a:hover {
color: #333333;
}
#leftcontent a:active, #sidecontent a:focus {
color: #FFFFFF;
}
#footer a {
color: #747557;
}
#footer a:visited {
color: #92936C;
}
#footer a:hover {
color: #333333;
}
color: #FFFFFF;
}
the centercontent and rightcontent links.
Page 84 of 102
#skiplinks {
font-size: .8em;
position: absolute;
top: 0;
left: 0;
}
markup, coming just after the opening body tag. We set font-size and position the DIV
absolutely – with top and left positions both set to 0.

color: #EEEBBE;
cursor: default;
}
reader.

color: #F7E577;
}
Page 85 of 102
IE5 and 6 Fixes

does:

The layoutwrapper rule contains an expression. IE5-6 do not support the min-width
a minimum width of 770px – beyond which, a horizontal scrollbar will appear.
Page 86 of 102
Pop Menu Magic Jazz Style Sheet – Vertical Menu

p7pmv19.css
#p7PMnav {
margin: 0;
padding:0;
border-top: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
background-image: url(../images/jazz_rootmenutile.jpg);
}
The top-level or “root” menu. Left margin, right margin, left padding, and right padding
must always remain set to zero. We set a background color for the root menu and a
vertical-repeating background image:
#p7PMnav li {
list-style-type: none;
margin: 0;
padding: 0;
}
Menu list items. This rule styles all list items. Margin and padding must remain set to
zero and list-style-type, which turns off bullets, must remain set to none.
#p7PMnav ul {
margin: 0;
padding: 0;
z-index: 10000;
}
This rule styles the sub-menus. Margin and padding are set to zero and should not be
changed. Z-index must remain set to 10000. Background color and border colors can be
changed to suit.
Page 87 of 102
#p7PMnav a {
display: block;
line-height:1;
padding: 4px 10px;
color: #CCCCCC;
margin: 0 1px;
}
This is the top-level (root) menu link style. You should not edit the first three properties.
The top and bottom padding properties can be edited to make the link “box” taller or
shorter. Left and right padding can be carefully adjusted to suit. Color is matched to the
menu style but can be edited. Left and right margins are set to 1px to allow the rollover
link color to fit between the graphical borders created by the background image on the
root menu.
#p7PMnav ul a {
margin: 0 0;
}
We set the margins back to zero for the sub-menus.
#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {

color: #FFFFFF;
letter-spacing: 0.01px;
}
This rule styles the hover, active, and focus link states for the top-level (root) menu
items. The letter-spacing property is used to fix a bug in IE5 Mac and should not be
edited.
#p7PMnav .p7PMmark {
font-weight: bold;
}
This rule styles only the link(s) that correspond to the currently loaded page – a sort of
“you are here” marker.
Page 88 of 102
#p7PMnav .p7PMtrg, #p7PMnav .p7PMon {

background-image: url(../images/jazz_east_arrow.gif);
background-position: right center;
}
This rule styles the trigger links – those links which, when moused over, cause a sub-
menu to drop down or fly out and also the “on” state links – trigger links that are currently
showing their sub-menus. This rule also styles the menu “on” class, which causes a
trigger item to remain “lit up” while its sub-menu is open. The background image
assigned with this rule is a black right-pointing arrow.
#p7PMnav .p7PMon {
color: #CCCCCC;
}
This rule add additional styles to the “on” state.
#p7PMnav .p7PMhide {
left: -9000px;
border: 0;
top: 0;
}
This rule is used by the PMM system to show your sub-menus. Do not edit it in any way.
#p7PMnav .p7PMshow {
left: auto;
top: auto;
z-index: 20000 !important;
}
This rule is used by the PMM system to hide your sub-menus. Do not edit it in any way.
Page 89 of 102
#p7PMnav {
width: 178px;
}
This rule sets the width for your top-level (root) menu and is matched to the background
image assigned to the root menu. If you edit the width, you must edit the image.
#p7PMnav ul {
width: 178px;
}
This rule sets the width for all sub-menus.
#pmmcrumb {
font-weight: bold;
margin-bottom: 16px;
color: #333333;
}
#pmmcrumb a, #pmmcrumb a:visited {
font-weight: normal;
color: #5A69A5;
}
#pmmcrumb a:hover, #pmmcrumb a:active, #pmmcrumb a:focus {
color: #333333;
}
The above 3 rules relate to the optional PMM Breadcrumb Trail add-on. If you do not use
the Breadcrumb Trail, these rules have no affect on your page.
Page 90 of 102
Pop Menu Magic Jazz Style Sheet – Horizontal Menu

p7pmh19.css
#p7PMnav {
margin: 0;
padding:0;
}
The top-level or “root” menu. Left margin, right margin, left padding, and right padding
must always remain set to zero.
#p7PMnav li {
list-style-type: none;
margin: 0;
padding: 0;
background-image: url(../images/jazz_hzmenutile.jpg);
}
Menu list items. This rule styles all list items. Margin and padding must remain set to
zero and list-style-type, which turns off bullets, must remain set to none. We set a
background image to repeat horizontally:
#p7PMnav ul li {
background-image: none;
}
We turn off the background image for the sub-menus.
Page 91 of 102
#p7PMnav ul {
margin: 0;
padding: 0;
position: absolute;
left: -9000px;
z-index: 10000;
border-right: 1px solid #4F4F4F;
border-bottom: 1px solid #4F4F4F;
background-color: #FFFFFF;
border-left: 6px solid #4F4F4F;
background-image: url(../images/jazz_hzsubmenutile.jpg);
}
This rule styles the sub-menus. The first five declarations (margin to z-index) should not
be changed. Background color, image, and border colors can be changed to suit. The
background image creates a bright mustard gradient for the sub-menus:
#p7PMnav ul ul {
border-right: 1px solid #4F4F4F;
border-top: 1px solid #4F4F4F;
border-bottom: 1px solid #4F4F4F;
border-left: 6px solid #4F4F4F;
}
This rule describes the second level sub-menus. We’re setting borders all around.
Page 92 of 102
#p7PMnav a {
display: block;
line-height: 1.0;
padding: 4px 10px;
color: #CFC9B4;
}
This is the top-level (root) menu link style. You should not edit the first three properties.
The top and bottom padding properties can be edited to make the link “box” taller or
shorter. Left and right padding can be carefully adjusted to suit. Color and the right
border are matched to the menu style but can be edited if you like.
#p7PMnav ul a {
padding: 4px 10px;
border: 0;
color: #505050;
}
This rule describes the link items in the sub-menus. We turn off the border. We change
the color value.
#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {

color: #D8D2AE;
letter-spacing: 0.01px;
background-color: #4F4F4F;
border-left-color: #887473;
}
This rule styles the hover, active, and focus link states for the top-level (root) menu
items. The letter-spacing property is used to fix a bug in IE5 Mac and should not be
edited.
Page 93 of 102
#p7PMnav ul a:hover, #p7PMnav ul a:active, #p7PMnav ul a:focus {

color: #C7C3A0;
}
This rule styles the hover, active, and focus link states for the sub-menu items.
#p7PMnav .p7PMmark {
font-weight: bold;
}
This rule styles only the link(s) that correspond to the currently loaded page – a sort of
“you are here” marker.
#p7PMnav .p7PMtrg, #p7PMnav .p7PMon {

background-image: url(../images/jazz_south_arrow.gif);
}
This rule styles the trigger links for root menus – those links which, when moused over,
cause a sub-menu to drop down or fly out and also the “on” state links – trigger links that
are currently showing their sub-menus. The background image assigned with this rule is
a special down-pointing arrow.
#p7PMnav ul .p7PMtrg, #p7PMnav ul .p7PMon {

background-image: url(../images/jazz_south_arrow.gif);
}
This rule styles the trigger and “on” links for sub-menus. The background image
assigned with this rule is a special right-pointing arrow.
Page 94 of 102
#p7PMnav .p7PMon {
color: #B4A994;
}
This rule styles the “on” state. The “on” state is assigned to trigger links while their
related sub-menus are being shown.
#p7PMnav ul .p7PMon {
color: #B4A994;
}
This rule styles the “on” state for the sub-menu items.
#p7PMnav .p7PMhide {
left: -9000px;
top: 0;
}
This rule is used by the PMM system to show your sub-menus. Do not edit it in any way.
#p7PMnav .p7PMshow {
left: auto;
top: auto;
z-index: 20000 !important;
}
This rule is used by the PMM system to hide your sub-menus. Do not edit it in any way.
Page 95 of 102
#p7PMnav li {
float: left;
width: 116px;
}
This rule sets the width for your top-level (root) menu items. Do not change the float
property. Edit the width judiciously as this determines the width of each top-level (root)
menu item.
Note: The Jazz Page Pack pages use the PMM Variable Width Root Menu technique from the online PMM
User Guide and this rule is overwritten in the Page Pack style sheet. Do not edit this rule in the
p7pmh19.css style sheet.
#p7PMnav ul li {
Float: none;
}
We’re turning off the float for sub-menu list items.
#p7PMnav ul, #p7PMnav ul li {

width: 172px;
}
We set the width for the sub-menus.
#pmmcrumb {
font-weight: bold;
margin-bottom: 16px;
color: #333333;
}
#pmmcrumb a, #pmmcrumb a:visited {
color: #5A69A5;
}
#pmmcrumb a:hover, #pmmcrumb a:active, #pmmcrumb a:focus {
color: #333333;
}
The above 3 rules relate to the optional PMM Breadcrumb Trail add-on. If you do not use
the Breadcrumb Trail, these rules have no affect on your page.
Page 96 of 102
The Jazz Images

Jazz images can be edited in Fireworks. When you create a Jazz PagePack page, two
editable Fireworks documents are created – named jazz_05.png and jazz_05_2.png –
and placed in a new folder named Fireworks.
Jazz_05.png
This Fireworks document contains all of the graphics you see when you create a new
Jazz page.
The document contains some important notes, which are repeated here:
Use the Main Layer in the Layers Panel to review all of the graphical elements on this canvas. The main font
used is Poor Richard, which comes with Microsoft Office. If you do not have this font, substitute and font of
your choice or see the "readme_first" file for links to online sources. The graphical elements in this
document are defined as "slices" and it is those slices which become separate web images when you export
this document to your Dreamweaver site’s images folder. If you are not proficient with Fireworks, we
suggest that you do not attempt to resize graphics until you understand how "slices" work. If you are
uncertain how to ungroup the curved graphics from their curved boxes, use the other included Fireworks
document: jazz_05_2.png, which contains clean boxes without the faded curved graphics.
Page 97 of 102
Jazz_05_2.png
This Fireworks document contains the basic Jazz elements but we’ve omitted the curved
graphics that fit into the tops of rounded boxes. We’ve also replaced the Poor
Richard and Silkscreen fonts with Arial.
Converting the curved boxes to rectangular boxes

To eliminate the curved corners of one or more boxes:
1. Select the box
2. Enter 0 (zero) into the Rectangle roundness box on your Property Inspector
Note: If the curved box already has a graphic pasted inside, you will need to ungroup it (remove the
embedded graphic) before you are able to straighten the box’s corners.
Page 98 of 102
Embedding a curved graphic

To embed a graphic into the top of a curved box:
1. Import your graphic
2. Position it over the curved box where you want to embed it
3. Choose Edit – Cut
4. Choose Edit – Paste Inside
That’s it. If you later want to remove the graphic, select it and ungroup it.
The graphic will go to the bottom of the layer, so select the curved box and move it to the
back to reveal the un-embedded graphic.
Slices
Drawing all of the graphics in a single Fireworks document allows us to tie things
together as they will appear on the page. When everything is just so, the document is
sliced into individual parts that define the separate web images (JPGs and GIFs) that
Fireworks will export to the images folder in your Dreamweaver site. To view the
document’s slices, select the Web Layer in the Fireworks Layers panel. You will then
see green overlays marking the boundaries of the slices:
Page 99 of 102
If you do not understand how to slice a graphic, please press F1 in Fireworks to launch
the Help System. Look up “Slicing” and read through the documentation to understand
this wonderful feature. If you need assistance, you can log on to our Fireworks
newsgroup or email us (see Support section at the end of this User Guide).
Exporting
After making your edits, you’ll need to export the revised web images to your
Dreamweaver images folder.
Choose File – Export
The export dialog will open:
Browse to the images folder inside the folder where you created your Jazz page – in
your Dreamweaver site. Make sure the options are set just as they are in the figure
above.
Click the Export button.
Since the object is to revise your images, give Fireworks permission to overwrite the
existing files.
Page 100 of 102

Fonts used
The main font used for all of the headings is Poor Richard. This font comes with
Microsoft Office 2000 and 2003. It does not install by default so you will need to crack
open the CD and install the font from there. If you do not own Microsoft Office, you can
purchase Poor Richard from Phil’s Fonts. Of course, you can also use your own favorite
font from your personal collection.
For sub-headings, we use Silkscreen Expanded - Free and available at Kottke.org.
Page 101 of 102

Support
PVII quality does not end with your purchase - it continues with the best customer
support in the business.
pvii infobase
The PVII infoBase is an online PVII application allowing you to access dozens of Tech
Notes, tips, and techniques relating to our products, as well as to general web
development issues.
Open the PVII Infobase
newsgroup discussion forums

The Project VII Webdev Newsgroup is our primary support vehicle and is available 24
hours a day. Use your default newsreader's program options to set up a new news
account and point it at the following server:
forums.projectseven.com
If you don't know how to set up a news account in Outlook Express or Entourage,
Microsoft has dedicated instructions pages:
Mac Users Read more
PC Users Read more
Mac Users: As of this writing the latest versions of OSX install neither Outlook Express
nor any other news reader software. If you need a newsreader you will have to purchase
one or download a free one from, for example, Mozilla.
Before you Contact us

Before making a support inquiry, please be certain to have read the documentation that
came with your product. Please include your Dreamweaver version, as well as your
computer operating system type in all support correspondence.
E-Mail:
support@projectseven.com
Page 102 of 102

Jazz 05: User Guide

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Jazz 05: User Guide

Transféré par

Droits d'auteur :

Formats disponibles

Jazz ‘05 by PVII Page 1 of 102

Fixed: 2-column – Vertical menu

Centerwrapper s floated to the right and given a width of 568px.

#centercontent h2, #centercontent h3 {

Box model width calculation

#centercontent a:active, #centercontent a:focus {

#skiplinks a, #skiplinks a:visited, #skiplinks a:hover {

.p7ie6Fix:active, #skiplinks a:active, #skiplinks a:focus {

IE5 and 6 Fixes

Fixed: 2-column – horizontal menu

Centerwrapper s floated to the right and given a width of 568px.

#centercontent h2, #centercontent h3 {

Box model width calculation

#centercontent a:active, #centercontent a:focus {

#skiplinks a, #skiplinks a:visited, #skiplinks a:hover {

.p7ie6Fix:active, #skiplinks a:active, #skiplinks a:focus {

IE5 and 6 Fixes

Fixed: 3-column – Vertical menu

#leftcontent h4, #rightcontent h4 {

Centerwrapper is floated to the left and given a width of 376px.

#centercontent p, #leftcontent p, #rightcontent p {

#centercontent h2, #centercontent h3 {

Box model width calculation

#centercontent a:visited, #rightcontent a:visited {

#centercontent a:hover, #rightcontent a:hover {

#centercontent a:active, #centercontent a:focus,

#skiplinks a, #skiplinks a:visited, #skiplinks a:hover {

.p7ie6Fix:active, #skiplinks a:active, #skiplinks a:focus {

IE5 and 6 Fixes

Flex Width: 2-column – Vertical menu

#centercontent h2, #centercontent h3 {

#centercontent a:active, #centercontent a:focus {

#skiplinks a, #skiplinks a:visited, #skiplinks a:hover {

.p7ie6Fix:active, #skiplinks a:active, #skiplinks a:focus {

IE5 and 6 Fixes

Flex Width: 2-column – Horizontal menu

#centercontent h2, #centercontent h3 {

#centercontent a:active, #centercontent a:focus {

#skiplinks a, #skiplinks a:visited, #skiplinks a:hover {

.p7ie6Fix:active, #skiplinks a:active, #skiplinks a:focus {

IE5 and 6 Fixes

Flex Width: 3-column – Vertical menu

#leftcontent h4, #rightcontent h4 {

#centercontent p, #leftcontent p, #rightcontent p {

#centercontent h2, #centercontent h3 {

#centercontent a:visited, #rightcontent a:visited {

#centercontent a:hover, #rightcontent a:hover {

#centercontent a:active, #centercontent a:focus,

#skiplinks a, #skiplinks a:visited, #skiplinks a:hover {

.p7ie6Fix:active, #skiplinks a:active, #skiplinks a:focus {

IE5 and 6 Fixes

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

Pop Menu Magic Jazz Style Sheet – Vertical Menu

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

#p7PMnav .p7PMtrg, #p7PMnav .p7PMon {

Pop Menu Magic Jazz Style Sheet – Horizontal Menu

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

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

#p7PMnav .p7PMtrg, #p7PMnav .p7PMon {

#p7PMnav ul .p7PMtrg, #p7PMnav ul .p7PMon {

#p7PMnav ul, #p7PMnav ul li {

The Jazz Images

Converting the curved boxes to rectangular boxes