Complete Css Style Sheet Resource: backgrounds

1. Add a page background. In the add-starting-point folder, there are two images,
both of which are gradients. One is a black gradient, fading toward gray at its bottom
edge; this is intended for a page background. Add this by adding the following
rule to the style sheet (after the add your code below comment):
body {
background: #4d4d4d url(page-background.gif) repeat-x;
}
The repeat-x value ensures that the background tiles horizontally only; the color
value #4d4d4d is the color of the bottom pixel of the gradient image, ensuring the
gradient seamlessly blends with the web page background.

2. Add a border to the wrapper. Amend the #wrapper rule to add a border around
the wrapper. Note that the wrapper in this example sits flush with the top edge of
the browser window view area, and so no top border is needed. That’s why the
border-top pair is added, overriding the previous rule for the top border only.
#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
}

3. Add a wrapper background. If you test the page now, the background shows
behind all of the page’s content, thereby making it unreadable. Therefore, add the
background pair to the rule, which sets a background color for the wrapper div,
and also sets the second image in the add-starting-point folder (a white-to-lightgray
vertical gradient) to tile horizontally at the bottom of the div: Add a wrapper background. If you test the page now, the background shows
behind all of the page’s content, thereby making it unreadable. Therefore, add the
background pair to the rule, which sets a background color for the wrapper div,
and also sets the second image in the add-starting-point folder (a white-to-lightgray
vertical gradient) to tile horizontally at the bottom of the div:

#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
background: #ffffff url(wrapper-background.gif) 0 100% repeat-x;
}

4. Add some padding. Test the page now and you’ll see two major layout errors commonly
seen on the Web. First, the content hugs the edges of the div, which makes
it hard to read and also looks cluttered, despite the div being 600 pixels wide.
Secondly, the text at the bottom of the div is displayed over the gradient—it’s still
readable, but it looks a little messy. By adding padding (more to the bottom edge,
to account for the gradient), these issues are dealt with:
#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
background: #ffffff url(wrapper-background.gif) 0 100% repeat-x;
padding: 20px 20px 50px;
}

1. Edit the body element. Like in the previous exercise, edit the body start tag, adding
the id value shown.
<body id="homePage">

2. Style the structural divs. This page’s structure is simple, as are the CSS rules
required to style it. The #wrapper rule sets a fixed width (which is four times the
width of one of the tabs) and centers the design in the browser window. The
#masthead rule adds some padding at the top of the masthead, so the tabs won’t
hug the top of the browser window.
The #navContainer rule has a bottom border (to firmly separate the navigation
from the other page content) and a defined height, which is the height of a tab.
The height setting is useful, because these tabs will be floated, meaning they’re
outside of the standard document flow. By giving the container a fixed height, the
border is shown in the right place; without the height definition, the border would
be displayed at the top of the navContainer div, because as far as browsers are
concerned, floated elements technically don’t take up any height within the standard
document flow.
Finally, the #content rule gives that area a background color and some padding.
#wrapper {
width: 740px;
margin: 0 auto;
}
#masthead {
padding-top: 20px;
}
#navContainer {
height: 30px;
border-bottom: 5px solid #ad3514;
}
#content {
padding: 10px;
background-color: #eeeeee;
}

3. Style list items. Items within the list are styled to float left. The background value
includes the location of the rollover image, with additional settings being
no-repeat (to stop it from tiling), and then 0 and 0, to ensure the relevant portion
of the rollover image is seen by default. The width and height values are the same
as that of the image: 185px and 30px, respectively.
#navigation li {
float: left;
background: url(css-tab-rollover-image.gif) no-repeat 0 0;
width: 185px;
height: 30px;
}

4. Next, style the links. The text is rendered in white, uppercase, and in Arial, and the
default underlines are removed. Setting display to block makes the entire link
container into an active link, thereby making the navigation bar work in the traditional
manner (rather than just the text being active). Finally, the padding settings
position the text correctly over the background images. The height setting, combined
with the padding top setting of 9px, adds up to the height of the container—
30px. Without this, the space underneath the text would not be active.
#navigation a:link, #navigation a:visited {
font: bold 1.1em Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
display: block;
height: 21px;
padding: 9px 0px 0px 30px;
}

5. Style other link states. For the hover and active states, you define which portion
of the rollover graphic is supposed to be visible. This is done via background position
values. The first of these remains 0, because you always want to see the image
from its far left. The vertical reading depends on where the relevant portion of the
image appears in the rollover graphic.
If you check css-tab-rollover-image.gif in an image editor, you’ll see the hover
state graphic is 40 pixels from the top and the active state graphic is 80 pixels
from the top. This means the image needs to be vertically moved –40 pixels and
–80 pixels for the hover and active states, respectively. Therefore, the rules for
these states are as follows:
#navigation a:hover {
background: url(css-tab-rollover-image.gif) 0 -40px;
}
#navigation a:active {
background: url(css-tab-rollover-image.gif) 0 -80px;
}

6. Define the active section state. As per step 8 of the previous exercise, the active
state graphic can be set. In this case, this is done by displaying the fourth state in
the rollover image via the following rule:
#homePage #homePageLink a:link, #homePage #homePageLink a:visited,
å #servicesPage #servicesPageLink a:link, #servicesPage
å #servicesPageLink a:visited, #customerSupportPage
å #customerSupportPageLink a:link, #customerSupportPage
å #customerSupportPageLink a:visited, #contactDetailsPage
å #contactDetailsPageLink a:link, #contactDetailsPage
å #contactDetailsPageLink a:visited {
background: url(css-tab-rollover-image.gif) 0 -120px;
}
Again, you can change the id value of the body element to one of the other list
item id values to change the active section link.

Complete Css Style Sheet Resource

Pages

Wednesday, September 29, 2010

Adding padding, margins, and backgrounds to a layout

Sunday, September 26, 2010

Using CSS backgrounds to create a navigation bar