Publishers of technology books, eBooks, and videos for creative people

Home > Articles

Expandable Rows

This chapter is from the book

This chapter is from the book

A Bulletproof Approach

To bulletproof the design of the rows, we first have to settle on a markup structure. We then add color, positioning, and background images. In the end, we have a flexible end product, capable of accommodating any text size or amount of content. We begin with the markup, reducing that code bloat we mentioned earlier.

THE MARKUP STRUCTURE

To structure these two rows, we must look at the content within them. What elements would make best sense for this scenario? What elements would be the most meaningful? When writing markup from scratch, I like to answer these questions first, and then apply the best structure for the job. There may very well be more than one answer, but it's important to ask yourself these questions before you type your first character.

In this case, we'll need two containing elements, one for each row. For the top row, I see the two bits of text at each end as items of a list, while on the second row, there's just one paragraph of text.

That said, let's write out the complete markup structure we'll need to make this design happen:

<ul>
  <li>Not registered? <a href="/register/">Register</a> now!</li>
  <li><a href="/find/">Find a store</a></li>
</ul>

<div>
  <p><strong>Special this week:</strong> $2 shipping on all orders! <a href="/special
/">LEARN MORE</a></p>
</div>

So, we have a list of two items for the top row, and a containing <div> wrapped around a single paragraph for the second. Nice and simple, very lean markup—and best of all we've already tossed out the code bloat associated with the nested-table approach.

In addition, we've achieved our goal of increased accessibility to the content. Regardless of the device or software reading it, these two rows of information will always be interpreted as a list followed by paragraph. And that's exactly what they are.

IDENTIFYING THE PIECES

Our next step is to uniquely identify all the elements that we need to assign styles to. Assigning a few ids will enable us to apply positioning, color, and images to turn this simple markup into the finished design.

<ul id="register">
  <li id="reg">Not registered? <a href="/register/">Register</a> now!</li>
  <li id="find"><a href="/find/">Find a store</a></li>
</ul>

<div id="message">
  <p><strong>Special this week:</strong> $2 shipping on all orders! <a href="/special
/">LEARN MORE</a></p>
</div>

We've just added unique ids to the list and each of its items, as well as the second row's containing <div>. These style hooks will be important in just a moment.

SANS STYLE

Figure 3.4 is what our markup structure looks like in a browser, with just some basic font styling applied (The Best Store Ever uses the Arial typeface throughout).

03fig04.jpg

Figure 3.4 This is an unstyled view of our bulletproof markup; it's easily read and understood by any device that happens to access it.

On the <body> element we've also assigned a base font size using the keyword value of small.

body {
  font-family: Arial, sans-serif;
  font-size: small;
  }

A phone, PDA, or browser that doesn't support CSS would render the rows this way. The result is still very readable and easily understood by any device accessing it. Now it's time to start applying style.

ADDING BACKGROUND

To begin adding style, let's first add the background color to each row. This step will help us define the dimensions.

#register {
  background: #BDDB62;
  }
#message {
  background: #92B91C;
  }

The results of adding the correct background color to each row are revealed in Figure 3.5.

03fig05.jpg

Figure 3.5 Adding background colors first helps us visually define the rows as we add the rest of the pieces.

POSITIONING THE CONTENT

Next, let's position the content, placing the two list items of the top row at either end and the $2 shipping message in the center of the bottom row. Figure 3.6 shows the results of applying the following CSS:

#register {
  margin: 0;
  
   padding: 0;
  
   list-style: none;
  background: #BDDB62;
  }
#reg {
  
   float: left;
  
   margin: 0;
  
   padding: 8px 14px;
  
   }

   #find {
  
   float: right;
  
   margin: 0;
  
   padding: 8px 14px;
  
   }

#message {
  clear: both;
  
   text-align: center;
  background: #92B91C;
  }
03fig06.jpg

Figure 3.6 We've positioned each list item on either end of the top row.

From top to bottom, we've eliminated default margins and padding from the #register list. Also, we've prevented bullets from appearing by using the list-style: none; rule.

Next, we've used the opposing floats method for positioning the two list items at either end of the row. The first list item is floated left (#reg), while the second item is floated right (#find). Doing this enables us to align each item at an equal horizontal location yet at opposing ends of the row (Figure 3.7).

03fig07.jpg

Figure 3.7 The "opposing floats" method is a handy way of aligning content on either side of a container.

This method of floating elements against each other is a handy way of placing content at opposite ends of a containing element.

Looking again at the new styles we've added, in addition to floating each list element we've added some padding on all sides of each item. There will also be enough space to drop in the magnifying glass icon on the left of the "Find a store" link a bit later.

