Building Horizontal Menus using css

< Day Day Up >

Recipe 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. 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; } The declaration that makes this horizontal navigation work with the unordered list is display: inline for the list item: #navsite ul li { list-style: none; margin: 0; display: inline; } Instead of stacking the list items on top of each other by default, the browser now lays out the list items as it would text, images, and other inline elements (see Figure 3-11). To create the look of the folder tab, use the border property in the following CSS rule: #navsite ul li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #669; border-bottom: none; background: #ccf; text-decoration: none; } The first border property is a shorthand property that dictates a solid, one-pixel border around the link. However, immediately following the border property is the border-bottom property, which tells the browser not to display a border beneath the link. The value of the border-bottom property is displayed over the border shorthand property (as shown in Figure 3-12). This overwriting occurs because the border-bottom declaration overrides the values in the border declaration because of the order in which they are declared. After you've created the look of the border tab, set the color of the text links and rollover states: #navsite ul li a:link { color: #339; } #navsite ul li a:visited { color: #666; } #navsite ul li a:link:hover, #navsite ul li a:visited:hover { color: #000; background: #aae; border-color: #336; } The final CSS rule defines how the "current" link appears. This style is applied to the link that represents the page being viewed by the user (see Figure 3-13): #navsite ul li a#current { background: white; border-bottom: 1px solid white; }

we drink green tea

