Positioning elements with CSS


show more Positioning elements with CSS provides you with in-depth training on Web. Taught by Chris Converse as part of the Create a Rotating Carousel with jQuery and Dreamweaver show less
please wait ...

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 in...

Positioning elements with CSS
Video duration: 2m 58s 58m 47s Intermediate

Viewers:

Positioning elements with CSS provides you with in-depth training on Web. Taught by Chris Converse as part of the Create a Rotating Carousel with jQuery and Dreamweaver

Subject:
Web
Software:
Dreamweaver jQuery
Author:
please wait ...