Join our community
- Expression Web Forum
- Expression web resources
- 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
- Build Expression Web DWT Tutorial
- Graphic Template example
- Free Expression Web Templates
- Add RSS to Expression Web
- Expression web forms
- 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
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
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
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
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
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
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
Type the following syntax into the Color box
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
We will change this by selecting border-color and typing in the following syntax
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
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.
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
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.
You maybe prompted to save your page if so click OK
So hopefully you will have an identical page?
The brown button links change colour when hovered over.
Internet explorer will display a slightly different page. IE will show the main text area and the footer (the whole page)
This concludes part 3 of the tutorial.
You can view the whole process using this Flash tutorial
In part 4 we will style the left navigation (vertical) buttons.
Part 5 we will style the main page area.
Part 6 we style the footer.