Styling the first and last tabs


show more Styling the first and last tabs 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 first and last tabs

So at this point we need to add two CSS rules in that Dreamweaver doesn't have support for in its visual interface, but we can add them into the code. So let's open up the CSS file, go up to the File menu, choose Open. Inside of mySlidingPanels go to includes, open sliding_panels.css. Once in here, let's scroll down to the bottom. I am going to add a few lines down here. And what we want to do is target the first child span, so let's start by typing the .sp, space, .tabs, space, span, colon. That specifies the pseudo-class first-child.

Let's put in our brackets. So for the very first child, or the first tab, what we're going to want to do is set a padding-left, set that to 15 pixels. This will give us little bit more room on the left-hand side of the text for the rounded corner that we're going to put into the top left. Let's hit a return. Next, we're going to do border-left, colon, space, and we're going to use shorthand style here, 1 p...

Styling the first and last tabs
Video duration: 6m 51s 1h 6m Intermediate

Viewers:

Styling the first and last tabs 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 ...