Expression Web help

• About
• Expression Web Forum
• Expression web resources
• CSS
• Build Expression Web Template 1
• Build Expression Web template 2
• Build Expression Web Template 3
• Style horizontal Navigation with CSS
• Style vertical menu with CSS
• Style the main content area
• Style the footer
• Centre a page
• .style1
• Build Expression Web DWT Tutorial
• Graphic Template example
• Free Expression Web Templates
• Add RSS to Expression Web
• Expression web forms
• Contact
• RSS feeds
• 10 Tips
• Page includes
• Insert flash in expression web
• Expression web dropdown menu
• Use XML with Expression Web
• Point and click easy drop-down menu's
• Table Based Layouts
• ASP.NET Ad Rotator
• Display Data
• Search database using a text box
• Transparent Text
• Bold text - Formatting
• Date and time
• Who are you

Part 3a

Styling the navigation bar

To style the #top_nav navigation links, we are going to use CSS to make button style links that change colour when hovered over. This is a great way of styling links and a later tutorial will explain how to use graphics for your links thus making real buttons that only require 2 images! But more of that later.

Below is an unordered list.

• list one
• list two
• list three

This is the html that Expression Web produces:

<ul>
<li>list one</li>
<li>list two</li>
<li>list three</li>
</ul>

We will use this type of list to create our link and button effect. Making CSS menus is not very difficult and whilst there are other methods of creating menus, this is probably the most simple.

We must remember that all the html we or Expression Web writes is in fact already styled or controlled by default by your computer.

The list above is a typical example. Whilst it has some CSS controlling it, it is typical of a Bulleted list. Your computer will tell a bulleted (ul) list to be indented from the left and have bullets (markers) before the text. Like the one above. But CSS allows us to do a lot more. We could use an image as the bullet/marker. We can move the list to the left or right, change the font size and lots more.

Once you have completed this tutorial, you will have a navigation set that can go onto produce an infinite number of variations to use on another site or template.

Click inside the #top_nav <div> and from the drop down style box select Unordered list (ul)

As soon as you do this Expression Web will throw in some white space around the <div> this is normal as we saw in the last tutorial when working with the masthead banner text. Now type in the following

• List 1
• List 2
• List 3
• List 4
• List 5

You will notice that the #top_nav <div> expands to fit the list, again this is normal and will be corrected from the styles we apply.

Now we need to create the styles to control the list.

In the apply Styles task pane click on the new style button.

In the pop up, The first we need to do is change the name of the selector. Delete all the text and type in

#top_nav ul

(ul is the tag for unordered list) Therefore, we are telling the css to only style unorderedq lists in the #top_nav <div> Unordered lists anywhere else on the page will be either un-styled or styled via another CSS class or ID

Click on the apply style to document selection check box

Don't forget, we are working the CSS via an external style sheet. I personally prefer this method and urge you to adopt it. So we must always remember to Define the style into an existing style sheet. (our external style sheet)

Select this option from the drop down list (existing style sheet)

Select masterstyles.css from the url dropdown list

We really don't want those ugly bullets/markers in our navigation so we will remove them with CSS.

Click on List, from the category list

Click on list style and select none

We need to set the width of the ul to be 100% This is done in the Position Category so click on it

Just click inside the width box and type 100 then select % from the next dropdown

Just one last thing to do and that's set the margins and padding.

The style we are creating controls the Unordered list which actually only holds the list items so we are saying the the unordered list should butt up tight to the #top_nav <div> edges (margins) and that anything inside the ul should be tight to it (the ul) (Padding) This is how we lose the white space.

Just one last thing to do and that's set the margins and padding.

So click on the Box category and type zero in margin and zero in padding.

Now click the OK button.

You will get an error. Just click ok.

The error comes up because we have only styled the unordered list. When we style the li tag next, the style will be applied.

NOW SAVE YOUR WORK!

Click on New style in the apply styles task pane and in the pop up type

#top_nav li

Into the selector box

Click on layout from the category list and then select left from the Float dropdown box.

Float takes the selected element out of the normal document flow so the list is pulled into line. Float is a complicated style to explain but you will probably know of its use with images.

That's it click OK and your page will look like the last page in this tutorial.

The next mini tutorial is about actually adding the button and rollover effects. 

View our flash tutorial on How to create a navigation bar in Expression Web .  Tutorial

Lets add some links and link styling

Part 3b - Styling the navigation links with CSS

 

  RSS

Our forum feed can be found here

Reader not listed? Click here for more options

Expression Web Help RSS
Expression Web Help. Tips and Tricks and tutorials Get our feed now