In this video we will put the layout in place for our JQuery image crossfade example. First we will see how the starting page renders in the web browser. And we will peak at the HTML and CSS in place. Then we add the CSS for the page’s core layout. Finally we layout the fade elements.
This includes their CSS positioning and layering. Now let’s take a look at our current page layout. We have a
heading and three images. As the page width expands the images show the normal inline value for their display property.
And the header remains centered over the page width. In the HTML we have an outer div for the page contents. It contains a header and section element. The header element contains an h1 element It is using the content-centered class. And we have styling for both in the base CSS file. Then the section element contains a div element. In the div element we have three inline images. Their native file widths are 400 pixel each. Now for our page layout styling. We
will give the page content’s outer div element the id wrapper. Copy snippet 1 and paste after the div tag on line 12 in the HTML file. Then style it. Copy snippet 2 and paste on line 10 of the base CSS file. Save and open in the web browser. We got the page content centered over
960 pixel fixed width. The 400 pixel wide images are now wrapped into two columns. We need to get the images into a single centered column. The images have an outer div element.
Lets give it the id fade-group. Copy snippet 3 and paste in after the div tag on line 17 in the HTML file. Then its styling in snippet 4. Paste that in the crossfade CSS file. Save and refresh. And now we have all the images centered. The fade-group element renders at a 400 pixel fixed width. And the margins on either side compute equally 280 pixels. We are going to position the images over each other. This lets us fade out the top image creating the cross fade effect. So we need to change their layout rules from the static flow. Lets get the CSS in place. Copy snippet 5.
It goes on line 5 in the crossfade CSS file. This allows us to position the img elements within the fade-group element. Then snippet 6.
Paste in the crossfade CSS file on line 8. This activates the image elements’ position properties. This includes left, top and z-index. Save. Refresh the page.
Now all the img elements occupy the same coordinates. But why did the third img element appear on top? Their default position properties are set to auto. So the web browser positions and layers them for us. Typically they are stacked in the order that they are arranged in the HTML source. We want to show the first image on top when the page loads. To do this we need to change the first img element’s z-index property. Lets get the CSS in place. Copy the selector in snippet 7.
Paste that at the end of the crossfade CSS file.
Then copy the class attribute from snippet 8.
Insert after the img tag on line 18 in the HTML file. The CSS selector targets an img element with the class named active. And sets the z-index to 3. The other img elements’ z-index remain set to auto. This will make the web browser display them below this img element. And layer them in the order they appear in the HTML source. In the web browser refresh. And we have the first img element image displayed on top. Any further layering of the images we will handle with JQuery. Now we have the initial CSS in place. It handles a basic core page layout that we kept independent from our cross fade elements. The layout for the cross fade elements focused on creating a container with a position property of relative.
Then we stacked the img elements in the container by setting their position property to absolute. This placed them at the same coordinates within the container. However they stacked in reverse of their HTML order. Rather we wanted the first img element to show on top. So we used the z-index property to make that happen. Now we are ready for our next segment where we will use JQuery to create a user interaction on our page.