Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding CSS rules for navigation

From: Create an Interactive Homepage Marquee with jQuery and Dreamweaver

Video: Adding CSS rules for navigation

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.

Adding CSS rules for navigation

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.

Show transcript

This video is part of

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Create an Interactive Homepage Marquee with jQuery and Dreamweaver.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.