CSS : Links and Navigation - [3.7] Creating Collapsible Menus

Problem

You want to hide a set of links and give the user a way to reveal those links when needed. For example, rather than two bullet lists of links, hide one (as shown in Figure 3-6) and let the user reveal it by clicking on a + sign as in Figure 3-7.

Figure 3-6. Preventing the second set of links from displaying

Figure 3-7. The links displayed when the link on the heading is clicked

Solution

CSS : Links and Navigation - [3.8] Building Horizontal Menus

Problem

You want to create a horizontal navigation menu out of an ordered set of links; Figure 3-8 shows the default, and Figure 3-9 shows what you want.

Figure 3-8. The default appearance of the links

Figure 3-9. The tab-based navigation

Solution

First create a properly constructed set of unordered links:

 <div id="navsite">

 <h5>Site navigation:</h5>

 <ul>

  <li><a href="/">Home</a></li>

  <li><a href="/about/">About</a></li> 

  <li><a href="/archives/">Archives</a></li>

  <li><a href="/writing/">Writing</a></li>

  <li><a href="/speaking/" id="current">Speaking</a></li> 

  <li><a href="/contact/">Contact</a></li>

 </ul>

</div>

Then set the CSS rules for the navigation structure, making sure to set the display property of the list item to inline:

#navsite h5 {

 display: none;

}

#navsite ul {

 padding: 3px 0; 

 margin-left: 0; 

 border-bottom: 1px solid #778; 

 font: bold 12px Verdana, sans-serif; 

}

#navsite ul li {

 list-style: none;

 margin: 0; 

 display: inline; 

}

#navsite ul li a {

 padding: 3px 0.5em; 

 margin-left: 3px; 

 border: 1px solid #778;

 border-bottom: none;

 background: #DDE;

 text-decoration: none;

}

#navsite ul li a:link {

 color: #448;

}

#navsite ul li a:visited {

 color: #667;

}

#navsite ul li a:link:hover, #navsite ul li a:visited:hover {

 color: #000;

 background: #AAE;

 border-color: #227;

}

#navsite ul li a#current {

 background: white; 

 border-bottom: 1px solid white;

}

Discussion

The first part of the Solution hides the heading. This is done because the visual representation of the tab navigation design is enough to inform users that these are navigation links:

#navsite h5 {

 display: none;

}

The next rule defines the padding and margin for the box that is created by the unordered list element, ul. The line that stretches across the bottom of the folder tabs is drawn by the border-bottom property (see Figure 3-10):

#navsite ul {

 padding: 3px 0; 

 margin-left: 0; 

 border-bottom: 1px solid #669; 

 font: bold 12px Verdana, Helvetica, Arial, sans-serif; 

}

CSS : Links and Navigation - [3.9] Creating Breadcrumb Navigation

Problem

You want to use a nesting listing as shown in Figure 3-14 to create a line of breadcrumb navigation, which is a set of links that lead back to the home page (see Figure 3-15).

Figure 3-14. The default rendering of the nested listing

Figure 3-15. The breadcrumb trail

Solution

The first step is to create a properly constructed set of nested, unordered links that represent the page's location in the site:

<div id="crumbs">

 <h3>Location:</h3> 

<ul>

 <li><a href="/">Home</a>

  <ul>

   <li><a href="/writing/">Writing</a>

    <ul>

     <li><a href="/writing/books/">Books</a>

      <ul>

       <li><a href="/writing/books/">CSS Cookbook</a></li>

      </ul>

     </li>

    </ul>

   </li>

  </ul>

 </li>

</ul>

</div>

Now set the display property of both the ul and the li of the lists:

#crumbs {

 background-color: #eee;

 padding: 4px;

}

#crumbs h3 {

 display: none;

}

#crumbs ul {

 display: inline;

 padding-left: 0;

 margin-left: 0;

}

CSS : Links and Navigation - [3.10] Creating Image-Based Rollovers

Problem

You want image-based rollovers to replace text links.

Solution

First, wrap the text inside the anchor element in a span:

