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

Create a Rotating Carousel with jQuery and Dreamweaver

Positioning elements with CSS


From:

Create a Rotating Carousel with jQuery and Dreamweaver

with Chris Converse

Video: Positioning elements with CSS

Now we need to create some CSS rules to position our arrows and leaves within our layout. So, let's come over to our CSS Styles panel and create and new rule. I'm going to create a new class. This class is going to be called nextItem. Let's choose OK. Let's come down to Positioning. We're going to set an absolute position value for this. We're going to set a Top value of 230 pixels and 0 on the left. Under Z-Index, we're going to set this to 1001.

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

Positioning elements with CSS

Now we need to create some CSS rules to position our arrows and leaves within our layout. So, let's come over to our CSS Styles panel and create and new rule. I'm going to create a new class. This class is going to be called nextItem. Let's choose OK. Let's come down to Positioning. We're going to set an absolute position value for this. We're going to set a Top value of 230 pixels and 0 on the left. Under Z-Index, we're going to set this to 1001.

We want to set a Z-Index of 1001 for this arrow so that it will be on top of any of the items inside of the carousel. Then lastly, let's come down to Extensions and for Cursor, we're going to type pointer, then choose OK. Now that that class is created, let's come down and click on and select the arrow_left PNG file that we've brought inside of the container. Let's come over to the class and let's assign this the nextItem class. As soon as we assign this, we can see the arrow now will jump up into place, positioning itself 230 pixels from the top, with the left side aligning to 0.

Let's come back to our CSS Styles. Let's create another style. This is going to be another class. We're going to call this previous item or prevItem. Let's click OK. Let's come down to Positioning. This is also going to have absolute positioning. We're also going to set the top to 230 pixels, but in this case, we're going to set the right side to 0. We're going to get this Z-Index at 1002. Come down to Extensions, under Cursor, type pointer. Let's click OK.

Let's come down and select the arrow_right.png, and for the Class we're going to come down and assign this to prevItem. Now, we have our rotation buttons positioned properly. Let's scroll down to the bottom of the page a little bit. Let's come down and create a new rule for the leaves. New class. We'll call this leaves. Let's click OK. Positioning, absolute. The Top we're going to set to 270 pixels. The Left we're going to set to 102 pixels.

We're going to set the Z-Index to 1000. We're going to choose OK, click on the leaves graphic, come down to the Class, and let's assign the leaves property. Now, it might be a little difficult to see at this point, but the leaves are actually positioning themselves to the upper left-hand area of that container, and you can just see a little bit of the stem. So, as we add captions into this particular area and the outer container opens up, we'll get the illusion of the stem actually growing as the content inside the caption area increases and decreases, again as we saw in the introduction video. So, now at this point, we have all of the design and layout elements in place, In the next movie we'll add in the carousel data, so we have information to pull from to generate our carousel and 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

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.