Hacking Gmail

Listing 4-3(continued)

...</option>

<option style=”color: rgb(119, 119, 119);” disabled id=”nil”>

--------</option>

<option style=”color: rgb(119, 119, 119);” disabled

id=”al”>Apply

label:</option>

<option value=”new”>   New

label...</option></select></td>

<td align=”right”><span style=”white-space: nowrap;”><b>1</b>

This code is also quite complicated, but working through it is just a matter of

looking through the code for the classand idattributes and noting the tables in

the middle. By now, you should be quite good at this, so you won’t do that here.

The next section, after all, provides a map of all of the classes and ids you need.

The Bottom Section

Now we come to the last remaining section of the Gmail screen: the bottom of

the screen, as shown in Figure 4-9. Again, the drudgework is left out here; you

see only the code. In the tradition of software textbooks, the figuring out of the

names of the divs and spans within the bottom section is left as an exercise to the

reader. Listing 4-4 shows you the code if you want to do this, or you can skip past

Listing 4-4 to Figure 4-10, which outlines the whole page’s structure in CSS.

FIGURE4-9: The bottom section of the screen