<a href="/" id="linkhome"><span>Homepage</span></a>

Next, instead of JavaScript, use the background-image property within the pseudo-class selectors :hover and :active to swap the images (see Figure 3-17):

a span {

 display: none;

}

a:link { 

 display: block;

 width: 125px;

 height: 30px;

 background-image: url(btn.gif);

 background-repeat: no-repeat;

 background-position: top left;

}

a:link:hover { 

 display: block;

 width: 125px;

 height: 30px;

 background-image: url(btn_roll.gif);

 background-repeat: no-repeat;

 background-position: top left;

}

a:link:active { 

 display: block;

 width: 125px;

 height: 30px;

 background-image: url(btn_on.gif);

 background-repeat: no-repeat;

 background-position: top left;

}

Figure 3-17. The link with default, rollover, and active states

Discussion

Replacing text with an image has five benefits. First, it separates the text from the presentation. The image that contains more elaborately formatted type is part of the presentation and therefore controlled by a style, while the content in the markup remains pure text. The second benefit is that an image heading can be modified across a whole site by one change of the style sheet. The third benefit is that this method works for alternative styles and style sheet switching.

With a span element inside an element, it is possible to hide HTML text and let a design element, such as a rollover image, show as a background image. The fourth benefit of this Solution is that if a user doesn't have CSS enabled in his browser, the default HTML text will display instead, sparing the user from having to download unneeded images. The fifth benefit is that the solution is cleaner and simpler than one that involves JavaScript.

CSS : Links and Navigation - [3.11] Designing a Dynamic Visual Menu

Problem

You want to build a curved tab navigation menu that works even when text is resized; Figure 3-21 shows the default.

Figure 3-21. The dynamic folder tab navigation

Solution

First write the markup for the navigation menu:

<div id="header">

 <h2>Personal Site dot-com</h2>

 <h5>Site navigation:</h5>

 <ul>

  <li><a href="/">Home</a></li>

  <li><a href="/about/">About</a></li> 

  <li><a href="/archives/">Archives</a></li>

  <li><a href="/writing/">Writing</a></li>

  <li id="current"><a href="/speaking/">Speaking</a></li> 

  <li><a href="/contact/">Contact</a></li>

 </ul>

</div>

CSS : Links and Navigation - [3.12] Creating Contextual Menus

Problem

You have a navigation menu, created with Section 3.6. You want to highlight the current page's location on the menu, as in Figure 3-25.

Figure 3-25. The navigation set of links

Solution

Place an id attribute in the body element of the web document:

<body id="pagespk">

Also, place id attributes in the anchor elements for each link in the menu:

<div id="navsite">

  <h5>Site navigation:</h5>

  <ul>

   <li><a href="/" id="linkhom">Home</a></li>

   <li><a href="/about/" id="linkabt">About</a></li> 

   <li><a href="/archives/" id="linkarh">Archives</a></li>

   <li><a href="/writing/" id="linkwri">Writing</a></li>

   <li><a href="/speaking/" id="linkspk">Speaking</a></li> 

   <li><a href="/contact/" id="linkcnt">Contact</a></li>

  </ul>

</div>

With CSS, place two id selectors into one descendent selector to finish the menu (see Figure 3-26):

#pagespk a#linkspk {

 border-left: 10px solid #f33;

 border-right: 1px solid #f66;

 border-bottom: 1px solid #f33; 

 background-color: #fcc; 

 color: #333; 

}

CSS : Lists - [4] Introduction

From a wife handing a husband a grocery list as he steps out the door to a music channel presenting their top 100 worst songs of all time, lists help people stay focused and organized. In web design, it's the same case. HTML lists facilitate the presentation to our site visitors with organized content.

HTML lists, which group key elements together, can be ordered or unordered. Both types of lists are appealing in part because of the way they appear on the page. List items typically are indented and are keyed off by a marker, usually a filled circle for an unordered list or numbers for an ordered list (see Figure 4-1). With a few lines of HTML, a web coder can create a bulleted list on a web page without opening an image editor. Through CSS, you can create even more visually compelling lists.