Creating Collapsible Menus use css and javacript

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 ( and let the user reveal it by clicking on a + sign as in

Solution

First, set up the HTML links to be collapsible with an id attribute in the ul element:

<h5>Interesting Links (+/-)</h5>  <ul id="menulink">   <li><a href="http://www.ora.com/">O'Reilly</a></li>   <li><a href="http://www.slashdot.org/">Slashdot</a></li>            <li><a href="http://www.apple.com/">Apple</a></li>   <li><a href="http://www.microsoft.com/">Microsoft</a></li>   <li><a href="http://www.mozilla.org/">Mozilla</a></li>   </ul>

Then create a CSS rule to prevent the second set of links from displaying when the page is first loaded:

#menulink {   display: none;  }

Now add the following JavaScript function that toggles the list of links by swapping the value of display from block to none, or vice versa:

function kadabra(zap) {   if (document.getElementById) {    var abra = document.getElementById(zap).style;    if (abra.display == "block") {     abra.display = "none";     } else {     abra.display = "block";    }     return false;    } else {    return true;   }  }

Insert an anchor element with a JavaScript onclick event around the heading. When a user clicks the link, the click triggers the JavaScript function:

<h5><a href="#" onclick="return kadabra('menulink');">  Interesting Links (+/-)</a></h5>

Discussion

The JavaScript in this function uses getElementbyId to toggle the display of the list of menu links. This technique can be scaled to show multiple menus or portions of a web document without adding additional lines of JavaScript:

<p>Are you sure you want to know the truth? If so,   follow <a href="#" onclick="return kadabra('spoiler'); ">this   link.</a></p>  <p id="spoiler">Darth Vadar was Luke's father!</p>

Note that this technique works in Netscape Navigator 6+, Opera 7.5+, Internet Explorer for Windows 5+, and Safari.

--
we drink green tea

Creating Nongraphical Menus with Rollovers

 

Problem

You have a list of links, but want to build an elegant menu as in 

Solution

First, mark up the list of links in an unordered list so that they wrap around a div element with an id attribute:

<div id="navsite">   <p>Site navigation:</p>   <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/">Speaking</a></li>    <li><a href="/contact/">Contact</a></li>   </ul>  </div>

Next, use the border property on the anchor elements to create the bulk of the design:

#navsite p {   display: none;  }  #navsite {   font-family: Verdana, Helvetica, Arial, sans-serif;   font-size: 0.7em;   font-weight: bold;   width: 12em;    border-right: 1px solid #666;    padding: 0;    margin-bottom: 1em;    background-color: #9cc;    color: #333;   }  #navsite ul {   list-style: none;    margin: 0;    padding: 0;   }  #navsite ul li {   margin: 0;    border-top: 1px solid #003;  }  #navsite ul li a {   display: block;    padding: 2px 2px 2px 0.5em;    border-left: 10px solid #369;    border-right: 1px solid #69c;   border-bottom: 1px solid #369;   background-color: #036;    color: #fff;    text-decoration: none;    width: 100%;   }  html>body #navsite ul li a {    width: auto;   }  #navsite ul li a:hover {   border-left: 10px solid #036;   border-right: 1px solid #69c;   border-bottom: 1px solid #369;    background-color: #69f;    color: #fff;   }

Discussion

A menu makes it easier for visitors to navigate your site. To help the user find the navigation menu, stylize the links so they stand out from the regular text. Do this by using the id selector when writing the CSS rules. As the solution shows, successfully creating the menu requires some browser bug workarounds as well as straightforward CSS design implementation.

In the division marked with the div, a line of text labels the set of links as navigational links:

<p>Site navigation:</p>

If the user's browser doesn't have CSS support, the line of text is visible. To hide the text from CSS-enabled browsers, set the display to none:

#navsite p {   display: none;  }

The next step is to stylize the div element that encapsulates the set of menu links. In this CSS rule, styles are set for the links to inherit properties set on the div element. Also, set the values of the width, border-right, padding, and margin-bottom properties to keep the menu from bunching up:

#navsite {   font-family: Verdana, Helvetica, Arial, sans-serif;   font-size: 0.7em;   font-weight: bold;   width: 12em;    border-right: 1px solid #666;    padding: 0;    margin-bottom: 1em;    }

The next CSS rule eliminates any potential problems with the indentation of lists (see Recipe 4.2) by setting the margin and padding to 0 as well as by eliminating any list markers:

#navsite ul {   list-style: none;    margin: 0;    padding: 0;   }

In the following rule you're making sure margins aren't applied to each list item. This CSS rule also places a one-pixel border at the bottom of the list item. This design element helps reinforce the separation of the list items:

#navsite ul li {   margin: 0;    border-top: 1px solid #003;  }

The next rule sets the styles for the links. By default, links are inline elements. The links need to be rendered as block-level elements so that the entire part of the "link design" becomes clickable, and not just the text. Setting the display property to block accomplishes this transformation.

Use the following declarations to stylize the appearance of the borders, text color, text decoration, and width:

#navsite ul li a {   display: block;    padding: 2px 2px 2px 0.5em;    border-left: 10px solid #369;    border-right: 1px solid #69c;   border-bottom: 1px solid #369;   background-color: #036;    color: #fff;    text-decoration: none;    width: 100%;   }

The final declaration for the links sets the width at 100%. This rule was set to make sure Internet Explorer for Windows makes the entire area clickable. The drawback with this rule is that it causes problems in Internet Explorer 5 for Macintosh and in Netscape Navigator 6+. To work around this problem, use the child selector, which Internet Explorer for Windows can't process (see Recipe 10.2), to reset the width of the link:

html>body #navsite ul li a {    width: auto;   }

The last CSS rule states the styles for the rollover effect of the links:

#navsite ul li a:hover {   border-left: 10px solid #036;   border-right: 1px solid #69c;   border-bottom: 1px solid #369;    background-color: #69f;    color: #fff;   }

An unordered list is a perfect way to structure a menu of links in both theory and practical application. On the one hand, a set of links is a set of unordered items. And using unordered lists for navigation creates a solid structure for your web document based on both logic and semantically correct markup.

On the other hand, with the links set in an unordered list, it's easier to style the links into a menu presentation than it is to style a series of div elements:

<div id="navsite">   <p>Site navigation:</p>   <div><a href="/">Home</a></div>   <div><a href="/about/">About</a></div>   <div><a href="/archives/">Archives</a></div>   <div><a href="/writing/">Writing</a></div>   <div><a href="/speaking/">Speaking</a></div>   <div><a href="/contact/">Contact</a></div>  </div>

--
we drink green tea

Creating Rollovers Without JavaScript

Problem

You want to create a simple rollover effect without using JavaScript to swap images.

Solution

Use the :hover and :active pseudo-classes to create the rollover:

a:link {   color: #777;    text-decoration: none;  }  a:visited {   color: #333;   text-decoration: none;  }  a:link:hover, a:visited:hover {   color: #777;   background-color: #ccc;  }  a:link:active, a:visited:active {   color: #ccc;   background-color: #ccc;  }

--
we drink green tea

Changing Cursors css

Problem

You want to change the cursor when the mouse pointer rolls over a link, as in Figure 3-3.

Solution

Use the cursor property to change the cursor:

a:link, a:visited {   cursor: move;    }

Discussion

The cursor property can take multiple values, as listed in Table 3-2. However, support for these values varies from browser to browser. Opera 7 and Internet Explorer for Windows 5.5+ support the cursor property. While Netscape Navigator 6+ supports most values, the browser doesn't support the uri. Also, in Navigator the cursor property isn't inherited to child elements from the parent.

Table 3-2. Cursor property values and their descriptions
Value	Description	Sample
auto	The cursor changes to an image that is determined by the browser.
crosshair	Two perpendicular lines intersecting in the middle; this is similar to an enlarged plus sign.
default	Platform-dependent cursor that in most browsers is rendered as an arrow. Browser vendors or computer operating systems may dictate a different cursor style.
pointer	Used to illustrate that the mouse pointer is over a link; sometimes rendered as a hand with an extended index finger. Browser vendors or computer operating systems may dictate a different cursor style.
move	Illustrates that an element can be moved; sometimes rendered as a crosshair with arrowheads on the tips or a five-fingered hand.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize,s-resize, w-resize	An arrow illustrating the direction in which a side can be moved; for example, se-resize indicates a southeast direction.
text	Illustrates that text can be edited; sometimes rendered like an I-beam commonly used in word processing programs.
wait	Illustrates that the computer is busy; sometimes rendered as an hourglass.
progress	Illustrates that the computer is busy, but the user still can interact with the browser.
help	Illustrates that information or help is available, often at the destination of the link; sometimes rendered as a question mark or an arrow with a question mark.
<uri>	The cursor can be swapped with an externally defined cursor like an image, Windows cursor file, SVG cursor, etc.	N/A

The code to include a custom cursor is similar to that used to set a background image on an element:

a.help:link , a.help:visited{   cursor: url(bewildered.gif);  }

While employing different cursors most users will find changes to their routine surfing habits between a whimsical annoyance and an extreme aggravation, depending on how excessive your implementation is. (This reaction can be noted as being similar to the use of the blink property in Recipe 3.7.) Therefore, change the cursor a user is accustomed to seeing at your own risk.

--
we drink green tea

Setting Text to Blink css javascript

Setting Text to Blink

Problem

You want to set text to blink in a web page.

Solution

The first part includes the blink JavaScript function:

function blinky(delay){   var el = document.body.getElementsByTagName('SPAN');   for (var i = 0; i < el.length; i++){    if (el[i].className == 'blink'){     el[i].style.visibility = el[i].style.visibility ==   'hidden' ? 'visible' : 'hidden';    }   }   setTimeout('blinky(' + delay + ')', delay);  }

In the body element, place the onload event to execute the function when the document has fully loaded:

<body onload="blinky(1000);">

Then wrap a span element with the class attribute set to blink around the text you want to animate:

<span class="blink">Hello, world!</span>

Discussion

The blink value for the text-decoration property shares an unusual distinction with other text-decoration values: browsers don't need to support blink to be standards-compliant in terms of support for this CSS property. If the browser engineers want to support it, that's OK, and if they don't, that's OK as well.

Web developer Dan Thomas from the Babble List (http://www.babblelist.com/) created this standards-based solution to give blink functionality without requiring that the browser support the blink property. Note that this workaround requires JavaScript, so the function will not work if the user has JavaScript turned off in her browser preferences.

--
we drink green tea

Removing Underlines from Links

Recipe 3.1 Removing Underlines from Links

Problem

Links in a web document are underlined. You want to remove the underlining, as shown in Figure 3-1.

Solution

Use the text-decoration property with the pseudo-class selector for unvisited and visited links:

a:link, a:visited {   text-decoration: none;  }

Discussion

Use the :link and :visited pseudo-classes to apply styles to links within a web document. The :link pseudo-class applies to links that the user has not visited. The :visited pseudo-class corresponds to links that the user has visited.

The text-decoration property can take up to five settings, shown in Table 3-1.

Table 3-1. Text-decoration values
Text-decoration values	Result
underline	A line is placed beneath the text.
overline	A line is placed above the text.
blink	The text flashes.
line-through	A line is placed through the middle of the text.
none	No effect is associated with the text.

These text-decoration properties are often used to enhance the presentation of a web page. Instead of having all the links in a document underlined, designers opt to set text-decoration to none in conjunction with changing the link's background color, text color, or both:

a:link, a:visited {   text-decoration: none;   background-color: red;   color: white;  }

In order to complement the design for those site visitors who might have color blindness and therefore might not be able to determine a link color from the default color of regular HTML text, designers also set the weight of the font to bold:

a:link, a:visited {   font-weight: bold;   text-decoration: none;   color: red;  }

The value of line-through might be an interesting element added to a page design used to indicate that a link has already been visited by a user, like an item scratched off a to-do list:

 a:link {   font-weight: bold;   text-decoration: none;   color: red;  }  a:visited {   font-weight: bold;   text-decoration: line-through;   color: black;  }

--
we drink green tea

css Placing a Page Border

Use the border property on the body element:

body {   margin: 0;   padding: 1.5em;   border: 50px #666 ridge;  }

Discussion

The border property is a shorthand property, in that it enables you to set the width, color, and style of the border around an element in one step instead of three. If you didn't use this shorthand property in the preceding Solution, you would have to replace the line that reads border: 50px #666 ridge; with the following three lines:

border-width: 50px;  border-color: #666;  border-style: ridge;

You can create a framing effect with other styles as well, such as dotted, dashed, solid, double, groove, inset, and outset 

--
we drink green tea

Coloring the Scrollbar css

You want to adjust the color of the scrollbar on a browser's viewport, or the window on the browser.

Solution

Use the properties that manipulate scrollbar colors in browsers that support it:

body,html {   scrollbar-face-color: #99ccff;   scrollbar-shadow-color: #ccccff;   scrollbar-highlight-color: #ccccff;   scrollbar-3dlight-color: #99ccff;   scrollbar-darkshadow-color: #ccccff;   scrollbar-track-color: #ccccff;   scrollbar-arrow-color: #000033;  }

--
we drink green tea

Changing Line Spacing css

Recipe 1.19 Changing Line Spacing Problem You want to leave more or less space between lines.  Solution Use the line-height: P { line-height: 1.5em; } Discussion As the line-height value increases, the distance between the lines of text grows. As the value decreases, the distance between the lines of text shrinks and eventually the lines overlap each other. Designers refer to the line height as the leading. A line-height value can be a number and a unit such as points, just a number, or a number and a percentage symbol. If the line-height value is just a number, that value is used as percentage or a scale unit for the element itself as well as for child elements. Negative values aren't allowed for line-height. The following example effectively sets the font-size to 12px and the line-height to 14.4px ((10px * 1.2) * 1.2px = 14.4px): body { font-size: 10px; } p { font-size: 1.2em; line-height: 1.2; } You also can set the line-height property with the shorthand font property when paired with a font-size value. The following line transforms any text in a p element to have a font size of 1em, to have a line-height of 1.5em, and to display in a sans-serif typeface: p { font: 1em/1.5em sans-serif; }

--
we drink green tea

Creating a Highlighted Text Effect

Solution

Use the strong element to mark up the portions of text you want to highlight:

<p>The distribution of messages from the selling of propaganda   to the giving away of disinformation takes place at a blindingly   fast pace thanks to the state of technology... <strong>This   change in how fast information flows revolutionizes the   culture.</strong></p>

--
we drink green tea

Styling the First Line of a Paragraph with an Image

Use the background-image property within the :first-line pseudo-element:

p:first-line {   font-size: 2em;   background-image: url(background.gif);  }

--
we drink green tea

The first line set to bold css

Recipe 1.16 Styling the First Line of a Paragraph Problem You want to set the first line of a paragraph in boldface,  olution Use the :first-line pseudo-element to set the style of the first line: p:first-line { font-weight: bold; }

--
we drink green tea

First Line of a Paragraph css

--
we drink green tea

jquery position

Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

• version added: 1.2.position()

The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document. When positioning a new element near another one and within the same containing DOM element, .position() is the more useful.

Returns an object containing the properties top and left.

Example:

Access the position of the second paragraph:

 <!DOCTYPE html> <html> <head>   <style>    div { padding: 15px;}   p { margin-left:10px; }   </style>   <script src="http://code.jquery.com/jquery-1.4.4.js"></script> </head> <body>    <div>   <p>Hello</p> </div> <p></p>  <script> var p = $("p:first"); var position = p.position(); $("p:last").text( "left: " + position.left + ", top: " + position.top ); </script>  </body> </html>

--
we drink green tea