Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,987 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
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 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.
- 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