Figure 4-1. The default rendering of a list

With a little CSS magic, we can tailor the presentation of the list to complement the design of a web page instead of relying on the browsers' default styling. While Chapter 3 covered navigation lists, this chapter illustrates how to change the numbering of list items, use your own image for a list marker, create a hanging indent that doesn't use a list marker, and more.

CSS : Lists - [4.1] Changing the Format of a List

Problem

You want to change the default list style, for example to change the bullet or numbering as in Figure 4-2.

Figure 4-2. The list markers changed to lowercase Roman numerals

Solution

Use the list-style-type property to change the bullet or type of counter:

li {

 list-style-type: lower-roman;

}

Discussion

The CSS 2.1 specification offers several styles for numbering a list, as shown in Table 4-1. Browsers typically vary the bullet style from one level of nesting to the next. To stop lists from presenting this traditional system of setting the list marker, change the value of list-style-type for each child list.

Table 4-1. Styles available for list markers

Style/value	Description	Browser support
square	Usually a filled-in square, although the exact representation isn't defined.	All major browsers
disc	Usually a filled-in circle, although the exact representation isn't defined.	All major browsers
circle	Usually an unfilled circle, although the exact representation isn't defined.	All major browsers
decimal	Starts with 1 and continues with 2, 3, 4, etc.	All major browsers
decimal-leading-zero	Starts with 01 and continues with 02, 03, 04, etc. The number of leading zeros may equal the number of digits used in a list. For example, 0001 might be used for a 5876-item list.	All major browsers, although leading zeros is optional
lower-roman	Starts with lowercase roman numbers.	All major browsers
upper-roman	Starts with uppercase roman numbers.	All major browsers
lower-alpha	Starts with lowercase ASCII letters.	All major browsers
upper-alpha	Starts with uppercase ASCII letters.	All major browsers
lower-latin	Starts with lowercase ASCII letters.	All major browsers
upper-latin	Starts with uppercase ASCII letters.	All major browsers
lower-greek	Starts with classical Greek letters, starting with alpha and then beta, gamma, etc.	Safari, Mozilla, Netscape 6+
hebrew	Starts counting with traditional Hebrew.	Safari, Mozilla, Netscape 6+
hiragana	Starts counting with the Japanese hiragana system.	Mozilla, Netscape 6+
katakana	Starts counting with the Japanese traditional katana system.	Mozilla, Netscape 6+
hiragana-iroha	Starts counting with the Japanese hiragana-iroha system.	Mozilla, Netscape 6+
katakana-iroha	Starts counting with the Japanese katakana-iroha system.	Mozilla, Netscape 6+
none	No marker is displayed.	All major browsers

CSS : Lists - [4.2] Writing Cross-Browser Indentation in Lists

Problem

Different browsers use different methods to indent lists. You want to specify left margins for your list that will render on all browsers.

Solution

Set both the margin-left and padding-left properties for the ul element:

ul {

 margin-left: 40px;

 padding-left: 0px;

}

Discussion

Different browsers use different methods to pad or indent a list. Mozilla and Netscape 6+ browsers indent a list on the padding, while Internet Explorer and Opera pad a list through the margin of a list.

To gain cross-browser effectiveness, you need to set the values for both the left margins and the padding for the list. Keep the amount of the indentation in one of the properties. Splitting the amount into two different properties results in inconsistent presentation across the browsers.

If you set the margin and padding to zero while the list is contained by only the body element, the browser renders the markers outside the viewport, making them invisible to the user. To make sure the markers are visible, set the left margin or left padding of the ul to at least 1em.

CSS : Lists - [4.3] Creating Custom Text Markers for Lists

Problem

You want to use a custom text marker in a list.

Solution

Indent the first line of text and insert the custom text, along with the right-angle quotes acting as pointers, through auto-generated content (see Figure 4-3):

ul {

 list-style: none;

 margin: 0;

 padding: 0 0 0 1em;

 text-indent: -1em; 

}

li {

 width: 33%;

 padding: 0;

 margin: 0 0 0.25em 0;

}