As for the bottom row, we've added a clear: both; rule, which clears the floats we've added to the row above it. And, to center the text, we're using the text-align: center; rule.

MISSING BACKGROUND

Where did the background color on the top row go? You may recall that we ran into a similar problem in Chapter 2. When we float inner elements (in this case the two <li>s), we're taking them out of the normal flow of the document. So, for the <ul> that wraps around them, it's as if the list items don't really exist. As a result, the <ul> doesn't know how tall and wide to stretch the background color behind itself.

To fix this problem, let's float the <ul> along with the list items (just as we did with the tabs in Chapter 2). In addition, we need to assign a width to make sure the row flows across the entire, intended width. It seems that most browsers have interpreted the CSS2.0 spec quite literally in that "a floated box must have an explicit width" (www.w3.org/TR/REC-CSS2/visuren.html#floats). If we don't specify a width here, the row will only be as wide as the contents force it to be (in this case, the two lines of text).

#register {
  float: left;
  
   width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #BDDB62;
  }
#reg {
  float: left;
  margin: 0;
  padding: 8px 14px;
  }
#find {
  float: right;
  margin: 0;
  padding: 8px 14px;
  }

#message {
  clear: both;
  text-align: center;
  background: #92B91C;
  }

Figure 3.8 shows the rows so far, with the background color of the top row now restored.

03fig08.jpg

Figure 3.8 When floating items inside a container that is filling in the background, restore that background by floating the container as well.

ADDING THE DETAILS

We're now left with adding the details that complete the design of these rows. Let's start with the top row and fill in the rounded corners that appear at the bottom edges of each end (Figure 3.9).

03fig09.jpg

Figure 3.9 The rounded corner is really a few white pixels in a step pattern, attached to each corner of the row.

You'll notice that the rounded corner is nothing more than a few white pixels placed in a step pattern. When viewed at a normal distance (rather than zoomed, as it is in Figure 3.9), it creates the illusion that the row is rounded off at each end.

Chopping off pixels to create this rounded illusion is a great trick—and one that's easy to implement using a combination of the smallest image possible with a background color specified in the CSS.

We'll start by creating the image in Photoshop (or your favorite image editor). Because we're dealing with a fixed-width (768 pixels), we can create a single image that contains both the left and right corners. We can then reference this image as a background in our CSS.

Figure 3.10 shows a close-up view of the image we created. What you're seeing here is the left end of an image that is 768 pixels wide (the same width that our rows will be). For each end, we created this step pattern with the Pencil tool set to 1px using the color white (the same color as the page background). The rest of the image is transparent (shown by the checkerboard pattern in Photoshop). The white portions of this image will be laid on top of the background color that we've already specified in our CSS. This will create the illusion that the row's ends have been rounded off a few pixels.

03fig10.jpg

Figure 3.10 This is one end of the 768-pixel-wide GIF (zoomed at 1600%).

Looking back at our declaration for #register (the containing <ul>), we add the following rule:

#register {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #BDDB62 url(img/reg_bottom.gif) no-repeat bottom left;
  }

We've just specified a background color and then set the image on top of it, set it to not repeat, and aligning it at the bottom and left. Transparent portions of the image will let the background color show through, while the white corners will obscure it. Aligning the image at the bottom ensures that no matter how tall the row needs to be (due to varying text sizes or amounts of content) the corners will always be in the right place (Figure 3.11).

03fig11.jpg

Figure 3.11 A 3D view of the stacking order.

Figure 3.12 shows the results, with the rounded corners now showing at the bottom of the top row.

03fig12.jpg

Figure 3.12 The background color and the white and transparent portions of the image work together to create the illusion of rounded corners.

FOUR ROUNDED CORNERS

For the second row, we need a way to apply rounded corners on both the top and bottom, all the while keeping the row vertically expandable. To accomplish this, we'll use two background images. One of them will be the same image we used for the bottom of the top row; the other (for the top edge) will be the same image again but turned upside-down. Because we need two background images, we also need two elements to assign them to. (Oh, how I wish we could assign more than one background image to a single element. One can dream.)

Lucky for us, we do have two elements to take advantage of. Notice that in the markup for the second row we have a containing <div> with a <p> inside for the content within:


   <div id="message">
  
   <p><strong>Special this week:</strong> $2 shipping on all orders! <a href="/special/">LEARN MORE</a></p>
</div>

Let's now assign each of our background images to each of these elements. The inverted version of our white corner graphic will be assigned to #message, while an identical image used in the top row will be assigned to the bottom of the <p>:

#message {
  clear: both;
  text-align: center;
  background: #CE6500 url(img/mess_top.gif) no-repeat top left;
  }
#message p {
  
   margin: 0;
  
   padding: 8px 14px;
  
   background: url(img/reg_bottom.gif) no-repeat bottom left;
  
   }

By assigning the top corners to #message (the outer <div>) and the bottom corners to the bottom edge of the <p> (Figure 3.13), we're ensuring that all four corners will stay positioned correctly no matter how large or small the text is within the paragraph. If we incorporate a larger text size or amount of text, the top corners will always be aligned top, and the bottom corners will always stay at the bottom of the paragraph (as we'll see in just a minute).

03fig13.jpg

Figure 3.13 For the bottom row, we use two images, letting the green background show through the transparent areas of the GIF.

Figure 3.14 shows the results of these declarations. As we did with the top row, we're using the transparent images that let the background color show through, with white corners masking only those four areas.

03fig14.jpg

Figure 3.14 With backgrounds added, the rows are starting to take shape.

TEXT AND LINK DETAILS

We have just a few more styles to add to complete the design: link and text colors. We also need to add back in the arrow graphics that flank the "Find a store" and "LEARN MORE" links. Let's get to it.

First, let's define link and text colors for each row, adding the necessary rules to all of the styles we've declared thus far:

#register {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #690;
  background: #BDDB62 url(img/reg_bottom.gif) no-repeat bottom left;
  }
#register a {
  
   text-decoration: none;
  
   color: #360;
  
   }
#reg {
  float: left;
  margin: 0;
  padding: 8px 14px;
  }
#find {
  float: right;
  margin: 0;
  padding: 8px 14px;
  }

#message {
  clear: both;
  font-weight: bold;
  
   font-size: 110%;
  
   color: #fff;
  text-align: center;
  background: #92B91C url(img/mess_top.gif) no-repeat top left;
  }
#message p {
  margin: 0;
  padding: 8px 14px;
  background: url(img/reg_bottom.gif) no-repeat bottom left;
  }
#message strong {
  
   text-transform: uppercase;
  
   }

   #message a {
  
   margin: 0 0 0 6px;
  
   padding: 2px 15px;
  
   text-decoration: none;
  
   font-weight: normal;
  
   color: #fff;
  
   }

We've set link colors for each of the items in the #register row, as well as default font-size and color for the text and link in the #message row (Figure 3.15).

03fig15.jpg

Figure 3.15 The rows, with link and text color styles added. Notice the space allotted for the small icons that will sit to the left of "Find a store" and "LEARN MORE."

Previously, we had emphasized the "Special this week:" text using the <strong> element. We took advantage of that by using the text- transform property to change that portion of the message to uppercase.

THE FINAL STEP

Our last step in bulletproofing the rows is to add the graphics that flank the "Find a store" and "LEARN MORE" links. We could add these images to the markup, but to make things easier to update later, and to keep nonessential images out of the document structure, we can easily add them as background images in the CSS.

First let's add the magnifying glass icon to the list in the top row, aligning it 0

50%, which will position it left and 50% from the top (centering it vertically):

#find {
  float: right;
  margin: 0;
  padding: 8px 14px;
  background: url(img/mag-glass.gif) no-repeat 0 50%;
  }

Figure 3.16 shows the results of adding the icon to the "Find a store" list item in the top row.

03fig16.jpg

Figure 3.16 The background image sits to the left of the list item, where padding was previously specified.

And finally, let's add the arrow graphic that sits just in front of the "LEARN MORE" link in the second row. Once again, we'll position it 0 50%, or all the way left and halfway down (to center vertically):

#message a {
  margin: 0 0 0 6px;
  padding: 2px 15px;
  text-decoration: none;
  font-weight: normal;
  color: #fff;
  background: url(img/arrow.gif) no-repeat 0 50%;
  }

Figure 3.17 shows the results of adding the arrow icon to the left of the "LEARN MORE" link by targeting the <a> element that lives within the message row.

03fig17.jpg

Figure 3.17 As we did with the top row, we added the arrow to the left of the "LEARN MORE" text, this time attaching it to the <a> element.

Figure 3.18 shows the final results with all the pieces in place. Visually, we're left with a set of rows almost identical to those found at The Best Store Ever, but the underlying markup structure, along with the measures we've taken to strategically place backgrounds and text, makes it bulletproof. Let's find out why.

03fig18.jpg

Figure 3.18 This is the final, bulletproof version of the rows.

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020