Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Styling the first and last tabs

From: Create a Sliding Tabbed Panel with jQuery and Dreamweaver

Video: 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.

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 pixel for the size. Next is the style solid Space, then the color pound, and three 's for medium gray.

I'm going to select this property. Let's copy that to the clipboard, paste it on the next line, and change border-left to border-right. Let's scroll down here again. Next, we're going to specify some CSS3 properties for the rounded corners, and we still need to use some of the rendering engine flags to make sure that this works in browsers like Firefox and Chrome and Safari. So first, we'll type -webkit-border. And if you have a later version of Dreamweaver, CS5 or later, Dreamweaver will actually help you with some CSS3 properties. So we want to come over here and choose border-top-left- radius, then a space, then 12 pixels.

Next line we're going to target Mozilla, so -moz-border -radius-topleft as one word, colon, space, 12 pixels. Now the syntax between Mozilla and WebKit are little different. On the next line, we're going to put the name of the final CSS property, so once the CSS3 specification is finalized, all the browser will support this tag. Type border-top-left-radius 12 pixels.

So now with the first tab defined, let's come up here, copy this entire rule. Let's paste it after, and let's change some of the properties here. So instead of first child, we're going to target last child. Instead of padding-left, we're going to change that to padding-right. And instead of border-top-left-radius, we're going to change that to border-top-right, and the Mozilla, change left to right, and for the final property, we'll change this from left to right as well.

Now, since we're in the Code view let's just add one more final rule. This is going to be for the selected state of the tabs. So I'll type .sp .tabs span.selected. This is the class that we're going to dynamically assign onto the individual spans depending on which item the user clicks on. We'll do that with JavaScript later. Now inside here, what we're going to do is set the color so pound sign and three 9s for a medium gray.

Now in the next line we're going to set border bottom, so border-bottom: 1px solid, and then we're going to set white. This is going to give us the illusion that the bottom border being white is going to look like the tab connecting to the content. Let's save our file. Next, we need to add a CSS rule for IE 7 and 8, since they don't support the CSS3 properties we just added in. So let's come to the File menu.

Let's choose Open. Let's open sliding_panels_ie.css. Now, in here we just simply want to set a border for all four sides. So .sp .tabs span, beginning and ending bracket. And inside of the brackets let's just type border, and if we just the word border that will target all four sides. 1 pixel, solid, and then three Cs for gray and hit Save.

Now to test this let's come back to our index.html file. Let's choose Files > Save All. Now, if you're using a later version of Dreamweaver, you'll have a Live View button here. If you don't have a Live View button, you can go to the File menu, come down to Preview in Browser, and you can pick any browser on your system. I am going to come in here and click Live View inside of Dreamweaver's panel, and I can see that these individual panels now show up with the rules we just created. The first child here, the first span, has around a corner on the top left. The last one has around a corner on the top right.

I have a little bit of extra padding over here on the side of photography and a little bit of extra padding on the left side of iPad. Now you notice that these are spaced out a little bit. One of the thing that's happening here is the hard returns in our code are being rendered as spaces in the browser. So let's come out of Live View. Let's come back into Dreamweaver's HTML file. Let's go into Code view. Let's scroll up in Code view, and let's find the div with the tabs class, right here. And what we're going to here is just remove all the whitespace in here.

So we have each of the spans starting and stopping without any spaces in between. There we go. Let's switch back to Design view. Let's click back into Live view and now the tabs will touch each other. Now, as I mentioned earlier, you can use any HTML element to be your tab. Some people prefer to put divs or anchor tags in here and use float properties; some preferr to use an unordered list. I like to use spans because as long as I don't have any space in the code, they'll line up properly and that's the default behavior of a span.

With some of the other approaches we need do a little bit more in the CSS. And now that we've all our tabs styled, we're going to start styling the panels next.

Show transcript

This video is part of

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Create a Sliding Tabbed Panel with jQuery and Dreamweaver.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.