li:before {

 content: "\00BB \0020"; 

}

Figure 4-3. Text marker for a list

Discussion

Setting the list-style property to a value of none turns off the list marker usually associated with a list. Typically, a marker is appended to the left of each list item.

Instead of appending the marker to the list item, the custom text marker will be placed inline with the content of the item. Because the text marker is inside the list item, you need to push the marker out of the list item box. Indenting the first line of the marker with a negative value creates this push. The negative value for the text-indent property moves the first line to the left, whereas a positive value moves the indent to the right:

ul {

 list-style: none;

 margin: 0;

 padding: 0 0 0 1em;

 text-indent: -1em; 

}

The :before pseudo-element generates the text marker. Because the marker used in this example falls outside of the American Standard Code for Information Interchange (ASCII) 256-character set, its numerical equivalent needs to be determined.

However, because the ASCII character will be used in the CSS property and not on an HTML page, you need to write out the character in its escaped hexadecimal equivalent. You escape values in CSS by inserting a backslash before each hexadecimal value:

li:before {

 content: "\00BB \0020"; 

}

At press time, this solution worked in Mozilla, Netscape 6+, Safari, and Opera browsers because they can handle the creation of auto-generated content. Unfortunately, this list omits Netscape 4 and Internet Explorer for Windows and Macintosh.

To create a cross-browser effect, don't use auto-generated content. Instead, insert the text marker manually before the list item:

<ul>

 <li>&#187; I'm not the Same Person I was in the Database</li>

 <li>&#187; Past Breaches of Our Privacy</li>

 <li>&#187; The Best of Intentions</li>

 <li>&#187; Whatever Happened to Automation?</li>

 <li>&#187; The Smart Choice is Not Needing to Make One</li>

</ul>

The main drawback with this approach is that you have two markers for every list item. Although this isn't a mission-critical problem, it adds an unneeded design element to the web page.

CSS : Lists - [4.4] Creating Custom Image Markers for Lists

Problem

You want to use your own graphic for a list marker. For example, Figure 4-4 uses a diamond image.

Figure 4-4. Custom-made image markers for a list

Solution

Use the list-style-image property to use a graphic for a bullet marker:

ul {

 list-style-type: disc;

 list-style-image: url(bullet.gif);

}

Discussion

Set the location of the image you want to use as a marker as the value of the list-style-image property. You can't control the size of the image used as a list marker through CSS, so the image you specify should already be at the correct size. Images that are too large might interfere with the legibility of the list item or the marker might not be displayed entirely in the viewport, as shown in Figure 4-5. When creating custom bullets, make sure they are of the appropriate size to compliment the design of your web page.

Figure 4-5. A large image used for a marker isn't fully displayed

The value for the image marker is inherited, meaning that nested lists pick up the image as the marker as does the parent. To stop this inheritance, the value of none needs to be set for the child lists.

ul {

 list-style-type: disc;

 list-style-image: url(bullet.gif);

}

ul ul {list-style-type: none:}

Always include the list-style-type property to provide a fallback should the image not be usable. In the Solution the list marker disc is used if the image, bullet.gif, can't be displayed.

CSS : Lists - [4.5] Creating Inline Lists

Problem

You want to list items to be displayed within a paragraph, as in Figure 4-6 in which the bold, comma-separated list was generated from an HTML ul list.

Figure 4-6. The list formatted to appear inside a paragraph

Solution

Set the paragraphs before (and, if needed, after) the list:

<h3>

 Table of Contents

</h3>

<p>

 As proposed, the contents of the paper will contain the 

following sections:

</p>

<ul>

 <li>I'm not the Same Person I was in the Database</li>

 <li>Past Breaches of Our Privacy</li>

 <li>The Best of Intentions</li>

 <li>Whatever Happened to Automation?</li>

 <li class="last">The Smart Choice is Not Needing to Make One</li>

</ul>

<p>

 If there are any objections to how these sections are divided, 

please let <a href="nick@heatvision.com">Nicholas</a> know about 

it.

