Start learning with our library of video tutorials taught by experts. Get started

Create a Rotating Carousel with jQuery and Dreamweaver

Setting CSS styles for the captions


From:

Create a Rotating Carousel with jQuery and Dreamweaver

with Chris Converse

Video: Setting CSS styles for the captions

Now in order to adjust the spacing issues we are having in the caption area with the stem touching the leaves and to add some style to the captions, we are going to add two new CSS rules. We are going to need to create some compound rules, We want to create rules to target h2s and paragraph tags specifically that are inside of the caption's id div. So what I am going to do here is get my cursor inside of the captions id, and I can see down here that Dreamweaver will tell me that my cursor is inside of a div with the captions id. With my cursor inside of that div, I am going to come up here and choose New CSS Rule.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Create a Rotating Carousel with jQuery and Dreamweaver
58m 47s Intermediate Feb 02, 2012

Viewers: in countries Watching now:

Learn how to implement and customize an interactive rotating carousel animation with jQuery and Adobe Dreamweaver. Author Chris Converse covers preparing the carousel images and captions, creating the carousel containers with HTML and CSS, and activating the carousel with JavaScript. The course also explains how to add images to the carousel container, set the caption based on the image in focus, and add animated transitions between captions.

Topics include:
  • Exporting graphics from Photoshop
  • Creating the HTML, CSS, and JavaScript files
  • Positioning elements with CSS
  • Using the Roundabout plug-in
  • Activating the carousel callback
  • Detecting the image in focus
  • Adding the final touches
Subjects:
Web Web Design Projects
Software:
Dreamweaver jQuery
Author:
Chris Converse

Setting CSS styles for the captions

Now in order to adjust the spacing issues we are having in the caption area with the stem touching the leaves and to add some style to the captions, we are going to add two new CSS rules. We are going to need to create some compound rules, We want to create rules to target h2s and paragraph tags specifically that are inside of the caption's id div. So what I am going to do here is get my cursor inside of the captions id, and I can see down here that Dreamweaver will tell me that my cursor is inside of a div with the captions id. With my cursor inside of that div, I am going to come up here and choose New CSS Rule.

From the menu, I am going to come down and choose Compound, and what Dreamweaver will do is write a specific CSS rule to target that particular div. So I am going to come down here and click Less Specific. I want to basically start my CSS rule with #captions. After captions, I am going to hit a space, type h2. I want to target only h2 tags that are inside of the captions id. Let's click OK. Under Type, for Font-Family, let's choose Georgia. For Font-size we will pick 32 pixels. For Font-weight we will choose normal. For the Color we are going to type in a custom color, #6d8824. Next, let's go to the Box settings.

Let's uncheck margin. For the Top we are going to set 0. This is going to make the h2 touch the very top of that container, and then it will actually keep the container from pushing down away from the leaves. Set 0 on the Right, 5 pixels on the Bottom, and 0 on the Left, and then click OK. Now we won't see these designs actually take effect until we have our captions injected into this caption area, but before we do that, let's come in and create our second rule. Compound rule > Less Specific. We want to do #captions space p. Let's click OK.

For paragraph tags inside of the caption, let's come down to Font. Let's choose Arial. I want these to be 14 pixels. For Color, we are going to pick a medium gray, so #444. Let's come over to the Box properties. For Margin, we are going to set 0 on the Top, 0 on the Right, 0 on the Bottom, and just 3 pixels on the Left. This will sort of optically align the paragraph tags with the headings. Then we will click OK. To see these, let's choose File > Save All, then File Preview in Browser.

Now back in our browser, I am going to click on one of the teapots to invoke the showCaption function. Now we can see right here, the stem is actually touching the underneath of the leaves. We see our h2 and paragraph tags being styled here as well, and each of the teapots that I clicked, the same contents getting injected in, and the styles are being applied to every single caption that's being assigned into the captions id. Now that we have all of our styles in place for the captions, in the next movie we will work on the creating the animation states for the captions.

There are currently no FAQs about Create a Rotating Carousel with jQuery and Dreamweaver.

Share a link to this course
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.
Upgrade now


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.

Upgrade now

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 a Rotating Carousel 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 preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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