Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Discover how to make your website more readable and efficient across various screen sizes and devices. Join author Chris Converse as he shares his own specialized techniques for creating a responsive site. The course takes the site from start-to-finish, from comping your ideas in Photoshop, to setting up the HTML page and containers, to styling established elements for small, medium, and large screens. In particular, Chris shows how to load images with CSS, reposition the nav bar for better viewing on mobile devices, and how to make the download time faster for small screens by providing multiple versions of your banner graphic and other images. Plus, learn how to replace graphics with high-resolution versions for Retina displays using CSS media queries.
This course was created and produced by Chris Converse. lynda.com is honored to host this training in our library.
Now to position the nav bar, let's come back to our CSS file. Let's come back to screen layout large. Let's scroll down. And after our promo_container content, let's hit a few returns. Let's type nav, beginning and ending bracket. Let's come down here and set a top property of 275 pixels. Now, the height of our heading is 275 pixels, so if the top of the nav is set to 275, that will be right after the ending heading area.
Next rule nav a. We're going to target the anchor links inside of the nav element. We're going to come in here and set a margin. We're going to set 12 pixels on the top, 0 on the right, 10 on the bottom, and 20 pixels on the left. This will space out the navigation area so that we have a little bit of space around the anchor tags, and it also makes sure that the anchor tags space from each other 20 pixels on the left-hand side here. Let's choose File > Save. Let's come back out to our browser.
Let's hit Reload. So now we can see the top position of this item is now at 275 pixels, which again is right under where the heading area stops. We have our margin on these individual items, which pushes the navigation element a little bit taller to encompass that margin, and then each one of these links is spaced out as well. Now that our navigation properties are set, we're going to focus on the float problem we're having down here. Since each one of the individual promos are set to float, the outer page container is not extending down to encompass all of the content inside of each one of the individual promos, and so that's where we're going to focus our attention on next.
Find answers to the most frequently asked questions about Creating a Responsive Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.