Adding style to expression web menus

Part 3b

Styling the navigation links with CSS

In our previous tutorial Styling the navigation bar we learnt how to use an unordered list as a horizontal link bar. We now focus on styling the list to look like a navigation bar.

Your page should look like the screen shot. As we are creating a navigation bar, we need to make the link 1/2/3/4/5 text into actual hyperlinks. This is done in the normal way by selecting the text and using the insert hyperlink icon from the tool bars. It does not matter where your link is set to go, all we are interested in is having the links to apply the styles to.

Using your mouse, select the text - Link 1, click on the insert hyperlink icon from the tool bar or use Ctrl+K

The hyperlink properties control box will pop up.

In the text to display box, you should see the Link 1 text (if not, type it in)

In the Address box, click the drop down arrow and select a previously visited web site. (Remember we are only interested in the hyperlink not where it leads us)

Complete the above process for all the link texts and we are ready to continue with styling the links. Your page should look like the one below.

Create the link style

In the manage styles task pane, select New Style

Change the selector name to

#top_nav a

Check the apply style to document selection and make sure that the Define in, is set to Existing Style sheet and use the URL drop down to locate your file masterstyles.css

Now we need to do some styling.

Click on the small square next to the Color box

From this colour palette, select white (#FF,FF,FF)

Note* from this palette, you can choose an almost infinite number of colours or type in directly the colour you want to use.

***NOTE*** Color is the correct spelling for colour and Color controls the text colour of the given element

Click OK

We are styling a navigation bar - you will remember that we used an un-ordered list and a CSS style to get rid of the bulletts? Well we will do the same to get rid of the hyperlink text underline.

Under the text decoration heading, click None.

Select layout from the category list

Select Display and then select Block

Now we want to add a border to the link.
Select border from the category list

From the border style dropdown select

Solid

Make sure you leave same for all selected.

For border width, i would always suggest that you specify a size in pixels. This is because different browsers make different pages.

Thin - Medium - Thick will render differently in different browsers whereas 1 pixel will always be one pixel and 10 pixels will always be 10 pixels!

In the border width box Type 1 and check the size is set to px

In the border colour box type the following

#7D5F50

This is the brown colour of our masthead.

From the category list, select Box

We only want to use the left and right padding in this instance so un check the Same for all box.

In the box for padding right type 5 and make sure px is selected for the measurement

Do the same for the left padding.

Now we want to colour the background - as you will see from the style preview below we have a Box!

Click on Background from the category list and in the background colour box, type the following

#7D5F50

This is the same as our border colour.

See from the style preview that we now have a brown box with white text.

The text is now visible as we have a brown background but the border appears to have disappeared. This is only because the background colour and the border colour are the same!

The border is not really required but, it will allow us to pull off other CSS styling tricks at a later date.

As it stands, we have a navigation link that is brown with white text and a brown border. The links will be tight together but we can add some space.

Select Box from the category list

Deselect the same for all check box in the margins section

Set the margin right to be 2px

All we have done is to add a 2 pixel space between the links.
This gives the illusion of buttons at its most basic level.

We are in the habit of checking the Apply new style to document selection - or at least we should be!

You may have your cursor in the #nav_bar <div> you may not.

You may get the following error message, you may not.

If you do just click OK.

Now we can see the style that we have just created.

Remember though, this is only the style for the link.

We now need to style the hover state.

In the manage styles task pane, select New style

Select and delete the Selector text and type in the following syntax.

#top_nav a:hover

Type the following syntax into the Color box

#FAE687

This is the text colour of the hovered link

We don't want the text to be underlined so click on None in the text-decoration section.

Now click on border from the category list

Set the border to be solid and same for all

See the border in the style preview?

Select the border width and set it to be 1px

The border colour is currently inherited from the text colour.
We will change this by selecting border-color and typing in the following syntax

#C99981

See the changes in the style preview below.

Click on Background from the Category list

We want to change the background colour. Type in the following

#C99981

We can now see how the hover style will look.

We are almost complete!

Click on OK so that we can have a quick look to see how our Top navigation link really looks.

This is how your page should look in Expression Web . We will look at the page in a browser shortly but we have 1 major thing to complete.

Internet explorer and FireFox browsers, will render you page differently! Firefox will for instance will make the page look different than in IE. Our job is to make them look exactly the same! So with this in mind, we need to set a height for the #top_nav <div> - otherwise the <div> will collapse and the navigation will not be visible to FireFox users

In the manage styles task pane, select the manage styles tab.

Look for the #top_nav <div> right click on it and select modify style.

So here we are again but not far to go.....

Select position from the Category list

Type in 20 for the height and make sure px is selected.

Once again click OK and you will be taken back to your page.

Now we are going to test the page.

***Note*** It is best to design using FireFox as your browser. Get it right in FF and your page will most likely look right in IE too.

Click on the preview in browser icon. If you have it test in FireFox if not IE will do.

View in FF