Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In XHTML and HTML Essential Training, Bill Weinman helps designers and coders understand XHTML and HTML. In the process, Bill covers document structure, block and inline-level tags, floating images, controlling white space, phrase and font markup, and tables and frames. He even provides a good introduction to CSS. Bill offers step-by-step guidance for building a complete working web site. Exercise files accompany the course.
Continuing with the building of our example website, we are going to fill in the default content and styles for the right- hand side of the content portion of the page in this lesson. So we have the beginning HTML and CSS files, from the Layout-right folder in the Exercise Files. So we'll go ahead and do the Save As and save these as template.html and beginning.css we'll save that as main.css.
So you are all set up there and we are going to go ahead and set up the contentRight portion of the page. This is actually pretty straightforward here and I put in a div id="sideBar". Like that and go ahead and put in a comment here. And then inside of the div we are going to put, just like we did in the other program, I'm going to put in h3 because we use h3's in the sidebar, Sidebar Here, and sidebar content will go here.
Go ahead and save that. As we load this up in the browser, drag our template file into the browser there, we see our sidebar content on the right-hand side of the page and that's because it's in this table cell here. So we have table row and we have two columns. We have this one and we have that one. So let's go ahead and format it now in the CSS. So this will go after the mainContent section.
Go ahead and put in a comment here. This is the sidebar. We'll start with the contentRight td and again this has a background-color. fff, which is white. This one here has a width of 265 pixels. Then we'll enter the sideBar div. This has same padding trick, this one set to 10 pixels. And then also has a border on the left-hand side.
Go ahead and save this. I'll show you in the browser what this border is all about. You look at our site here, you see this line there and you will notice that it doesn't go to the bottom of the page. It just goes to the bottom of the sidebar and so that's accomplished by having it via border left on the sidebar div. If we reload here, we see there's our border. So continue entering our styles here. There's our style for the paragraphs inside the contentRight context.
So font. font-size is a little bit smaller than it is in the mainContent. A little bit of spacing between the lines. The color is going to be a little bit off white. So I have a little bit of margin in between the paragraphs or after the paragraphs, but the paragraphs themselves will be flush up against this 10 pixel padding. Remember, we use h3 headings for the sidebar. Go ahead and copy the font-family from up here.
Headings are going to be this teal color that was selected by the designers. And we'll go ahead and enter those margins there and there we have it. We'll save and go take a look at it in the browser and there we go. That's our sidebar and that's what our sidebar looks like. It's little bit smaller, it's got the slightly gray color text and this teal color heading and there we have it. That's our formatting and our layout for the sidebar.
Find answers to the most frequently asked questions about XHTML and HTML Essential Training.
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.