You create a division element within the (X)HTML by placing the following in the body:
<div>
<p>This is our content area.</p>
</div>
The result is a hook to which CSS can be applied. In Chapter 2, you learned about using IDs
and classes to add identifiers to a standard (X)HTML element. The same formula is used for
divs by referencing the selector in the opening tag using id="name" or class="name". In this
case, we’ve used an ID named container to define the division:
<div id="container">
<p>This is our content area.</p>
</div>
Let’s apply some simple CSS to the container ID:
/* Container holds all visible page elements */
#container {
padding: 20px;
border: 1px solid #000;
background: #CCC;
}
With this CSS applied to our markup, the container will have a gray background with a
black border, and any elements it contains will be padded 20px from that border, as you can see
in Figure 3-1.
Showing posts with label a. Show all posts
Showing posts with label a. Show all posts
Monday, October 4, 2010
When To Use And Not to Use a Class
When to Use a Class
As described previously, classes are a very flexible method for applying your CSS rules, and can
be used again and again within a page. Use classes to control elements that belong to a group,
for temporary items, and also to enhance the behavior of an ID.
When Not to Use a Class
It is not recommended that classes be used for main structural elements within a page, such as
headers and main navigation, although they will work. Doing so would decrease the flexibility
of your design and make further customization difficult without overhaul or extra markup.
Also, be sure a class is needed, and make sure the element cannot be targeted by defining a rule
for the existing (X)HTML before getting class-happy. Remember that a class is used for exceptions
to normal styling, and not to define the standard.
As described previously, classes are a very flexible method for applying your CSS rules, and can
be used again and again within a page. Use classes to control elements that belong to a group,
for temporary items, and also to enhance the behavior of an ID.
When Not to Use a Class
It is not recommended that classes be used for main structural elements within a page, such as
headers and main navigation, although they will work. Doing so would decrease the flexibility
of your design and make further customization difficult without overhaul or extra markup.
Also, be sure a class is needed, and make sure the element cannot be targeted by defining a rule
for the existing (X)HTML before getting class-happy. Remember that a class is used for exceptions
to normal styling, and not to define the standard.
Linking a Class Directly to an Element
In this example, the CSS is constructed with the class attached directly to the element in the
form element.classname, and like before, it is referenced using the class="classname" format
within the (X)HTML.
/* Use this style to turn anything light gray */
.bleached {
color:#CCC;
}
/* Override the color of bleached when it identifies a paragraph */
p.bleached {
color:#000;
}
This method would be used when the standard declaration for the bleached class needs to
be overruled. For example, any element given a class of bleached will remain light gray (color:
#CCC;), but any instances of paragraph elements with a class of bleached will be rendered black
(color: #000;). This method is useful when numerous instances of a class are littering your
(X)HTML, and it would be too difficult to remove them all manually. Instead, simply target that
class when it identifies the element you need to change using the form element.classname.
form element.classname, and like before, it is referenced using the class="classname" format
within the (X)HTML.
/* Use this style to turn anything light gray */
.bleached {
color:#CCC;
}
/* Override the color of bleached when it identifies a paragraph */
p.bleached {
color:#000;
}
This method would be used when the standard declaration for the bleached class needs to
be overruled. For example, any element given a class of bleached will remain light gray (color:
#CCC;), but any instances of paragraph elements with a class of bleached will be rendered black
(color: #000;). This method is useful when numerous instances of a class are littering your
(X)HTML, and it would be too difficult to remove them all manually. Instead, simply target that
class when it identifies the element you need to change using the form element.classname.
Defining a Style in Css
At this stage, all CSS rules you create will follow a very simple formula. CSS syntax is made up
of a selector (the element or tag you wish to control), followed by at least one declaration
comprising a property and its value, as Figure 1-1 illustrates
The selector defines the exact element(s) that will be affected by the rule you create. The
following example uses the paragraph tag as the selector, and the color property set with the
hexadecimal reference for red as the value:
p {
color: #F00;
}
Note that after the selector, the property and value are contained within curly braces.
Almost without exception, this syntax will define all your CSS rules. See that a colon follows the
property (color:) and a semicolon follows the value (#F00;). To omit either the colon or a curly
brace will result in the style sheet failing to various degrees, so it is vital to watch for syntax
errors that occur easily while busily defining new rules. Failing to include the semicolon after
each value when adding more properties will also screw things up. If there is only one property
and value, or it is the last of several, the semicolon can be omitted.
Any further properties and values for that selector are added within the curly braces. You
do not have to place them on a new line so long as each is separated with a semicolon, but for
clarity it is recommended that each does fall on a new line:
p {
color: #F00;
font-size: 12px;
}
Now all paragraphs will not only be red, but will also have a set font size of 12 pixels. The
selector (in this case the p) acts as the link between the CSS and the (X)HTML, and as a result all
paragraphs will be styled accordingly. Note that the selector is defined in lowercase, as required
by XHTML only, as HTML is case insensitive
It’s then a case of adding new rules to the style sheet using the same syntax. Here, a rule to
make all top-level headings (<h1>) dark gray and 16 pixels high is added to the style sheet:
p {
color: #F00;
font-size: 12px;
}
h1 {
color: #333;
font-size: 16px;
}
Very simple properties are used in this example, and property syntax will be explored in much
more detail in the following chapters. For now though, we’ll concentrate on how a style sheet
is structured.
of a selector (the element or tag you wish to control), followed by at least one declaration
comprising a property and its value, as Figure 1-1 illustrates
The selector defines the exact element(s) that will be affected by the rule you create. The
following example uses the paragraph tag as the selector, and the color property set with the
hexadecimal reference for red as the value:
p {
color: #F00;
}
Note that after the selector, the property and value are contained within curly braces.
Almost without exception, this syntax will define all your CSS rules. See that a colon follows the
property (color:) and a semicolon follows the value (#F00;). To omit either the colon or a curly
brace will result in the style sheet failing to various degrees, so it is vital to watch for syntax
errors that occur easily while busily defining new rules. Failing to include the semicolon after
each value when adding more properties will also screw things up. If there is only one property
and value, or it is the last of several, the semicolon can be omitted.
Any further properties and values for that selector are added within the curly braces. You
do not have to place them on a new line so long as each is separated with a semicolon, but for
clarity it is recommended that each does fall on a new line:
p {
color: #F00;
font-size: 12px;
}
Now all paragraphs will not only be red, but will also have a set font size of 12 pixels. The
selector (in this case the p) acts as the link between the CSS and the (X)HTML, and as a result all
paragraphs will be styled accordingly. Note that the selector is defined in lowercase, as required
by XHTML only, as HTML is case insensitive
It’s then a case of adding new rules to the style sheet using the same syntax. Here, a rule to
make all top-level headings (<h1>) dark gray and 16 pixels high is added to the style sheet:
p {
color: #F00;
font-size: 12px;
}
h1 {
color: #333;
font-size: 16px;
}
Very simple properties are used in this example, and property syntax will be explored in much
more detail in the following chapters. For now though, we’ll concentrate on how a style sheet
is structured.
Preparing a Base (X)HTML Template
For each example in this chapter, you’ll need a fresh copy of the base template provided in this
section. This is a very simple (X)HTML page consisting of some standard document sections
(<head> and <body>) and familiar elements (headings, paragraphs, and links to further
templates in an unordered list) thrown in, all of which you’d expect to see in a typical web page.
We won’t deal with tables or images just yet.
To appreciate the effects of the applied CSS, it is worth copying this template verbatim at
this stage, as that’ll help you understand the examples discussed. Note that the list of links will
tie together further templates in this section, giving you a cut-out-and-keep mini-site for reference.
The (X)HTML is also available to download from www.apress.com if you’re one of those who
doesn’t like typing very much. For reference, it’s also printed here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"➥
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Applying CSS Mini-site</title>
</head>
<body>
<h1>Applying CSS Templates</h1>
<p>A mini-site containing several (X)HTML templates, each being➥
styled using a different method of CSS application.</p>
<p>Click an example below.</p>
<h2>Examples</h2>
<ul>
<li><a href="base.html">Base template</a></li>
<li><a href="inline.html">Inline CSS template</a></li>
<li><a href="embedded.html">Embedded CSS template</a></li>
<li><a href="external.html">External CSS template</a></li>
<li><a href="imported.html">Imported CSS template</a></li>
</ul>
</body>
</html>
Note that there has as yet been no CSS in this chapter whatsoever. So to create a base template
file, go through the following steps:
1. Create a new file called base.html.
2. Add the (X)HTML.
3. Save the file to a new folder on your computer.
4. Drag the file onto an empty browser window to see the basic web page as it stands.
Now you are ready to build a set of templates, each influenced by CSS in a different way.
This mini-site can then be used to revisit and play with the methods discussed in this book,
applying the CSS however you see fit.5. Next make four copies of base.html, and name them inline.html, embedded.html,
external.html, and imported.html.
6. Ensure you save these new files to the same folder as base.html.
7. The four new files should now be available from your base.html file in your web browser.
Great! Now for each following method, you will have a corresponding (X)HTML file with
which to work. Let’s work through the main methods of applying CSS to XHTML one by one.
Later you’ll learn how the numerous methods can be combined for a more powerful effect.
section. This is a very simple (X)HTML page consisting of some standard document sections
(<head> and <body>) and familiar elements (headings, paragraphs, and links to further
templates in an unordered list) thrown in, all of which you’d expect to see in a typical web page.
We won’t deal with tables or images just yet.
To appreciate the effects of the applied CSS, it is worth copying this template verbatim at
this stage, as that’ll help you understand the examples discussed. Note that the list of links will
tie together further templates in this section, giving you a cut-out-and-keep mini-site for reference.
The (X)HTML is also available to download from www.apress.com if you’re one of those who
doesn’t like typing very much. For reference, it’s also printed here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"➥
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Applying CSS Mini-site</title>
</head>
<body>
<h1>Applying CSS Templates</h1>
<p>A mini-site containing several (X)HTML templates, each being➥
styled using a different method of CSS application.</p>
<p>Click an example below.</p>
<h2>Examples</h2>
<ul>
<li><a href="base.html">Base template</a></li>
<li><a href="inline.html">Inline CSS template</a></li>
<li><a href="embedded.html">Embedded CSS template</a></li>
<li><a href="external.html">External CSS template</a></li>
<li><a href="imported.html">Imported CSS template</a></li>
</ul>
</body>
</html>
Note that there has as yet been no CSS in this chapter whatsoever. So to create a base template
file, go through the following steps:
1. Create a new file called base.html.
2. Add the (X)HTML.
3. Save the file to a new folder on your computer.
4. Drag the file onto an empty browser window to see the basic web page as it stands.
Now you are ready to build a set of templates, each influenced by CSS in a different way.
This mini-site can then be used to revisit and play with the methods discussed in this book,
applying the CSS however you see fit.5. Next make four copies of base.html, and name them inline.html, embedded.html,
external.html, and imported.html.
6. Ensure you save these new files to the same folder as base.html.
7. The four new files should now be available from your base.html file in your web browser.
Great! Now for each following method, you will have a corresponding (X)HTML file with
which to work. Let’s work through the main methods of applying CSS to XHTML one by one.
Later you’ll learn how the numerous methods can be combined for a more powerful effect.
Thursday, September 30, 2010
A browser test suite
when various browsers were created, their approximate
share of the market, and the major problems they cause. However, it’s important to
note that the market is in continual change—just a quick look at Netscape’s fortunes
should be enough to prove that. Utterly dominant during the period when the Web first
started to become mainstream, its share of the market was decimated by the then-upstart
Internet Explorer, and it’s now all but vanished. The point, of course, is that you cannot
predict how the browser market will change, and although Internet Explorer is sitting
proud today, its share of the market has been hit hard in recent years by Firefox, and this
downward trend for Microsoft’s browser could continue . . . or not. Also, each year sees
new releases of web browsers, with new features and updated—but usually incomplete—
standards support.
All of this is a roundabout way of saying that you need to think hard about browsers when
you’re creating your work. Don’t only test sites in a single browser, and don’t use the most
popular for your starting point if it’s not the most standards-compliant. Instead, use a
browser with a good grasp of web standards for your first line of tests, until you’ve got
your templates working. I personally use the Gecko engine as a starting point—more
specifically, I favor Firefox as an initial choice of browser. Opera is also a decent choice,
and Mac users can probably get away with using Safari for initial tests.
Once the basic structure is up and running, I test in a range of alternate web browsers, typically
in the following order:
share of the market, and the major problems they cause. However, it’s important to
note that the market is in continual change—just a quick look at Netscape’s fortunes
should be enough to prove that. Utterly dominant during the period when the Web first
started to become mainstream, its share of the market was decimated by the then-upstart
Internet Explorer, and it’s now all but vanished. The point, of course, is that you cannot
predict how the browser market will change, and although Internet Explorer is sitting
proud today, its share of the market has been hit hard in recent years by Firefox, and this
downward trend for Microsoft’s browser could continue . . . or not. Also, each year sees
new releases of web browsers, with new features and updated—but usually incomplete—
standards support.
All of this is a roundabout way of saying that you need to think hard about browsers when
you’re creating your work. Don’t only test sites in a single browser, and don’t use the most
popular for your starting point if it’s not the most standards-compliant. Instead, use a
browser with a good grasp of web standards for your first line of tests, until you’ve got
your templates working. I personally use the Gecko engine as a starting point—more
specifically, I favor Firefox as an initial choice of browser. Opera is also a decent choice,
and Mac users can probably get away with using Safari for initial tests.
Once the basic structure is up and running, I test in a range of alternate web browsers, typically
in the following order:
1. The other compliant browsers: Typically, I use Firefox as a starting point, although
sometimes I use Safari. Whichever one you choose to start in, it’s a good idea to
test in the other compliant browsers first. Sometimes, one will pick up a coding
error the others don’t, and it’s a good sanity check to ensure everything’s working
well. If you’re lucky, everything will work fine right away in all of these browsers, on
both Mac and Windows.
2. A browser in text mode: What I mean by this is testing the site without CSS, which
is a way of somewhat figuring out if it’s usable on alternate devices. Old hands
might use Lynx for this, but I instead use the Accessibility layout option of Opera’s
User mode (see the following screenshot). The Firefox Web Developer toolbar
(www.chrispederick.com) offers similar options.
3. Internet Explorer 7 for Windows: Although this release of Internet Explorer is a vast
improvement over previous efforts, it’s not as standards-compliant as the other
mainstream browsers. Therefore, tests need to be done to ensure everything’s
working properly, not least because Internet Explorer 7 is the most popular
browser in terms of market share. If things aren’t working right, conditional comments
need to be used (see the “Dealing with Internet Explorer bugs” section later
in the chapter).
4. Internet Explorer 6 for Windows: Previously the most popular browser, this release
is still in heavy use. Fairly compliant, it nonetheless has a raft of bugs, and complex
CSS layouts will almost certainly need a little tweaking to work properly, again via
the use of conditional comments. Note that because only Windows XP users can
upgrade from Internet Explorer 6 to 7 (7 being the native browser for Windows
Vista), a fair number of users—those with an earlier version of Windows—will likely
use 6 for some time to come.
is still in heavy use. Fairly compliant, it nonetheless has a raft of bugs, and complex
CSS layouts will almost certainly need a little tweaking to work properly, again via
the use of conditional comments. Note that because only Windows XP users can
upgrade from Internet Explorer 6 to 7 (7 being the native browser for Windows
Vista), a fair number of users—those with an earlier version of Windows—will likely
use 6 for some time to come.
5. Internet Explorer 5.5 for Windows: How far you go back, in terms of versions of
Internet Explorer, depends on your target market, the client’s budget, and general
expectations. Typically, I test the most recent three major versions of Microsoft’s
browser, due to their heavy usage. Internet Explorer 5.0 can be considered almost
extinct, however. Overall, Internet Explorer 5.5 has more problems than Internet
Explorer 6, although most of them are easy enough to work around. Generally, I
don’t aim to get sites working perfectly in this browser—a few cosmetic oddities
are acceptable, in my opinion, because there’s no point in compromising a totally
compliant site to make it more compatible for an aging browser whose market
share is in rapid decline. Ensuring content is accessible in the browser is essential,
however, and the primary concern when dealing with obsolete browsers.
6. Everything—all over again: When any major changes are made, you need to go back
through your browsers and make sure the changes haven’t screwed anything up.
There are other browsers out there, but the preceding list will deal with the vast majority
of your users. However, always try to find out the potential audience for a website to
ascertain whether you should place more focus on a particular browser. For example, if
authoring a site for a mostly Mac-based audience, it might make sense to use Safari as the
basis for testing, and perhaps even wheel out the long-canceled Internet Explorer 5 for
Mac, just to make sure your site works in it.
At each stage of testing, I recommend that you save HTML and CSS milestones on a very
regular basis. If something fails in a browser, create a copy of your files and work on a fix.
Don’t continually overwrite files, because it’s sometimes useful—and, indeed, necessary—
to go back to previous versions.
Whichever browsers you test in, it’s important to not avoid the “other side.” Windows
users have long seen the Mac as being inconsequential, but at the time of writing Safari
now counts for about 4% of all web users, and the trend for Mac sales (as a percentage of
the market) is upward. Usefully, there’s now a version of Safari for Windows, but even the
Mac and Windows versions of Firefox show slight differences in the way sites are handled
(mostly regarding text). Even worse, many Mac-based designers don’t test on a Windows
PC or in Internet Explorer, which has the bulk of the market. If you’re a Windows user, grab
a cheap Mac that’s capable of running Mac OS X (such as a second-hand iBook or a Mac
mini), and if you’re a Mac user, either grab a cheap Windows PC to test with or run
Windows as a virtual machine (via Parallels Desktop or VMware Fusion) on an Intel Mac or
using Virtual PC if you have a PPC-based machine. (You can also use Boot Camp on an Intel
Mac, but that requires booting back and forth between Windows and Mac OS X, so using
a virtual environment is more efficient unless you have two computers.) Linux users also
have a range of browsers to test on. Firefox is popular on that platform, and Safari is a
rough analog for Konqueror. It is worth noting, however, that the default fonts with Linux
vary considerably from those that you’d expect on a Mac or Windows PC—so you should
always define fallback fonts accordingly, and test in Linux if possible. See Chapter 3 for
more on font stacks.
of your users. However, always try to find out the potential audience for a website to
ascertain whether you should place more focus on a particular browser. For example, if
authoring a site for a mostly Mac-based audience, it might make sense to use Safari as the
basis for testing, and perhaps even wheel out the long-canceled Internet Explorer 5 for
Mac, just to make sure your site works in it.
At each stage of testing, I recommend that you save HTML and CSS milestones on a very
regular basis. If something fails in a browser, create a copy of your files and work on a fix.
Don’t continually overwrite files, because it’s sometimes useful—and, indeed, necessary—
to go back to previous versions.
Whichever browsers you test in, it’s important to not avoid the “other side.” Windows
users have long seen the Mac as being inconsequential, but at the time of writing Safari
now counts for about 4% of all web users, and the trend for Mac sales (as a percentage of
the market) is upward. Usefully, there’s now a version of Safari for Windows, but even the
Mac and Windows versions of Firefox show slight differences in the way sites are handled
(mostly regarding text). Even worse, many Mac-based designers don’t test on a Windows
PC or in Internet Explorer, which has the bulk of the market. If you’re a Windows user, grab
a cheap Mac that’s capable of running Mac OS X (such as a second-hand iBook or a Mac
mini), and if you’re a Mac user, either grab a cheap Windows PC to test with or run
Windows as a virtual machine (via Parallels Desktop or VMware Fusion) on an Intel Mac or
using Virtual PC if you have a PPC-based machine. (You can also use Boot Camp on an Intel
Mac, but that requires booting back and forth between Windows and Mac OS X, so using
a virtual environment is more efficient unless you have two computers.) Linux users also
have a range of browsers to test on. Firefox is popular on that platform, and Safari is a
rough analog for Konqueror. It is worth noting, however, that the default fonts with Linux
vary considerably from those that you’d expect on a Mac or Windows PC—so you should
always define fallback fonts accordingly, and test in Linux if possible. See Chapter 3 for
more on font stacks.
Wednesday, September 29, 2010
How to use microformats to enhance a set of contact details.
1. Add a surrounding div. Open using-microformats.
html, and place a div with a class value of vcard
around the contact details content, as shown (truncated)
following:
<h1>Contact details</h1>
<div class="vcard">
<h2>Mail</h2>
[...]
Mobile/cell: +1 (0)7000 555555</p>
</div>
html, and place a div with a class value of vcard
around the contact details content, as shown (truncated)
following:
<h1>Contact details</h1>
<div class="vcard">
<h2>Mail</h2>
[...]
Mobile/cell: +1 (0)7000 555555</p>
</div>
2. Structure the address. Marking up the address is fairly
simple, and few changes are required to the general
structure of the code. However, because each individual set of information requires
its own container, and the best way of creating a container for the address is to
place it within a block element of its own, the company name and the address each
need their own paragraphs, rather than a line break separating the two. The organization’s
paragraph is then given a class value of fn org. Here, fn stands for “full
name” and org defines that the name belongs to an organization, rather than a
person.
The address paragraph’s class value is adr, and each line of the address is placed
within a span element. The various class values assigned to the spans denote
which element of the address the content refers to, and those are all straightforward
to understand. However, address books—and therefore microformats—
enable you to distinguish between different types of data. For example, you can
have a work address or a home address. This can be defined by adding the relevant
word (e.g., work) and wrapping it in a span with a class value of type, thereby
defining the type for the parent property. In this case, the address is being defined
as a work address.
For cases when you don’t want this information shown on the web page (which will
likely be most of the time—after all, adding a lowercase “work” in front of the
street name hardly looks great), add a second class value, hidden. Later, CSS will
be used to make content with a hidden value invisible.
<h2>Mail</h2>
<p class="fn org">Company name</p>
<p class="adr">
<span class="type hidden">work</span>
<span class="street-address">00, Street Name</span><br />
<span class="locality">Town or City</span><br />
<span class="region">County or Region</span><br />
<span class="postal-code">Postal/ZIP code</span>
<span class="country-name">Country name</span>
</p>
3. Structure the telephone/fax details. Each definition for a telephone number
requires its own container, and so the single paragraph must be split into three, as
shown in the following code block. Each paragraph’s class value should be tel. As
with the address, a span with a class value of type hidden is used to define the
type for each parent property. For tel, there are various options available, including
work, home, fax, cell, pager, and video. Should duplicate types be required
(such as for a work fax), two type spans are added. As for the contact number
itself, that’s placed in a span element with a class value of value.
<h2>Telephone/fax</h2>
<p class="tel">
Tel: <span class="type hidden">work</span>
<span class="value">+1 (0)0000 555555</span></p>
<p class="tel">
Fax: <span class="type hidden">fax</span>
<span class="type hidden">work</span>
<span class="value">+1 (0)0000 555556</span></p>
<p class="tel">
Mobile/cell: <span class="type hidden">cell</span>
<span class="value">+1 (0)7000 555555</span></p>
4. Style headings and paragraphs. The style sheet,
using-microformats.css, already has some
defined styles, which do the usual removal of
margins and padding and setting of the default
font size. The body rule also adds some padding
to the page content so that it doesn’t hug the
browser window edges. To this, add the following
three rules, which style the headings and paragraphs.
Both headings are rendered in uppercase
Arial, helping them to stand out, aiding visual
navigation of the contact details.
h1 {
font: bold 1.5em/1.2em Arial, Helvetica
å sans-serif;
margin-bottom: 1.2em;
text-transform: uppercase;
}
h2 {
font: bold 1.25em/1.44em Arial, Helvetica sans-serif;
text-transform: uppercase;
}
p {
font-size: 1.2em;
line-height: 1.5em;
margin-bottom: 1.5em;
}
font: bold 1.25em/1.44em Arial, Helvetica sans-serif;
text-transform: uppercase;
}
p {
font-size: 1.2em;
line-height: 1.5em;
margin-bottom: 1.5em;
}
5. Hide hidden elements. As noted in steps 2 and 3, some information requires a type
to be defined for it, but as you can see in the previous image, this is displayed
onscreen like any other content. This is why the hidden value was also applied to
the relevant span elements. By adding the following rule, these spans are made
invisible.
.hidden {
display: none;
}
6. Deal with margin issues. Because the telephone
details are each in an individual paragraph, they
each have a bottom margin, and this makes the layout
look awful. The same problem also affects the
company name paragraph. However, because each
paragraph has its own class attribute value, it’s
easy to remove the bottom margins from the relevant
paragraphs using the following rule:
.tel, .fn {
margin-bottom: 0;
}
7. Embolden the company name. Balance-wise, the
company name could do with standing out more. This is within a paragraph that
has a class value of org, so making the contents bold is child’s play—just add the
following rule.
.org {
font-weight: bold;
}
8. Finally, style the vcard div via the following rule. This sets a background color,
width, border, and padding, but perhaps the most important property here is
margin-bottom. This is required because the margins from paragraphs with a tel
class were removed in step 6. When you add a bottom margin to the vcard div, the
typical spacing you’d expect after a paragraphs returns.
.vcard {
width: 200px;
background: #eeeeee;
border: 1px solid #cccccc;
padding: 8px;
margin-bottom: 1.5em;
}
Note that further simplification of some elements of the code shown in the exercise is
possible. For example, where you have the Fax line, the type span could be directly
wrapped around the relevant label, and the hidden class removed.
Where before you had the following:
<p class="tel">
Fax: <span class="type hidden">fax</span>
<span class="type hidden">work</span>
<span class="value">+1 (0)0000 555556</span></p>
you’ll now have this:
<p class="tel">
<span class="type">Fax</span>:
<span class="type hidden">work</span>
<span class="value">+1 (0)0000 555556</span></p>
The same is also true for the Mobile/cell line.
Note also that this is a relatively new technology, so it’s not without its drawbacks. As mentioned
earlier, some details are not carried through to some address books. Also, the need
to hide extra data is problematic, since under some circumstances (such as in text readers),
it will be displayed, which could lead to confusion. However
margin-bottom: 1.5em;
}
Note that further simplification of some elements of the code shown in the exercise is
possible. For example, where you have the Fax line, the type span could be directly
wrapped around the relevant label, and the hidden class removed.
Where before you had the following:
<p class="tel">
Fax: <span class="type hidden">fax</span>
<span class="type hidden">work</span>
<span class="value">+1 (0)0000 555556</span></p>
you’ll now have this:
<p class="tel">
<span class="type">Fax</span>:
<span class="type hidden">work</span>
<span class="value">+1 (0)0000 555556</span></p>
The same is also true for the Mobile/cell line.
Note also that this is a relatively new technology, so it’s not without its drawbacks. As mentioned
earlier, some details are not carried through to some address books. Also, the need
to hide extra data is problematic, since under some circumstances (such as in text readers),
it will be displayed, which could lead to confusion. However
Adding padding, margins, and backgrounds to a layout
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.
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;
}
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:
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;
}
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;
}
Css Tutorial : How to create a fixed-width div
1. Set things up. Rename the boilerplate documents to create-a-fixed-widthwrapper.
html and create-a-fixed-width-wrapper.css. Link the CSS document
to the web page by amending the url value of the style element.
@import url(create-a-fixed-width-wrapper.css);
2. Add some content. The web page already has a div element with an id of wrapper.
Within it, add a bunch of paragraphs and test the web page. You’ll see that the content
stretches with the browser window and goes right up to its edges—this is a
basic liquid design. If the browser window is very wide, this makes the content all
but unreadable. 3. Restrict the wrapper’s width. In CSS, add the following rule:
#wrapper {
width: 600px;
margin: 0 auto;
}
The width setting defines a width in pixels for the wrapper div. The margin setting
provides automatic margins to the left and right of the div, which has the effect of
centering the layout in the browser window,
html and create-a-fixed-width-wrapper.css. Link the CSS document
to the web page by amending the url value of the style element.
@import url(create-a-fixed-width-wrapper.css);
2. Add some content. The web page already has a div element with an id of wrapper.
Within it, add a bunch of paragraphs and test the web page. You’ll see that the content
stretches with the browser window and goes right up to its edges—this is a
basic liquid design. If the browser window is very wide, this makes the content all
but unreadable. 3. Restrict the wrapper’s width. In CSS, add the following rule:
#wrapper {
width: 600px;
margin: 0 auto;
}
The width setting defines a width in pixels for the wrapper div. The margin setting
provides automatic margins to the left and right of the div, which has the effect of
centering the layout in the browser window,
Creating a page structure
We’ve covered semantic markup—that is, using HTML elements for the purpose for which
they were created. This theme continues when working with CSS-based layouts. With
tables, cells are used to lay out a design and are merged, split, chopped, and changed until
everything works visually. But when working with CSS, you need to be aware of the structure
of your web page from the start. That way, you can create structural elements with id
values that relate to their purpose, and then style them to suit.
For basic page structure, you mostly work with the div element. This element has been
around for some time, but used to be used for aligning text left, right, or centrally.
However, its real purpose is as a divider element, used to divide a document into blocklevel
groups or divisions. Therefore, in CSS-based layouts, the div element’s role is pivotal:
a number of divs are added to the web page in logical order, creating the basic structure;
each is provided with a unique id relating to its purpose; and the divs are then styled to
provide spacing, padding, backgrounds, and so on.
they were created. This theme continues when working with CSS-based layouts. With
tables, cells are used to lay out a design and are merged, split, chopped, and changed until
everything works visually. But when working with CSS, you need to be aware of the structure
of your web page from the start. That way, you can create structural elements with id
values that relate to their purpose, and then style them to suit.
For basic page structure, you mostly work with the div element. This element has been
around for some time, but used to be used for aligning text left, right, or centrally.
However, its real purpose is as a divider element, used to divide a document into blocklevel
groups or divisions. Therefore, in CSS-based layouts, the div element’s role is pivotal:
a number of divs are added to the web page in logical order, creating the basic structure;
each is provided with a unique id relating to its purpose; and the divs are then styled to
provide spacing, padding, backgrounds, and so on.
Anatomy of a layout: Tables vs. CSS
To use a fine art analogy, working with tables is like painting by numbers: you create a
skeleton layout and then fill in the gaps with the content of choice. And, like painting by
numbers, a lot of work is required to change the layout after it’s completed. Working with
CSS is more akin to sculpting with clay: you begin with something simple and then gradually
fashion your layout. Making changes, tweaks, and even additions at a later date is simpler,
and the whole process feels more organic.
Long-time web designers may feel intimidated by CSS because they don’t initially have the
skeleton layout of table borders to work with. In some ways, CSS sits at the extremes of
web technologies, being both very graphic and design-like (in its flexibility), but also quite
technical (in how it’s created). Tables tend to sit in the middle of these two extremes.
However, once you get the hang of CSS workflow, it soon becomes second nature. Now,
we’ll look at how to create a web page structure, and we’ll then recap the CSS box model.
skeleton layout and then fill in the gaps with the content of choice. And, like painting by
numbers, a lot of work is required to change the layout after it’s completed. Working with
CSS is more akin to sculpting with clay: you begin with something simple and then gradually
fashion your layout. Making changes, tweaks, and even additions at a later date is simpler,
and the whole process feels more organic.
Long-time web designers may feel intimidated by CSS because they don’t initially have the
skeleton layout of table borders to work with. In some ways, CSS sits at the extremes of
web technologies, being both very graphic and design-like (in its flexibility), but also quite
technical (in how it’s created). Tables tend to sit in the middle of these two extremes.
However, once you get the hang of CSS workflow, it soon becomes second nature. Now,
we’ll look at how to create a web page structure, and we’ll then recap the CSS box model.
Adding separator stripes with PHP
Adding separator stripes with PHP
If you’re creating a table from data stored in a database, automating separator stripes is a
relatively simple process. After the PHP for retrieving data and the opening table markup
(including headers), you add the following:
$alternate = TRUE;
while ($row = mysql_fetch_object($sqlresult)) :
if($alternate) :
$class = ' class="alt"';
$alternate = FALSE;
else :
$class = "";
$alternate = TRUE;
endif;
echo '<tr'.$class.'>';
echo '<td>' . $row->field1 . '</td>';
echo '<td>' . $row->field2 . '</td>';
echo '</tr>';
endwhile;
This is then followed by the markup to close the table. Note that in this example, the alt
class value is applied to alternate table rows, so the CSS from the previous exercise should
still work fine
If you’re creating a table from data stored in a database, automating separator stripes is a
relatively simple process. After the PHP for retrieving data and the opening table markup
(including headers), you add the following:
$alternate = TRUE;
while ($row = mysql_fetch_object($sqlresult)) :
if($alternate) :
$class = ' class="alt"';
$alternate = FALSE;
else :
$class = "";
$alternate = TRUE;
endif;
echo '<tr'.$class.'>';
echo '<td>' . $row->field1 . '</td>';
echo '<td>' . $row->field2 . '</td>';
echo '</tr>';
endwhile;
This is then followed by the markup to close the table. Note that in this example, the alt
class value is applied to alternate table rows, so the CSS from the previous exercise should
still work fine
Styling a table by Css : Adding borders to tables
As mentioned earlier, it’s a good policy to avoid using the default HTML table border. It
looks ugly and old-fashioned, and it’s a far cry from a clean, flat, 1-pixel border. You might
think it’s a straightforward process to add CSS borders to a table—logically, it makes sense
to simply add a border property/value pair to a grouped selector that takes care of both
the table headers and table data cells.
th, td {
border: 1px solid #c9c9c9;
}
But this doesn’t work. As the screenshot to the right shows, this method
results in the correct single-pixel border around the edge of the table,
but creates double-thick borders everywhere else. This is because the
borders don’t collapse by default, meaning that the right-hand border of
one cell sits next to the left-hand border of an adjacent cell, and so on.
Designers have historically gotten around this by using a rule to define a style for the top
and left borders of the table, and another to define a style for the right and bottom
borders of table cells. However, there’s a perfectly good property that
deals with the double-border syndrome: border-collapse. When this
property, with a value of collapse, is applied to the table element via an
element selector, borders collapse to a single border wherever possible.
The other available border-collapse property value, which reverts
borders back to their “standard” state, is separate.
table {
border-collapse: collapse;
}
With this brief explanation of table borders completed, we’ll now move into exercise
mode and style the table.
looks ugly and old-fashioned, and it’s a far cry from a clean, flat, 1-pixel border. You might
think it’s a straightforward process to add CSS borders to a table—logically, it makes sense
to simply add a border property/value pair to a grouped selector that takes care of both
the table headers and table data cells.
th, td {
border: 1px solid #c9c9c9;
}
But this doesn’t work. As the screenshot to the right shows, this method
results in the correct single-pixel border around the edge of the table,
but creates double-thick borders everywhere else. This is because the
borders don’t collapse by default, meaning that the right-hand border of
one cell sits next to the left-hand border of an adjacent cell, and so on.
Designers have historically gotten around this by using a rule to define a style for the top
and left borders of the table, and another to define a style for the right and bottom
borders of table cells. However, there’s a perfectly good property that
deals with the double-border syndrome: border-collapse. When this
property, with a value of collapse, is applied to the table element via an
element selector, borders collapse to a single border wherever possible.
The other available border-collapse property value, which reverts
borders back to their “standard” state, is separate.
table {
border-collapse: collapse;
}
With this brief explanation of table borders completed, we’ll now move into exercise
mode and style the table.
How to create a table: CssTutorial
1. Structure the table element. In order to emulate the structure of the iTunes
playlist, set the table’s width to a percentage value. This means the table will
stretch with the browser window. As explained earlier, you should also use the
summary attribute to succinctly detail what the table’s all about.
<table width="90%" border="1" cellspacing="0"
å summary="Music selected by Craig Grannell, with details of song,
å playing time, artist, album and play count.">
</table>
playlist, set the table’s width to a percentage value. This means the table will
stretch with the browser window. As explained earlier, you should also use the
summary attribute to succinctly detail what the table’s all about.
<table width="90%" border="1" cellspacing="0"
å summary="Music selected by Craig Grannell, with details of song,
å playing time, artist, album and play count.">
</table>
2. Add a caption. Immediately after the table start tag, add a caption element to provide
the table with a title.
the table with a title.
<caption>A playlist of great music</caption>
3. Add the basic table structure. Use row groups to provide the table with its basic
structure.
<thead>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
4. Using table header cell elements, add the content for the table head (the column
headers) as in the following code block, remembering to include relevant scope
attribute/value pairs:
<thead>
<tr>
<th scope="col">Song Name</th>
<th scope="col">Time</th>
<th scope="col">Artist</th>
<th scope="col">Album</th>
<th scope="col">Play Count</th>
</tr>
</thead>
There’s no need to add any styling—not even strong tags. By default, most
browsers display table header cell content in bold (and centered) to differentiate it
from table data; also, in the following section, you’ll be using CSS to style everything,
anyway.
5. Add table foot content. As mentioned, the footer for this table is to essentially be
a signature, stating who’s at fault for this selection of music. Because this is a single
line of text that could potentially span the entire table width, simply include a
single table cell, set to span five rows (using the colspan attribute).
<tfoot>
<tr><td colspan="5">Music selection by:
å www.snubcommunications.com</td></tr>
</tfoot>
a signature, stating who’s at fault for this selection of music. Because this is a single
line of text that could potentially span the entire table width, simply include a
single table cell, set to span five rows (using the colspan attribute).
<tfoot>
<tr><td colspan="5">Music selection by:
å www.snubcommunications.com</td></tr>
</tfoot>
6. Add table body content. Finally, add the table’s body content via the usual method,
using table row and table cell elements. This table will have nearly 20 rows, so to
save on trees, only the first two rows are detailed in the following printed code
block—you can add all the others in the same way, or just copy across the content
of building-the-table-body.txt from the download files, to save inputting the
data yourself.
<tbody>
<tr>
<td>In The Art Of Stopping</td>
<td>3:34</td>
<td>Wire</td>
<td>Send</td>
<td>3</td>
</tr>
<tr>
<td>Electron John</td>
<td>3:18</td>
<td>Worm Is Green</td>
<td>Push Play</td>
<td>42</td>
</tr>
</tbody>
Sunday, September 26, 2010
Creating a multicolumn drop-down menu in css
1. Edit the HTML to remove the existing nested lists. Then, for the multicolumn dropdown,
decide which link you want it to spawn from and place an unordered link in
its parent list item, with a single list item of its own. Within that list item, place the
unordered lists for the columns in the drop-down, one after the other. Note that if
some columns have fewer items, they must still have the same number of list items.
However, list items can be left empty, despite this technically being a presentational
hack. (Note that HTML Tidy might have problems with this and trim the empty list
items. If you use that tool, add a nonbreaking space as the list’s content.)
<li id="servicesPage">
<a href="#">Services</a>
<ul>
<li>
<ul>
<li><a href="#">Drop-down link 1.1</a></li>
<li><a href="#">Drop-down link 1.2</a></li>
<li><a href="#">Drop-down link 1.3</a></li>
<li><a href="#">Drop-down link 1.4</a></li>
</ul>
<ul>
<li><a href="#">Drop-down link 2.1</a></li>
<li><a href="#">Drop-down link 2.2</a></li>
USING LINKS AND CREATING NAVIGATION
227
5
decide which link you want it to spawn from and place an unordered link in
its parent list item, with a single list item of its own. Within that list item, place the
unordered lists for the columns in the drop-down, one after the other. Note that if
some columns have fewer items, they must still have the same number of list items.
However, list items can be left empty, despite this technically being a presentational
hack. (Note that HTML Tidy might have problems with this and trim the empty list
items. If you use that tool, add a nonbreaking space as the list’s content.)
<li id="servicesPage">
<a href="#">Services</a>
<ul>
<li>
<ul>
<li><a href="#">Drop-down link 1.1</a></li>
<li><a href="#">Drop-down link 1.2</a></li>
<li><a href="#">Drop-down link 1.3</a></li>
<li><a href="#">Drop-down link 1.4</a></li>
</ul>
<ul>
<li><a href="#">Drop-down link 2.1</a></li>
<li><a href="#">Drop-down link 2.2</a></li>
USING LINKS AND CREATING NAVIGATION
227
5
<li></li>
<li></li>
</ul>
<ul>
<li><a href="#">Drop-down link 3.1</a></li>
<li><a href="#">Drop-down link 3.2</a></li>
<li><a href="#">Drop-down link 3.3</a></li>
<li></li>
</ul>
</li>
</ul>
</li>
<li></li>
</ul>
<ul>
<li><a href="#">Drop-down link 3.1</a></li>
<li><a href="#">Drop-down link 3.2</a></li>
<li><a href="#">Drop-down link 3.3</a></li>
<li></li>
</ul>
</li>
</ul>
</li>
2. Next, edit the nested list. The list that contains the three lists that form the
columns of the drop-down needs styling. Having larger borders on multicolumn
drop-downs is a good idea, because it enables users to focus on the contents more
easily, hence the amended border setting in the following code block. The other
change is to the width setting, which must be a multiple of three (here, it’s set to
465px, meaning that each column will be 155 pixels wide). With multicolumn dropdowns,
it’s best to avoid making each column the same width as a tab, otherwise
the result will look strange.
#navigation li ul {
border: 2px solid #ad3514;
width: 465px;
position: absolute;
left: -10000px
}
3. Now, the list item within the nested list needs amending. For the previous exercise,
the #navigation li li rule dealt with the list items in the drop-down, but here it’s
primarily for the container of the three columns. Therefore, the height and width
settings need to be set to auto to enable the list item to stretch to fit its nested
items. The background image is superfluous, so it’s replaced by a flat color, and the
border-bottom pair is removed—the borders will be moved to list items within
the columns.
#navigation li li {
background: #d27448;
height: auto;
width: auto;
}
4. The link rules should be styled next. Since the links are now one level deeper in the
list, instances of li li in the selectors are changed to li li li. In this example,
this change isn’t technically necessary, but it always pays to keep your selectors as
precise and accurate as possible. For the link and visited states, padding settings
for the top-level links are overridden, as are width and height settings. For the
other states, the border used for the hover and active effects is replaced by a
change in background color. Note that the rule that originally had both the hover
and active states in the selector (#navigation li li a:hover, #navigation li
li a:active) now only requires the hover state (#navigation li li li a:hover),
because the rules have nothing in common.
#navigation li li li a:link, #navigation li li li a:visited {
text-transform: none;
padding: 10px;
width: 135px;
height: auto;
}
#navigation li li li a:hover {
background: #ad3514;
}
#navigation li li li a:active {
background: #ed1c24;
}
because the rules have nothing in common.
#navigation li li li a:link, #navigation li li li a:visited {
text-transform: none;
padding: 10px;
width: 135px;
height: auto;
}
#navigation li li li a:hover {
background: #ad3514;
}
#navigation li li li a:active {
background: #ed1c24;
}
5. Style the column list items. Add a rule to define a width and height for the column
list items, along with a bottom border. The last of those things makes it easier to
scan the rows within the list, while the width and height settings ensure that the
layout isn’t affected if the list items have no links within. (If the width and height
settings were omitted, the list items within the columns would show their bottom
borders only underneath their content’s width—and not at all if they were empty.)
The height setting is defined in ems rather than pixels, because this makes it possible
for the list items to stretch vertically if the web page’s text is resized.
#navigation li li li {
width: 155px;
height: 3em;
border-bottom: 1px solid #ad3514;
}
6. Finally, add a rule to float and define a width for the lists that comprise the containers
for the list items styled in the previous step.
#navigation ul ul ul {
border: 0;
width: 155px;
float: left;
position: relative;
}
**NOTE :Although the drop-down examples work in currently shipping browsers, neither works
as is in Internet Explorer 6, because that browser doesn’t enable you to do anything
with the hover state unless it’s on a link. To cater for that browser, JavaScript must be
used as a backup.
as is in Internet Explorer 6, because that browser doesn’t enable you to do anything
with the hover state unless it’s on a link. To cater for that browser, JavaScript must be
used as a backup.
Creating a drop-down menu
1. Edit the web page. For any link you want to have a drop-down menu spawn from,
nest an unordered list in its parent list item, as per the example in the following
code block.
<li id="servicesPageLink">
<a href="#">Services</a>
<ul>
<li><a href="#">Drop-down link one</a></li>
<li><a href="#">Drop-down link two</a></li>
<li><a href="#">Drop-down link three</a></li>
<li><a href="#">Drop-down link four</a></li>
</ul>
</li>
nest an unordered list in its parent list item, as per the example in the following
code block.
<li id="servicesPageLink">
<a href="#">Services</a>
<ul>
<li><a href="#">Drop-down link one</a></li>
<li><a href="#">Drop-down link two</a></li>
<li><a href="#">Drop-down link three</a></li>
<li><a href="#">Drop-down link four</a></li>
</ul>
</li>
2. Create the drop-downs. Test your page now, and it will look odd because nested list
items pick up the styles for the standard list items. To start dealing with this, add
position: relative; to the #navigation li rule, which will enable nested
absolute-positioned elements to take their top and left values from their containers
rather than the page as a whole. Then, after the existing rules in the CSS, add the
#navigation li ul rule shown in the following code block. By setting position to
absolute and left to a large negative value, the nested lists (i.e., the drop-down
menus) are placed offscreen by default, but are still accessible to screen readers.
Adding the top border helps visually separate the nested list from its parent button.
#navigation li ul {
border-top: 1px solid #ad3514;
width: 185px;
position: absolute;
left: -10000px
}
Next, add the following rule to bring the nested lists back when you hover the
cursor over the parent list item. Upon doing so, the list item’s descendant list’s
display value is set to block, and it’s displayed directly underneath the parent
item.
#navigation li:hover ul {
display: block;
left: 0;
}
#navigation li ul rule shown in the following code block. By setting position to
absolute and left to a large negative value, the nested lists (i.e., the drop-down
menus) are placed offscreen by default, but are still accessible to screen readers.
Adding the top border helps visually separate the nested list from its parent button.
#navigation li ul {
border-top: 1px solid #ad3514;
width: 185px;
position: absolute;
left: -10000px
}
Next, add the following rule to bring the nested lists back when you hover the
cursor over the parent list item. Upon doing so, the list item’s descendant list’s
display value is set to block, and it’s displayed directly underneath the parent
item.
#navigation li:hover ul {
display: block;
left: 0;
}
3. Style nested list items and links. Add the following rule to replace the default
background for list items with one specifically for the drop-down menus. The
border-bottom value visually separates each of the list items.
#navigation li li {
background: url(drop-down-menu-background.gif) repeat-y;
border-bottom: 1px solid #ad3514;
}
Next, add the following rule to style nested list item links, overriding the
text-transform and padding values of top-level list items.
#navigation li li a:link, #navigation li li a:visited {
text-transform: none;
padding-left: 10px;
}
4. The final step is to override the hover and active states. For this example, the
background value for top-level lists is overridden and the background image
removed (meaning the hover state for nested list links has no unique background).
To make the hover state stand out, the links are given a vibrant left border. This
also moves the text inward by the width of the border.
#navigation li li a:hover, #navigation li li a:active {
background: none;
border-left: 5px solid #f7bc1d;
}
These property values are common to both states, apart from the border color
(orange for the hover state and red for the active state, roughly matching the colors
applied to the top-level tab icons in the same states, although the orange is
brighter for the drop-downs so that they stand out more); therefore, add the following
rule to change only the left border’s color on the active state:
#navigation li li a:active {
border-left-color: #ed1c24;
}
(orange for the hover state and red for the active state, roughly matching the colors
applied to the top-level tab icons in the same states, although the orange is
brighter for the drop-downs so that they stand out more); therefore, add the following
rule to change only the left border’s color on the active state:
#navigation li li a:active {
border-left-color: #ed1c24;
}
Using CSS backgrounds to create a navigation bar
1. Edit the body element. Like in the previous exercise, edit the body start tag, adding
the id value shown.
<body id="homePage">
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;
}
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;
}
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.
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.
Creating a CSS-only tab bar that automates the active page
1. Edit the body element—in the HTML page, edit the body start tag, adding the class
value shown. Its significance will be explained later.
<body id="homePage">
value shown. Its significance will be explained later.
<body id="homePage">
2. Edit the body rule. In the CSS document, amend the body rule as shown to add a
light gray background:
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
background: #dddddd;
}
3. Style structural divs. Add the following #wrapper rule, which defines a set width for
the page, centers it, and sets the background color to white.
#wrapper {
width: 700px;
margin: 0 auto;
background: #ffffff;
}
Next, style the content div by adding the following rule, which adds a border to all
edges but the top one, and defines internal padding:
#content {
padding: 15px 15px 0;
border-right: 1px solid #898989;
border-bottom: 1px solid #898989;
border-left: 1px solid #898989;
}
These rules work slightly differently from those in the previous exercise. We want
the content borders to start right under the navigation, hence the padding
being applied to the top of the content div, rather than a margin below the
navContainer div.
the page, centers it, and sets the background color to white.
#wrapper {
width: 700px;
margin: 0 auto;
background: #ffffff;
}
Next, style the content div by adding the following rule, which adds a border to all
edges but the top one, and defines internal padding:
#content {
padding: 15px 15px 0;
border-right: 1px solid #898989;
border-bottom: 1px solid #898989;
border-left: 1px solid #898989;
}
These rules work slightly differently from those in the previous exercise. We want
the content borders to start right under the navigation, hence the padding
being applied to the top of the content div, rather than a margin below the
navContainer div.
4. Style the navContainer div. Add the following rule to style the navContainer div.
The font settings define a size and family. Avoid setting a line-height value,
because that makes it much harder to line up the tabs with the borders later. The
padding value applies some padding above the soon-to-be-created tabs, and the
border-bottom value finally surrounds all edges of the content div with a border.
Because the wrapper div has a white background, this currently shows through the
navContainer div, and so a background setting is applied, using the same background
color value as applied to the body element.
#navContainer {
font: 1.1em Arial, Helvetica, sans-serif;
text-align: center;
padding: 20px 0 0;
border-bottom: 1px solid #909090;
background: #dddddd;
}
5. Style the list. Add the following rule to style the list. The bottom padding value
(5px here) adds padding to the bottom of the list, and needs to be equivalent to
the padding value you want to be under the text in each tab.
#navigation ul {
padding: 0 0 5px;
}
Next, style the list items to make them display inline.
#navigation li {
display: inline;
}
6. Add the following rule to style the links. Most of the property values should be
familiar by now. Note how the border value applies a border to each link; this, in
tandem with the background value, gives all the links the appearance of background
tabs. The padding setting provides space around the link contents (and
note how the vertical padding value is the same as the bottom padding value in
step 5), and the margin-right setting adds some space between each tab.
#navigation a:link, #navigation a:visited {
text-transform: uppercase;
text-decoration: none;
color: #000000;
background: #bbbbbb;
border: 1px solid #898989;
padding: 5px 10px;
position: relative;
margin-right: 5px;
}
As per the previous exercise, the unwanted right-hand value for the rightmost tab
(in this case, the margin-right setting) can be overridden by using a contextual
selector that takes advantage of the id values defined in the HTML document’s
unordered list items.
#navigation #contactDetailsPageLink a:link, #navigation
å #contactDetailsPageLink a:visited {
margin-right: 0;
}
familiar by now. Note how the border value applies a border to each link; this, in
tandem with the background value, gives all the links the appearance of background
tabs. The padding setting provides space around the link contents (and
note how the vertical padding value is the same as the bottom padding value in
step 5), and the margin-right setting adds some space between each tab.
#navigation a:link, #navigation a:visited {
text-transform: uppercase;
text-decoration: none;
color: #000000;
background: #bbbbbb;
border: 1px solid #898989;
padding: 5px 10px;
position: relative;
margin-right: 5px;
}
As per the previous exercise, the unwanted right-hand value for the rightmost tab
(in this case, the margin-right setting) can be overridden by using a contextual
selector that takes advantage of the id values defined in the HTML document’s
unordered list items.
#navigation #contactDetailsPageLink a:link, #navigation
å #contactDetailsPageLink a:visited {
margin-right: 0;
}
7. Style other link states. Add the following two rules to define the other link states.
The first makes the text slightly lighter when a link has been visited. The second
brings back the default underline on the hover state, along with making the link’s
background slightly lighter.
#navigation a:visited {
color: #222222;
}
#navigation a:hover {
text-decoration: underline;
background: #cccccc;
}
8. Create page-specific overrides. Remember back in step 1, when you defined an id
value for the body element? This can now be used to automate the active tab 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: #ffffff;
border-bottom-color: #ffffff;
}
The declaration is simple: a white background is applied and the bottom border
color is changed to white. The grouped selector is more complex, so I’ll start by
explaining the first contextual selector, which is #homePage #homePageLink a:link.
What this means is, “Apply the declaration to the link within an element with an id
of homePageLink that’s in an element with an id of homePage.” In the page you’ve
been working on, the body element has an id of homePage, and the first list element
in the unordered list has an id of homePageLink. Therefore, the link within this list
item is automatically given the style, making it look like the active tab (since the
background blends directly into the content area).
The other selectors in the grouped selector behave in the same way (in each case
for the link and visited styles); so if, for example, you change the id value of the
body start tag in the HTML document to customerSupportPage and then refresh
the web page, you’ll see the third link become the active tab.
value for the body element? This can now be used to automate the active tab 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: #ffffff;
border-bottom-color: #ffffff;
}
The declaration is simple: a white background is applied and the bottom border
color is changed to white. The grouped selector is more complex, so I’ll start by
explaining the first contextual selector, which is #homePage #homePageLink a:link.
What this means is, “Apply the declaration to the link within an element with an id
of homePageLink that’s in an element with an id of homePage.” In the page you’ve
been working on, the body element has an id of homePage, and the first list element
in the unordered list has an id of homePageLink. Therefore, the link within this list
item is automatically given the style, making it look like the active tab (since the
background blends directly into the content area).
The other selectors in the grouped selector behave in the same way (in each case
for the link and visited styles); so if, for example, you change the id value of the
body start tag in the HTML document to customerSupportPage and then refresh
the web page, you’ll see the third link become the active tab.
Creating a simple horizontal navigation bar in CSS
1. Examine the web page. The web page for this exercise—graphical-navigation.
html—is designed for flexibility when it comes to styling elements on the page,
making it easy to change elements without touching the markup (this page is used
with a few modifications in subsequent exercises, too).
The page’s contents are placed within a wrapper div, within which are the masthead
and content divs. The latter contains some paragraphs, and the former
includes a navContainer div, which houses a navigation div, which in turn houses
the unordered list shown in the following code block. (This nesting of divs isn’t
required for all sites—often you can get away with a single div around the navigation
list—or, indeed, none at all, applying the id value of navigation to the list
itself; however, having an additional wrapper or two is often useful for more complex
layouts.)
The list is an unordered list. The main difference to previous lists is the inclusion of
an id value for each list item. For horizontal lists, especially those that will be highly
styled, this is worth doing, because it enables you to work all manner of CSS trickery
later on, which can benefit the web page. (In fact, some of the techniques can
be applied to vertical lists, too.)
<ul>
<li id="homePageLink"><a href="#">Home page</a></li>
<li id="servicesPageLink"><a href="#">Services</a></li>
html—is designed for flexibility when it comes to styling elements on the page,
making it easy to change elements without touching the markup (this page is used
with a few modifications in subsequent exercises, too).
The page’s contents are placed within a wrapper div, within which are the masthead
and content divs. The latter contains some paragraphs, and the former
includes a navContainer div, which houses a navigation div, which in turn houses
the unordered list shown in the following code block. (This nesting of divs isn’t
required for all sites—often you can get away with a single div around the navigation
list—or, indeed, none at all, applying the id value of navigation to the list
itself; however, having an additional wrapper or two is often useful for more complex
layouts.)
The list is an unordered list. The main difference to previous lists is the inclusion of
an id value for each list item. For horizontal lists, especially those that will be highly
styled, this is worth doing, because it enables you to work all manner of CSS trickery
later on, which can benefit the web page. (In fact, some of the techniques can
be applied to vertical lists, too.)
<ul>
<li id="homePageLink"><a href="#">Home page</a></li>
<li id="servicesPageLink"><a href="#">Services</a></li>
<li id="customerSupportPageLink"><a href="#">Customer support</a>
å</li>
<li id="contactDetailsPageLink"><a href="#">Contact details</a></li>
</ul>
å</li>
<li id="contactDetailsPageLink"><a href="#">Contact details</a></li>
</ul>
2. Edit the body and p rules. This design is going to have a classic feel, so in the CSS
file, edit the body rule to amend the font set, add a light gray background, and
amend the p rule to change the font size.
body {
font: 62.5%/1.5 Georgia, "Times New Roman", Times, serif;
background: #dddddd;
}
p {
font-size: 1.3em;
margin-bottom: 1em;
}
3. Style the structural divs. First, add a rule to style the wrapper div, as shown in the
following code block. This sets a fixed width for the div, centers it horizontally, and
applies borders on all edges except the top one. The background value provides a
white background for the page’s content. (Note that there’s plenty of explanation
about page layout in Chapter 7.) For the content area, add some horizontal
padding by adding the #content rule shown in the following code block.
#wrapper {
width: 700px;
margin: 0 auto;
border-right: 1px solid #898989;
border-bottom: 1px solid #898989;
border-left: 1px solid #898989;
background: #ffffff;
}
#content {
padding: 0 15px;
}
4. Style the navigation container by adding the following rule to style the
navContainer div. In this rule, the font style for the navigation bar’s links is set,
and the text-align value centers the content horizontally. The padding value
applies some padding at the top and bottom of the navContainer div, ensuring
its content doesn’t hug its edges—in design, the space is often as important as the
content, so don’t cram things in.
#navContainer {
font: 1.1em/1 Georgia, "Times New Roman", Times, serif;
background: #d7d7d7;
text-align: center;
padding: 7px 0px;
border-top: 1px solid #898989;
border-bottom: 1px solid #898989;
margin-bottom: 10px;
}
5. Style the list items. Now that the structure’s styled, it’s time to get cracking on the
list. First, add a rule to remove the default bullets from the unordered list within
the navigation div.
#navigation ul {
list-style: none;
}
Next, set the list items to display inline, as with the breadcrumbs. Add some horizontal
padding, and also, as shown, add a border to each item’s right-hand edge,
which will act as a visual separator, making each link more distinct.
#navigation li {
display: inline;
padding: 0px 9px;
border-right: 1px solid #aaaaaa;
}
If you test the page at this point, you’ll see that all the links have a right-edge border—
not a terrible crime—but from a design standpoint, the one at the far right
shouldn’t have one (after all, separators are only needed between pairs of links).
Luckily, because of the id values applied to the list items earlier, each one can be
individually styled, which also means an override can be applied to a specific link.
In this case, add the following rule, which removes the border from the list item
with an id value of contactDetailsPageLink:
#navigation #contactDetailsPageLink {
border-right: none;
}
list. First, add a rule to remove the default bullets from the unordered list within
the navigation div.
#navigation ul {
list-style: none;
}
Next, set the list items to display inline, as with the breadcrumbs. Add some horizontal
padding, and also, as shown, add a border to each item’s right-hand edge,
which will act as a visual separator, making each link more distinct.
#navigation li {
display: inline;
padding: 0px 9px;
border-right: 1px solid #aaaaaa;
}
If you test the page at this point, you’ll see that all the links have a right-edge border—
not a terrible crime—but from a design standpoint, the one at the far right
shouldn’t have one (after all, separators are only needed between pairs of links).
Luckily, because of the id values applied to the list items earlier, each one can be
individually styled, which also means an override can be applied to a specific link.
In this case, add the following rule, which removes the border from the list item
with an id value of contactDetailsPageLink:
#navigation #contactDetailsPageLink {
border-right: none;
}
6. The last thing to do is style the links. The following rules set the link text to uppercase,
removing the default underline and coloring them black by default. The links
are then gray on the visited state, have an underline on the hover state, and are
red on the active state.
#navigation a:link, #navigation a:visited {
text-transform: uppercase;
text-decoration: none;
}
#navigation a:link {
color: #000000;
}
#navigation a:visited {}
#navigation a:hover {
text-decoration: underline;
}
#navigation a:active {
color: #ff0000;
}
**NOTE :In this example, the color of the navigation links—which have no underline—is the
same as the body copy. While this would be a very bad idea for inline links, it’s fine for
the navigation links, because they’re obviously distinct from the text elsewhere on the
page, due to the background color and horizontal line that separates the navigation
area from the content area.
same as the body copy. While this would be a very bad idea for inline links, it’s fine for
the navigation links, because they’re obviously distinct from the text elsewhere on the
page, due to the background color and horizontal line that separates the navigation
area from the content area.
Creating a vertical navigation bar with collapsible sections
1. Set up the JavaScript. Create a new JavaScript document and attach it to the HTML
file via a script element in the head of the document. (In the example files, this
document has been named vertical-navigation-bar.js.) First, add the
JavaScript lines first shown in the “Enhancing accessibility for collapsible content”
section:
var cssNode = document.createElement('link');
cssNode.setAttribute('rel', 'stylesheet');
cssNode.setAttribute('type', 'text/css');
cssNode.setAttribute('href', 'javascript-overrides.css');
document.getElementsByTagName('head')[0].appendChild(cssNode);
Next, add the toggler script shown in the “Modularizing the collapsible content
script” section, but amend the target element as shown:
function toggle(toggler) {
if(document.getElementById) {
targetElement = toggler.nextSibling;
file via a script element in the head of the document. (In the example files, this
document has been named vertical-navigation-bar.js.) First, add the
JavaScript lines first shown in the “Enhancing accessibility for collapsible content”
section:
var cssNode = document.createElement('link');
cssNode.setAttribute('rel', 'stylesheet');
cssNode.setAttribute('type', 'text/css');
cssNode.setAttribute('href', 'javascript-overrides.css');
document.getElementsByTagName('head')[0].appendChild(cssNode);
Next, add the toggler script shown in the “Modularizing the collapsible content
script” section, but amend the target element as shown:
function toggle(toggler) {
if(document.getElementById) {
targetElement = toggler.nextSibling;
if(targetElement.className == undefined) {
targetElement = toggler.nextSibling.nextSibling;
}
if (targetElement.style.display == "block")
{
targetElement.style.display = "none";
}
else
{
targetElement.style.display = "block";
}
}
}
targetElement = toggler.nextSibling.nextSibling;
}
if (targetElement.style.display == "block")
{
targetElement.style.display = "none";
}
else
{
targetElement.style.display = "block";
}
}
}
2. Amend the list. To each top-level navigation link, add the onclick attribute, as
shown following. And to each second-level list that you initially want to be invisible,
add the class attribute shown. For any list you want to be visible, instead add
style="display: block;".
<li>
<a href="#" onclick="toggle(this); return false;">Section one</a>
<ul class="collapsibleList">
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
3. Add a style sheet. Create and save the style sheet document javascriptoverrides.
css, and add the following rule to initially hide any lists with the
collapsibleList class value in JavaScript-enabled browsers.
#navigation ul.collapsibleList {
display: none;
}
The following images show the results (which depict, from left to right, the
default, hover, and active states).
Subscribe to:
Posts (Atom)