17 June 2013
Links are interactive, so they need different styles depending on their state, for example, when being hovered over. The different states are styled using CSS pseudo-classes, which must be defined in the correct order. Creating the navigation bar demonstrates how to apply different styles to elements depending on where they are in the HTML structure.
Beginners are often baffled by absolutely positioned elements apparently moving. In this tutorial, you'll learn how to make the element stay where you want.
Continue working with the files you created in the previous parts of this tutorial series. If you want to start with a fresh set of files, download first_website_pt4_begin.zip from the link at the top of this page, and use the bayside_beat folder as the Dreamweaver site root.
Note: This tutorial was written specifically for Dreamweaver CC. It uses the CSS Designer, which is not available in earlier versions of Dreamweaver.
By default, browsers display links in blue, underlined text. But when a link has been visited, it turns purple. This indicates that browsers are aware of the status of links. With CSS you can style links not only in their default and visited states, but also when the mouse pointer hovers over them, at the moment the link is clicked, and when it gets focus from the keyboard.
To indicate the status of a link, CSS uses what are known as pseudo-classes. A pseudo-class is similar to a class in that it can be applied to multiple elements in a page. However, unlike a class, you can't add it to the HTML markup. You simply define it in your style sheet, and the browser applies it automatically depending on the link's current state.
All pseudo-classes begin with a colon, and they're appended directly to the selector. There are five pseudo-classes used with links. The first two in the following list are used exclusively with links, the other three can also apply to other elements.
:linkThis styles links in their unvisited state.
:visitedThis styles links that have been visited
:hoverThis styles an element when the mouse pointer is hovering over them.
:activeThis controls what an element looks like at the moment it is being clicked.
:focusThis indicates that the element has focus, for example when using the Tab key to navigate around a page.
The most important thing to remember about pseudo-classes is the order they appear in your style sheet. They must be in the same order as the preceding list. If you change the order, the styles won't be applied correctly. The CSS Designer's code hints help you by listing the pseudo-classes in the correct order. Many designers use the mnemonic LoVe-HAte to remember the order LVHA for
The first letter in CSS stands for cascading because most properties are inherited or cascade down the HTML structure. This has the advantage that you don't need to repeat properties unless you want to override them. To style links efficiently, you create a basic style that affects links in any state, and then use the pseudo-classes to override specific properties.
font-weightto bold, and
text-decorationto none, as shown in Figure 1. This makes the link text bold, and removes the underline.
Note: The code hints list considerably more pseudo-classes than described earlier. However, only the first five are used with links.
colorproperty to orange (
#FF6600). You can use the color picker or type the value manually into the text field next to the color box. The effect of the cascade combines this style with the one you set in step 3, so the links are now in bold orange without any underline.
colorproperty to #FF944C (a lighter shade of orange).
Note: The commas are part of the selector, indicating that you want the same styles applied to a:hover, to a:active, and to a:focus. If you omit the commas, it becomes a descendant selector that would apply to a link that has focus, but only if it's nested inside a link that's actively being clicked, which in turn is nested inside a link being hovered over—an impossible situation, but nevertheless perfectly valid as a selector.
colorto #7F3300 (a shade of burnt orange), and
text-decorationto underline (it's the second icon).
:visitedpseudo-class (see Figure 3).
The link styles you created in the preceding section apply to links anywhere on the page. To change the look of links in a specific part of the page, you can create styles using descendant selectors to override the basic styles. In this section, you'll use descendant selectors to convert the unordered list of links at the top of the page into a navigation bar.
The process involves removing the bullets and default padding and margin from the unordered list. The links are then converted into buttons by giving them a width, and floating them. Then you style them by changing colors and adjusting padding.
<nav>element with the ID
list-style-typeproperty (it's the last item in the Properties pane), and select none from the menu. The bullets disappear from the unordered list.
paddingproperties on all sides to zero by clicking the chain icon in the center of the visual tools and setting one of the values to 0px (see Figure 5).
<nav>element with the ID
mainnav. No pseudo-class is being used, so the new styles will affect the links in all states.
widthproperty to 20%.
displayproperty (it's fourth from the bottom of the Layout section) to block.
floatproperty to left. The links are now displayed in a single line under the main heading, as Figure 6 shows.
text-align(in the Text section) to center.
background-colorto a dark gray (#4D4D4D).
colorto white, and
:focuspseudo-classes. The same style will also be given to the current page using a class called
Create a new group selector like this:
#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage
Although it's quite long, the CSS Designer's code hints should speed up its creation. Take care to use a dot (period) to append thispage to the final part of the selector. It's an ordinary class, not a pseudo-class. You won't get a code hint for thispage because the class doesn't yet exist in the HTML markup.
background-colorto #43A6CB (a shade of aquamarine).
thispageclass to the Home button, you need to turn off Live view.
thispagefrom the Class menu in the Property inspector, as shown in Figure 9.
<aside>elements. They are still bold orange without an underline. When you mouse over a link, it turns a darker color and is underlined.
The links in the rest of the page are not affected by the new styles because they are not nested inside the element with the ID
mainnav. To learn more about CSS selectors, see my two-part tutorial, Getting to know your CSS selectors.
The last part of styling the Bayside Beat home page involves positioning the "Be Where It's At"
<article> over the large image of the Golden Gate Bridge, and giving it a background with rounded corners. You'll use a technique known as absolute positioning. As the name suggests, absolute positioning allows you to specify the precise position of an element. But there's a catch… There always is—isn't there?—when something sounds too good to be true.
HTML elements normally expand and contract to fit whatever content you put in them. For example, if you add another paragraph to the main
<article>, it simply becomes taller, and it pushes the footer further down the page. With absolute positioning, the element is removed from the normal flow of the page, and it no longer interacts with other elements. The browser floats it in front of the page on an independent layer (in fact, absolutely positioned elements were frequently called "layers"). As a result, if you try to lay out a complete page using absolute positioning, some elements might overlap if their content is too long, or you might end up with unsightly gaps if content is shorter than expected.
Unlike a book or a magazine, where you know the exact size of the page and font, web pages are displayed on devices with a huge range of screen resolutions. People with poor eyesight increase the size of text. Given this lack of control, a web page needs to be flexible. But absolute positioning remains useful in situations where overlapping is desirable, such as placing a small block of text over an image.
When you set an element's
position property to absolute, you fix its position by specifying one or more offset properties:
right. Setting an offset property moves the specified side of the element away from the same side of its containing block. Positive values move the element toward the center of the containing block. For example, if you set the element's
top property to
100px, it moves the top of the element 100 pixels down from the top of its containing block. If you set its
left property to 150px, it moves the left side 150 pixels in from the left side of the containing block (see Figure 10).
Setting an offset to a negative value moves the element in the opposite direction. For example, Figure 11 shows what happens if the
top property is set to
-500px. Assuming the positioned element is less than 500 pixels high, it will be completely outside its containing block. In other words, the containing block doesn't constrain where the element can be displayed. It's the point from which the offsets are calculated.
Note: Figures 10 and 11 are taken from my book Beginning CSS3 (Apress 2012, ISBN: 978-1-4302-4473-8).
Misunderstanding the containing block is probably the biggest cause of headaches with absolute positioning. It isn't necessarily the same as the parent element. The containing block of an absolutely positioned element is defined as follows:
The implications of this aren't immediately obvious, but they cause endless headbanging when a carefully positioned element appears to move. If you absolutely position an element 100 pixels from the left, it will always be precisely 100 pixels from the edge of the page. However, if you have centered other elements, such as the wrapper
<div> in the Bayside Beat design, the distance of the centered element from the edge of the page depends entirely on the width of the browser window. On a 1200-pixel wide browser, the left sides of the absolutely positioned element and the wrapper
<div> would line up with each other. At any different size, the absolutely positioned element would still be 100 pixels from the edge, but the left side of the wrapper
<div> would no longer be in alignment.
The solution is amazingly simple: Set the
position property of the absolutely positioned element's parent to
relative. The offsets are then calculated from the sides of the parent. If the parent moves, the absolutely positioned element moves in sync.
<article> inside the hero
<div> is relatively short, and the large expanse of sky is a perfect place to put it using absolute positioning.
#wrapperin the Selectors pane, and click the plus button to create a new selector called #hero after it.
positionproperty to relative.
<article>element nested inside the hero
positionproperty to absolute.
<article> moves inside the hero
<div>, but the heading overlaps the navigation bar, as Figure 12 shows.
This is because the links in the navigation bar are floated.
#heroin the Selectors pane, and set the
clearproperty to left. The hero
<div>moves down below the navigation bar, and the heading no longer overlaps (see Figure 13).
#heroarticle in the Selectors pane.
rightoffsets in the position visual tool to move the
<article>to a position over the top-right of the Golden Gate Bridge (see Figure 14).
background-color. Use the eyedropper tool to select a light orange color from the top of one of the bridge's towers, as shown in Figure 15.
background-colorproperty is the
border-radiusvisual tool for creating rounded corners.
Click the chain icon in the center of the visual tool, and scrub one of the values to create evenly rounded corners on the block of text (see Figure 16).
Only the paragraph turns white because there's a rule setting the color of all
colorto white, and
Congratulations, you have succeeded in building a modern, standards-compliant web page using HTML5 and CSS with the help of Dreamweaver CC—and a little guidance from me. It's been a lot of hard work, but I hope you've learned a lot along the way about how web pages are built and styled.
Tip: If you want to check which properties have been set for a selector, click the Show Set check box at the top-right of the Properties pane (see Figure 17).
To add a property to an existing set, either deselect the Show Set check box, or click the plus button at the top of the Properties pane. Clicking the plus button adds the Others section below the current set, and opens a text box for you to enter the name of a property. Code hints appear as soon as you start typing.
The tutorial isn't over yet. You need to do a little extra work to keep older browsers happy.
Web developers tend to install the latest version of browsers. Understandably so, because they're interested in using the latest techniques. But not everybody is the same. They use an old browser for a variety of reasons: habit, lack of technical skill, or because their company or organization still uses an old operating system. Whatever the reason, you need to make sure that your web pages aren't completely broken in ancient browsers.
article, aside, figure, footer, header, nav
displayproperty to block.
</head>tag (it's on line 10 in Figure 18).
Note: The Snippets panel contains short blocks of reusable code. You can also use it to store snippets of your own. See Dreamweaver Help for more details.
This wraps the
<script> tag you inserted in step 8 in an IE conditional comment like this:
The new code and the
[if lte IE 7]to
[if lte IE 8].
In the final two parts of this tutorial series, you'll create a second page for the Bayside Beat website, and define a remote server to upload your pages to a live website. The second page will use the same HTML structure and CSS. Now that you have created the style sheet, it will be a much faster process.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
Tutorials and samples