Adding CSS properties for content area
Video: Adding CSS properties for content areaNow 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.
Viewers: in countries Watching now:
Download a copy of the finished web site here.
- Preparing gallery photos using Adobe Bridge
- Adding and linking thumbnail images
- Creating the layout in HTML and CSS
- Downloading and adding jQuery to the project
- Creating preview images from anchor links
- Implementing the preload functionality
- Building a customized lightbox with the Fancybox plug-in
- Styling the zoom and contact links
Adding CSS properties for content area
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.
Find answers to the most frequently asked questions about Create an Interactive Photo Gallery with jQuery and Dreamweaver .
Here are the FAQs that matched your search "" :
- Q: The finished state of the interactive photo gallery in this course shows a clickable preview. When you click on the preview image, or on the view larger icon, a larger lightbox image appears. Chris's example has a close button and border surronding the large image, but mine doesn't. Did I miss a step?
- A: The functionality you describe is part of FancyBox plug-in we use in this course. It's a custom lightbox tool, which I've included in the exercise files and also available for download at fancybox.net. It's free and highly customizable.
By default, FancyBox adds a border to images (at least in the version of FancyBox we're using), but there are many options that can be turned on when you set up your fancybox initialization script, including the close button, which is invoked using the showCloseButton property. This is all covered in the "Creating a custom function for lightbox properties" movie.
If you want to customize your gallery further, look at the list of the customizable properties at http://fancybox.net/api.
- Q: This course was updated in April, 2013. What changed?
- A: Since the release of this course, Internet Explorer 9 and 10 have been released, and sometimes these browsers do not activate interactive HTML content. To remedy this problem, the author has added a movie to Chapter 10 that will show you how to:
- Update the HTML to HTML5
- Update the version of jQuery
- Use the Google html5shiv to keep compatibility with Internet Explorer 7 & 8
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.