asp.net

How to use lists to create a navigation system with sub-navigation with CSS

You can use a sub-list to display navigation with sub-navigation. The next example is based in the approach discussed in the article How to use a structural list as a navigation menu with CSS. In the next test file the modified part is in bold:

File test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<head>

<title> How to …

Learn more

How to create rollover navigation with CSS

You can use CSS :hover pseudo-class selector, to create a an attractive rollover effect—when a user holds their cursor over the button, it displays in a different way. Using the list navigation example from the article How to use a structural list as a navigation menu with CSS, you can add the next CSS line in …

Learn more

How to create a button-like navigation with CSS

You can use CSS to create a button-like navigation. The effect is based on usage of the CSS border properties.

You can use the next test file to see how it works:

File test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<head>

<title>How to create a button-like navigation with CSS</title>

Learn more

How to use lists to make a horizontal menu with CSS

You may need to create a Web site with a horizontal menu close to the top of the document. In this case you can follow the next steps:

1. Prepare a list which you will use as menu. You can use the next test.html file as example.

File test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html …

Learn more

How to use a structural list as a navigation menu with CSS

You can use a list to mark up places that users can visit on the site. You have to follow the next steps:

1. Create your list, placing each navigation link inside an <li> tag.

2. Wrap this list in a <div> with an appropriate ID.

Learn more

How to use accesskey hints with CSS

You may need to include access keys in your Web forms to allow users to jump quickly to a certain place by pressing a combination of Alt and another key. The operating system convention that indicates which letter of a key word is its access key is to underline the given letter.

You can use a similar technique on …

Learn more

How to group related things with CSS

You can group related things by using the <fieldset> and <legend> tags. The tags are a great way to group related information in a form. These tags provide an easy means to group items visually, and are understood by screen readers and text-only devices, which can see that the tagged items are logically grouped together. The …

Learn more

How to lay out a two-column form with CSS

You can lay out your forms without table. In the markup used to create your form you should wrap each row in a <p> tag>. The next test file shows this:

File test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<head>

<title>How to lay out a two-column form with CSS</title>

<link …

Learn more

How to apply different styles to fields in a single form with CSS

The HTML<input> tag has many different types. In this case if you apply a style for <input> tag it will be the same for your text fields, checkboxes and buttons. The next test files and picture illustrate this:

File test.css

form {

border: 1px dotted #aaaaaa;

padding: 3px 6px 3px 6px;

}

input {

color: #00008B;

Learn more

How to style form elements with CSS

Form elements without style are displayed according to browser and operation system defaults. The form shown in the next picture is displayed according to Mozilla Firefox’s default style on Windows 7 operating system.

A Web form without style

The next test file is used for the form above:

File Test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<head>

Learn more