Navigation Instructions  Total Training Advanced

Attach li tag to list (highlight list commands at top)

Change Define li tag (open up Css new box - type in li (no * or #) Make Changes
You can specify li within a div (example: #navbar li)

Selector: li
Margins top bottom 10
left right 15
Text Garamond Large Bold
List Decoration - none (no bullet)

Modify a (anchor) - no underline

Earlier Instructions

1. Name your div #navbar


2. Type your navigation titles with Enter after each

Home
About
Feature Properties

3. Make into an unordered list Highlight and click list buttons at top
<ul>
<li>Home</li>
<li>About</li>
</ul>

Alternative Type the list horizontally Home about etc Then highlight and use the unordered list button >
Only one button will show > Before each catagory press Enter until they all have buttons

4. New CSS #navbar ul
> box - margins and padding to 0
> List - list type to None (gets rid of bullits)


5. New Css #navbar ul li
>layout > display > inline


6. Change each into links Make sure all have "a" reference


7. New CSS #navbar ul li a
> layout > Float Left
> Box > Padding 4?
>backgound color
> change text if want None for underline if you want

Images
With JPEG we are compressing size with gif we are reducing colors

Put width in file name to help you later

Navigation Bar - Make unordered list - CSS to 0 #navbar ul
#navbar ul li is the next Css Under layout setting display > inline
Next create links - New style #navbar ul li a the a for anchor
Float option left > Box (padding left-right top-bottom >Background &text color

Roll over effect - New Style > #navbar ul li a:hover (change color)

When you use hyperlink maping you get a boarder around the image - make a border (0) style to get rid of it