title besides title

 

Tuesday, December 18, 2012

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; 

}
Read more »
at 11:43 AM

Monday, December 17, 2012

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.
at 11:32 AM

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
at 11:31 AM

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.
at 11:30 AM

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.
at 11:29 AM
Subscribe to: Posts (Atom)