Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
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.
Your file was successfully uploaded.