1
00:00:00,000 --> 00:00:03,990
Now that we've learned a little bit about positioning elements with CSS and how

2
00:00:04,000 --> 00:00:07,990
the various methods of positioning work, I want to walk through one of the more

3
00:00:08,000 --> 00:00:12,990
common strategies used by designers when creating CSS-based layouts.

4
00:00:13,000 --> 00:00:16,990
Now with this movie, I'm not advocating one specific layout technique over another.

5
00:00:17,000 --> 00:00:20,990
As you learn CSS, you'll soon see that there about as many variations on how to

6
00:00:21,000 --> 00:00:23,990
create CSS layouts as there are designers.

7
00:00:24,000 --> 00:00:26,990
I just want to give you a starting point, so that you can see how designers

8
00:00:27,000 --> 00:00:31,990
typically approach page layout and how various techniques are combined to drive

9
00:00:32,000 --> 00:00:33,990
the overall page design.

10
00:00:34,000 --> 00:00:37,990
I want to start with the concept of page regions.

11
00:00:38,000 --> 00:00:42,990
Most designers will print a quick markup of pages, with content regions just

12
00:00:43,000 --> 00:00:44,990
sort of blocked out.

13
00:00:45,000 --> 00:00:47,990
This will allow them to design towards the functionality of the site and

14
00:00:48,000 --> 00:00:52,990
consider content first before getting caught up in the visual design.

15
00:00:53,000 --> 00:00:56,990
It also allows designers to start thinking about the structure of their HTML.

16
00:00:57,000 --> 00:01:01,990
Each one of these content regions will most likely be represented in the page

17
00:01:02,000 --> 00:01:03,990
structure by a containing element.

18
00:01:04,000 --> 00:01:08,990
Now in the past, we've been pretty much limited to using divs for these purposes,

19
00:01:09,000 --> 00:01:13,990
but HTML5 now gives us several new semantic tags to use when marking up

20
00:01:14,000 --> 00:01:14,990
sections of content.

21
00:01:15,000 --> 00:01:20,990
No matter which tags are used, the concept here is that sections of content are

22
00:01:21,000 --> 00:01:22,990
contained within parent elements.

23
00:01:23,000 --> 00:01:27,990
This serves the dual purpose of grouping the content together and giving us a

24
00:01:28,000 --> 00:01:31,990
containing block to use for positioning and styling.

25
00:01:32,000 --> 00:01:34,990
Let's take a look at how we can create a simple two-column layout using

26
00:01:35,000 --> 00:01:36,990
these containing blocks.

27
00:01:37,000 --> 00:01:40,990
The first thing we'll do is give the body element a defined width to set

28
00:01:41,000 --> 00:01:46,990
the size of the page and then center it by giving it a right and left margin of auto.

29
00:01:47,000 --> 00:01:50,990
In this case, we'll create a flexible layout by using percentages, but if we

30
00:01:51,000 --> 00:01:55,990
wanted to target a specific screen size, we could do that by using pixels.

31
00:01:56,000 --> 00:01:58,990
With our header element, we don't really need to do anything;

32
00:01:59,000 --> 00:02:02,990
it will expand to fill the body tag. And if we don't define a height, it would

33
00:02:03,000 --> 00:02:04,990
be determined by its content.

34
00:02:05,000 --> 00:02:08,990
In this case, we'll go ahead ad define a height to make sure the header takes up

35
00:02:09,000 --> 00:02:10,990
the visual space we need for the layout.

36
00:02:11,000 --> 00:02:14,990
We'll also add a little margin to the bottom of the header element to separate

37
00:02:15,000 --> 00:02:17,990
its content from the navigation.

38
00:02:18,000 --> 00:02:23,990
In the case of our navigation, we might want the menu to be a specific height as well.

39
00:02:24,000 --> 00:02:26,990
Depending upon how you structure your navigation, you'll have several

40
00:02:27,000 --> 00:02:27,990
opportunities to do that.

41
00:02:28,000 --> 00:02:31,990
Just for the sake of simplicity, I'll go ahead and set it here and then add

42
00:02:32,000 --> 00:02:35,990
another bit of bottom margin to separate the navigation from the content.

43
00:02:36,000 --> 00:02:40,990
You may have noticed here, too, that I'm using ems instead of pixels for margins.

