Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The final sets of rules we'll need to create for our layout are going to be the marquee nav rules. So first let's start by creating a new rule. We are going to create a new class. We are going to name this marquee_nav. Next, we're going to go to Positioning. We're going to set this to absolute positioning. We're going to set a Width here of 240. This is the same Width property that we have under the Box properties as well. Down under Placement, we're going to set 310 for the Top and 20 for the Right.
Now let's go to the Block properties. Text-align, choose right. Then we will click OK. Now we can see, just barely, this little dotted line here representing the navigation box. This is now being in absolute position down 310 pixels and 20 pixels on the right, which gives us 20 pixels from the rightmost side of the object to the rightmost side of its parent. Now we have those three anchor links inside of marquee_nav. Right now, they don't have any dimensions, because they're anchor links with no href and they don't have any text inside of the link itself.
So, next, we're going to create a marquee_nav a rule. So let's create a new rule, compound rule. marqee_nav a, choose OK. The first thing we're going to doing here is come down to the Block properties, come down to Display, and anchor links by default have an inline display style. We're going come down and choose inline-block.
This is the same display property that images have, where they have dimensions so they can have a height and width, but they're also in line where they can float next to each other. So we don't have to use an actual Float property for the objects. Let's click inline-block. Let's go to the Box properties. We're going to set a Height and Width of 18 pixels. This is going to match exactly the Photoshop graphic we created with the circles. Come down to Margin, Left. We're going to put 15 pixels so that all the dots will be 15 pixels away from each other on the left-hand side, because we are floating the objects to the right by the Text-align property of the parent, which is marqee_nav.
Let's go to the Background, choose Browse under the background image. Let's choose our nav_buttons.png. Let's set no-repeat. Let's set a 0 on the X and 0 on the Y. Lastly, let's come down to Extensions, and under Cursor, Visual effect, we're going to type in 'pointer'. Some browsers, like browsers that use the WebKit engine which includes Safari and Google Chrome, if we don't have an href on the anchor tag, they won't show a pointer when we roll up over link. So we can come in here and set cursor pointer in the CSS and ensure that all the browsers will show a pointer when we roll over the links.
At this point, let's choose OK. Dreamweaver is not going to represent the inline-block items on the anchor tags properly for me. So if we come up here and choose Live view, this will force Dreamweaver to use its built-in WebKit browser to render the page for us. Now I can see these links down here. I can see my pointer tools showing when I roll over these. So this position is working. Let's turn off Live view. In our CSS, let's create two more rules. Compound path. We're going to create marquee_nav a:hover.
This is going to give us a rollover state for the buttons. Choose OK. All we're going to set here is down in Background on the X axis, we're going to set -25 for the Position and 0 on the Y. Choose OK. Let's click Live view again. This is going to give us that rollover state. So now when I roll my cursor over these dots, that background graphic is shifting over -25 pixels to the left. So this is that sprite technique we talked about when we were creating these graphics inside of Photoshop. Let's come out of Live view.
Let's create one more rule. This is going to be for the selected state, marquee_nav a.selected. Choose OK. Background properties -50 on the X, 0 on the Y. Choose OK. Then hit Live view. Now the center link is showing the dot right in the center. This background graphic is being shifted -50 pixels to the left, while the other ones are -25 on the rollover.
Now we are going to want to go to check this in a browser, and I want to be able to see the entire caption. So I'm going to come out of Live view, and let's temporarily come up to the marquee caption rule, come down to Positioning, and instead of 310, let's change this to 240. We are just going to do this temporarily so that we can actually see the caption over top of the photography. Let's click OK. The caption moves up. Let's choose File > Save All and then File > Preview in Browser. Make sure we hit Reload.
So now I can see the caption up in place. This is what it looks like, with two lines. We have our image, all of our type in place, buttons over on the right-hand side. Everything looks good. Now, let's go back to Dreamweaver. Let's go back to marqee_caption. Go back to Position, and let's set that back to 310. This will be the starting position so that once it preloads, the caption can sort of slide up. Choose OK. Save All again.
So now that we have all of our CSS rules in place for creating our layout, the next thing we're going to do in the next movie is pull out this data that we put inside of our marquee container and move it into the marquee panels area and create the HTML for all of the different panels.
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.