Styling the main container and the panels


show more Styling the main container and the panels provides you with in-depth training on Developer. Taught by Chris Converse as part of the Create a Sliding Tabbed Panel with jQuery and Dreamweaver show less
please wait ...

Styling the main container and the panels

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'l...

Styling the main container and the panels
Video duration: 4m 18s 1h 6m Intermediate

Viewers:

Styling the main container and the panels provides you with in-depth training on Developer. Taught by Chris Converse as part of the Create a Sliding Tabbed Panel with jQuery and Dreamweaver

Subjects:
Developer Web
Software:
Dreamweaver jQuery
Author:
please wait ...