Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101136 Viewers
61 Video lessons · 87901 Viewers
71 Video lessons · 71778 Viewers
56 Video lessons · 103648 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.