Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
>> In the last movie we created the structure of a NAV bar. Now we'll add the CSS to make it look like a NAV bar for sighted users. If you're following along with the exercise files, open the page visitors.html from the 05_02 folder of the chapter five exercise files. We'll continue to edit it in Dreamweaver. First let's add the off left class to the main navigation heading so that we can move it off the screen as we did earlier with the section navigation and footer headings. Highlight over the text.
In the properties inspector click on the Style menu. From the options show, choose the off left class. The main navigation heading has now disappeared. Remember, it's still in the source so that it can be read by screen readers, text browsers and other devices that do not use CSS. Now to start making this look like a NAV bar, we first want to remove the default list styles so it will no longer look like a regular list. In the CSS styles panel, click on the new CSS rule button at the bottom of the panel, choose advanced as the selector type.
In the selector field, highlight over the default text that is shown and delete it then type #mainNAV UL. This selector targets the UL element that is within our mainNAV DIV. Keep this document only selected for the define in option and then click okay. The CSS rule definition dialogue box opens. Here we're just going to remove default list styling so click on the box category in the left side of the dialogue box.
Leave the same for all box under padding checked and enter zero in the top field. Under margin, leave the same for all box checked as well and again, enter zero in the top field. Next, click on the list category of the dialogue box, choose the Type menu and scroll down to the bottom and choose none. This removes any bullets that might appear on the list. Now click okay. Next, we need to make the list items stop stacking on top of each other and instead sit side by side.
We're currently using the float property on the sidebar of the page. It moves it off to the left and allows other content to sit beside it on the right. If we float every single list item, they will all line up together on a single line instead of tacking one on top of another. Click on the new CSS rule button at the bottom of the CSS styles panel. In the new CSS rule dialogue box, leave advanced checked as the selector type. In the selector field, delete the default text that is shown and type #mainNAV LI.
This selector targets all of the list items within the mainNAV DIV. Leave this document only selected and click okay. As with the UL element, we first want to remove the default list styling, so click on the box category. Leave both the same for all boxes checked under padding and margin and in both of the top boxes, enter zero. Above the margin section of the screen, you can see a Float menu.
Click on the arrow of that menu and you'll see that you options are left, right and none. Choose left. Next, let's remove the flower bullet background image from these LI's and add a new background image for them in the NAV bar. So click on the background category of the dialogue box then click on the browse button beside the background image field. In the select image source dialogue box, browse to the location of the exercise files on your computer, choose the chapter five folder and the exercise files then click on the 05_02 folder then click on the images folder.
Choose the image named mainNAV_divider.jpg then click okay. In the Repeat menu, back in the CSS rule definition dialogue box, choose no repeat. This background image is simply a divider line and we only want it to show one time on each list item. In the Horizontal Position menu, choose right and in the Vertical Position menu, choose top. This will position the divider line background image on the right side of every list item text.
Now click okay. You can see that now the list items are appearing side by side, but the dark brown background on the mainNAV DIV has disappeared. This is because floats are removed from the flow of the document, meaning other content around them essentially doesn't know they exist. With the list items floated, it's as if no content now exists inside the mainNAV DIV, so this DIV collapses to zero height. To fix this, we need to add an element to the bottom of the DIV below the floated list items that is set to clear the floats.
This will make the mainNAV DIV expand down to contain this item.
Dreamweaver pre-made layouts comes with a class named clear float that is already available to use for this purpose.
Let's go into code view.
So click on the code button in the document toolbar.
We're taken to a spot in the code showing a mainNAV DIV.
Immediately above it in the code is the header DIV.
Inside the header DIV is a
for line break that has a class of clear float set on it. Highlight over this break element and go to the Edit menu and select copy then place your cursor after the tag in the mainNAV DIV and hit enter or return to go to a new line.
On that new line, again go to the Edit menu and select paste. Since this break element is not floated, the mainNAV DIV now has some content within it that it can expand to contain and show the background below the floated list items. Click the design button on the document tool bar to go back to design view. You can see that the background has now returned. Next, let's add the styles to the links inside the list. Click on the new CSS rule button at the bottom of the CSS styles panel. Leave advanced selected as the selector type.
In the selector field, delete the default text that is shown and type #mainNAV A. This selects all of the A elements or the links inside of the mainNAV DIV. Leave this document only selected for the define in option and click okay. We want these links to not act like regular text links but more like buttons. So we want a large area around the text to be clickable, not just the text itself. To do this, we can change the A elements from being inline elements to block elements.
Block elements are things like DIVs, paragraphs and lists where every item starts on a new line and stacks one on top of each other. Inline elements are things like the A tag, the M tag, the strong tag, where the element sits in the same line with other elements. Click on the block category in the dialogue box. The last option on the screen is a display menu. Click on the arrow next to that menu and choose block, the third item down. Next, let's expand the space around each of the A elements to expand the clickable area of each.
So click on the box category in the dialogue box, uncheck the same for all box under padding, in the top box type six, leave pixels selected as the unit of measurement. Also type six into the bottom field under padding. This adds six pixels of space on top and below each A element. In the right field enter 16. leave pixels selected. And then in the left field enter the same value of 16 pixels. Next, we want to get rid of the default blue link color and their default underlines.
Click back on the type category of the dialogue box. Click on the color picker next to the color field and select white. There are five checkboxes shown for setting the decoration type of the element. Click on none. This removes the default underline of the links. Click on okay. The links are nicely padded and spaced out from each other. The finishing touch that we're going to add is a rollover effect on the links. We can use the hover pseudo class in CSS to make the link's background color change when the mouse passes over it.
In order to make the effect happen for keyboard users when they tab to the link, we'll also add the focus pseudo class. The focus state of a link is basically when it is selected and when you tab to a link you're giving it focus. Click on the new CSS rule button at the bottom of the CSS styles panel. Leave advanced selected as the selector type and delete the default text shown in the selector field, type #mainNAV A:hover. Since we want to set the same styles for focus, we can group that selector with this selector by inserting , #mainNAV A:focus.
Finally, in order to make this rollover work in Internet Explorer, we'll add one more selector to this group. Type , #mainNAV A:active. Internet Explorer doesn't use the same pseudo class of focus that the other browsers do, but instead uses a pseudo class of active.
Setting all three of these pseudo classes at once covers all of our bases. Click okay to bring up the CSS rule definition dialogue box. All that we're going to do on rollover is change the background color, so click on the background category. Place your cursor inside the background color box and type #4F3B18. This is simply a lighter shade of the brown that's currently being used on the NAV bar.
click okay to accept the rule. We're not going to see the rollover effect until we look in a browser, so let's go ahead and preview in Firefox now. Click on the globe icon in the document tool bar and choose preview in Firefox. When asked to save the changes to the page, click yes. You can see that we now have what looks like a standard NAV bar. if we hover over the links you can see that the background color of each changes.
Let's also try tabbing to the links. Simply hit the tab key on your keyboard. This will take you to the first link on the page, in this case, home. It adds a dotted outline around the link, the default style for focus, and also a brown background. Continue to hit the tab key and you can see how you continue to move through the links. To activate any of these links, you would simply press the enter key on your keyboard. Close the Firefox page now. Let's also check the page in Internet Explorer 7 to make sure it's working there as well.
Click on the globe icon in the document tool bar back in Dreamweaver and choose preview in IExplore. In Internet Explorer 7, the background is not showing in the NAV bar. this makes the links almost invisible until we mouse or tab over them, so we definitely want to fix this issue. Close the Internet Explorer window and return to Dreamweaver. Internet Explorer has a proprietary CSS property called has layout. Frequently CSS rules will not work until has layout has been set as well.
The way we can set has layout is by setting a width or another dimension on our DIV. in the CSS styles panel, select the mainNAV rule. If you scroll down within the properties pane, you'll see that we're not currently setting any dimension on this element. On the bottom of the pane is the add property link. Click on this. Type in width. Then click on the box next to this field, type 100, and in the unit of measurement menu next to this field, select percent. This won't change the appearance of the DIV in any other browsers since all DIVs are 100 percent wide by default, but it should fix the problem in Internet Explorer.
Let's preview again to make sure. Click on the globe icon in the document toolbar and choose preview in IExplore. Click yes to save changes to the page. Now when the page is brought up, you can see that the background is there. the same rollover effect also works. So we've seen that we can use CSS to take a simple list and turn it into a horizontal navigation bar with rollover effects. Next we'll learn how to style a list to look like another type of common layout element, the Vertical menu.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.