44
00:02:41,000 --> 00:02:43,990
The reason I'm doing that is because I'm doing a fluid layout.

45
00:02:44,000 --> 00:02:47,990
The ems will be relative to the size of the text, connecting the page layout to

46
00:02:48,000 --> 00:02:48,990
the device's font size.

47
00:02:49,000 --> 00:02:53,990
Now next up, we face our first real challenge.

48
00:02:54,000 --> 00:02:57,990
We need to have our sidebar and main content arranged as two columns.

49
00:02:58,000 --> 00:03:00,990
The easiest way to do that would be to use floats,

50
00:03:01,000 --> 00:03:05,990
so in this case, I'll float the sidebar to the left and the content to the right.

51
00:03:06,000 --> 00:03:08,990
I'm going to also assign width to them.

52
00:03:09,000 --> 00:03:14,990
Now notice that I'm giving the sidebar a width of 30%, while giving the content a width the 60%.

53
00:03:15,000 --> 00:03:18,990
These widths will be based off a calculated width of their parent element,

54
00:03:19,000 --> 00:03:20,990
in this case, the body tag.

55
00:03:21,000 --> 00:03:26,990
By making the width not quite 100%, I'm defining the amount of space between the two columns,

56
00:03:27,000 --> 00:03:28,990
in this case, 10%.

57
00:03:29,000 --> 00:03:32,990
Again, I'll let the content itself control the height of these elements.

58
00:03:33,000 --> 00:03:36,990
Now floating these two elements gives us our columns, but it also causes

59
00:03:37,000 --> 00:03:38,990
problems with our footer.

60
00:03:39,000 --> 00:03:42,990
As you can see, our footer has now moved up and is underneath the sidebar

61
00:03:43,000 --> 00:03:43,990
and content regions.

62
00:03:44,000 --> 00:03:48,990
We'll need to clear the footer and move it back down underneath our content. That's it.

63
00:03:49,000 --> 00:03:51,990
The basic layout of the page is complete.

64
00:03:52,000 --> 00:03:55,990
From there, you'll begin to control the layout of the content within the

65
00:03:56,000 --> 00:03:56,990
regions themselves.

66
00:03:57,000 --> 00:04:00,990
For the navigation, for example, you'll probably take the list items within an

67
00:04:01,000 --> 00:04:05,990
unordered list and float them so they appear as horizontal menu items.

68
00:04:06,000 --> 00:04:09,990
You might also want to control the positioning of the items in the header by

69
00:04:10,000 --> 00:04:12,990
setting the header's position to relative and then absolutely positioning an

70
00:04:13,000 --> 00:04:15,990
item inside of it, like a logo.

71
00:04:16,000 --> 00:04:19,990
We might also float items within content regions to control how items like text

72
00:04:20,000 --> 00:04:21,990
and images interact with each other.

73
00:04:22,000 --> 00:04:26,990
This is of course just one example of how layout techniques can be combined to

74
00:04:27,000 --> 00:04:27,990
control page layout.

75
00:04:28,000 --> 00:04:31,990
What I'm hoping it will do is show you that basic layouts can be handled with a

76
00:04:32,000 --> 00:04:35,990
minimum of effort and that CSS layout doesn't have to be intimidating.

77
00:04:36,000 --> 00:04:39,990
Yes, you will need to dig a little deeper into the techniques I've mentioned

78
00:04:40,000 --> 00:04:42,990
here, and you'll need to start learning about how browser-rendering differences

79
00:04:43,000 --> 00:04:45,990
can force you to seek workarounds from various layout issues.

80
00:04:46,000 --> 00:04:50,990
But, by and large, page layout isn't any harder than any other CSS technique that

81
00:04:51,000 --> 00:04:51,990
you're going to learn.

82
00:04:52,000 --> 00:04:55,990
Just be sure to learn as many different techniques as you can, including the

83
00:04:56,000 --> 00:05:00,990
emerging CSS3 capabilities, like the flex box and CSS grids modules.

84
00:05:01,000 --> 00:05:04,990
By understanding the ins and outs of various layout methods, you'll be able to

85
00:05:05,000 --> 00:05:09,990
craft solutions that are tailored specifically to your site's content and needs

86
00:05:10,000 --> 00:05:20,000
and not be tied to a single layout or page structure.