Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Now we're going to set some CSS properties for the panels. So in the index.html file in Dreamweaver, let's come over to the CSS Styles panel. Let's create a new CSS rule. Make sure we've select a Compound, .sp .panel_container. Let's choose OK. Let's go over to Background. We'll set the Background-color to white.
Let's come over to Positioning. Inside of here we're going to set the Positioning to relative. We're going to set the Z-Index to 100. That's one number less than what we set the tabs to, so that the tabs will actually be on top of the panel container. Let's come down to Overflow, set that to hidden. So as the panels slide inside of the container, we don't actually see them on the right and left-hand side. They're look like they're clipped in. Let's come over to the Box properties. Let's uncheck Same for all from Margin and for Margin Top, we're going to say negative 1 at the top margin. That'll actually take the panel container and move it up 1 pixel.
And again, since it Z-Index is lower than the tabs, it'll actually tuck the panel container underneath the tabs by 1 pixel. And then lastly, let's come over to Border, keep checked Same for all for Width, Style and Color. For Top, let's come down and choose solid. For the Width we'll set 1 pixel, and for the Color, pound and three Cs and click OK. Next let's create another rule. We're going to target the panel content. Compound rule. Tyep .sp .panel_container .panel .panel_content. Let's choose OK.
What we're going to set in here under the Box properties Padding for all, let's just set 15 pixels. Then we'll click OK. And you can see a little bit of space showing up here in Dreamweaver's Design view once we add that property. Now to test what we have so far, let's come upto the File menu. We can choose Save All. You can preview this in browser or use Dreamweaver's Live view. I'm going to click on Live view here. Now I can see the tabs showing up here. I can see the panel container, which is actually overlapping the one pixel here, which is what's giving us that nice clean single-pixel division between the tabs and the content container.
Then I can see all of the panels spaced out, and I can see the container actually extends down to encompass all three panels. So with that working, let's come out with of Live view or come back to Dreamweaver. Back in the index.html file, let's create two more rules. First rule we're going to create, it's going to be a compound rule: .sp .panel_container .panels. I'm going to target the panels container that's holding all the individual panels. Let's choose OK.
Let's come down to Positioning. We're going to set Position to absolute and we're going to set a top value of 0 pixels for Placement, and click OK. Let's create another rule, another compound rule, .sp .panel_container .panel, singular. We're going to target all of the individual panels themselves. Let's click OK.
There are currently no FAQs about Create a Sliding Tabbed Panel with jQuery and Dreamweaver.
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.