Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Creating the main panel and tab containers
- Adding content to the containers
- Adding CSS styles to the text and tabs
- Adding the jQuery $(document).ready() function
- Assigning click events to the tabs
- Setting an autostart on page load
- Creating custom graphics for the panels
- Assigning custom classes to the HTML elements
Skill Level Intermediate
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.