</p>

Through CSS, set the paragraph to display as inline elements and then use auto-generated content to show the commas between items and the period at the end of the list:

ul, li {

 display: inline;

 margin: 0;

 padding: 0;

 font-weight: bold; 

 font-style: italic;

}

li:after {

 content: ", "; 

}

li.last:after {

 content: ".";

}

p {

 display: inline;

}

Discussion

Through this method you retain the structure of lists and paragraphs, but you stretch CSS's capability to present the list inside a paragraph. However, you hide the obvious visual appearance of a list in favor of having the contents placed inside a paragraph.

CSS : Lists - [4.6] Making Hanging Indents in a List

Problem

You want the first line of a list item to begin further to the left than the rest of the list, thereby creating a hanging indent as in Figure 4-7.

Figure 4-7. Hanging indents on a list

Solution

Use a negative value for the text-indent property:

ul {

 width: 30%;

 padding: 0 0 0.75em 0; 

 margin: 0; 

 list-style: none;

}

li {

 text-indent: -0.75em; 

 margin: 0.33em 0.5em 0.5em 1.5em;

}

Discussion

Although list markers (numeric, image, or text) help to call attention to the actual list, sometimes you might not want to add those kinds of design elements to a list. Instead of relying on markers to carry off the list design, use a hanging indent.

In this Solution, you indent the list by three-quarters of an em unit, creating a visible but almost subtle hanging indent effect. You can push this design technique from subtle to the foreground by reducing the negative value further, or by increasing the font size of the text in the list item.

CSS : Lists - [4.7] Moving the Marker Inside the List

Problem

You want the list marker to be pulled inside the border of the list items, as in Figure 4-8. This creates an effect in which the text wraps around the marker.

Figure 4-8. Moving the marker inside the list item

Solution

Use the list-style-position property and set the value to inside:

li {

 list-style-position: inside;

 width: 33%;

 padding: 0;

 margin: 0;

}

ul {

 margin: 0;

 padding: 0 0 0 1em;

}

Discussion

Normally the list marker stands outside the text and the result is a very distinctive list. Some designs, however, might require the marker to appear as part of the text. A designer might choose to keep the marker inside, for example, to eliminate the need to have enough whitespace on the left side. Also, replacing the list marker with your own custom marker can visually enhance this recipe. For example, Figure 4-9 shows arrows rather than the default bullet.

Figure 4-9. Custom marker inside the list item

CSS : Forms - [5] Introduction

Forms make the Web go 'round. Without forms we wouldn't be able to log in to web-based email accounts, order books with one click, or trade stocks online. The downside to forms, however, is the generic way in which browsers display them. In short, HTML forms usually look ugly and boring. The default rendering of online forms usually includes beveled input and textarea fields, as well as boring-looking buttons. Such a look and feel might be acceptable if you are making a form for use on a small intranet or on a personal web page, but it is unacceptable if you want to project a professional image. Fortunately, with a few CSS rules, you can create forms that stand out from the pack. If you are designing a company web site, for instance, you can create forms in the same color as the company's logo. What's more, you can implement rollover effects on Submit buttons without having to replace the buttons with an image. CSS provides much control over the presentation of your forms and this chapter helps you get straight into the techniques. You will learn the settings for HTML user input elements such as buttons, text areas, and fields. Another technique covered is how to set up a submit-once-only button to keep site visitors from mistakenly sending several processes to the server. At the end of the chapter are two sample designs: a simple log-in form without tables and a long registration form with tables.

CSS : Forms - [5.1] Setting Styles for Input Elements

Problem

You want to change the appearance of input elements' background color. Such effects can take you from Figure 5-1 to Figure 5-2.

Figure 5-1. The form without styles

Figure 5-2. Styles applied to the input fields

Solution

Use a class selector to design the input elements of the form:

<h2>Simple Quiz</h2>

 <form action="simplequiz.php" method="post">

 <p>

  Are you 

   <input type="radio" value="male" name="sex" 

class="radioinput">

  Male or 

   <input type="radio" value="female" name="sex" 

