Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Next, we're going to style the heading area for large screens. So inside of our layout_large css file, let's come down here after the Layout Large Screens comment and let's create a rule that targets the header. So we'll type header, beginning and ending bracket. Let's split those open. The first property we're going to set here is going to be a height of 275 pixels. That matches the height of the slice we created in Photoshop for the large banner. Let's hit a return. We're going to set background.
We're going to set url, beginning and ending parenthesis. Inside of the parentheses, ../ to come out to root, /images/banner_large.jpg. Outside of the parenthesis, set no-repeat. For the X position, we're going to set right, and for the Y position we're going to set 0 pixels. Let's hit a few returns. Next, we're going to type headerr, space, a.logo, beginning and ending bracket.
Let's split those open. So for the logo on large screens, we want to first set a width. We're going to set that to 150 pixels, again matching the slice size of the large logo in our Photoshop file. Next we'll set height to 85 pixels. Next we're going to set the top property. This locks onto the position absolute that we set up here earlier. So for the top value, we're going to set 28 pixels. We're going to set a right value of 30 pixels.
This will make sure of the logo is always 30 pixels from the rightmost side of the screen. Next, we're going to come down here and we're going to choose background-image, url, beginning and ending parenthesis, ../images/logo_large.png, then a semi-colon. Let's choose File > Save. Let's come back out to the operating system and let's load this on a browser.
So now in the browser, we've given dimension to our heading area so we can see that this is now 275 pixels tall. We have our large banner graphic in the background and we have our logo over here on the right, which also has new block property dimensions and a background graphic referenced in from that rule we just created. So now that we have the header and logo links working for the large screens, next we'll work on the article and promo areas.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 42248 Viewers
119 Video lessons · 53753 Viewers
65 Video lessons · 14134 Viewers
113 Video lessons · 82739 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.