AJAX In Action [250]
Figure 13.4 is not visually appealing since we have not formatted our HTML
elements. The viewer lacks any structure, but that changes when we add CSS rules to the elements. By looking at figure 13.3, we see that our two divs, divNews1 and divNews2, need to be sitting on top of each other in order for our fading effect to work properly.
13.2.3 Compliant CSS formatting
Without CSS, our web pages would all look like those in figure 13.4: very boring and unpleasant on the eyes. We’ll apply some CSS to make this example more pleasing. The style allows us to easily edit the properties in the future without having to edit the HTML. The first thing we can apply style to is our holder div and our header row.
Applying style to the holder and header divs
The divNewsHolder div mentioned earlier can be considered our container for the viewer. It allows us to position the reader on the page and also set the width of the reader. Since we are using divs for our other rows, they take up 100 percent of the width that is available to them. By setting the width in the holder, we can dictate the width of the other elements, making future updates easier. Listing 13.2 shows how we achieve this using CSS.
Listing 13.2 CSS for the holder and header divs
#divNewsHolder{ b
The holder div
width: 600px;
border: 2px solid black;
padding: 0px;
}
#divNewsTitle{ c
The title div
font-size: 20px;
height: 26px;
Licensed to jonathan zheng 514 CHAPTER 13 Building stand-alone applications with Ajax background-color: #BACCD9; line-height: 26px; d Height of line } #spanCount{ e The count span float: right; f Float-based layout font-size: 15px; padding-right: 10px; } We apply style to our form elements by referencing its ID along with the pound (#) sign b. This specifies that the style should be applied to only our div with the id divNewsHolder. For our divNewsHolder, we can assign width and border rules to it and set the padding to 0. Now that we have set our holder div, we can style our first row. We want to set the height, background color, and font size of div divNewsTitle c. The lineheight property d is set to the height of the div. This ensures that our single line of text that is 20 pixels high is centered vertically in the div. Without the line height, the text would be located at the top border of the div. The last step for formatting our header row is to move the spanCount e to the right portion of the header instead of it being in front of our title. To do this, we use the float property f and set it to right. This right-aligns our text, whatever the width of the containing element, and does not affect our title. The font size can be set to a smaller pixel height so it is not as prominent as our title. The padding-right property moves the text from the right edge so it is not sitting directly on the border. We are now finished with our holder and our header row; see figure 13.5. In figure 13.5, we can see that the header row is very different compared to the other rows that have not been styled. The word Loading appears on the right side of the div, and our text is centered in the div. The holder div border surrounds the rest of the elements; now we need to work on the content divs. Figure 13.5 CSS is applied to the holder and header divs. Licensed to jonathan zheng Creating the rich user interface 515 Styling the content divs The next step is to style the middle section or the body of our RSS reader (listing 13.3). The body section will contain our formatted RSS feed information. We position the divs, divNews1 and divNews2, on top of each other for our transition effect to work. The transition effect is to change the opacity of the layer so the layer contained below shows through. By increasing the opacity level of the layer, we are able to create a fading effect.