Home > Building a Website > Create Round Cornered DIV Tags#1

Building Steps

1. Set up a Site
2. Create a Template
3. Create a CSS File
4. Link to a CSS File
5. HTML Basics
6. Set Page Margins & Background
7. Create Site Structure
8. Create a Three Column Layout
9. Style Headings and Paragraph Tags
10. Style Website Links
11. Create Breadcrumb Links
12. Style Round Cornered DIVs #01
13. Style Round Cornered DIVs #02
14. Create Navigation Tabs
15. Adding a Footer
16. Create Editable Regions
17. Name the Categories
18. Create a Page from the Template
19. Create a Library Item
20. Creating More Pages

Create Round Cornered DIV Tags

Create rounded corners on boxes by using background images method#1

Now that the framework and look of the site template is coming together, it’s time to get to grips with the round-cornered box, created using a single DIV tag. I used to create these (and most everything else) using tables.

When I forsook tables for DIV tags, my first assumption was that I would need four DIVs to create the effect - one for the container, one for the top corners, one for the main content and the last for the bottom corners. As it turned out however, all I needed was a single DIV. Although rounded corners on DIVs can be created simply using CSS3, widely-used browsers like Internet Explorer (surprise!) versions 6, 7 and 8 don't support them. So if you want to create a single style sheet that works universally, you'll need to use background images.

Three slightly different ways to round the corners using background images

On our site there are three types of round cornered panels using a single DIV, and all three are created slightly differently in order to accommodate the requirements of their content. The menu tabs need just the two top corners to be rounded, but the width of the tabs need to be variable. The left column panels are fixed width, contain a variable number of headings (depending on which page is being viewed) and require bottom rounded corners as well as top. Finally, the top panels on the right (whilst also fixed width with four rounded corners) only have a single heading. All three are styled slightly differently as follows.

Round Cornered Div #1

Starting with the left column box (currently colored red), here’s a basic description of how it’s done:

The DIV tag has a tiled background image, which repeats vertically, supplying a flexible vertical border for the sides. The H3 tag at the top of the panel (it will be essential for there to be an H3 heading at the top for this to work) has a class style attached to it that includes a non-repeating background image showing two rounded top corners. Within the panel, the links are styled as lists, all of which are <OL> (ordered lists). We’ve added a ‘class’ style to the last <OL> list block to display a non-repeating background image of the bottom-rounded corners whenever it appears in this panel.

And that’s all there is to it... Now for the step-by-step procedure:

Prepare the background tile and rounded corner images

Open your original Photoshop layered site visual, turn off any text layers which display content in the left column panel and flatten the image (remembering not to overwrite the original by mistake). Crop in precisely on the left panel (figure 1).

Figure 1 - Crop tight to the tab image

Note that we’re not concerned about cropping to the bottom of the panel because we’re simply going to flip the top cornered pane vertically and save it as the bottom of the panel. Duplicate the resulting flattened image.

On one of the documents, use the rectangular marquee tool to select the top of the document. Select the full width of the image and as far down as you need to go (14 pixels in my case) in order to clear the anti-aliasing at the bottom of the curved edges (figure 2).

Figure 2

Now crop the image. Go to:

File/Save for Web & Devices…

...and save the image as a JPEG High graphic to your site images folder. I called mine left-panel-top.jpg. Now go to:

Image/Image Rotation/Flip Canvas Vertical

and save the resulting image via

File/Save for Web & Devices…

...as left-panel-bottom.jpg.

On the second document, select the Single Row Marquee Tool (which selects a single row of pixels) and click anywhere below the curved edges - and crop (figure 3).

Figure 3

This should leave you with an image 150 pixels wide (or the width of your panel) and 1 pixel high with a single green pixel on the far left and far right, with a row of white pixels in between.

Go to:

File/Save for Web & Devices…

...and save the image as a JPEG High graphic to your site images folder. I called mine left-panel-tile.jpg

Now edit the ud-left-panel DIV tag (currently colored red)

Make sure that you're working in Split View so that you can see both the design and code window panes. In the CSS Styles palette find the DIV called #ud-left-panel (or whatever you named the left column) and double-click it. The should open the CSS Rule Definition editing panel for that DIV.

In the CSS Rule Definition Pane make sure the following settings are applied:

The only change here was the removal of the red background and addition of the tiled image which will only be repeated on the Y axis, thus filling the vertical space with a single-width pixel on the left and right, giving the impression of a vertical border (figure 4).

Figure 4

Next create the top corners using an H3 tag

Replace the text currently in the DIV tag: “Content for id "ud-left-panel" Goes Here” with the word: “Heading”. With the text selected in Design View, under the Properties pane select:

Format: Heading 3

The result should look like figure 5 - the standard H3 style which we created earlier.

Figure 5

The next thing to do will be to style all occurrences of the H3 tag in the left column, and then create a ‘class’ style which will be applied only to the heading which appears at the top of the panel.

Style the left column H3 tags and create a class style for the top heading

One thing that the Dreamweaver CSS Rule Pane will not let you do is create an ID or Class with a ‘selector’ floating freely at the end of the name, such as: #ud-left-panel h3. You’ll be delivered an error message such as the one in figure 6 if you try.

Instead, you’ll have to either create it as a 'Compound' style (a style made up of a collection of classes and/or IDs), or edit the CSS document directly - I think that this would be a good opportunity to do the latter. Open the CSS file (mine is called using-dreamweaver-styles.css

Find the following code:

#ud-left-panel {
            width: 150px;
            margin-left: 60px;
            float: left;
            display: inline;
            margin-bottom: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
            background-image: url(images/left-panel-tile.jpg);
            background-repeat: repeat-y;
            background-position: center center;
}

Underneath the closing ‘}’, paste the following and save the CSS file:

#ud-left-panel h3 {
}

Any style contained within the ‘{‘ and ‘}’ will be applied to any h3 tag appearing in the DIV called #ud-left-panel.

Once done, find the new #ud-left-panel h3 title in the CSS Styles palette and double-click it to open the CSS Rule Definition pane which will now allow you to edit the style.

In the CSS Rule Definition Pane make sure the following settings are applied:

Add the top heading class style to create the top rounded corners

In the Design View, select the heading text, open the Insert Palette and click ‘Insert Div Tag’. A dialogue box will open, and next to Insert: select ‘Wrap around selection’; then click ‘New CSS Rule’.

Select ‘Class’ as the contextual selector type and call the style: ‘left-panel-top-heading’. Ad it to your existing CSS document using the option at the bottom of the New CSS Rule dialogue.

In the CSS Rule Definition Pane make sure the following settings are applied:

Add links to the panel

The purpose of this side panel is to provide the visitor with sub-category navigation, or contextually relevant links. So all it will contain are headings (h3 tags) and lists of links (appearing in this case as ordered lists, <OL>). Create a few sample links by typing in something like the list below. Make the list an ordered list by clicking on the Ordered List icon in the Properties palette:

1. Panel Link 1
2. Panel Link 2
3. Panel Link 3

Now make each item a link by selecting them one at a time and entering a hash tag # into the Link field in the Properties palette.

You should by this time have ended up with something like figure 7.

Figure 7

Now we’ll style the list. First we’ll add a style to control the appearance of the OL tag (when it appears in the ud-left-panel) and then we’ll style the links themselves.

Style the panel list

In the CSS Styles palette, right-click (or control click on a Mac) the #ud-left-panel h3 style and select ‘Duplicate’ from the popup menu. In the ‘Duplicate CSS Rule’ dialogue box, leave the Selector Type as ‘Compound (based on your selection)’ and under Selector Name, change the h3 for ol. Click OK.

Two things will happen. First, a new style will appear at the bottom of the CSS Styles palette which you should drag up to position under the ud-left-panel h3 style. Second, the Panel Links list will take on the attributes of the h3 tag, because we told it to - figure 8.

Figure 8

We need to clear all the attributes of the new ud-left-panel ol style and start again. The quickest way to do this is to open the CSS document and edit it directly.

Open your CSS document (mine is called using-dreamweaver-styles.css). Scroll down to where you’ll see:

#ud-left-panel ol {
            margin-top: 0px;
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 0px;
            padding-left: 10px;
            margin-bottom: 5px;
            font-style: normal;
            font-weight: bold;
            font-size: 1.4em;
            color: #666666;
}

Delete everything contained within the brackets: { } so you end up with:

#ud-left-panel ol {
}

Now save and close the CSS file. You’ll immediately see that the list links have lost their h3 attributes. Now we can start styling them. Double click the ud-left-panel ol style in the CSS Styles palette and enter the following settings:

Style the panel list links

To make sure that the links appear in the right color and style, we are going to add link attributes specifically to those links by pasting the following into the style document below the ud-left-panel ol style:

#ud-left-panel a:link {
            color: #999999;
}
#ud-left-panel a:visited {
            color: #cc99cc;
}
#ud-left-panel a:hover {
            color: #000;
}

This will ensure that the links will be gray before clicked, black when hovered over and purple after being visited.

Create the bottom corners using a class style…

In the same way that we created the top corners by assigning a style to a specific element, we’re going to create the bottom corners and base of the panel by adding a ‘class’ style to the final list block, which will display an appropriate background image only when it appears in the Div Tag called ud-left-panel.

So far we’ve been using an OL (ordered list) style within the panel. All we need to do is make sure that the LAST list block that appears has the tag: <ol class="last"> (in Code view) instead of just <ol> (figure 9).

Figure 9

To achieve this, add an additional H3 placeholder subheading and a new list of placeholder links. In the Properties panel, make sure that the list of links is made an Ordered list (figure 10).

Figure 10

In the CSS document, paste the following beneath the ud-left-panel ol style:

#ud-left-panel ol.last{
}

This is known as a ‘compound’ selector type - in other words, a style made up of two or more existing classes or IDs, which make a more specific, targeted style. After refreshing the CSS Styles palette, this should appear in the list of styles. Double click it to edit it.

In the CSS Rule Definition Pane make sure the following settings are applied:

We should now have a perfectly formed round cornered panel (figure 11).

Figure 11

As I mentioned earlier, there is more than one way to create rounded corners on DIV tags, and the method you choose will depend on context, functionality and browser compatibility. Next is a variation on the above method which I'll use to create the side panels which appear on the right of this website.

Create Round Cornered DIV Tags#1 - End of Article

Go to previous article | Go to Home Page | Go to next article

Feedback required!

Please send any questions or feedback to: feedback@using-dreamweaver.com or leave it on our Facebook page.