• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 8. Setting Up Optional and Repea... > Styling CSS for Repeating Regions

Styling CSS for Repeating Regions

Several Cascading Style Sheet (CSS) additions are necessary to create the proper look and feel for the events table. First, you'll create the style for the header of the events table.

1.
From the CSS Styles panel, select the bg_news.css entry and click New CSS Style. In the New CSS Style dialog box, choose the Class option and enter .eventHeading in the Name field; click OK. When the CSS Style Definition dialog box opens, set the following options for the Type category:

FontVerdana, Arial, Helvetica, sans-serif
Size1.2 ems
Weightbold
Color#FFFFFF (White)


Switch to the Background category and enter #666666 in the Background Color field. In the Block category, select Center from the Text Align list. Click OK when you're done.

A similar style needs to be created for each of the event listings.

2.
In the CSS Styles panel, click New CSS Style. When the New CSS Style dialog box opens, make sure the Class option is chosen and enter .eventListing in the Name field; click OK to proceed. In the Type category of the CSS Style Definition dialog box, set the following options:

FontVerdana, Arial, Helvetica, sans-serif
Size1 ems
Line height1.1 ems


Switch to the Block category and select Left from the Text Align list. In the Box category, under Padding, leave the Same for All option checked and enter 8 pixels. In the Border category, uncheck all the Same for All options. Set both the Right and Bottom borders to Solid style, 1-pixel width, and #666666 color; set the Left border to Solid style, 4-pixel width, and #666666 color. Click OK when you're done.

Part of the design for the Events section calls for unordered lists. To make the best use of the space in the table, three additional CSS rules using descendent selectors are needed. The first rule closes up the space above and to the left of the unordered or bulleted list.

3.
Click New CSS Style and, when the New CSS Style dialog box opens, switch the Type option to Advanced. In the Selector field, enter .eventListing ul and click OK. In the CSS Style Definition dialog box, select the Box category and, from there, uncheck the Margin Same For All option. Enter 0 pixels for the Top, Bottom, and Left margins. Click OK when you're done.

A similar process is required to precisely close up the default gap that appears after a <p> tag.

4.
Click New CSS Style again to create another style rule. In the New CSS Style dialog box, enter .eventListing p in the Selector field and click OK. When the CSS Style Definition dialog box appears, switch to the Box category. Clear the Margin Same For All checkbox and, in the Bottom margin field, enter 3 pixels. Click OK when you're done.

One final style rule is necessary to add a bit more space between the list items.

5.
Click New CSS Style again to create one last style rule for this page. In the New CSS Style dialog box, enter .eventListing li in the Selector field and click OK. When the CSS Style Definition dialog box appears, switch to the Box category. Clear the Margin Same ForAll checkbox and, in the Bottom margin field, enter 5 pixels. Click OK when you're done.

Tip

Even though your design might call for no space between the block elements (theparagraph and the list items), in our example here both editable regions and repeating regionsare used; therefore, it's best to provide some room for the template tabs naming each of those regions. You can disable these tabs in Dreamweaver, but you can't in Contribute; if the elements are too close together, it makes it difficult to enter content correctly.

While we're working with the CSS, let's amend the CSS filter file to make sure that the newly added classes are not available to the Contribute user. You might think the .eventListing class should be exempted, but that class will already be applied to the <td> tag within the repeating region and be duplicated automatically when needed.

6.
In the Files panel, expand the css folder and double-click bg_filter.css to check it out and open it for editing. If Dreamweaver asks if you want to check out dependent files as well, click No. When the file opens, place your cursor at the end of the file and add this line of code:

.eventHeading, .eventListing ()

7.
Choose File > Save to store your changes and then File > Close.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint