AJAX In Action [251]
Listing 13.3 CSS for the content divs
#divAd{ b
Format divAd
width: 100%; c
Set width
height: 400px; d
Set height
overflow: hidden; e
Hide scrollbars
border-top: 2px solid black;
f Format
borders
border-bottom: 2px solid black;
}
#divNews1, #divNews2{ g
Style both news divs
width: 100%;
h Set width and
height
height: 400px;
background: #D9CCBA;
position: relative; i
Use relative positioning
overflow: auto; j
Show scrollbars if necessary
left: 0px; 1)
Move divs to the edge
}
#divNews1{top: 0px;} 1!
Position first div
#divNews2{top: -400px;} 1@
Position second div
The first step is to style our div divAd b that is the container for our feed spans. The width c is set to 100 percent, and the height d is set to 400px. We do not want scrollbars to appear for the row; therefore, the overflow e property to set to hidden. This means if any content is larger than 400 pixels, it is hidden from the view. The other divs inside this holder allow for scrolling so we do not lose the content. We then set our top and bottom borders f styles by setting a solid 2pixel black line. A side border is not needed since our holder div contains a border thickness. If we applied the borders all the way around our row, it would be 4
pixels wide instead of 2 on the sides and only 2 pixels tall on the top and bottom of the row, which makes it look awkward.
We have to format our two content holder divs, divNews1 and divNews2 g. We can style the properties that are the same between them by separating both of Licensed to jonathan zheng 516 CHAPTER 13 Building stand-alone applications with Ajax their IDs with a comma. The width and height values h are set to take up the space of our holder div. By setting our divs’ position i to relative, it allows us to position the divs in relation to our parent div divAd, unlike the absolute position, which is in relation to the top-left corner of the browser window. We set the divs’ overflow property j to auto, allowing scrollbars to appear if necessary. The last step is to set the left 1) position of the divs to 0 pixels, allowing the div to be flush so there are no gaps around the edges. We want the two content divs to sit exactly on top of each other. Because we are using relative layout, separate position properties are required to be applied to our two feed divs. The div divNews1’s vertical position 1! is set to 0 pixels. This forces it to sit flush to the top border of the parent div. The divNews2 position 1@ is set to –400px. The reason for the negative number is that the second div is positioned lower down the page than the first div, as shown in figures 13.4 and 13.5. Since we set the height of the container div to 400 pixels, we need to move divNews2 up 400 pixels so it is flush on the top of the parent div, just like divNews1. In figure 13.6, we can see how our two divs are now on top of each other, unlike in figure 13.5. Since the two divs are on top of each other, we are only able to see the content from one of them. In this case, the opacity level is set at 100 percent; therefore, the content underneath is not visible. The level of 100 percent is going to be the last step in our fade transition, but before we can get to that we have to finish styling our reader. Figure 13.6 CSS applied to the content divs Licensed to jonathan zheng Creating the rich user interface 517 Configuring the footer The last section we want to add CSS to is our footer. In this section, we have to set the background color and standardize the form elements so that the section is more structured. To accomplish this, we set the colors, the font sizes, and the size of the buttons (listing 13.4). Listing 13.4 CSS for the footer div #divControls{ b Style footer div background-color: #BACCD9; c Set background color text-align: center; d Center the text padding-top: 4px; padding-bottom: 4px; e Add padding } #divControls input{ f Style form elements width: 100px; g Set size and background-color: #8C8C8C; colors color: #000000; font-size: