Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we've completed our markup, let's switch over to Design view. In the CSS Styles panel, let's come over to .page_container and let's edit that rule. We're going to come down to Box properties. We're going to set this to 960. We're going to set 0 for all of the padding. For the margin, we're going to set 20 pixels on the top. We're going to set auto for right and left so this will center in the page and, 0 for the bottom. I can click Apply to see the changes take effect and then click OK.
Next, we're going to edit .gallery_credit. This is the upper left-hand corner. This where we're going to have our name. Let's go under the Box settings here, and so for credit we're going to set a width of 425. We're going to set Float left. We're going to set 0 for all the padding. Margin, we're going to set 0 on the top, 0 on the right, 10 on the bottom, and 15 on the left. Click Apply. I can see that change take place. Click OK. Let's set the .gallery_type.
Box properties for the type, 500 pixels wide. This will also float left. Padding, take off same for all, and set 4 the top, 0 for the right, bottom, and left. And for the margin, we're going to set 0 on the top, 0 on the right, 10 on the bottom, 0 on the left. Lastly, let's come over to the Block settings for here, and let's set Text-align to right. Click apply. Then we're going to say OK.
Next, let's open .gallery-top. Box properties here, we're going to set a height of 20 pixels. We're going to set 0 for all margin, 0 for all padding. Background settings, let's click Browse. I'm going to come into our myGallery folder, into images, into template, click on page_top, that JPEG. Click Choose. We're going to set no repeat.
We're going to set 0 on the X and Y coordinate. Click Apply. We can see that graphic pop into place. Let's click OK. Let's edit .gallery_content. Box properties in here, what we want to set is the padding. We're going to set 15 on the top, 0 on the right, at least 1 pixel on the bottom-- this way the repeating graphic will actually touch the page bottom div--and 0 on the Left.
Margin, we're going to leave all 0s. We're going to come over to Background. We're going Browse, select page_tile. This is going to be the graphic that's going to repeat vertically. On the repeat, we're going to say repeat on the Y axis, and we'll set a 0, 0 starting position. Click OK. Now let's come into .gallery_bottom. Box properties, set a height of 20, 0 margin, 0 padding. Background, choose Browse, page_bottom, click Choose, no repeat, 0 on the X and Y, click Apply, then say OK.
Let's come in and create a new rule. I am going to create a tag. We want to assign the body tag. Let's click OK. Here we want to set the background. We want to set the background color to black. Choose Apply. Let's come over to our Type settings. Let's just set type default color to white. Let's set our default size to 0.75 ems.
Our Font-family, we'll choose the Arial family set. Click Apply. Now I'll be able to see all the copy, and then let's click OK. Let's choose File > Save All. I am going to hit Option+F12 to preview this in a browser. Hit Reload, just to make sure the style sheets are in place. Let's open and close our window. I see that all of the gallery pieces are now centering inside that page content container. And we have the repeating graphic here opening up so that as we add more content in, this rounded corner box is going to stretch.
At this point, we're ready to start styling the divs that are inside of the main container.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100152 Viewers
56 Video lessons · 113177 Viewers
71 Video lessons · 82035 Viewers
131 Video lessons · 39365 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.