Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

[How Do I:] Use Cascading Style Sheets for Web Page Layout?

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
Hi, this is Chris Pels. In this video we're going to learn how to do CSS-based page layout with developments. In recent years most people have used HTML tables to create layout on their web pages. And, in fact, probably the majority of the sites on the web still use tables as a major basis for doing their page layout. However, more and more sites are using div element in conjunction with cascading style sheets to do their page layout because that approach offers several advantages. The first thing is that typically a div-based page layout has considerably less HTML that has to be sent down to the browser, so it's a leaner page, and that has an impact on performance. A second somewhat less obvious advantage is that when you use div elements, you can position the content in your HTML so that it is sent down to the browser and displayed first. A lot of times HTML tables have quite a bit of HTML markup before it actually gets to sending the content aspect of the page down to their user. And displaying the content first has been shown to have a distinct advantage on the perception of the user towards the website because they like to see the content first and not have to sit there and see graphics or navigation or whatever and then wait for the content. The third advantage is that by using cascading style sheets in conjunction with div elements, there is a reasonable degree of separation between the structured aspect of the page layout, which is the div element in the HTML and the cascading style sheet, which represents the design. So let's take a look at a standard table-based page layout. And then we'll go on and do a number of div-based cascading style sheet layouts to show you how they compare and some of the basic principles so you can implement them on your own websites. So let's go ahead and create a website here in our empty solution that we'll use to create a number of test pages to demonstrate the principles. Let's just call this websiteVB. And let's create our first page here. We'll do a table-based layout. And let's call this PageLayoutTable. So let's create a simple layout here using tables. And what we want to achieve is a left-hand navigation column and then the rest of the page on the right side will be the main content area. So let's create a table here, and we'll give it a width equal to 20%. And this will be our left-hand navigation column and height. Let's give that 100%. And inside here let's put one row. And in there we'll put one column. Just put a little text in here so we can see it when we run the page. For the navigation links—and let's just make this cell to vertical alignment to the top. Let me just format that HTML a little bit so it's a little more readable for you. So that's our left-hand navigation column. Let's just use this as a basis for our right-hand content column. And the right-hand one will make 80% of the page. We'll keep one cell in here, and we'll just change the text so we can see it. So we'll call this one content. And just to make things a little more obvious, let me add a style in here where we set the background color of the content column to blue. And we'll take that style and put it up here in the navigation, but we'll give the navigation a yellow. Okay, there we go. Good. And the last thing we want to do here is to take our content table, and let's align that to the right. And the last thing we're going to do is just get rid of our div element container here that came into the page by default. Let's just reformat. And one more thing here, let's put in alignment equal to left. Okay. Let's just run this page and take a look at what it looks like. And as you might expect, we have our navigation column on the left and the content column on the right. We could go further here, and we could take this right-hand content column and put a nested table in here to have say 3 columns of content, etc. So that's the basic table-based approach to page layout, which I think many of you are familiar with. Now let's go on and do the div approach and see how we do that. So let's go ahead and create a second page where we'll do our first div layout sample. And let's call this DIVLayout1 because we'll be creating several of these. So now let's go down and add several divs to the page here. And the div will become our major containers for areas of the page much like the cells of a table. So let's make this first one have an ID of header. And you'll see why we're doing the IDs in just a moment. Let's copy that. And we're going to create 3 more divs here. And the next one—let's call this leftcolumn. We'll make the next one content, and then we'll make the last one the footer. Now let's just add a little text in each of these so when it's displayed we can recognize that section. So we'll just put footer, content, left column, and header. So let's just run this and see what it looks like. As you might expect, they're in a flow layout, so we're getting them sequentially down the page. So now let's go back. And what we need to do is add some style information to cause each of these divs to position on the page as we would like them. Now a good practice is to create a separate cascading style sheet and link to it from the page, so we're going to do that. And we'll go over here, and we'll add a new item, cascading style sheet And we'll call this DivLayout1.css just so the name matches the page. When you get the sample source code, it'll be easy to figure out. And in here let's create a style element for each of those divs. So we have header, we have left column, we have content, and we have footer. Now we're using the pound sign as the prefix for the name of our style here, so I just used #footer because these are what are called element IDs. And element IDs refer to the ID value— or rather the value of the ID attribute on the element. And, as you recall, over here in our page, we gave the IDs of header, left column, content, and footer. So that's why we're naming these cascading style elements accordingly. An important thing to consider when you're naming things is that element IDs are for elements that only occur once on a page. If you have multiple occurrences of a particular style, then you need to make it a class by using the dot prefix rather than the pound sign. So let's add some attributes to these styles. And the first one let's just add a color of 0f0. Then let's go to a position, and we'll make this absolute. And let's set the top of this as zero pixels, the left as zero pixels, a width of 800 pixels, and a height of 100 pixels. Now let's just take these style attributes. And for making it quicker, let's just copy them down here, and then we're going to edit some of these values. So for the left column, let's just change the color here to f00. And let's offset it down 100 pixels. We'll leave it on the left at zero pixels. Let's make the width 150 pixels. This is our navigation column on the left. And let's make the height 500 pixels. And down to the content— and we'll make this color fff, make the top 100 because it's at the same level as the left column, make it a width of 700 and a height of 500. Then for our first section, let's leave the background color of that, and let's put the top at 600 because it has to be down below both the content and the header. The left stays at zero with 800 pixels because we want it all the way across the screen. And we'll leave it the same height as the header at 100 pixels. So that looks good. We need to go back over here to our page, and we'll put a link from the cascading style sheet to the page here by dragging and dropping the cascading style sheet. And I just recall there was one more thing we want to change over here in the cascading style sheet. I see that we left the left value at zero, so that would put the content right on top of the left column. So let's make that 150 so it's out to the right. So it should be all set. Let's fire-up the page here and take a look at what we have. And it is what we expected. Let me make this just a little bit bigger. And you can see we have our header up here, which is at the 800 pixels. Our left column, our content, and down at the bottom we have our footer. So we've been able to use absolute positioning here to get a pretty nice standard page layout. And we've done that back here by separating the design of the page into the cascading style sheet. And the actual HTML is rather simple. Now this isn't bad, but let's say we want to add a right-hand column as well as a left-hand column. What do we have to do? Now typically what I would do is just add the right column right here on the same page. But what I'm going to do is just quickly create a second page so when you get the sample code you have this first one intact. So add a new style sheet and page here, so we'll call this DIVLayout2. And let's add another page, and we'll call that one DIVLayout2 as well. Then what I'm going to do is go over to the first page, and I'm just going to take all of this HTML right down with the head and body tag. And we're going to go over here to this and paste it in. So this will speed up what we're doing here. And then we're going to go back to the first cascading style sheet, copy everything there, go back over to the second cascading style sheet, and paste it in. Now let me just clean up things here by closing a few of these windows. And we'll get rid of the original table one and this default.aspx as well. So the first thing we need to do is add our right-hand column in the HTML. So let's just take our left column, copy it, paste it in here, and all we need to do is rename it in the text and also here in the ID. Now let's go over to our CSS file and take the left column style. We'll copy and paste that. We'll use that as the basis for our right-hand column. Now our header and our left column will stay as is. And then the right column— all we'll do is make its left value to be 650. And, in fact, let's just leave the content at 500, so that stays the same in the this case. And the footer is staying the same as well. Now let's take a look at the page. We'll open it up in the browser here. And now we have our right-hand column. So it was quite easy to add another column to our layout. We really just added the div to the page and added another cascading style sheet and not much more than that. So in both this first and second example, we've been using absolute positioning of our divs on the page. Now let's make a third page. And this time we're going to use the float style attribute to get the divs to float next to one another on the page rather than absolutely positioning them. So I'm going to go ahead here and create a new style and a new page. Let's do the page first here, so this would be DIVLayout3. And we would create a corresponding style sheet, and we'll call this DIVLayout3. And let's just copy the HTML over from number 2. And as I said, I'm doing this just so when you get the sample code, you're going to have all these different approaches as separate entities whereas typically we could just edit the one page. So we'll go down here, and we'll paste in the HTML there. And let's go back to the two and take the cascading style. Go back over here to three—paste that in. And let's just go over here to three and take our new cascading style sheet and put in a link to that there. We're going to close down our number 2 pages. Now we don't have to do anything to the HTML, and we're just going to edit the cascading style sheet, so this is an example of how the design aspect is really quite separate from the HTML. So the first thing I want to do here is— because we're not going to absolute position anymore, I want to add a body element and set a couple attributes. So we'll add the body in here. And I want to set the margin to zero pixels and the heading to zero pixels. Then we're going to go down to the header, and we're going to get rid of the absolute positioning and just let it flow inline. Since it's the first HTML element, it will naturally be at the top of the page. We're going to go down and take out the positioning for the left column. And in its place, we're going to put the float element— or attribute, which will float our element to the left in this case. So what the float does is it causes the left column to float or stick to the left side of the page. And we're going to take that, and we're going to do the same thing for the right column and the same thing for the content. Now down here we'll take out the absolute positioning for the footer as well, but what we want here is the clear attribute. And what the clear attribute does is it says, okay, let's clear any float attributes that have been set in previous elements because the float attributes build successfully— successively rather—on one another. Okay. Let's fire up and look at the page in the browser. And there's the page. It has a very similar look to when we did the absolute layout, but we're floating the left content and right columns. So using the float attribute is an improvement because we have somewhat less code, so to speak, over in the cascading style sheet. So everything is a little smaller. But we're still dealing with fixed width columns. How would we create a column-based layout where they were more fluid— or as the term is liquid— where the width of the columns would change as we re-size the browser? Or more importantly, as users who are running the page at different resolutions have different widths available on their screen? And they would get the same basic appearance of our page. So let's create a fourth page that's based upon our number one page and also a style sheet. So add that in here. And this one will be DIVLayout4 for the style sheet and also DIVLayout4 for the aspx page. And let's just close down number 3 here. And we're going to go over and open up one. We're going to take the HTML in one and copy it, go over here to number 4 and paste it in here. And let's us the style information from number 1 and put that in our number 4 style as well. Now let's close down our number 1 just so we don't start to edit them. So once again, our HTML doesn't have to change at all. Just to reiterate that, we're going to have 2 columns, our left-hand navigation column and then the main content area off to the right of it. Since we're not going to use absolute positioning here, I want to add in a body attribute again or style element. And put zero pixels for the margin and zero pixels for the padding. Okay. So what we're going to do differently here is starting with the header, get rid of the absolute positioning. And instead of an absolute width of 800 pixels, we're going to use 100% for our header. Then for our left column, we are going to get rid of the absolute positioning as well. And here we're also going to use a percent. In this case, 19%. Similarly for the content— in this one we're going to make it 80%, and down in the footer get rid of the absolute positioning, and this one we're going to make 100% just like the header. Now let's go over to our page. Let's put in a link to our cascading style sheet, and there's one more thing we need to put over in our CSS. We need to float the left column. And we're going to—oops— we're going to float this one to the left. And our content, in this case, we're going to float to the right. Now we'll start the browser here and view our page. And there we have the header, column left, and content as well as the footer down here. But what's a little different about this is no matter how big we make the page, our columns, header, and footer all will re-size to percentages. And this is more visually appealing and also represents the fact, as I said, that this page would work better than the fixed width size in browsers with lower resolution. Let's close this down. Now last but not least, how would we do a 3 column approach here? So let's create a new number 5 page and cascading style sheet. And we'll see how to do that. And the style sheet number 5. Now this can be largely based upon number 4, so let's take all of the style information in number 4, put it in number 5. Take the HTML in 4, copy that, and put that over in 5. Here we've got the form tag here, so let's just get rid of that. We don't want that in there. And let's link in our number 5 style sheet. And the other thing we want is to add a right column, as we talked about. So then our HTML is all set there it appears. We'll check that out in a minute. Let's go over to our number 5. And what we need to do here in our style sheet is just add a style for the right-hand column. And we'll just put that down here. And all we want to really do here is change the flow attribute to right for the right most column and left for the content. And let's make our left-hand column now 20%. We'll make the content 59% and then 20% for the right-hand column. Now one thing we're going to need to do with our footer down here is we need to add the clear attribute and both— and I see here that we forgot to rename this, so let's just rename this style attribute. So now let's open up this page in the browser and take a look at it. Here we have our layout as expected with the left and right columns, content in the middle, header on top, footer on the bottom. And what's different about this compared to the fixed width layout that we did earlier with the left and right column is watch what happens as I re-size the browser. You can see that both the left content and right column are nicely re-sizing according to the width of my browser window, in this case. Or it could be a different resolution of the user's screen. So these different examples that we've gone through here show you several different variations to use divs for laying out your pages from absolute positioning and fixed width divs, fixed height divs, to the last one where we had floating divs that were based upon widths of percentages so that the whole page layout re-sized very nicely as either the browser window or screen resolution changed. Now you could expand upon what we've done here, for example, by taking the content area of the page and adding some container divs inside of the content div that would partition the content area into— say multiple columns of content for a newspaper-like approach. Or you could position certain divs in certain places within the content area all to achieve different effects. And you could put that style information out in cascading style sheets for each of those approaches within the content area so you could have, say, several standard formats to your content area. And then based upon which cascading style sheet you linked in, you would get a different layout to the content area, which might be very useful because you would have several different types of pages with different layout. You may have your home page, which has a standard layout and then a main content page for sub areas of your site. And then the third type of format might be for content detail within each of those sub areas. And when you get to more complex situations like that, the benefits of using the div approach are much greater than if you tried to do the same thing with HTML tables. You may have noticed as we went along here that I talked about one of the benefits early on is that you have a separation of the design aspect from the actual structure of the HTML elements in the page, and that's played our very nicely here where we have different cascading style sheets associated, in this case, with different web pages to provide a different layout. And as I said, that's really advantageous if you have a team working on a page design. Or even if you're by yourself, it's advantageous because it really segments things very nicely. So I encourage you to download the sample source code, look at these different examples, use them as a basis for implementing some different page designs in your own sites. And probably the last point I should make is that one of the things you will run into in div base layout is that you absolutely have to test your pages in the major target browsers for your website. So I hope you have enjoyed watching this video and learned something about how to do page layout with divs and cascading style sheets. This is Chris Pels. Thank you for your time.

Video Details

Duration: 29 minutes and 19 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 12
Posted by: neudesicasp on Aug 23, 2013

In this video we learn how to use <div> elements in combination with cascading style sheets (CSS) to create robust and higher performance web pages. The <div> based approach will be compared to the <table> based layout approach used by most web sites over recent years. Then, several CSS-based approaches will be shown, ranging from absolute positioning to floating elements. We also learn the benefits of separating structural HTML from design with the use of CSS.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.