Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.
At this point in the process of bringing the whole design together or to the point where we need to work on the navigation links and what today's date is and so to do that I'm going to go over to the exercise ex1003, bring in the first bit which is to set the list items in the navigation links ordered list to generate an inline box so it will be displayed inline and then have right padding, and right margin and right border.
That will help set up to the separators and the space around the separators, that we want between these links. This way there will be the link text, three quarters of an em of padding a one pixel border and then a half an em of right side margin, a little extra space that gets generated by the browser to go between the list items, once they've been set to display inline. This is just something that happens. So it'll be about three quarters of an em of space on either side of these right borders, which act as separators. So, if we go back to Firefox and hit Reload there's what happens. The reason that the about us is pushed over is because of that 3em padding that we set for the navlinks ordered list in the previous video.
Now here we have pretty much things laid out the way we want, except for that date, the July 16, 2006 and also we'd like to do something about the colors. Here, a link color. Well, there is one other thing that I should point out. We'll save here and we'll go back. The, the last of the links, the contact us has this separator and we actually want to get rid of that. So, thanks to the style we just brought in, the navlinks li.last will have a border right of zero. So this will override this and basically switch off the border for the list item with the class of last, which happens to be the last one in the list and then the links will be set to this color, and so when we hit Reload the links change colors and that last border comes off.
So now, our last step is to do something with the, with today's date and for this, were going to right align the text and boldface it but by right aligning it, that will put it all the way over to the right-hand side of the design. Boldface the text and make in white in color and then I'm actually going to set the margin top to zero just for a moment and this line height of one is in here actually to make sure that certain rounding problems don't occur. So if we hit Reload now, you can see that we have the July 16, 2006 all the way over to the right side, well almost all the way to the right side, except for the right-hand padding and it has no borders. This right padding of 2em is what's keeping this base open right here.
And then the last thing that we do is set the margin top to be -1 and 2/3ems, this is a figure that was arrived at through some calculation and a tiny bit of experimentation. We set the margin top to be negative and that pulls that paragraph upwards so that it now sits over top of the navlink. So this puts the date right where we want it and pretty much goes our navigation bar with dates just the way that we like it and that puts us in excellent position to start bringing together the main layout, including creating side by side columns and making sure that everything looks all neat and pretty.
There are currently no FAQs about CSS Web Site Design.
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.