about navbars

css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers

Advanced CSS from Google's cache of a broken .edu site:-

Use the list below to jump to different sections or scroll down and use the links at the bottom of each page to navigate to the next section.

1. Media Type
2. Z - Index
3. DIV overflow (scrolling text)
4. Display Property
5. Lists as NavBars
6. Multiple link styles
7. Floating rules / fluid layout

Display Property
The display property is used to define the kind of display box an element generates during layout. Gratuitous use of display with a document type such as HTML can be dangerous, as it upsets the display hierarchy already defined in HTML. In the case of XML, which has no built-in hierarchy, display is indispensable.

Examples
h1 {display:block}
li {display: list-item}
img (display:inline}
.hide {display:hidden}

To see inline and hidden in action click this link to w3schools and follow the on screen instructions.


Lists as NavBars
Utilizing the display property + inline value in conjunction with list elements and a wee bit of CSS is an awesome way to create navigation menus that rollover in interesting ways and never touch Photoshop once. This nav bar was created in such a fashion. On this page we will learn how to make this nav bar and look at resources to develop your own nav bar styles.

• Item one
• Item two
• Item three
• Item four
• Item five

Copy and paste the following CSS into the section in the of a Dreamweaver document. Notice how the display property of the #navcontainer ul li id is set to inline. By default a list is vertical, implementing the display:inline creates the horizontal navbar.

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}

Copy and paste the following HTML code into the Dreamweaver document. Don't forget to add in your own links and change the menu items from "item one" (etc) to something in line (no pun intended) with the content of your project:

• Item one


• Item two


• Item three


• Item four


• Item five

Maxdesign.com has a plethora of links and nav bars to choose from. Check out both the Listmania and Listmania 2 pages for further examples of list based navigation and a range of different rollover styles.