class="radioinput"> 

  Female?

 </p>

<p>

 What pizza toppings do you like? <input type="checkbox" name="" 

value="l" class="checkbxinput"> Pepperoni <input type="checkbox" 

name="" value="mushrooms" class="checkbxinput"> Mushrooms <input 

type="checkbox" name="" value="pineapple" class="checkbxinput">

 Pineapple

 </p>

CSS : Forms - [5.2] Setting Styles for textarea Elements

Problem

You want to set styles for textarea elements in a web form to change the text's color, size, weight, and other properties of the element, as in Figure 5-4.

Figure 5-4. A textarea element with styles applied

Solution

Use a type selector to associate styles with textarea elements:

textarea {

 width: 300px;

 height: 100px;

 background-color: yellow;

 font-size: 1em;

 font-weight: bold;

 font-family: Verdana, Arial, Helvetica, sans-serif;

 border: 1px solid black;

}

Discussion

Associating styles to textarea elements is fairly straightforward through the use of a type selector:

textarea {

 background-color: blue;

}

By adding the :focus pseudo-class, you can change the style of the active textarea field:

textarea:focus {

 background-color: green;

}

So, as a user fills out a form, the textarea field he is currently filling out will change color.

The browsers that currently support :focus are Netscape Navigator 6+ and Opera 7.

CSS : Forms - [5.3] Setting Styles for Select and Option Elements

Problem

You want to alter the look of list menus in a form by changing the color and font, as in Figure 5-5.

Figure 5-5. The select and option elements with styles applied

Solution

Use a type selector to associate styles with select elements:

select { 

 color: white; 

 background-color: blue;

 font-size: 0.9em;

}

option {

 padding: 4px;

}

Discussion

CSS : Forms - [5.4] Creating Form Buttons

Problem

You want to stylize the color, padding, borders, and rollover effects for Submit and Reset buttons on a form. Figure 5-7 shows a form without styles applied to the buttons, and Figure 5-8 shows the form with stylized buttons.

Figure 5-7. The form buttons without styles applied

Figure 5-8. The form buttons with styles applied

Solution

First use a class selector to design the buttons:

<form action="simplequiz.php" method="post">

 <label for="question">Who is president of the U.S.?

</label>

 <input type="text" name="question" id="textfield"

 value="Type answer here" /><br /> 

 <input name="reset" type="reset"  value="Reset"

 class="buttonReset" />

 <input type="submit" name="Submit" value="Submit" 

class="buttonSubmit" />

</form>

Then use CSS to stylize the buttons:

.buttonReset {

 color: #fcc;

 background-color: #900;

 font-size: 1.5em;

 border: 1px solid #660;

 padding: 4px;        

}

CSS : Forms - [5.5] Setting Up a Submit-Once-Only Button

Problem

You want to keep people from clicking the Submit button more than once.

Solution

First create a class for keeping the button from being displayed:

.buttonSubmitHide {

 display: none;

}

Then use the following JavaScript programmed to switch styles by class selectors:

<script language="JavaScript" type="text/javascript">

function classChange(styleChange,item) {

 item.className = styleChange;

}

</script>

Now trigger the function by using an onsubmit event to remove the Submit button from the web document:

<h2>Order Confirmation</h2>

<form action="login.php" method="post"

 onsubmit="classChange('buttonSubmitHide',submit); 

return true">

 <div align="center">

  <p>Are you sure you want to purchase 12 cans of soda over the 

Web?</p>

  <label for="uname">Final Price:</label>

  <input type="text" name="uname" id="uname" value="$7.95" />

<br />

   (includes tax, s+h extra)<br />

  <input type="submit" name="submit" value="submit" 

class="buttonSubmit" />

 </div>

</form>

Discussion

The JavaScript function in the Solution triggers a change in which a style is applied to the element. You must use the form's onsubmit event to execute the function so that the form's action will still be executed. If the function were triggered with an onclick event on the Submit button, some browsers would execute only the class-changing function. Then, because the button is no longer visible, the user would not be able to trigger the form.