Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now, we want to apply CSS styles to the four divs that are inside of the gallery_content area, inside of that content div. So let's start by coming up to the thumbnails, gallery_thumbnails. Let's go to the Box properties. 500 pixels wide. Float left. We're going to set zero for all of the padding. Margin, we're going to set zero on the top, right, and bottom, and 40 pixels on the left. Now sometimes when I'm setting up my divs and setting up the layout I'll temporarily come in and set a Background-color so I can see them and see how wide the properties are.
So temporarily, let's come in here and we'll just assign a color to the background of the thumbnails. Click Apply. Now I can see that Yellow bar here is representing the area for the thumbnails. Let's choose OK. Let's open up gallery_preview, Box properties for preview. I'm going to set 375 on the Height and the Width. This is going to hold that preview-size jpeg. This is also going to float left. 0 for all margin and padding.
Let's go to the Background-color and let's just temporarily set a color, so we can see this one. I'll choose Blue. Click Apply. Now I can see that div in place. Let's click OK. Just scroll down here a little bit. Now, let's open in gallery_contact. This is going to be the email address on the bottom-left, under all the thumbnails. Box properties, 477 wide, 60 pixels tall.
This is also going to float left. For the padding, we're going to set 0 on the top, 23 on the right, 0 on the bottom, 0 on the left. So we want this to be 500 pixels total, and web browsers will add right and left padding to the overall width of the object, so 477 plus 23 gives us our 500. Uncheck Same for all for Margin, and we're going to set 0 on the Top, 0 on the Right, 0 on the Bottom, and the same 40 pixels on the Left for that as well.
Background, let's just again temporarily pick a color so we can see that one. I'll choose green. Click Apply. I can see that box showing up here. Let's click OK and lastly, let's go to gallery_caption. I'll move this up over here. Box properties for that, we're going to set 375 on the Width. That's also going to float left. We're going to say 0 margin, 0 padding for all. Background, select violet.
Click Apply. Choose OK. Now I can see the four divs we just created inside the content area: So the thumbnail is here in yellow. The image preview over here on the right. The contact area. And there's one thing I forget to set. Let's go back to contact real quick. Block properties, we want the text-align to be align right. Click OK. Now that I can see that all of my divs are in place and properly spaced out, I am going to quickly get rid of those backgrounds.
The quickest way to do that would be to just jump over to the code. I'll scroll down to the rules that we just added. background-color for thumbnails, let's just delete that. gallery_preview background _color, let's delete that. gallery_contact, I'll delete that. And then lastly gallery_caption, delete that. Switch to HTML. At this point, let's choose File > Save All, and now we are ready to start creating the content that goes inside of these containers.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 102069 Viewers
61 Video lessons · 88784 Viewers
71 Video lessons · 72595 Viewers
56 Video lessons · 104237 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.
Your file was successfully uploaded.