IntroductionWelcome| 00:04 | Hi! I am James Williamson, senior author
here at lynda.com, and I want to welcome
| | 00:08 | you to CSS: Page Layout.
| | 00:10 | In this course we are going to
explore the properties and techniques around
| | 00:14 | controlling page layout
through Cascading Style Sheets.
| | 00:16 | We will start off with a quick overview
of basic page-layout concepts and then
| | 00:20 | talk about how to design your pages with
CSS in mind, and properly structure the HTML.
| | 00:26 | We will then discuss CSS-page-layout
concepts like floats and positioning
| | 00:30 | elements, and move on to exploring
different types of page layouts, such as
| | 00:34 | fixed, flexible, and responsive.
| | 00:37 | After that, we will focus on how to
control the content itself by tackling
| | 00:41 | navigation, images, and techniques
that can enhance your overall page design.
| | 00:47 | By now, I'm sure you're eager to get started,
| | 00:49 | so crank up your favorite code
editor and let's explore CSS: Page Layout.
| | Collapse this transcript |
| How to use the exercise files| 00:00 | If you're a Premium number of the
lynda.com Online Training Library or if you're
| | 00:04 | watching this tutorial on a disc,
you have access to exercise files used
| | 00:08 | throughout this title.
| | 00:10 | The exercise files for this title are
arranged by chapter and are located in
| | 00:14 | folders that are named based on
the movie number they represent.
| | 00:17 | Now since each exercise is
self-contained, you will want to work with those
| | 00:21 | folders individually;
| | 00:23 | however, I recommend copying the entire
exercise files folder to the desktop and
| | 00:28 | then working on the files
from the appropriate location.
| | 00:30 | I will call out the location of the
exercise files for each movie and you should
| | 00:34 | see a brief overlay that will also
tell you where to find those files.
| | 00:38 | Now this course focuses on common page-
layout techniques with CSS, and not on
| | 00:43 | any one authoring tool.
| | 00:45 | As such, it doesn't matter
which authoring tool you use.
| | 00:48 | If you're comfortable with an existing
HTML editor, simply continue using that
| | 00:53 | one for this course.
| | 00:54 | I'll be using Aptana Studio for the course
for a couple of reasons. First, it's free.
| | 00:59 | It's cross-platform, it's very
lightweight, and it allows me to focus solely
| | 01:03 | on the code itself.
| | 01:05 | I am going to give you a brief tour
of how I am going to set up Aptana in case
| | 01:09 | you want to use it and have your
workspace look a little like mine, but in the
| | 01:12 | end it really doesn't matter which tool you use.
| | 01:15 | So here I am, in Aptana, and I'm just
going to run through a very brief setup.
| | 01:20 | The first thing I am going to do is
create a new project so that I can have
| | 01:23 | quick access to my exercise files.
| | 01:25 | So I am just going to go up to File and choose
New, and I am just going to do a new web project.
| | 01:29 | I will just go ahead and call it CSS
Page Layout. And instead of using the
| | 01:36 | default location for root folder, I will
just browse out to my desktop and find
| | 01:41 | those exercise files right there.
| | 01:42 | I will open that up and I will finish it.
| | 01:46 | Now I have access to all of my
exercise files right from this panel and I can
| | 01:50 | just click and open them up.
| | 01:52 | Now the next thing I want to do is
make life a little bit easier for you guys
| | 01:55 | that are trying to read my code.
| | 01:57 | The default code in Aptana is pretty
small, and I will just make it a little bit
| | 02:01 | larger, maybe change font up a little
bit to make it easier for you to read.
| | 02:04 | So I am going to go up to Aptana Studio
and go to Preferences, and I am going to
| | 02:08 | click on the Aptana Studio
category and then click on Themes.
| | 02:13 | The first thing that I want to do is
just make the text a little bit easier
| | 02:15 | for you guys to read,
| | 02:15 | so I am going to go down to
Font and just choose Select.
| | 02:18 | I will go up and choose, I will do Arial,
and I will take it up to about 24 points.
| | 02:23 | Now again, you guys don't
have to do this with me.
| | 02:25 | The only reason I'm doing this is to
make life a little bit easier on you guys
| | 02:28 | and make it easier for you to read my text.
| | 02:30 | I will go ahead and apply that, and I
can see right away that that's happening.
| | 02:33 | Now in terms of the themes, I am just
going to use the default Aptana Studio theme,
| | 02:37 | but feel free to use any of these.
| | 02:39 | Notice they even have one
that mimics Dreamweaver.
| | 02:41 | So if there's a coding environment
you're more comfortable in and you're not
| | 02:44 | actually using that program, feel
free to choose that particular theme.
| | 02:47 | The one last thing I want to check is I
am going to go up to Editors here and I
| | 02:50 | am going to make sure that Enable word
wrap is selected and then just click OK.
| | 02:54 | From time to time I might resize some
of my dialog boxes, but for the most part
| | 02:59 | that is all I'm going to
do with Aptana Studio.
| | 03:00 | I am just going to keep the
settings as basic as possible.
| | 03:04 | Now it's also crucial that you're going
to be using the most recent versions of
| | 03:08 | Chrome, Firefox, Safari, Opera, and
Internet Explorer if you're on a PC.
| | 03:13 | So go ahead and download and install
those, and of course throughout the course
| | 03:17 | we are going to make it a habit of testing
our pages with multiple browsers. All right!
| | 03:21 | So now that we are all set, let's go
ahead and dive in and get started with
| | 03:24 | CSS page layouts.
| | Collapse this transcript |
|
|
1. Layout BasicsBox model review | 00:00 | Before we start exploring the
individual techniques of page layout, I want to
| | 00:03 | begin with a general overview
of CSS page-layout concepts.
| | 00:07 | At the core of almost all page-layout
techniques is the box model, so that makes
| | 00:11 | reviewing it a logical starting point.
| | 00:13 | Before we get into that, however, I
feel like I need to mention again that
| | 00:16 | this course is a continuation of my CSSL Core
Concepts course. That means that in this course
| | 00:22 | we are going to be building on
the material that covered in the CSS:
| | 00:25 | Core Concepts course.
| | 00:26 | There will be some repetition, designed
to reinforce important concepts, but for
| | 00:30 | the most part, if you're new to CSS and
are starting with this title, I actually
| | 00:34 | recommend that you go back and start
with the Core Concepts title and then come
| | 00:38 | back to this on when you finish.
| | 00:39 | I had pretty much said the exact same
thing in the Welcome movie, but I know
| | 00:43 | that a lot of you guys skip those,
so I wanted to mention it again here
| | 00:46 | before got too far into the title. Okay, cool!
| | 00:49 | Now the box model is the term
that we use to describe the rules and
| | 00:52 | properties surrounding the physical
properties of all HTML elements on the
| | 00:57 | page, and basically every single
element on your web page is considered to be
| | 01:01 | in a rectangular box.
| | 01:03 | The properties of this box--its width,
height, padding, borders and margins--
| | 01:08 | define not only the size of the
element, but also how it relates to all of
| | 01:12 | the elements around it.
| | 01:14 | Without these properties, we would
not be able to control layout at all.
| | 01:17 | So to visualize these properties a
little bit better, we are going to go ahead
| | 01:20 | and modify the properties of a sample element.
| | 01:24 | Okay, so here I am, in Aptana Studio again.
Feel free to use whatever code editor you want.
| | 01:28 | It does not matter, in
terms of which tool you use.
| | 01:31 | You just want to be able to access
and modify the code. That is it.
| | 01:34 | You can even use just a basic
text editor if you want. All right!
| | 01:37 | I have the box-model.htm file opened,
and you can find that in the Chapter_01
| | 01:42 | folder, 01_01 directory.
| | 01:45 | Just a brief overview of the structure
of the page here. You can see we have
| | 01:48 | some default styles in the head of
the document and if I scroll down, very
| | 01:52 | simple HTML file. We have two div tags,
one wrapping the other one. The outer
| | 01:56 | div has a class of outer applied to it,
the inner one has a class of box, and
| | 02:00 | inside that we have a paragraph.
| | 02:02 | If we look at the styles, we have some
preexisting styles for outer that are
| | 02:06 | giving it a little bit of definition.
| | 02:07 | We have a background color for our
paragraph that's going to show you what
| | 02:10 | makes it a paragraph itself, and
then we have a blank selector, an empty
| | 02:14 | selector here for box, and that's
of course what we are going to be
| | 02:16 | experimenting a little bit.
| | 02:17 | Now before we do that, let's just
preview this in a browser and kind of see
| | 02:21 | what it looks like.
| | 02:22 | So I am going to go right up here in
Aptana Studio to my configurations.
| | 02:25 | Now one more Aptana Studio note, if
you are using it along with me: if I
| | 02:28 | click on this little pulldown menu for
Configurations, I can see all of my browsers here.
| | 02:33 | You may not see that list.
| | 02:34 | You may have those browsers installed,
but Aptana might not pre-populate that list.
| | 02:38 | So if I go right here to Run
Configurations, I can go down to my web browser
| | 02:42 | configurations and choose a new one
and then just point it to the different
| | 02:45 | browser executable files that I want,
and you will have to do that for each
| | 02:48 | browser that you want to load in, all right!
| | 02:50 | So I am going to go ahead and
preview this, say, in Firefox.
| | 02:54 | I can see the blue color here is the
background color of the outer div tag;
| | 02:59 | the orange color is the
background color of the paragraph, okay.
| | 03:02 | So I am going to go back into my code, and
let's start adding a few things to our box element.
| | 03:07 | Now the first thing I am going to add
is a background to this. And I am just
| | 03:10 | going to go ahead and give this a color of #f90.
| | 03:14 | Now, the background property is not
considered part of the box mode; however,
| | 03:18 | it does help us define this element,
and you will often see it included in
| | 03:22 | discussions of the box model. But in
terms of whether it is a part of the box
| | 03:26 | model or not, it's generally not
considered that. All right!
| | 03:28 | So if I save this file and go back
into my browser and reload the page, I can
| | 03:33 | see that it doesn't look like
really anything has changed.
| | 03:35 | Well, that has everything to do with
sort of the stacking order, if you will.
| | 03:39 | This paragraph is sort of stacked on
top of the div tag that it's inside of,
| | 03:44 | which is in turn stacked on top
of the div tag that it is inside of.
| | 03:47 | So the color is there, but because the
inner div tag doesn't really have any
| | 03:51 | properties assigned to it, it's sort
of shrinkwrapping to our paragraph, and
| | 03:54 | that's why we don't see the
background color. All right!
| | 03:57 | I am going to go back into my code.
Now let's go ahead and add some
| | 03:59 | definition to our box.
| | 04:01 | Let's go ahead and give it a width of
300 pixels and let's give it a height
| | 04:07 | of 300 pixels as well.
| | 04:09 | All right, so I am going to save that,
preview that in the browser, and now we
| | 04:13 | can see a little of a change here.
| | 04:15 | We see that the paragraph looks like
it's a lot wider, and it's a lot taller, but
| | 04:18 | again, we are not seeing the background color.
| | 04:20 | Now the reason for that has everything
to do with how block-level elements react
| | 04:24 | when they are inside of another element.
| | 04:26 | Now block-level sort of are elements
that occupy through their own space within
| | 04:30 | the normal flow of the document.
Paragraphs are block-level elements, div tags are,
| | 04:34 | headings, or things like that.
| | 04:36 | Well, a block-level element is told
basically that if it doesn't have a
| | 04:39 | defined width and height, it should just go
ahead and expand to fill the container element.
| | 04:44 | So in this case, it's expanding to fill the
div tag that we just made a little bit larger.
| | 04:48 | Okay! The next thing we want to do is
let's throw some padding on here.
| | 04:51 | So I am going to come into our box properties.
| | 04:53 | I am just going to type in padding,
and I am going to type in 25px.
| | 04:58 | Now this is padding's shorthand notation.
| | 05:00 | We could also say padding-top, padding-
bottom, padding-right, padding-left, that
| | 05:04 | sort of thing. By saying just padding
and passing one value into it, we are
| | 05:08 | going to get the same amount of
padding all the way around our element.
| | 05:10 | So remember, padding is the
space inside the element.
| | 05:13 | It separates the content from the
border edge of the element itself,
| | 05:17 | so we should expect to see a little bit
of cushion between the paragraph now and
| | 05:20 | the edges of this inner box.
| | 05:22 | So we save this and preview it, and
indeed that is exactly what we get.
| | 05:27 | Notice that the color that we
defined for the inner box is a
| | 05:30 | slightly darker orange.
| | 05:32 | So what we are seeing on the inside,
that's the paragraph's dimensions, and now
| | 05:36 | on the outside, we're seeing the box for
the actual box dimensions for the inner box.
| | 05:41 | Now one thing to note here is that
even though we've defined its width and
| | 05:45 | height at 300px by 300px, the 25px that
we've just added all way around it have
| | 05:50 | actually added to the overall width and height.
| | 05:53 | So now we have 25px on this side,
300px here, and then 25px on this side.
| | 05:58 | So now the total width of
our element is now 350px.
| | 06:02 | Okay, so what about borders?
| | 06:04 | Borders are also considered part of the
box model, so right after padding, I am
| | 06:07 | going to type in border and then
we are going to do 2px solid black.
| | 06:14 | So again, this is shorthand notation.
| | 06:15 | This is us telling the user agent that we
want a border all the way around of our element.
| | 06:19 | We want that border to be solid, we
want the color to be black, and we want
| | 06:22 | it to be 2px in width.
| | 06:24 | So again, if I save this, preview it
in my browser, I can see that indeed our
| | 06:29 | inner box now has that 2-pixel black border.
| | 06:31 | If you're wondering, yes,
that is cumulative as well.
| | 06:34 | So we've added an additional 2 pixels on
either side of this, so now instead of being
| | 06:39 | just 350 pixels wide and 350 pixels tall, it is
now 354 pixels wide and 354 pixels tall. All right!
| | 06:49 | One last property to take a
look at and that is margins.
| | 06:53 | So if I come back into my code and I go
down to the next line and type in margin,
| | 06:57 | and we'll just go ahead and do
25 pixels of margin there as well.
| | 07:01 | Just like padding, we are using
shorthand notation here for margin.
| | 07:04 | Now margin doesn't always
calculate to the total width of an element.
| | 07:08 | It basically controls the spacing from
one element to another. And almost always
| | 07:13 | it does calculate in terms of the space
it's going to take up within the layout,
| | 07:16 | but there are instances, for example,
when it's inside of a container that's too
| | 07:20 | small to contain it, where sometimes the
margins will basically be ignored, or in
| | 07:24 | the case of a vertical margin,
sometimes that is going to collapse.
| | 07:27 | That actually is such a big deal that we
are going to discuss that in a separate
| | 07:31 | movie in just a little bit, when we talk
about calculating element dimensions. All right!
| | 07:35 | So I am going to go ahead and save
that, preview that in the browser. And it
| | 07:39 | doesn't look like a whole lot has
changed, except for it looks like our box
| | 07:42 | has shifted position.
| | 07:44 | Essentially, what's happening here is
now this margin is pushing the top of the
| | 07:47 | box away from the top edge of the
containing element, and it's pushing the edges away.
| | 07:53 | So basically, it's sort of creating
its own space inside the containing
| | 07:56 | element at this point.
| | 07:58 | Now what about total width and height?
| | 08:00 | Well, remember we have 300 pixels here;
| | 08:03 | we have 25 here and 25 here, so it's 350.
| | 08:05 | If you take a look at the margins,
that's another 25 on either side, so that's 400
| | 08:09 | pixels wide. But the border, remember
2 pixels and 2 pixels, so that'd be 404 pixels wide, or
| | 08:16 | at least it's taking up 404 pixels' worth of space.
| | 08:19 | It may not be that physically wide, but
it's at least taking up that amount of space.
| | 08:23 | So just remember that width, height,
padding, borders, and margin, all those
| | 08:29 | properties combine to make up the box model.
| | 08:32 | Now when we plan our layouts, you are
going to need to understand how all those
| | 08:36 | properties combine to create the
overall width and the height of an element.
| | 08:39 | Like I had mentioned just a second ago,
that is so important we are going to
| | 08:43 | take a closer look at calculating
element dimensions in our next movie.
| | Collapse this transcript |
| Calculating element dimensions| 00:00 | One of the most important skills in CSS
regarding page layout has nothing to do
| | 00:04 | with positioning elements on the page.
| | 00:06 | It is in fact the ability to
accurately calculate an element's dimensions.
| | 00:10 | Now on the surface that sounds like
something that's pretty easy to do, but as
| | 00:14 | we are going to see, it gets a
little bit more complicated than maybe you'd
| | 00:16 | think at first glance.
| | 00:17 | So to illustrate this concept, we
are going to be working with the
| | 00:20 | dimensions.htm file, and you can
find this one in the 01_02 directory, in
| | 00:26 | the Chapter_01 folder.
| | 00:28 | Okay, so if I take a real quick look at
the structure of the page, you are going
| | 00:31 | to see that it's very similar to
the exercise file we just worked with.
| | 00:35 | We have two divs, an outer div and
then an inner div with the class of box
| | 00:39 | applied to it, and that has
a paragraph inside of that.
| | 00:43 | Our sort of default
styles that we have going on:
| | 00:45 | the outer div tag is now
set to a width of 600px wide,
| | 00:49 | it has a margin of zero for top and bottom,
and then left and right is set to auto.
| | 00:53 | Now what that does for us is when we
set left and right to auto, it'll go ahead
| | 00:57 | and just take that content and center
it within whatever parent element it's
| | 01:00 | floating inside of, which in this
case is the body tag. And then we have a
| | 01:04 | background color applied for our outer
that's a light-blue color.
| | 01:06 | For inner box, the only thing that we
have right now is just a background color.
| | 01:10 | And for our paragraph,
| | 01:11 | we have not only a background color
that's going to allow us to sort of visually
| | 01:14 | define the contents of the box, but we
also have the height set to 100%, and that
| | 01:18 | way no matter what happens with the
inner box, the paragraph will sort of expand
| | 01:22 | to fill the height of it as well.
| | 01:24 | So the first thing we are going to do is
we are going to go into our box here, and
| | 01:27 | we are going to go ahead and define its
width as being 300 pixels wide. Easy enough.
| | 01:31 | I am going to save that, and let's
just preview that in one of our browsers.
| | 01:36 | Okay, so what we're seeing here is
we are seeing the overall width of
| | 01:39 | 600 pixels--that's our outer div tag--and then our
inner div, or the box div tag, is 300px wide.
| | 01:45 | So we're getting exactly what we expect here.
| | 01:47 | We are getting exactly half of that outer div.
| | 01:49 | Okay, so I am going to go back into my box
and let's add some more box model properties.
| | 01:54 | On the next line I am going to
go ahead and do padding of 50px.
| | 01:56 | Now remember, padding and width are
cumulative, so this is going to add 50 pixels
| | 02:01 | worth of padding all the way around our
box, so it's going to increase both our
| | 02:04 | height and our width, but we
are just going to focus on width.
| | 02:07 | So what's happening here is we have
50 pixels' worth of the padding on the left-hand
| | 02:10 | side, 50 pixels' worth of padding on the
right-hand side, and then a width of 300px.
| | 02:14 | That gives us a total width
of our element now of 400 pixels.
| | 02:17 | So I am going to save this, refresh
that in my browser, and that is indeed
| | 02:22 | exactly what we are seeing.
| | 02:23 | We are seeing the background
color now of the box div tag.
| | 02:26 | This is the background color of the
paragraph, and then we can visualize that
| | 02:29 | 50 pixels' worth of spacing here and 50 pixels'
worth of spacing here, 300 pixels' worth of
| | 02:33 | spacing here, and that it's taking up a
total of 400 pixels' inside of that outer div tag.
| | 02:38 | Awesome! Now one of the elements that people
really often forget about when they are
| | 02:43 | calculating the width of their
elements or factoring how much space something
| | 02:46 | can take up within the layout are
borders, but borders are part of the box
| | 02:49 | model and they do
calculate to an element's size.
| | 02:52 | So if I go down on the next line and I
type in border, and let's say we do 2 pixels
| | 02:57 | of border solid, and then black,
all right, so I am going to save that,
| | 03:01 | if I preview that in my page, that does
increase the overall size of my element.
| | 03:06 | Now borders show up on the
outside edge of the padding edge,
| | 03:10 | so essentially 2 pixels have been
added to the outer edge of my element.
| | 03:14 | But because it's inside of this
outer div tag, it is inside that.
| | 03:18 | It doesn't hang over or overlap.
| | 03:20 | It stays inside the
content edge of its parent.
| | 03:23 | So essentially, now we have added 2 pixels to
the left and 2 pixels to the right, assuming
| | 03:28 | now we have a total width if 404 pixels.
| | 03:32 | Okay, so how do margins play
into that equation? It's confusing.
| | 03:35 | Sometimes you will hear people say
margins don't calculate to the overall width
| | 03:39 | of an element; sometimes you will
hear people say they do, and it becomes a
| | 03:42 | really confusing thing.
| | 03:43 | So let's take a look at what margins
add to our element and sort of how they
| | 03:46 | play into the overall size of our element.
| | 03:48 | So if I go back into my code, if I go
down onto another line within the box
| | 03:52 | selector and this time I am just
going to apply a margin to one side.
| | 03:55 | I am going to do margin-left. And
we'll go ahead and do 50 pixels there, okay.
| | 03:59 | So I am going to save this and again I
am going to refresh this in my browser.
| | 04:03 | Okay, so here is essentially what's happening.
| | 04:05 | The actual width of my element really
hasn't changed, but the amount of space
| | 04:09 | that it takes up has changed.
| | 04:11 | So we are pushing our element away,
50 pixels from the edge of its containing
| | 04:15 | element, so the amount of space it
needs within the layout to do this are now
| | 04:19 | 454 pixels, so 404 pixels for the total width of
the element and then the 50 pixels over here
| | 04:25 | on the left-hand side.
| | 04:26 | So let's clarify the relationship between
margins and their elements, in terms of size.
| | 04:32 | The best way to think about it are there
are two sorts of blocks of calculations
| | 04:36 | that are used for an element.
| | 04:36 | You have the containing
block and the content block.
| | 04:39 | Now the content block are all of the
border, padding, and width of an element. So
| | 04:44 | the width property, any padding, and border,
| | 04:47 | they all go together to make up the
actual content block of an element.
| | 04:50 | The containing block are the margin edges.
| | 04:53 | So in this case the containing block is
454 pixels or the content block is 404 pixels. May
| | 05:00 | not seem like a big deal.
| | 05:01 | We certainly need to understand how much
space something is taking up within the
| | 05:04 | layout, so understanding the
margins is extremely important.
| | 05:07 | However, certain things happen when an
element is considered overconstrained,
| | 05:12 | so what does overconstrained mean?
| | 05:14 | Well, overconstrained means an
element no longer fits inside of its parent.
| | 05:17 | So what happens when we start
increasing the values of the size of our
| | 05:21 | element and increase it to a point to where
it just doesn't fit inside this 600 pixels anymore?
| | 05:25 | Well, when something is overconstrained,
your browser has to make a decision, or
| | 05:29 | the user agent has to make a
decision, about what to do, and often it will
| | 05:33 | sacrifice margins and padding
in order to make things fit.
| | 05:37 | There are other properties that we can
use too to control this sort of overflow,
| | 05:40 | if you will, and we'll talk a
little bit about that in just a moment.
| | 05:43 | But let's go ahead and make this
overconstrained and see what happens with our margins.
| | 05:46 | All right! So I am going to go back into my file,
and I am going to ahead and change the
| | 05:50 | width of our box now to 400 pixels.
| | 05:53 | So that gives us a total of 504 pixels of width.
| | 05:57 | Now remember we are inside of a
div tag whose width is set is 600.
| | 06:00 | So for the moment we still fit; however,
what I am going to do is I am going
| | 06:02 | to take margin-left,
| | 06:03 | I am going to get rid of left, and I
am just going to apply that as margin.
| | 06:06 | So if you think about this, the
content block is going to fit, because the
| | 06:10 | content block is 504 pixels.
| | 06:13 | The containing block will not fit.
| | 06:15 | The containing block, with 50 pixels' worth
of space on either side, is now 604 pixels,
| | 06:19 | whereas our outer div tag
is now 600 pixels. All right!
| | 06:22 | Everybody still with me? Cool! So save this.
| | 06:25 | And I am going to update this in my browser.
| | 06:27 | Now at first glance, it
looks like everything is okay.
| | 06:30 | It fits, right? Not entirely.
| | 06:32 | What happens is because we have 50 pixels'
worth of margin on either side, it's sort
| | 06:37 | of centering, or floating, if you will, in
the middle of our div tag, and it gives
| | 06:40 | us the illusion that it fits.
| | 06:42 | But the problem is--well, it's not
really a problem, but what our browser has
| | 06:45 | done is it essentially has
ignored certain margin values.
| | 06:48 | It simply just throws out the margin
values that would overlap on either side.
| | 06:54 | Now, if you don't believe me, let's take
this to a little bit more of an extreme.
| | 06:56 | So I am going to go back into box,
and let's say, I go in and say, okay, on
| | 07:02 | the margin-right, go ahead and add 100 pixels'
worth of space of there on the right-hand side.
| | 07:08 | So if I save this and test it. Nothing happens.
| | 07:11 | And 100 pixels, it's just thrown away, because the
browser is saying, "No, I can't push it that far.
| | 07:15 | It won't fit anymore.
| | 07:16 | So I am just going to sort of ignore that, okay."
| | 07:19 | Now what about the content block, what
happens when the content block no longer fits?
| | 07:24 | All right! So what I am going to do now is I am
going to go in and remove all those
| | 07:28 | margins, and then I am going to take
my padding and I am going to change my
| | 07:32 | padding to 98 pixels. Why 90 pixels?
| | 07:33 | Well, remember we have borders of 2 pixels
on either side, so that it's essentially
| | 07:39 | giving us a combination of padding and
border of 100 on either side. So we have
| | 07:44 | 100 pixels' worth of padding and border on
the left-hand side, 100 pixels' worth of padding
| | 07:48 | and border on the right-hand
side, 400 pixels' worth of width,
| | 07:51 | that's going to give us an equal
value to our outer div tag of 600 pixels.
| | 07:54 | So if I save this, and preview it, it
fits precisely. You can't see the outer
| | 07:59 | div tag anymore, but I
promise you, it fits precisely.
| | 08:02 | Okay, so what does happen if
I make it a little bit wider?
| | 08:05 | So if I increase the width to say
500 pixels and save that, what happens?
| | 08:10 | Well, it's hard to see
what's happening right now.
| | 08:12 | So let me do something really quick so
you can visualize what's happening here.
| | 08:16 | I am going to go ahead and take my
height here and move my height to say 800 pixels
| | 08:19 | so you can see this. All right!
| | 08:21 | So let's save that and
let's preview it. All right!
| | 08:23 | So you can see what's happening.
| | 08:25 | The inner div tag is simply overlapping,
| | 08:28 | it's sort of spilling out of the outer div tag.
| | 08:32 | So what happens when a
content block no longer fits
| | 08:34 | is we have something that we call overflow.
| | 08:36 | Now you can control overflow
by using the overflow property.
| | 08:39 | If I go back into my outer div tag, for
example, and I am just going to type in
| | 08:43 | overflow. And there are a
couple of values you can use here.
| | 08:46 | You can use hidden, and if I use hidden,
it simply crops off any content block
| | 08:52 | that would overflow the
element. I can do visible.
| | 08:55 | I can do scroll.
| | 08:56 | I can do auto. Now auto
and scroll are very similar.
| | 08:59 | Auto basically just says, if it does
overflow, go ahead and give me scrollbars, and
| | 09:02 | you can see that at the bottom in the
element here I have scrollbars that let me
| | 09:05 | scroll through this. Harder to see,
because of the height of the element, but I
| | 09:09 | think you get the idea. All right!
| | 09:11 | So that's the overflow property.
| | 09:12 | Now I am going to get rid of the
overflow property here. And I want to show
| | 09:15 | you one more thing, in terms of what
happens when we have an overconstrained element,
| | 09:19 | so we've got one more thing to
take a look at here. All right!
| | 09:21 | I am going to go back to my box and I am going
to change the width of the box back to 400 pixels.
| | 09:26 | Now I am going to go up to my outer
element here and I am going to get rid of
| | 09:29 | this height property so that we are
not confused by that, and what I am going
| | 09:33 | to do is I am going to set my
padding on the outer div tag to 50 pixels.
| | 09:39 | So that's just affecting the
overall width of that element as well.
| | 09:42 | So now that the outer div tag is
now 700 pixels wide, obviously. All right!
| | 09:45 | Now with my box width being 400 pixels, of
course I have 100 pixels on either side, so
| | 09:50 | that's 600px, right?
| | 09:52 | So if I save this and preview it, we
can see there is the additional 50 pixels' worth
| | 09:57 | of padding for our outer div tag.
| | 10:00 | Now keep an eye on that padding.
| | 10:01 | If I come back in the box and I
increase the total value of box here, let's
| | 10:06 | say I increase its width to 450px and save
that and preview it, notice what happens.
| | 10:13 | It expands to fill that empty space.
| | 10:15 | The padding on this side
is basically sacrificed.
| | 10:18 | So essentially, it fills this in
and it says, "Okay, I have 50 pixels' worth of
| | 10:20 | padding here and I have this huge
total width over here," and this padding is
| | 10:24 | basically sacrificed.
| | 10:25 | It's actually still there and other
elements would respond to it, but because
| | 10:29 | this is now overflowing, it
overflows that padding value.
| | 10:32 | Now the reason I'm mentioning this is
because it's really important for you to
| | 10:35 | understand what happens if you don't
really plan your elements properly.
| | 10:39 | If you are not carefully considering
the dimensions of your outer elements and
| | 10:43 | the dimensions of your inner elements,
then your layout is either going to break
| | 10:46 | or behave unexpectedly if
elements become overconstrained.
| | 10:49 | So obviously the more complex the page
gets, the harder it can be to accurately
| | 10:53 | calculate an element's width.
| | 10:55 | This can cause layouts to break,
spacing to be uneven, and content to
| | 10:59 | overflow element boundaries.
| | 11:01 | That's why it's so important not to
lose sight of how even small changes to
| | 11:05 | your elements, like increasing your
border by 1 pixel, can make a big difference in
| | 11:09 | your entire layout.
| | Collapse this transcript |
| Understanding margin collapse | 00:00 | One CSS concept that can really trip up
new designers is vertical margin collapse.
| | 00:05 | Essentially, when two vertical margins touch,
they collapse to the larger of the two values.
| | 00:11 | Although I covered this in the CSS: Core
Concepts course, not fully understanding
| | 00:15 | how it works can cause some
real problems in your layouts,
| | 00:19 | so it's important enough
to take another look at.
| | 00:22 | To do that, we are going to open up
the margin-collapse.htm file, and you can
| | 00:26 | find that in the 01_03 directory,
which is inside the Chapter_01 folder of
| | 00:32 | your exercise files.
| | 00:34 | Now, just going over the structure of
this page for a moment, if I scroll down,
| | 00:38 | I can see that inside the HTML code we have a
heading which is followed by four paragraphs.
| | 00:44 | Now the bottom two paragraphs are
wrapped inside of div tags, so keep that in
| | 00:49 | mind that we have four paragraphs in
a row but the bottom two are wrapped
| | 00:52 | inside of inside of div tags.
| | 00:54 | And then if I just look at the default
styles, I can see that we're using some
| | 00:57 | transparent backgrounds,
so we can see through them.
| | 01:00 | So our paragraphs have a background,
the div tags have a background, and then
| | 01:03 | I have a background applied to the HTML,
which is the root element, which is a grid.
| | 01:08 | So if we look at this in the browser
before we start working with this, you will
| | 01:12 | see what I am talking about.
| | 01:12 | So we have this grid structure
| | 01:14 | that looks a little odd, but what that's
going to allow us to do, these are 10-pixel
| | 01:17 | increments on this grid, and it's going
to allow us to sort of really calculate
| | 01:21 | the margins that we have between
these elements--right now we have none
| | 01:23 | obviously--and really tell when
this sort of collapsing is occurring. Okay.
| | 01:28 | So I am going to go ahead and go back
into my HTML, and we are just going to add
| | 01:33 | some margins to some of our elements.
| | 01:35 | So we are going to start
with our paragraph rule.
| | 01:37 | So I am going to scroll down until I
find my paragraph rule and just below my
| | 01:40 | line-height, I am going to go ahead and
add a margin. And we are going to do 10px 0.
| | 01:43 | Now if you remember your shorthand
syntax, the first of these two values
| | 01:49 | applies to the top and the bottom of
the paragraph, whereas the second value
| | 01:53 | applies to the left and right.
| | 01:54 | So essentially, we're saying, "Hey, go
ahead and apply 10 pixels' worth of margin to
| | 01:58 | the top and to the bottom of the
paragraphs, but none, right and left."
| | 02:02 | Okay, so I am going to save this, go
back in my browser, and let's refresh that,
| | 02:06 | and you can see we are getting exactly,
more or less, 10 pixels' worth of space between
| | 02:10 | each of our paragraphs.
| | 02:11 | Now here is what's interesting.
| | 02:12 | Remember, we applied the margin to
both the top and the bottom of our
| | 02:15 | paragraphs, so the bottom of this
paragraph should have 10 pixels and the top of
| | 02:19 | this one should have 10.
| | 02:21 | And if our vertical margins didn't
collapse, we would have a total of 20 pixels' worth
| | 02:25 | of space there, but as you
can see, we only have 10.
| | 02:28 | So you're seeing vertical margin
happen right there, and this is actually the
| | 02:31 | number one reason why we
have vertical margin collapse.
| | 02:34 | You can see, we are only getting 10 pixels'
worth of space between the two of them and
| | 02:38 | that presents sort of double spacing
our paragraphs, if you will, and that's the
| | 02:41 | whole reason for vertical margin
collapse, or at least the main reason for it.
| | 02:45 | So I am going to go back into my code,
and let's see what happens when we have an
| | 02:48 | unequal amount of margins on
the top and bottom of elements.
| | 02:51 | So we are going to go back to our
paragraph and just below the existing margin rule,
| | 02:55 | I am going to write another margin,
but this time I am going to do margin-top.
| | 02:59 | And we are just going to do
20 pixels' worth of space margin top.
| | 03:03 | So essentially what we are doing is we
are overriding the previous top, but the
| | 03:07 | bottom remains, so essentially now on
our paragraphs, we have 20 pixels' worth of
| | 03:11 | margin on the top of them and 10 pixels'
worth of margin on the bottom. So let's see
| | 03:16 | how that is resolved.
| | 03:17 | So I am going to go ahead and save this,
go back into my browser, refresh my
| | 03:20 | page, and I can see that the larger of the two
values, the 20 pixels, is the one that's being used.
| | 03:26 | So if you have two margins touching
each other and one is 20 pixels and one is 10 pixels,
| | 03:30 | you are going to get the 20 pixels.
| | 03:31 | You are always going to get the larger of
the two values when the two of the collapse.
| | 03:37 | Now you will notice that the bottom
two paragraphs here have a slightly
| | 03:40 | different background color, and the
reason for that is because you are seeing
| | 03:43 | the background of the paragraph and
the background of the div blending
| | 03:46 | together, because they are semi-opaque, which
is why we can sort of see the grid behind them.
| | 03:50 | Okay, but what happens when margins
between child elements and parent elements
| | 03:55 | react with each other?
| | 03:57 | That's a little bit trickier.
| | 03:58 | So let's go experiment with that. All right!
| | 04:00 | So going back in our code, I am going
to go down and I am going to go into my
| | 04:05 | div selector and just below that I am going
to type in margin, and once again, 10px 0.
| | 04:11 | So, just as we did the paragraphs,
that's going to give us 10 pixels above, 10 pixels
| | 04:14 | below of margin on our
div tags, 0 side to side.
| | 04:17 | Now keep in mind our paragraph still
have 20 pixels of margin on the top, 10
| | 04:22 | pixels to the bottom.
| | 04:23 | So if I save this and refresh
this in my browser, nothing happens.
| | 04:27 | Now why does nothing happen?
| | 04:29 | Well, if you consider the fact that
each of these paragraphs have 20 pixels'
| | 04:32 | worth of margin to the bottom and our
div tags have 10 pixels here, here, here,
| | 04:38 | and here, the 10 pixels and the
20 pixels are touching each other.
| | 04:40 | Those margins are touching.
| | 04:42 | So again, they collapse down to 20 pixels.
| | 04:45 | Now what's particularly interesting is
I wanted you to take just a moment to
| | 04:48 | visualize the space between
these two div tags, if you will.
| | 04:51 | This top div tag has
10 pixels' worth of bottom margin.
| | 04:55 | This bottom div tag has
10 pixels' worth of top margin.
| | 04:59 | So if we didn't have margin collapse,
that's at least 20 pixels between the two of
| | 05:02 | them; however, this paragraph inside of it
has an additional 20 pixels of margin to the bottom.
| | 05:07 | This paragraph inside of this div
tag has 10 pixels of margin to the top.
| | 05:12 | So if we didn't have margin collapse,
instead of looking at just the 20 pixels' worth
| | 05:16 | of the space between this, we would
have 30 pixels pushing down this way and 20 pixels
| | 05:21 | pushing down this way, meaning
there'd be 50 pixels' worth of space between them.
| | 05:25 | So now you can sort of see why
margin collapse is so important.
| | 05:29 | Without it, our elements would begin to
really start to stretch and grow apart
| | 05:32 | from each other, and it would be very
limited in terms of how we could apply our margins.
| | 05:36 | Now the reason that the margins
between the divs and the paragraphs are
| | 05:40 | collapsing are because the margins are touching.
| | 05:42 | That means that there's no
padding to get in the way.
| | 05:45 | There's no borders to get in the way.
| | 05:47 | There's nothing to interrupt
those two margins touching each other.
| | 05:50 | That is the only time that margins collapse.
| | 05:53 | If margins have something separating them,
then they do not collapse. All right!
| | 05:57 | So if I go back, for example, into the
code and let's say we go into our div tag
| | 06:02 | again and I just come in
and add a border to them.
| | 06:05 | So let's just say border: 1 pixel solid black.
| | 06:09 | Okay, so if I save this and test it, you
can see that now we are getting our margins.
| | 06:17 | We are getting the 10 pixels between the div tags.
| | 06:20 | We are getting the 20 pixels of margin at
the top of the paragraph and then 10 pixels of
| | 06:25 | margin at the bottom of the paragraph.
| | 06:27 | Those margins are not collapsing,
because they are not touching anymore.
| | 06:29 | They have this border separating them.
| | 06:31 | So if you'd really need that spacing,
you need to make sure that something is
| | 06:36 | interrupting those margins
from touching each other.
| | 06:38 | It could be border or even it could be padding.
| | 06:40 | For example, if I go back into my code
and I replace border with padding, and
| | 06:45 | let's say I just do one pixel's
worth of padding, top and bottom.
| | 06:48 | So if I save this and test it, you can
see we are still no longer getting the
| | 06:52 | margin collapse and we don't have to
worry about the border showing up anymore.
| | 06:56 | You know, the only difference there is
of course we do have to account for that
| | 06:59 | one pixel's worth of padding top and bottom.
| | 07:01 | They do add to the overall height of our
element there, so in certain layouts you
| | 07:05 | may want to be careful about that.
| | 07:06 | But if you are trying to
prevent margins from collapsing,
| | 07:09 | that's one of the easy ways to do it.
| | 07:10 | You just put a little bit of padding
or a border between the two of them to
| | 07:14 | prevent those two margins from touching.
| | 07:15 | Now vertical margins can be a little bit tricky,
| | 07:18 | so if you'd like, go ahead and take
this file, experiment with it a bit. Add a
| | 07:22 | little bit more structure, add
additional margin values, and really kind of play
| | 07:26 | around and explore with how this works.
| | 07:28 | The more you work with those vertical
margins, the more comfortable you'll get
| | 07:31 | understanding when they collapse. And
there are certain instances such as with
| | 07:34 | floated elements and absolutely
positioned elements that we'll see later on in
| | 07:37 | this title, when those
vertical margins are ignored.
| | 07:40 | Now the good news here is that we only
have to worry about vertical margins in
| | 07:43 | terms of collapsing, because
horizontal margins do not collapse.
| | 07:47 | Overall, just keep margin collapse in
mind as you begin to plan your layout, and
| | 07:51 | if you're not getting the vertical
spacing between elements that you expect to
| | 07:54 | be getting, go ahead and explore
whether or not margin collapse is the culprit.
| | Collapse this transcript |
| Calculating em values| 00:00 | Figuring out the value that you need
for an element's width, height, or other
| | 00:03 | physical properties is
pretty simple if you use pixels.
| | 00:06 | However, what if you are going to use a
relative unit of measurement, like an em,
| | 00:09 | or even percentages?
| | 00:11 | Well, in those instances it can
sometimes be tricky to accurately calculate the
| | 00:15 | computed value of the element's properties.
| | 00:17 | Now understanding how this works is
critical to creating certain types of
| | 00:20 | layouts, so it's really important
for us to take a closer look at it.
| | 00:23 | Now, if you remember, an em is a
relative unit of measurement that is equal, 1 em
| | 00:27 | is say equal to the
default font size of an element.
| | 00:31 | Now if you need to review what an em
is or any of the different units of
| | 00:34 | measurement that are available to us in
CSS, be sure to go back to the CSS: Core
| | 00:38 | Concepts title and review the movie on
units of measurement where I talk about
| | 00:42 | them in a little bit more detail.
| | 00:43 | Okay, so for this example we are going
to be using the em_values.htm file. You
| | 00:47 | can find that in 01_04 directory. And I
just want to give you a brief overview of
| | 00:52 | what's going on here on the page.
| | 00:53 | Okay, so if I scroll down into the body
tag of the page, I can see that I have
| | 00:58 | an article with a heading inside
of it, and then I have two sections.
| | 01:01 | The first section has a class attribute
of em, and these sections are made up of a
| | 01:04 | heading 2 followed by some paragraphs.
| | 01:06 | The second section has a class
property of percentages, and then we have a
| | 01:10 | footer down here at the bottom of it all.
| | 01:12 | Okay, now if I scroll back up into my
CSS, I can see that on the HTML selector.
| | 01:17 | I have a background applied that is that
10x10-pixel grid that we were using in the last movie.
| | 01:23 | So that's going to help us visually
sort of understand how these em values
| | 01:27 | are being calculated.
| | 01:28 | And the other thing that we have going
on here is that for our body selector
| | 01:32 | currently we have a font size of 100%.
| | 01:35 | Now what that's doing is it's going
up to whatever user agent or browser,
| | 01:38 | smartphone or tablet or whatever is
viewing this page, and it's saying, "Hey,
| | 01:42 | whatever your default font size is,
go ahead and give me 100% of that."
| | 01:45 | Now in most browsers, that's going to
be about 16 pixels, but since adding 16 pixels
| | 01:50 | to 16 pixels gets confusing for me after a
while, I am going to change that value.
| | 01:53 | So change that value from 100% to
10 pixels, that's a little bit easier.
| | 01:57 | It gives us a nice little baseline
to use, in terms of our font sizes.
| | 02:01 | Okay, I am going to scroll down to
about line 41. And I have some placeholder
| | 02:05 | selectors there for heading 1,
heading 2, and paragraphs,
| | 02:08 | so we are going to start with those guys.
| | 02:10 | Since, ems are relative to font size,
that's typically where I like to
| | 02:13 | start describing them.
| | 02:14 | So with h1, I am just going to do
font-size of 3em; for h2, I am going to do
| | 02:20 | a font-size of 2ems; and for paragraph, I am
going to do font-size of 1.5em, all right.
| | 02:30 | And we'll save that.
So how is this value going to be calculated?
| | 02:34 | Well, essentially anytime an element has
an em used as a unit of measurement in
| | 02:39 | a font-size declaration, it's going
to go to that element's parent and it's
| | 02:42 | going to say, "Hey, what is your font size?"
| | 02:44 | And it's going to say, "Okay, fine. Well
give me three times that or two times
| | 02:47 | that or 1.5 times that," based upon
whatever value you have given for the ems.
| | 02:51 | Now since, we applied 10 pixel's worth of font
size to our body tag, that's now being
| | 02:56 | inherited by all the elements on the page.
| | 02:58 | So essentially the section tag that
these guys are sitting inside of has a
| | 03:02 | font size of 10 pixels, and that's what
this value is going to be relative to.
| | 03:07 | So if I save this and test this in a
browser, you see that our font size now is
| | 03:12 | relative to the 10-pixel value that's been
applied to all the elements on the page.
| | 03:16 | Now that is what happens when you
apply an em value inside of font size.
| | 03:21 | What happens when you apply or
use ems on any other property?
| | 03:25 | Well, then you have a slightly
different way of calculating that value.
| | 03:28 | Let me show you what I mean.
| | 03:29 | I am going to go back to my heading
here and I'm going to apply a margin-bottom
| | 03:35 | of 1 em to that. And I am going to copy
this value because I'm going to apply
| | 03:40 | the exact same value to
my h2 and in my paragraph.
| | 03:43 | Now, you might think, okay, fine, this
is going to give us the same margin on
| | 03:47 | our heading 1s that we are going to have
on our heading 2s, that we are going to
| | 03:50 | have on our paragraphs, but you'd be
incorrect, because remember, ems are
| | 03:54 | relative units of measurement.
| | 03:55 | If I save this and preview this in my
browser, you can see actually that I am
| | 04:00 | getting about 30 pixels' worth of space after the h1.
| | 04:03 | I'm getting about 20 pixels' worth of space
after the h2, and I am getting about 15 pixels'
| | 04:07 | worth of space after paragraph.
| | 04:10 | Well, now that actually makes sense, if
you think about it, because anytime that
| | 04:14 | you use ems as a unit of measurement
for any property other than font-size, so
| | 04:18 | margins, padding, border, whatever,
what it does is instead of looking to the
| | 04:22 | parent, it looks to that element itself.
| | 04:24 | It basically says, "Hey h1,
what's your font size?
| | 04:27 | Okay, I want one of those.
| | 04:28 | Hey h2, what's your font size?
Okay, I want one of those."
| | 04:32 | So in this case, if this is
calculating to 30 pixels, 1 em is worth 30 pixels.
| | 04:36 | If this calculates to 20 pixels, 1 em is
worth 20 pixels, and so forth and so on.
| | 04:42 | So remember, if it's used on font-size,
it's relative to the parent's font size.
| | 04:46 | If it's used on any other property
within that element, it's relative to that
| | 04:50 | element's font size.
Now that's true even if it's not declared.
| | 04:54 | Let me show you what I mean.
| | 04:55 | So if I come right after my paragraph,
I can write a class selector for em, and
| | 05:00 | I am just going to write
another shell here for percentages.
| | 05:04 | Now one of the great things about using
relative units of measurements are that
| | 05:08 | they are sort of platform-
independent if you will.
| | 05:11 | So, for example, if I am told my
paragraph, my body copy, to be 1em, on a
| | 05:15 | browser, if the browser is using its
default font size, that might be 16 pixels,
| | 05:20 | but if the same thing is opened up on a
smartphone, well, then the smartphone's
| | 05:24 | default font size is going to be used at 1 em.
| | 05:26 | So you can see how valuable it is to
be using relative units of measurement.
| | 05:30 | You are not tying your page to any one
specific size that might not look correct
| | 05:35 | on a specific platform.
| | 05:37 | Okay, so if I go into my ems, for
example, here, I might say, give me a padding
| | 05:41 | of 1 em and for percentages, let's
do the same thing, padding of 1 em.
| | 05:46 | Now I haven't explicitly declared a
font size for either of these items;
| | 05:50 | however, because we went ahead and
applied 10 pixels to the body that's being
| | 05:57 | inherited by each one of these elements,
so we should end up with 10 pixels' worth of
| | 06:00 | padding on both of these. So if I save
this and test it, you can see that's
| | 06:04 | exactly what happens. We get 10 pixels here.
| | 06:06 | We get 10 pixels here.
| | 06:07 | But remember, ems are relative, so if
I come into the ems section and inside
| | 06:13 | that I change the font-size there to 1.5--
and here is what's really interesting--
| | 06:18 | not only is the padding going to get
bigger, so we should see more padding on
| | 06:23 | the em than we have on percentages, but
everything inside of it is going to be
| | 06:26 | slightly larger, because remember,
this heading 2 and this paragraph for
| | 06:31 | their font-size, they are both going
to their parent elements and they are
| | 06:33 | saying, "What's your font size? Okay, I
want two times that, or 1.5 times that."
| | 06:37 | So inside the percentage section it's
still at 10 pixels, but now in the em section
| | 06:42 | that's actually a little bit larger.
Same thing with their margins. Same thing
| | 06:45 | with all those values.
| | 06:46 | They all should scale up in a relative fashion.
| | 06:48 | So if I save this and test this in the
browser, you can see that's exactly what happens.
| | 06:53 | Everything that's inside of that
section gets a little bit larger--1.5 times
| | 06:57 | the size it was before actually--whereas,
everything inside the percentages stays the same.
| | 07:01 | So that's the value of using a
relative unit of measurement.
| | 07:04 | It's very easy to make a global
change to a top-level object like that and
| | 07:07 | have the relationship or the sizing relationship
of all the elements inside of it stay the same.
| | 07:12 | I really doubt that you are going to
create an entire layout using nothing but ems.
| | 07:15 | Now those layouts do exist and people
do do them, but they're fairly rare.
| | 07:19 | It's actually a lot more common to use
ems for margins and occasionally padding
| | 07:23 | for specific elements, and it's
really common to use for font size.
| | 07:26 | Now regardless of where you are going
to be using ems, it's important that you
| | 07:30 | understand the rules that the browser
is going to use for determining what the
| | 07:33 | calculated value will be, so that
your layout and then all of the elements
| | 07:37 | within it look the way that you intend them to.
| | Collapse this transcript |
| Calculating percentage values| 00:00 | Even though percentage values are always
defined as being relative to another value,
| | 00:05 | they're still defined separately in the
CSS specification, meaning they are not
| | 00:09 | grouped with other
relative units of measurement;
| | 00:12 | they are just sort of defined by themselves.
| | 00:14 | Now one of the reasons for this is that
percentages have their own very unique
| | 00:18 | rules when it comes to how
their values are calculated.
| | 00:22 | To use percentage values in your layout
with confidence, you're going to need to
| | 00:25 | understand exactly how
their values are computed.
| | 00:28 | So if you are going to do this
along with me, go ahead and open up
| | 00:31 | percentages.htm, which can
be found in 01_05 directory.
| | 00:37 | This is exactly the same file
that we used in our last movie,
| | 00:41 | so if did the calculating em values
with this--let me just go ahead and
| | 00:45 | just preview this--you can see it's pretty
the same file. Same structure, same everything.
| | 00:50 | Now I am going to jump back into my code
here, and let's talk about this for a moment.
| | 00:55 | If I scroll down into my body, you can
see that currently right now the width of
| | 00:59 | this page is set to 960 pixels.
| | 01:02 | Well, let's just go ahead and set that
to 80%, so I am going to take it to 80%,
| | 01:07 | go ahead and save that, and if I go
back into my browser and refresh that, you
| | 01:11 | can see that the width of the
page changes a little bit there.
| | 01:14 | You know the other thing that it does for us
is now the width is relative to the viewport.
| | 01:19 | You can see that resizing the page is
causing those elements to flex because
| | 01:24 | the actual size of the page is flexing,
and if there's not enough room for these
| | 01:27 | elements, you can see it's dropping the
elements down, based upon how wide the page is.
| | 01:32 | Now, let's talk about
percentages and how they are calculated.
| | 01:35 | If you use percentages on box model
properties, like width, padding, and
| | 01:40 | margins, then those values, they are
calculated relative to the width of the parent element.
| | 01:46 | Think about our body for just a second.
| | 01:48 | The body is relative to the
viewport, so that 80%, we're getting 80% of
| | 01:53 | the available viewport.
| | 01:54 | That means that any time you set
percentage on one of those properties, it's
| | 01:58 | going to be that percent
of the element's parent.
| | 02:01 | Now that's pretty easy when it comes
to width, because you are saying, hey, I
| | 02:04 | want to be, you know half the size
of the element I am sitting inside of.
| | 02:07 | But it does get a little bit harder to
remember that when you're doing padding
| | 02:10 | and margin, so let's go ahead and kind
of experiment with that a little bit.
| | 02:13 | Okay, I am going to take a look at these
two selectors right here: em and percentages.
| | 02:16 | Remember, those are those two
sections that we were looking at earlier.
| | 02:19 | And I am going to change
the em's width to, say, 60%.
| | 02:24 | And then I'm going to take the percentages
and I am going to change its width to, say, 30%.
| | 02:30 | Now, 60%, 30% of course is 90%, right?
| | 02:35 | But that's not 90% of the viewport.
| | 02:38 | If I scroll back down, for example, I
can see that this section with the class
| | 02:43 | attribute of em and this section
with the class attribute of percentages,
| | 02:47 | it's actually sitting inside
of this particular article tag.
| | 02:51 | So essentially, that 60% and 30% are relative
to the width of this article. Not even the body.
| | 02:58 | Now the article as a block-level element
is getting its width from body, because
| | 03:02 | we haven't explicitly gave article a width yet,
| | 03:04 | so it's basically sort of
expanding to fill the whole body tag.
| | 03:07 | So essentially, that 60% and the
30%, they're really asking for a 60% of
| | 03:13 | the body or 30% of the body, because we
don't have an explicit width set for article.
| | 03:17 | So if I save this, go back in my
browser and refresh that, you can see that
| | 03:24 | those values change rather dramatically.
And now, if I resize the page, you can
| | 03:29 | see that they are basically changing
their values, but they are still staying
| | 03:33 | relative to the fact that this is 60% of the
available space within the body and this is 30%.
| | 03:40 | The body is 80% of course.
| | 03:42 | So it's actually 60% of that 80%.
| | 03:44 | Now if you go too far down that rabbit
hole you can drive yourself crazy; just
| | 03:47 | remember, it's 60% of its parent element.
| | 03:50 | So now, I mentioned earlier that it
gets little trickier when you start
| | 03:55 | talking about margins and padding and things
like that. Let's take a closer look at that.
| | 03:59 | Go into both of these selectors here
for the em and the percentages, and I am going
| | 04:03 | to go ahead and give them a padding
of 1%. Same thing for percentages;
| | 04:08 | I am going to give it a padding of 1%.
| | 04:12 | Now one of the most difficult things
to do when you're working with a layout
| | 04:16 | like this, and we are going to talk
more about flexible layouts defined with
| | 04:19 | percentages is little bit later on--
| | 04:21 | we have a whole chapter on
those as a matter of fact--
| | 04:23 | but one of the most difficult things
about calculating these values is exactly
| | 04:27 | how much do I need to get the visual
amount of padding that I want for this?
| | 04:31 | And one of the things that you might
want to consider doing is thinking about
| | 04:34 | starting with sort of
preferred size if you will.
| | 04:37 | Even though we've stated this to be
80%, you know if think that the preferred
| | 04:41 | size of it is at 950 pixels, for example,
I can say okay, at 960 pixels, I want
| | 04:47 | 10 pixels' worth of padding, all right.
| | 04:48 | So then you look at 10 pixels on one
side of an element and 10 pixels on other
| | 04:52 | side and you can add that up to 20.
| | 04:54 | You can say okay, 960, if I take a look
at 960, what percentage of that is 20?
| | 05:01 | That calculates out to about you know 1%.
| | 05:04 | So if I save this and test this, you
can see now we are getting you know, at 960
| | 05:10 | pixels we're getting roughly 10 pixels'
worth of padding, which is kind of cool.
| | 05:14 | And if I resize that, notice that that
value gets smaller as I get smaller and
| | 05:19 | as the page gets bigger, that value also
gets a little bit larger based upon the
| | 05:23 | available size for it.
| | 05:25 | Now if your calculations that you do
happen to turn up decimal points every now
| | 05:29 | and then, don't be worried about using those.
| | 05:31 | Browsers can handle decimal
points really, really well.
| | 05:33 | So if I come and say 1.4% instead of 1%
and test that, you can see, it increases
| | 05:41 | just fine. Nothing breaks.
The computer isn't smoking.
| | 05:44 | There is no fire coming out of it.
| | 05:46 | It can certainly handle that
type of math. That's not an issue.
| | 05:49 | I am going to go in and talk a little
bit about what happens when you start
| | 05:53 | dealing with some of these interior elements.
| | 05:55 | So if I scroll down, I am going to go
down to this h2 selector here and I am
| | 06:00 | going to change it's margin-bottom value.
| | 06:03 | I am going to set that
margin-bottom value to 5%.
| | 06:05 | Now the reason I'm doing this is
because I want to illustrate the fact that
| | 06:10 | anytime you use percentages on a box
model property, in terms of calculating the
| | 06:15 | value of that, it
calculates relative to its parent.
| | 06:18 | So this h2, remember is inside of this
section, which is em, and it's inside this
| | 06:25 | section, which is percentages.
| | 06:27 | Remember, em is set to 60%, so it's
available width is a bit larger than
| | 06:31 | percentages, which is set to 30%,
so it's available width is smaller.
| | 06:35 | So if this h2 is giving me, say, 5%, it's
going to give me 5% based on that 60% size,
| | 06:45 | whereas the percentages is going to
give me that 5% based on its 30% size.
| | 06:49 | So if I save this and preview it,
indeed you can see that I'm getting more
| | 06:55 | bottom margin here on this h2 than I am on this h2.
| | 06:59 | It has everything to do with the
relative size of those elements.
| | 07:02 | And if I shrink that, notice
that the margin is shrinking.
| | 07:06 | If I expand it, notice that the
margin begins to expand as well.
| | 07:10 | Another thing that I want to point
out to you guys here. We don't really
| | 07:12 | need to illustrate this.
| | 07:13 | I just want to talk about it.
Percentages should not be used for border width.
| | 07:18 | This is actually per the W3C CSS specification.
| | 07:21 | They are not allowed.
| | 07:22 | If you go ahead and use them anyway,
well, what the browser will do is it's
| | 07:26 | just going to display whatever the default
border width is, regardless of which value you used.
| | 07:30 | So you could say 400% on a browser
border width value and you still just get
| | 07:34 | the default border.
| | 07:35 | We are going to have a chance to
put what we've learned here about
| | 07:37 | percentage values to the test a
little bit later on when we create
| | 07:41 | percentage-based flexible layouts.
| | 07:43 | Now that you know how browsers
calculate percentage values, you'll be better
| | 07:46 | prepared to plan out element
sizing when working with those layouts.
| | Collapse this transcript |
| Normal document flow| 00:00 | When people first learn how to control
page layout with CSS, they're very eager
| | 00:04 | to learn about things like floating,
using positioning, and other details about
| | 00:08 | page-layout techniques.
| | 00:10 | While this is understandable, one of
the unfortunate side effects of this is
| | 00:14 | that people often don't pay enough
attention to one of the most important page-
| | 00:18 | layout concepts of them all, and
that would be normal document flow.
| | 00:22 | Normal document flow is exactly what
happens to your page when you do nothing at all.
| | 00:26 | It's the rules that all browsers use to
control the appearance of elements on the page.
| | 00:31 | It's also more powerful than most people think,
| | 00:33 | so let's take a closer look at normal
document flow and how it relates to page layout.
| | 00:38 | And to do that I've got the normal.htm
file opened, and you can find that in the
| | 00:43 | 01_06 folder in your exercise files.
| | 00:47 | Now the first thing I want to do is
just take this page and open it up in the
| | 00:50 | browser so you can see what it looks like with
absolutely no styling applied to it whatsoever.
| | 00:55 | Okay, so this is the page with just the
browser's default styling applied to it.
| | 00:59 | We have a headline up top,
| | 01:01 | we have a photo gallery with about six
photos in it, and then we have little
| | 01:04 | section down here where I expound a
little bit on normal document flow and
| | 01:08 | kind of what it is.
| | 01:09 | So essentially normal document flow
says that elements are going to appear at
| | 01:13 | the top of the page, they are going
to read left to right and they are just
| | 01:16 | going to stack one on top of another.
| | 01:18 | So paragraphs are going to
stack on top of each other.
| | 01:20 | Headings, those block-level elements will
occupy their own space within the layout.
| | 01:24 | So here is the heading followed by
another heading, followed by a paragraph.
| | 01:27 | And then in-line elements, like these
images for example, will appear on a line
| | 01:31 | until they can no longer fit, and
then they'll break down to the next line.
| | 01:35 | So this is normal document flow in a nutshell.
| | 01:38 | Now, I want to show you what we can
make the page look like by just applying a
| | 01:42 | few block-level properties that
we already know how to control.
| | 01:46 | So I am going to flip over to the
finished version of this, and we are going to
| | 01:49 | do this in just a moment.
| | 01:50 | And this is what you can do to the
exact same content through just the use of
| | 01:54 | CSS styles with no "positioning
properties," only the box model properties. No
| | 01:59 | floating, no positioning, nothing like that.
| | 02:02 | Okay, so I am going to jump back in our code,
and we'll go ahead and get started on this.
| | 02:05 | All right, so the first thing I want
you to do is to take off the comments.
| | 02:09 | So I've got some code already commented out.
| | 02:11 | If you look at about line 11, that forward
slash star, that's the beginning of a CSS comment.
| | 02:17 | I am going to get rid of that.
| | 02:18 | And then I have to go down to the
very bottom of our styles and get rid of
| | 02:22 | the star forward slash.
| | 02:23 | So I've just gone ahead
and uncommented those out.
| | 02:26 | Now before we go back up and begin
working on our styles, let's take a look at
| | 02:29 | the structure of the code, so we'll
know what it is that we are controlling.
| | 02:33 | So we have a header and inside the
header element we have a single h1.
| | 02:38 | Then we have two articles. The first
article has a class with attribute of
| | 02:41 | gallery and inside that we
have a heading, a paragraph.
| | 02:44 | And then we have this div tag right
here but with a class of photos, and that just
| | 02:50 | has that series of images inside of it.
| | 02:52 | So we have six of those images.
Notice they are each 250 pixels wide.
| | 02:56 | And then when you're using the div tag
as a wrapper to help us control that, so
| | 03:00 | we are going to control exactly how
many of those images fit on a line by
| | 03:03 | controlling the size of
the outer wrapper around it.
| | 03:05 | Following that, we have another article.
Its class attribute is normal and it
| | 03:09 | just has some explanatory text that
goes into normal document flow and is
| | 03:14 | certainly worth reading
through as you work on the exercise.
| | 03:17 | Okay, so I am going to go back up into my code.
| | 03:20 | Now a lot of it, I kind of already pre-
populated to save us a little bit of time,
| | 03:24 | so I am just going to start from the
top and talk a little bit about what the
| | 03:27 | existing code is doing.
| | 03:28 | Our first line is telling any browser
that doesn't support the newer HTML5
| | 03:33 | elements how those only should be
displayed and the fact we want them treated as
| | 03:37 | if they are block-level elements, so
we're telling the browsers to do just that.
| | 03:41 | Most modern browsers you won't have to
do that with, but just in case somebody
| | 03:44 | is happening to use an older browser,
that line of code comes in very handy.
| | 03:48 | After that, we're stripping off default
margins and padding for just a serious
| | 03:53 | of elements, the div tags,
headings, paragraphs, and image.
| | 03:57 | This is something that's called a CSS
reset and we are actually going to take a
| | 04:00 | closer look at CSS resets in
their own movie in just a little bit.
| | 04:04 | For the time being, just understand
that we are sort of telling the browsers,
| | 04:07 | hey, if you are already putting margins
and padding on these elements, don't.
| | 04:10 | We want to control them on our own.
| | 04:12 | Following that, we do the same thing
to the HTML tag, which is a root-level
| | 04:16 | container of our file, and we're
applying a background color to that.
| | 04:20 | And for our body, we're
applying a little bit of padding.
| | 04:23 | Notice we are applying 25 pixels'
worth of padding to the bottom.
| | 04:26 | That's just to hold the content on the
bottom away from the bottom just a little bit.
| | 04:30 | Applying just a slight bit of typographic
formatting here, where we are saying, hey!
| | 04:33 | Go ahead and give us your default font
size and we are going to use Georgia, and
| | 04:37 | then we are going to give it
a background color as well.
| | 04:39 | All right, well let's add to the body selector.
| | 04:41 | So, on another line inside of our body
selector I am going to go ahead and set
| | 04:44 | the width of the body's content to 900 pixels.
| | 04:49 | So doing that, we're basically
constraining all of the content on the page, and
| | 04:52 | we're saying we only want
it to occupy 900 pixels wide.
| | 04:56 | Now the padding gets added to that,
if we had padding on the right and left
| | 04:59 | sides, but we don't,
| | 05:00 | so this is going to be
constrained to just simply 900 pixels wide.
| | 05:03 | Right now, on the next line, go ahead
and apply a margin and here for margin we
| | 05:08 | want to do zero for margin top and
bottom, so no margin top and bottom, and then
| | 05:13 | auto left and right.
| | 05:14 | Okay, so what this does for us is this
is a very simple technique for centering
| | 05:18 | content on the page.
| | 05:20 | So by saying no margin top and bottom,
we're just sort of making sure that the
| | 05:23 | content adheres to the top of the page.
And for when we say auto for left and
| | 05:27 | right, we're saying okay, the
content needs to be 900 pixels wide,
| | 05:31 | but on the left side and on the right-
hand side, if you have any space left over,
| | 05:35 | go ahead and split that space and put
it equally on the left-hand side and the
| | 05:38 | right-hand side, and that has the
result of centering the content on the page.
| | 05:43 | Okay, I am going to keep going down.
And for our header element, we're going to
| | 05:46 | apply a few properties to that as well.
| | 05:48 | The first I want to do is just a little bit
of padding, so I am going to type in padding.
| | 05:52 | I'll 20 pixels' worth of padding for
the top and the bottom, and then I'll do
| | 05:56 | 25 pixels' worth of padding for the left
and the right, so 20 pixels, space, 25 pixels.
| | 06:01 | That will give me a little room above and below
| | 06:04 | at the top and the bottom of the
header, and it will give me a little room
| | 06:07 | side to side as well.
| | 06:08 | And then we are going to give it a
background color, so I am going to type in background:
| | 06:12 | rgb, and the color I am going
to give this is 76, 67, 65.
| | 06:15 | And it's sort of that dark sort
of brown gray color, if you will.
| | 06:22 | I call it ash, but I
don't really know what it is.
| | 06:24 | So now we've given a background color
to our header, and we've got a certain
| | 06:27 | amount of padding for us here.
| | 06:29 | Right now I am going to go down to my article.
| | 06:30 | Now remember, we have two articles on
the page: the top article has a photo
| | 06:34 | gallery and then the bottom article
just has the sort of informative text about
| | 06:38 | the normal document flow.
| | 06:39 | So this is going to be very generic
styling to sort of style both of those regions.
| | 06:43 | So the first thing I want to do is
type in some padding, and I am just going to
| | 06:47 | do zero padding top and bottom and 25
pixels' worth of padding left and right.
| | 06:51 | So it kind of mirrors what we are
doing with the heading, as far as the left
| | 06:53 | and right padding goes, and assures that
content will sort of lineup, but in the
| | 06:56 | header em and with those articles.
| | 06:58 | And then one last thing we are going to
do to article is we are going to do is a
| | 07:00 | margin-top, and here we're going
to do a top margin of 25 pixels.
| | 07:05 | What that will do is it will create a
little bit of space above each of the
| | 07:08 | articles, 25 pixels' worth of space, to
give separation between the headers and
| | 07:11 | their articles and the two
articles themselves, okay.
| | 07:14 | So I am going to go ahead and save
this and before we start working on our
| | 07:16 | galleries, I want to preview it.
| | 07:18 | So I am going to go back into my browser
and I want to preview the changes we've made.
| | 07:22 | Okay, so that's a lot of changes.
| | 07:23 | Now I know a lot of the work was sort of
already done for us, but look what we've done.
| | 07:26 | We've centered our content on the page.
| | 07:28 | We've restricted it or restrained it,
| | 07:30 | I should say, to 900
pixels wide from side to side.
| | 07:33 | Here is the 25 pixels' worth of padding
that we've placed already coming into
| | 07:37 | play, and it's looking fairly decent.
| | 07:39 | So the next thing we need to do is
we need to work on our photo gallery.
| | 07:42 | Now one of the things I want to do
for our photo gallery is I want to make
| | 07:45 | sure our photos are displaying in two
columns of three, and right now they're doing that.
| | 07:50 | And the only thing that's controlling
that right now, there is no floating
| | 07:52 | that's controlling that.
| | 07:53 | There is nothing controlling that other
than the constraints that we've already
| | 07:56 | placed on the content.
| | 07:58 | Remember, these images are 250 pixels wide.
| | 08:01 | Our page is 900 pixels wide.
| | 08:03 | So there is a limit as to how many of
these guys can fit on a single line.
| | 08:07 | Because images are in-line elements,
meaning they stack from right to left until
| | 08:12 | they get to the end of a page or the
end of the available room for content and
| | 08:16 | then they go and form the next line, we
don't really need to do anything fancy
| | 08:19 | to get two rows of images;
| | 08:21 | we merely need to restrict
the space that they are in.
| | 08:23 | Since they are already sort of
restricted, what we are going to work on now is
| | 08:26 | sort of styling that photo gallery
so that it looks maybe a little more
| | 08:29 | presentable than we have it right now.
| | 08:31 | Now one of the things that we can do
for that is remember we have the div tag
| | 08:35 | that wraps around those images, so by
controlling that div tag, we can sort of
| | 08:39 | create a defined visual region for those images.
| | 08:42 | So I am going to go back in our code,
and that is the first we are going to
| | 08:45 | tackle is this photos.
| | 08:46 | Remember, that's the div
tag that surrounds those guys.
| | 08:49 | So what I am going to do for that is I
want to type in margin: 0 and then auto.
| | 08:53 | So we are doing the same thing for the
photos region that we did for the page
| | 08:56 | itself; we are going to
center it within its container.
| | 08:59 | And the photos container is that body
tag, so this should be centered within
| | 09:03 | that single-column layout that we have going on.
| | 09:05 | The next thing I want to do is
define a width for it as well.
| | 09:08 | So I am going to choose a width of 822 pixels.
| | 09:12 | Now why 822? It sounds kind of how weird.
Bear with me. We'll get into that when
| | 09:17 | we start talking about the widths
of the actual images themselves.
| | 09:20 | The next thing we want to do is we want
to do some padding, and we are going to
| | 09:23 | give it a padding of 10 pixels all the
way around, and then we are going to give
| | 09:27 | it a background. And the background we
are going to give this is rgb (100, 98,
| | 09:30 | 102), and that's kind of a gray, if you will.
| | 09:37 | All right, so I am going to save this
and again sort of update my browser.
| | 09:42 | You can see what this is doing for us.
| | 09:43 | It's actually right around 842 total
pixels of width, because of the padding on
| | 09:48 | either side, but you can see that this
is the region that we want our photos in.
| | 09:51 | We've got padding, 10 pixels'
worth of padding going around.
| | 09:54 | And now what we want to do is we
want to sort of space our images in this
| | 09:59 | area so that they have a little bit of space
between them and that they are centered as well.
| | 10:02 | Now by defining the width the way we did,
we've actually helped ourselves out a little bit.
| | 10:06 | And I'll be honest with you.
| | 10:07 | When I plan this out and when you plan
something like this out, you are going to
| | 10:11 | approach it from the images first and
then figure out how much space you need.
| | 10:14 | So let me tell you how I did that.
| | 10:16 | Okay, so our images are 250 pixels wide each.
| | 10:20 | I want to get about 20 pixels'
worth of space between each of them.
| | 10:23 | So what I am going to do is I am going
to 10 pixels of margin around the images.
| | 10:28 | Now, vertical margins collapse unless
you are dealing with in-line boxes the
| | 10:31 | way we are already here with images, so I'm not
| | 10:33 | actually having to worry
about collapsing margins.
| | 10:35 | I can just go ahead and put a 10-pixel
margin around these images and I'll know
| | 10:39 | that I am going to get 20
pixels' worth of spacing.
| | 10:41 | I have the padding going all the way
around the interior of the div tag too,
| | 10:44 | so the 10 pixels of margin on the outer
edges of images will combine with that
| | 10:49 | padding on the div tag to give me 20
pixels' worth of space there as well.
| | 10:52 | I am also going to go ahead and put a
two-pixel wide border on my images, but I
| | 10:56 | can't ignore that two pixels when it
comes to the total width of the images.
| | 11:00 | So if you have a calculator handy, you
can look at it this way. Each image is
| | 11:05 | now 274 pixels wide.
| | 11:07 | We've got 10 pixels of margin on each side
and the two pixels of border on both sides of it.
| | 11:12 | If I multiply that times three, I
get 822, and 822 with the 10 pixels' worth of
| | 11:17 | padding on either side
gives me the total width of 842.
| | 11:20 | So math, maybe we should have paid more
attention to it on our school, I don't know.
| | 11:24 | All right, I am going to go back into
my browser, and let's go ahead and set
| | 11:27 | those values on our images and see what we get.
| | 11:30 | All right, so the first thing I want
to do with my image is just give it a
| | 11:32 | margin of 10 pixels, and then the next
thing I want to do is apply that border to
| | 11:36 | it, so a border of two
pixels, solid, and then white.
| | 11:40 | I am going to save this.
| | 11:41 | I'll preview it in my browser, and as
if by magic, we get exactly the spacing,
| | 11:46 | we are looking for.
| | 11:47 | We get our borders around it, which
helps offset the photos a little bit.
| | 11:50 | And because we carefully planned the
width of that, we get equal spacing all the
| | 11:54 | way around and we get a nice
little container there with our div tag.
| | 11:57 | That is very, very nice.
| | 11:59 | Now, I know that this
layout is very, very simple,
| | 12:02 | but it is a perfectly good, single-
column layout, with no styling required,
| | 12:06 | outside of the simple box model
properties that we've been controlling in
| | 12:10 | order to make it work.
| | 12:11 | You know, when I first started out
controlling page layout through CSS, I'll be
| | 12:14 | honest with you guys.
I really, really overdid it.
| | 12:17 | Now I was trying to float or position
almost every single element on the page.
| | 12:21 | I thought that somehow if I didn't,
I wasn't really controlling my layout
| | 12:25 | through, you know, positioning.
| | 12:26 | Oddly enough, the more experience I
gained through doing page layout, the more I
| | 12:31 | began to rely on normal document flow
to do the majority of the work for me.
| | 12:36 | You know, at this point, I try to do
as much possible with normal document
| | 12:39 | flow and then just merely tweak the
layout using floats or positioning when required.
| | 12:43 | Now this approach uses less code,
| | 12:45 | it's more likely to be compatible
across a wider array of devices and browser
| | 12:49 | versions, and requires less work on my part.
| | 12:52 | So, I know the focus of this title is
on page-layout techniques, but as we
| | 12:56 | work, pay attention to how important
normal document flow is to the majority of
| | 13:01 | our layouts.
| | Collapse this transcript |
| Controlling element display| 00:00 | The display property is by far
one of my favorite CSS properties.
| | 00:04 | Now when I first learned about it, I
remember thinking to myself, "There is no
| | 00:07 | way you can really do that, can you?"
| | 00:10 | So what does it allow you to do?
| | 00:11 | Well, the display property allows
you to change how an element displays
| | 00:15 | within the browsers.
| | 00:17 | Block-level elements can become inline.
| | 00:19 | A div tag can display as a table
cell, or you can even tell elements to
| | 00:23 | not display at all.
| | 00:24 | As I'm sure you can imagine,
controlling how an element displays within the
| | 00:28 | browser is one of the most powerful
CSS capabilities a designer has when
| | 00:32 | creating page layouts. It's
also surprisingly simple to do.
| | 00:36 | So what I have right here is I've got
the page that we are going to be working
| | 00:39 | on, I've got it previewed
within one of my browsers.
| | 00:42 | And I did that because I wanted to
show you what the possible values for the
| | 00:46 | display property are, and
talk about them a little bit.
| | 00:49 | So, this little group of values right
here are the options that we have when
| | 00:52 | setting the display property.
| | 00:54 | We have inline, block, list-item,
inline-block, and then a whole host of table-
| | 01:00 | related properties as well.
| | 01:02 | Then we have none, and we have inherit,
which basically just says, hey, whatever
| | 01:05 | the display property of my parent
element is, that's what I want as well.
| | 01:09 | Okay, so if you want something to
display as an inline-level element, such
| | 01:12 | it's an image or a span tag or you
know just an element within a line of text,
| | 01:17 | you would use inline.
| | 01:18 | You want it to display as a block-level
element, like a div tag or paragraph or
| | 01:22 | heading, then you'll use block.
| | 01:24 | List item would display as
a single item within a list.
| | 01:27 | Inline-block is really interesting.
| | 01:29 | We are going to take a
look at that in just a moment.
| | 01:30 | What that allows you to do is to
display elements as inline elements but
| | 01:34 | still be able to control their box model
properties as if they were block-level elements,
| | 01:38 | so that's a very
interesting one. These table ones,
| | 01:41 | this is really sort of
outside the scope of this course,
| | 01:44 | but what they allow you to do is to
take an element and essentially display it
| | 01:49 | as if it were a table cell or a table row.
| | 01:51 | You can even create CSS table-based
layouts by using that, and that's something
| | 01:55 | that we are going to be
doing in an upcoming title.
| | 01:57 | So with all of that sort of in mind,
we've got some elements down here, this
| | 02:02 | list, we've got some images, we have some
headings down here that we are going to control.
| | 02:06 | So we are going to go ahead and
experiment with a lot of these
| | 02:08 | different properties.
| | 02:09 | So I am going to jump into my code.
| | 02:11 | You can find that in the file display.htm,
which is found in the 01_07 directory
| | 02:19 | in your exercise files.
| | 02:20 | Okay, so I am going to scroll down into
my code and you'll see at about line 61
| | 02:27 | or so we have little area in our styles
where we can begin to add some styles.
| | 02:31 | Now to just again, talk about the
structure of this a little bit,
| | 02:34 | we have a list here that
we are going to control,
| | 02:37 | we have these images right here that
we are going to control just underneath
| | 02:40 | this headline, and then we have some
headings down here that we are going to
| | 02:43 | change to the display on as well.
| | 02:45 | Notice that they all have the
inlineB class applied to them as well.
| | 02:49 | And then our final headline has
a class of none applied to it.
| | 02:52 | Okay, so just in that layer where
we are going to add some styles, the
| | 02:55 | first thing we'll do is we are going to
change how these list items are going to display.
| | 02:59 | So I am going to create an li
selector and we're going to use the display
| | 03:03 | property, and I am just going to tell
it to display as an inline element.
| | 03:07 | Now list items, those individual
elements within a list, by default they display
| | 03:11 | as block-level items, meaning
they stack one on top of another.
| | 03:14 | So if I save my file, go back into my
browser, and refresh it, you can see that
| | 03:19 | the list now displays as inline elements.
| | 03:21 | They are all on the same line.
| | 03:22 | So they are indeed individual elements,
but the bullets go away and they all
| | 03:27 | display as inline elements.
| | 03:28 | A lot of people use this technique to
create menus out of lists where they have
| | 03:32 | links in them, and that way you can
create horizontal menus. Just add a little
| | 03:36 | bit of spacing between them now, you have
everything on a single horizontal line.
| | 03:40 | Next up, let's take a look at our
images. Right now they're all displaying as
| | 03:43 | inline elements, meaning they're
stacking right to left right next to each other,
| | 03:48 | and are they on the same line
because they have enough room to fit.
| | 03:50 | If we had more images
they'd break down to another line.
| | 03:52 | Okay, so I am going to go down into my
code and right after the list item I am
| | 03:56 | just going to do a selector for image.
| | 03:58 | And for image I am just going to say
display: block. And then just to help us
| | 04:02 | out with spacing a little bit, underneath that
I'm going to do a margin-bottom on them of 1 em.
| | 04:10 | So if I save that and preview my page,
you can see what happens to our images.
| | 04:15 | They now display, each on their on line
because they are now block-level elements,
| | 04:19 | and that margin between them gives us
the spacing that we are seeing there.
| | 04:23 | Okay, so now I am going to go
down to these headings here.
| | 04:25 | With these headings what we're going
to do is we are going to experiment a
| | 04:28 | little bit with the
inline block display property.
| | 04:31 | And this is the one that I really
like and I've been using a lot lately.
| | 04:34 | Well, what this allows you to do is to
take block-level elements and make them
| | 04:37 | display on the same line as if
they were inline-level elements.
| | 04:40 | The downside to telling block-level
elements to display as inline-level elements
| | 04:44 | is that you start to lose control over
some of the box model properties, simply
| | 04:48 | because of the very
nature of inline elements.
| | 04:51 | But displaying something as an inline-
block element sort of allows you to still
| | 04:55 | control most of those block-level properties,
and I'll show you what they mean in just a moment.
| | 04:59 | So I am going to go into my code and we
are going to write another selector, and
| | 05:03 | this selector is going to be for the
inlineB class selector, so .inlineB. And
| | 05:09 | what we are going to do here is we are
going to do display: inline-block and then
| | 05:15 | just to help us out with our spacing, we
are going to give it a margin right and
| | 05:19 | we are going to do a margin right of one ems.
| | 05:21 | So we are going to save that and when I
preview that, you can see that now these
| | 05:25 | headings are displaying on one single
line as if they were inline-level elements
| | 05:28 | and then the margin that I am
giving them is helping space them.
| | 05:31 | Now remember what I said earlier about being
able to control certain block-level properties.
| | 05:36 | We can still do that.
| | 05:37 | So if I go into my code and create
another rule, let's just say .tall, so
| | 05:43 | we'll just create a class called tall,
and we'll go ahead and give that a
| | 05:46 | height of 200 pixels.
| | 05:48 | So if I save this and then go down to
the very last heading within that group
| | 05:54 | and also apply the class of tall--now
if you've never done this before, if you
| | 05:57 | want to apply multiple values to a class
attribute, you just separate them with a white space.
| | 06:00 | So, inlineB tall. If I save this and
test it, you can see that our third one is
| | 06:08 | now 200 pixels tall and then while it
has pushed the other content down, it
| | 06:11 | didn't affect these guys at all.
| | 06:13 | So you were allowed to control these
individual box model properties that might
| | 06:17 | be a little more difficult otherwise.
| | 06:18 | Now I want to turn our attention to
our last element here. You can also tell
| | 06:22 | elements not to display as well.
| | 06:24 | Now I am going to take a break from
just using only the display property
| | 06:27 | for just a moment, because I want to
compare and contrast this method of
| | 06:31 | causing something to disappear with
another CSS property, and that property
| | 06:34 | would be visibility.
| | 06:35 | Okay, so this h4 class has a class of none.
| | 06:38 | The first thing I want to do is go
back up and write the class selector for
| | 06:42 | none, and I want to compare and contrast
methods of sort of making this content go away.
| | 06:47 | The first one I want to
use is the visibility property.
| | 06:50 | Now visibility allows us to
set three properties on it.
| | 06:54 | We can have--all right, so we have
visible, hidden, or collapse.
| | 06:57 | Now collapse deals with table rows or
table columns, so if it's not applying to a
| | 07:02 | table, then collapse is the same as hidden.
| | 07:04 | So if I say hidden and save it and go
back and preview this again, you can see
| | 07:11 | the element goes away.
| | 07:12 | And what I want you to notice about
this, however, is that even though I told
| | 07:15 | the visibility be hidden, notice that the space
that the element was taking up is still there.
| | 07:19 | Okay, so that's one of things that the
visibility hidden property does for us.
| | 07:23 | It does hide the element visually, but
the space that the element would take up
| | 07:26 | in the layout, and how it's
affecting other elements, remains.
| | 07:29 | So if we were to increase, say, the
height of that, for example, the rest of the
| | 07:32 | layout would react to that.
| | 07:33 | Okay, now I want you to contrast that
with using the display property of none.
| | 07:40 | So if I save this and preview
it, you can see what happens.
| | 07:44 | That element is gone.
| | 07:47 | Not only does it not display, but it's
physically removed from the layout, and
| | 07:50 | it's no longer affecting any other elements,
and other elements aren't affecting it.
| | 07:54 | It is as if it were never there.
| | 07:56 | Now one thing I do want to
point about this is that even though the
| | 07:58 | element is not there visually anymore,
| | 08:00 | it's still available
through the document object model.
| | 08:02 | So, that element would still be
available for scripting and you get still
| | 08:05 | affect it through that.
| | 08:07 | Another thing I want to point out too:
if you were thinking about using this as
| | 08:09 | a method of maybe hiding text and then
putting something in its place, screen
| | 08:15 | readers, accessibility devices, are
actually programmed now to ignore objects
| | 08:20 | that have display of none.
| | 08:22 | So if you are wanting a screen reader
to still read this content while maybe
| | 08:25 | not displaying it visually, this probably
is not the method that you want to be using.
| | 08:29 | So as you can see, the display
property gives us an extremely powerful way to
| | 08:33 | control these elements on our page.
| | 08:35 | Now like almost all the CSS capabilities
that we are talking about, it's just a tool,
| | 08:39 | and like most tools, you are going to need
to decide if it's the right one for the job.
| | 08:43 | Now later on we are going to use the
display property to enhance various layouts
| | 08:46 | that we are going to be working on, and
we are going to explore different ways to
| | 08:49 | use it within the context
of a wider layout strategy.
| | Collapse this transcript |
| Using CSS Resets| 00:00 | In many cases, how you structure and
write your CSS will be determined by your
| | 00:04 | personal design philosophy.
| | 00:06 | Nowhere is this more true than whether
or not you're going to use a CSS Reset,
| | 00:11 | and if you do use them, what type
of Reset that you are going to use.
| | 00:14 | Now if you are not familiar with them,
CSS Reset is a term that's used to
| | 00:18 | describe a collection of styles that
are designed to neutralize a portion of a
| | 00:22 | browser's default styling.
| | 00:24 | Now they come in a wide variety, with
varying degrees of complexity and functionality.
| | 00:28 | Let's take a look at some of the
practical applications for using CSS Resets, and
| | 00:31 | after that I am going to leave you
with some additional resources; that way you
| | 00:34 | can learn a little more about them.
| | 00:36 | So I have the Reset.htm file open and
you can find that in 01_08 directory,
| | 00:43 | and I am just going to
create a simple little CSS Reset.
| | 00:46 | Now just to show you kind of what it
is that we are going to be going, if I
| | 00:49 | were preview this page in the browser
right now, I can see that there's no
| | 00:53 | styling going on, on my part, but what I am
looking at are the browser's default stylings.
| | 00:58 | So all those spacing here, the
space between the paragraphs and the
| | 01:01 | headings, all the margins that you are
looking at, the font size, that sort of thing,
| | 01:04 | that's all controlled by the
browser's default settings.
| | 01:08 | Now if I'm going to go ahead and
style this page, as a general rule, I will
| | 01:12 | probably end up overriding most of
those, but in some cases I might not.
| | 01:16 | Sometimes that's helpful, and sometimes
it might cause some styling issues, or
| | 01:19 | there might be some conflicts between my
styles and the browser's default styles
| | 01:23 | that I didn't anticipate.
| | 01:25 | So the nice thing about a CSS Reset is
they just sort of go ahead and give you a
| | 01:28 | baseline to start from that goes ahead
and takes away, or sort of zeroes out if
| | 01:34 | you will, a lot of those default styles.
| | 01:36 | Okay so I am going to get back into my code.
| | 01:37 | And one thing that you always want to
make sure you do when you write a CSS
| | 01:40 | Reset is place it towards the top of the code.
| | 01:43 | The idea is that your styles later
on will sort of overwrite what you're
| | 01:47 | doing with the CSS Reset.
| | 01:49 | The only thing you are trying to with this
is overwrite the browser's default styles.
| | 01:52 | So right underneath the
comment that says "add styles here,"
| | 01:55 | I am just going to create
a very simple CSS Reset.
| | 01:57 | Now I am going to start just by
grouping a lot of selectors together, so I
| | 02:00 | am going to start with "html,body,
div,h1,h2,h3,P,ul,li" and well
| | 02:15 | that's it for right now.
| | 02:16 | Now that might seem like a lot but
trust me, that is a small CSS Reset.
| | 02:20 | I've seen them with two to three
times the number of elements sort of
| | 02:23 | grouped together here.
| | 02:25 | And the only thing we are going to do
within the selector is we are going to
| | 02:27 | just going to go margin: zero;
| | 02:29 | padding: zero.
| | 02:30 | Most CSS Resets are a lot more robust than that,
| | 02:33 | throwing in some typographic rules,
maybe even doing some things designed to
| | 02:37 | promote cross-browser compatibility.
| | 02:39 | So, those are all sorts of things
that you can find in CSS Resets.
| | 02:42 | Okay so if I save this file, go back
into my browser and refresh this, you can
| | 02:46 | see the effect that the CSS Reset had on this.
| | 02:49 | Now that looks terrible, but what it does
is it gives us that sort of starting point.
| | 02:53 | I don't have to worry about the
default margins and padding of any of these
| | 02:57 | elements conflicting with
the styles I am going to write.
| | 02:59 | I am now free to write them without
worrying about what the browser's default
| | 03:03 | styling might do in an instance or
that I might forget about a browser's
| | 03:07 | default margins in certain locations.
| | 03:09 | All right, now I am going to go back
and show you kind of the nice thing that
| | 03:12 | this Reset does for us based on
looking at the fully styled page.
| | 03:16 | So I am going to go back into my code,
and you'll notice we have a lot of styles
| | 03:20 | here that are already commented out, so
I am just going to remove the front part
| | 03:23 | of the comment, which is
right there on line 18.
| | 03:25 | I am going to scroll down to the bottom
of styles and get rid of the last part
| | 03:28 | of the comment right there. Now be sure
not to delete the closing curly braces
| | 03:32 | from a. Now, let me go ahead and save this.
| | 03:34 | And again I am going to preview this
in my browser. Okay, so there is my page,
| | 03:39 | fully styled. It looks nice, not a bad-
looking page. But what is it that the CSS
| | 03:43 | Reset is actually doing for us, you know,
how can we visualize what that's doing?
| | 03:48 | Well, if I go back into my code and if
I comment out the Reset and then preview
| | 03:55 | that in another tab and you can sort of
preview what the Reset is actually doing for us.
| | 03:58 | So I am going to go ahead and
comment out the Reset that I just did.
| | 04:00 | So /* for the beginning of the
comment */ for the end of the comment and
| | 04:08 | remember, you just want do that right
around the CSS Reset that you created.
| | 04:11 | So I will save that, and then I am just
going to preview that in a new tab. There we go.
| | 04:16 | And now if I tab back and forth, you can
sort of see the difference that we have
| | 04:20 | between one layout and another. Notice
one where we don't have the CSS Reset, for
| | 04:25 | example. The default margin on this
heading up top is causing the page to be
| | 04:29 | pushed down a little bit, and we have
some additional spacing issues throughout
| | 04:32 | that are just slightly different
that might make a really big difference in
| | 04:36 | certain layouts. In some layouts you
might not notice it at all; in others
| | 04:39 | there might be a really big difference
between having or using the Reset or not using it.
| | 04:43 | Now, I think you can kind of see how
beneficial Resets are, but I do want to
| | 04:48 | point out that they're not without their problems.
| | 04:50 | You know one of the reasons that
designers are really critical of using CSS Resets
| | 04:54 | is that they are pretty complex. A lot of
times they require you to add a lot of
| | 04:58 | weight to your styles
that you don't always need.
| | 05:00 | You are not always going to need
everything that a lot of these CSS Resets that
| | 05:02 | I am about show you are going to do for you.
| | 05:05 | Now another thing to think about is how
much work you actually want the browser to do.
| | 05:09 | Think about what we are asking it. We are asking the
browser to go through, strip out all its styling and add a
| | 05:13 | bunch of styling on top of it.
| | 05:15 | If your styles were already going to
overwrite the browser's default styles
| | 05:18 | then your CSS Reset is really
just doing a lot of work for nothing.
| | 05:21 | The other thing is, if you do decide to
use CSS Resets, don't just go ahead and
| | 05:26 | copy and paste them from somebody else's
site, even the ones I am going to show you.
| | 05:29 | Mow Eric Meyer even says in his
introduction to his Reset that he hasn't
| | 05:33 | designed it to be used as is, but to be
altered and customized to meet the needs
| | 05:37 | of the designer or whatever
project you are working on,
| | 05:40 | so really think about them as a
starting point and take from them what you need
| | 05:43 | and then strip out the
things that you don't need.
| | 05:45 | Now my own personal approach, if
you are wondering about that, to using
| | 05:48 | Resets, it's very minimal.
| | 05:50 | All I really do is I prefer to zero out
the default values for elements that I
| | 05:53 | know I am going to be
using in that particular site.
| | 05:56 | Now for that reason, I don't have a set
Reset that I use for every project. You
| | 06:00 | know, even the ones I am about to
show you, there isn't one of those that I
| | 06:02 | just use every time out.
| | 06:04 | I just have a guiding principle of about
using a smaller efficient Reset if I need them.
| | 06:08 | Now one of the things that I have
provided for you here on the page is a series
| | 06:11 | of links that can take you to different Resets.
| | 06:13 | So I have Yahoo's YUI Reset, Max
Design's, Eric Meyer's, HTML5 Reset, and the
| | 06:20 | HTML5 Boilerplate Reset.
| | 06:22 | Now you can certainly go to each of
those, read to the documentation, and learn
| | 06:26 | more about them, figure out what works
for your projects and what doesn't, but
| | 06:29 | the site that I really wanted to
point out to you was CSS Reset.com,
| | 06:33 | so I am going to go ahead
and open that up in a new tab.
| | 06:35 | This site has a lot of information
about CSS Resets, what they are, some
| | 06:39 | documentation on them,
| | 06:40 | and then there are links to not only
some of the ones that I gave you links to
| | 06:43 | as well, but other ones, so you can
either go ahead and just grab the code from
| | 06:46 | them or read the documentation on them
as well to figure out whether or not that
| | 06:50 | CSS Reset is right for you.
| | 06:52 | Okay, so visit those sites, read the
documentation for those Resets, go ahead and
| | 06:57 | dig through, explore into the code.
| | 06:59 | You are going to gain a greater
appreciation for dealing with browser
| | 07:01 | default styles, what's involved with
that, when its appropriate to use Resets,
| | 07:05 | and most importantly, where the use
of CSS Resets will fit into your own
| | 07:10 | design philosophy.
| | Collapse this transcript |
| Fixed, fluid, and responsive layouts| 00:00 | In this course, we are going to focus
on building three main types of layouts:
| | 00:04 | fixed, fluid, and responsive.
| | 00:06 | Now I have got examples of all three
of those layout types open here, and I
| | 00:10 | want to go over the basics of each of them,
as a way of introducing these layout types.
| | 00:14 | So we have got fixed.htm,
fluid.htm, and responsive.htm,
| | 00:17 | those three files, open.
| | 00:18 | I have opened them from the 01_09 directory.
| | 00:23 | Now before we preview these in the
browser, before we go into the CSS and
| | 00:26 | take a look at the actual concepts that's
driving the different types of layouts,
| | 00:30 | I want to go over the structure of the
actual HTML. So I am in fixed.htm and
| | 00:34 | if I scroll down into the body of
this document, I can see that the page starts
| | 00:40 | with a header that has the headline
Alice in Wonderland, and that's followed by
| | 00:44 | an article which contains some of the
opening part of the Alice in Wonderland novel.
| | 00:49 | And then if I go down a little bit
further, I can see that I have it an aside pass
| | 00:53 | the article, and this aside has a
personal note from Lewis Carroll in it.
| | 00:57 | And at the very, very bottom
we just have a simple footer.
| | 01:00 | Okay so that is the structure that is
used throughout all three of the pages.
| | 01:04 | So the only thing that's going to
change when we preview these pages in the
| | 01:08 | browser and we take a look at how they
respond to changes within the browser,
| | 01:12 | it's important to remember that the
underlying structure of the page of HTML is
| | 01:16 | exactly the same. Same class attributes,
same structure, same elements; nothing
| | 01:21 | changes other than the CSS.
| | 01:23 | Okay, so we are going to
start with the fixed.htm.
| | 01:26 | So I am going to go over to
browser and preview that page.
| | 01:28 | And here we have our layout.
| | 01:29 | Here is our header. We have got a
simple two-column layout. If I scroll down, we
| | 01:34 | can see at the very bottom
there is our footer down there.
| | 01:37 | So very simple page structure,
but this is a fixed layout.
| | 01:41 | Now that refers to the fact
that it is set to a fixed size.
| | 01:45 | So any change I make to the browser--I
am just going to resize my browser window
| | 01:49 | here--does not affect this layout at all.
| | 01:51 | It remains consistent no matter what
device, not matter what user agent, no
| | 01:55 | matter what screen size this is viewed
at, it always stays the same because it
| | 01:59 | is fixed to a very specific size.
| | 02:01 | Now if we take a look at the CSS for
this page, we can see that it does not take
| | 02:05 | a lot to accomplish this. If I scroll
down, as a matter of fact, I can see in
| | 02:08 | this body selector here the page is
being set to a width of 960 pixels.
| | 02:13 | So we are using absolute length
values for these measurements.
| | 02:16 | And if I go down into the actual
layout styles for these three sections, the
| | 02:20 | article, aside, and footer, you can
see that we are using floating to move
| | 02:24 | elements from one size to next.
| | 02:25 | We have an entire chapter on floating command.
| | 02:28 | But more importantly, the width values
here, each one of these is giving a very
| | 02:32 | explicit width value that's telling it
how much space within that fixed size
| | 02:37 | those elements should take up,
so that is a fixed layout.
| | 02:40 | Okay I am going to switch over the fluid
layout now and preview that in the browser.
| | 02:46 | And now you can see, probably at
first glance, there is little something
| | 02:50 | different about this page.
| | 02:51 | It appears to be occupying a bit wider
space, so it looks a little bit wider
| | 02:56 | than our previous layout.
| | 02:57 | Same basic concept in the layout.
| | 02:59 | We have two columns. The main content
is on the left-hand side, the note from
| | 03:02 | Lewis Carroll is in the right-hand side, and of
course we have our footer down in the bottom.
| | 03:06 | So what is so different about a fluid layout?
| | 03:09 | Well, unlike a fixed layout which
remains fixed based upon a specific size
| | 03:13 | that you set on the page, fluid layouts
do respond to changes made in the user
| | 03:17 | agent or the browser.
| | 03:18 | So as I resize the browser, you can
see that the layout changes as well.
| | 03:23 | Now it stays a two-column layout, but
essentially each of these sections is
| | 03:27 | taking advantage of the available space.
| | 03:29 | So the upside of this is no matter what
size this is viewed within the browser,
| | 03:34 | we are still going to get our two-column layout.
| | 03:35 | We are not going to have any horizontal
scrollbars or content cut off, but the
| | 03:39 | downside is is when you start getting
to the extremes, you can see that the layout
| | 03:44 | starts--really has a hard
time holding up with this.
| | 03:46 | And actually what I've done here is I
have some minimum width values set on this,
| | 03:50 | so that it wouldn't even go further than this.
| | 03:52 | And the other thing is that at the
other extreme, when we start taking it
| | 03:56 | really, really wide, some of the content
begins to get maybe a little bit wider
| | 03:59 | than we'd like for it.
| | 04:00 | There are of course minimum and
maximum width values that we can put on our
| | 04:04 | elements to prevent this, but that's
one of things that you have to aware of
| | 04:07 | with flexible layouts.
| | 04:09 | Now if I go back into the CSS of my
fluid layout here, I can see that again the
| | 04:14 | body has a width value set, but this
time instead of an absolute value, we are
| | 04:17 | using percentages, so at this point we
are just saying hey, go ahead and let this
| | 04:20 | page take up 85% of the
available space within the browser.
| | 04:23 | If I go into the individual layout
styles of these, I can see that again, we
| | 04:27 | are using percentage values for widths
and padding as well so that each one of
| | 04:31 | these elements is occupying a specific amount
of space based on a percentage of its parent.
| | 04:37 | So while you're not really sure exactly
how much space each of these elements is
| | 04:40 | going to take up, you understand that
the relationship between the two of them
| | 04:44 | will remain consistent, regardless of
how much space is available, because of the
| | 04:48 | percentage values that you're setting on these.
| | 04:49 | Okay now let's go ahead and
take a look at responsive layouts.
| | 04:52 | So I am going to switch over to the
responsive.htm, and I am going to look take a
| | 04:56 | look at that in the browser first.
| | 04:57 | Now responsive layouts are very similar
to fluid layouts in the fact that they
| | 05:01 | do respond to various things.
| | 05:03 | One of the things that they can
respond to, and the thing that we are going to
| | 05:05 | demonstrate here, is the size of the
browser window. They can then also respond
| | 05:09 | to different things,
| | 05:10 | for example, the orientation of the
device. Responsive layouts can, if a device
| | 05:14 | is in portrait or landscape mode,
for example, the height of the device.
| | 05:18 | So there are a lot of different
things responsive layouts can respond to.
| | 05:21 | So in this case, you will notice that
initially we actually have a three-column
| | 05:23 | layout based upon the available size.
| | 05:25 | So our main content area has a two column
layout, and we also have the aside still here.
| | 05:30 | We notice that our sections have a
little bit of a separation between them in
| | 05:34 | this particular layout, and we
have a footer down here as well.
| | 05:37 | All right, so if I resize this, at
first it looks really no different than the
| | 05:42 | fluid layout. It's just changing based
on size. But I also notice that this
| | 05:45 | appears to have a range.
| | 05:46 | So when I get down to this
section, it stops flexing.
| | 05:50 | And if I keep going down, I reach a
break point and when it hit the break point I
| | 05:54 | get sort of an entirely different layout.
| | 05:55 | You will notice, for example, the
heading changes in size. You will notice that
| | 05:59 | the column over here is now single
column instead of a double column.
| | 06:02 | We don't have the visual separators at the end
of the section anymore, so all of those change.
| | 06:06 | And you can have as many of those
break points as you want or need within a layout.
| | 06:10 | So when we get down to another certain
break point, instead of remaining a two-
| | 06:14 | column layout, it goes down to being a
single-column layout and in this case
| | 06:18 | again a lot of things changes, like
the size of the headings, the text size
| | 06:21 | changes a little bit.
| | 06:23 | We now get a separator above the aside
and below the article, and then our footer
| | 06:27 | changes a little bit as well.
| | 06:28 | Now, responsive layouts are
relatively new in terms of a layout concept.
| | 06:33 | It's designed around the way that
people are now consuming content online, which
| | 06:37 | is to say, using multiple devices.
| | 06:39 | So here we have a layout that's
adapted for the screen we have one that's
| | 06:42 | adaptive for tablets, and we have
another one, a smaller single-column layout,
| | 06:46 | that's adapted for phones.
| | 06:47 | Let's take a look at the CSS and
see how that's actually accomplished.
| | 06:50 | So if we go back to the CSS and start
towards to the top of it, you can see in
| | 06:54 | the body selector here, for example,
there's no width specified here. Really
| | 06:57 | the only thing that this is a
accomplishing is centering the content on the
| | 07:00 | page, in terms of layout.
| | 07:02 | It continues for a while. There is
no layout styles, so where have all
| | 07:05 | those layout styles gone?
| | 07:06 | All right, so if we go down to about
line 74 or so, we can begin to see the
| | 07:10 | layout styles and the inner rule that
you may or may not have seen before.
| | 07:13 | This is called a media query, and we
have an entire chapter on response layouts,
| | 07:17 | and we are going to talk about
media queries in more detail.
| | 07:19 | But essentially what media queries
allow you to do is filter which styles are
| | 07:23 | applied based upon the media query.
| | 07:25 | So if these conditions are met, the
styles contained within it are served, but if
| | 07:29 | they are not met, they are not served.
| | 07:30 | Now this allows you to present in this
case pretty much three different layouts.
| | 07:34 | So here we have styles that apply
only if the minimum width is 780 pixels,
| | 07:40 | so this would apply to any
screen size of 780 pixels or greater.
| | 07:44 | Now you will notice that
we are using percentages.
| | 07:46 | So this is more of a flexible or
fluid layout, but we do have minimum and
| | 07:50 | maximum widths, so that's basically
giving it a range of measurements that you
| | 07:54 | can flex inside of, but then it will
sort of freeze in those positions if it's
| | 07:59 | above or below those values.
| | 08:01 | Now if I keep going down, I can begin
to see each of these media queries. This
| | 08:05 | one, for example, goes between 481
and 780 pixels, so that's for tablets.
| | 08:10 | And if I just scroll down a little bit
further, I can find anything that's below
| | 08:14 | 480 pixels, and that would be a smartphone.
| | 08:17 | So that is a brief overview of
fixed, fluid, and responsive layouts.
| | 08:22 | I don't want to imply, or I do want to
make it seem from this movie, that there
| | 08:28 | are only those three types of layouts.
| | 08:29 | For example, we didn't even talk about
elastic layouts, which are layouts that
| | 08:33 | are totally based on ems. Nor did we
discuss how some designers just mix
| | 08:37 | techniques from various
layout types into hybrid layouts.
| | 08:40 | Now in fact, you could argue that there
aren't really types of layouts at all;
| | 08:45 | there is just a mixture of techniques
that results in the desired page design in
| | 08:49 | the layout's behavior.
| | 08:50 | Now that's what I am focusing in this title
| | 08:52 | first on the layout techniques that we
are going to be learning and then how to
| | 08:56 | use those techniques to
create a specific layout type.
| | 08:59 | And I want to make sure that you
understand that the layouts you build should
| | 09:03 | conform more to the needs of your
site than the rules of any one specific
| | 09:07 | layout type.
| | Collapse this transcript |
| CSS debugging tools| 00:00 | One of the things that I've really been
intrigued with over the past few years
| | 00:04 | is how the browser has evolved from
being simply a passive receiver of web
| | 00:08 | content to being a very active
part of the web development process.
| | 00:13 | Now that's especially true for CSS authoring,
| | 00:16 | as most browsers now have built-
in debugging tools for checking and
| | 00:20 | modifying your CSS.
| | 00:21 | Now if you're using a HTML editors like
Dreamweaver, you already have a robust
| | 00:26 | set of CSS debugging tools
built right into the editor itself.
| | 00:30 | If on the other hand, you are using one
of the more lightweight editors, such as
| | 00:35 | the one that I'm using for this title,
Aptana Studio, then you are going to
| | 00:38 | rely on the browser for much
more of your testing and tweaking.
| | 00:41 | Now this process can be made a lot
easier if you know how to use the
| | 00:45 | browser debugging tools,
| | 00:47 | so in this movie, I am going to
introduce you to a few of those tools,
| | 00:50 | show you have set them up, and give your
brief tour of some of their CSS capabilities.
| | 00:54 | Now one of things that I want to
point out here is that the tools that I am
| | 00:58 | about to show you change all the time,
| | 01:01 | I mean even weekly. They
are constantly being updated,
| | 01:03 | so there's a good chance that the
interfaces and functionality that you are
| | 01:07 | going to see here might differ
slightly from what you see as you use them,
| | 01:11 | because you might be using updated version.
| | 01:13 | Now since each browser has its own
set of tools, I want to introduce you to
| | 01:17 | them one at a time.
| | 01:19 | Now to do that, I have the index.htm
file opened up here from the 01_10 folder,
| | 01:25 | and I want to start with Firefox.
| | 01:28 | Now Firefox has a set of tools called
Firebug, and if you have been doing web
| | 01:32 | design or web development for any time
at all, you've probably heard of this.
| | 01:36 | If you want to get a little bit of
more information on it or read the
| | 01:38 | documentation or download
latest build, go to getfirebug.com.
| | 01:43 | So I am going to switch over to our
page being previewed in our browser, and
| | 01:47 | let's say I want to start inspecting
some of these elements or checking out the
| | 01:51 | CSS or even tweaking some of the properties.
| | 01:53 | To do that, I could launch the Firebug console.
| | 01:56 | Now there are couple of ways for me to
do this. One of the easiest ways is to go
| | 01:59 | right over here in the toolbar and just
click Firebug. Now that will turn it on.
| | 02:02 | Now what I get is this console at the
bottom. Now most browser debugging tools are
| | 02:07 | going to look exactly like this, so if
you get comfortable using one, moving
| | 02:10 | into another browser and using its set of
tools is pretty much just making a lateral move.
| | 02:16 | Okay now I'll notice if I go right
over here to Inspect Element, I can mouse
| | 02:21 | around the page, find elements
to inspect, and click on them.
| | 02:24 | And when I do that inside of the HTML,
it shows me exactly where this is. As I
| | 02:28 | mouse around the HTML, you will notice
that's highlighting different elements
| | 02:31 | as well. It's even showing the CSS box
model properties. Padding is indicated
| | 02:36 | by that sort of purple color that you are
seeing there and margins is that yellow color.
| | 02:40 | Now I have different panels here.
| | 02:42 | I have an HTML panel.
| | 02:44 | I have a CSS panel. The CSS goes
ahead and let's me inspect any of the CSS.
| | 02:49 | And if I'm looking HTML panel and I
inspect my elements and I settle on a
| | 02:53 | specific element, you will notice that
I also get these panels right over here
| | 02:57 | that show me the computed styles.
I can even turn certain things off. For
| | 03:01 | example, I could say, hey, only show me
the applied styles. And within that, I can
| | 03:05 | do things like well, what would it look
like if its color wasn't white, or if the
| | 03:09 | font style wasn't italic.
| | 03:11 | So I can begin to sort of tweak my
styles right here by turning certain
| | 03:14 | features on and off again, and I
can even start writing some styles.
| | 03:17 | So I can begin authoring in this
environment and then copy and paste the
| | 03:20 | styles into my own code,
| | 03:22 | so there are a lot of really
cool things that we can do here.
| | 03:24 | We even have a console where I can run
different profiles and warnings. So for
| | 03:29 | example, if I reload this page and say
I want to know what the CSS warnings for
| | 03:34 | this page are, I can get all the warnings on it.
| | 03:36 | Now don't be too alarmed here.
| | 03:38 | These are just certain properties or
selectors that Firefox doesn't support;
| | 03:42 | it doesn't mean that the code isn't going to work.
| | 03:44 | Okay, so that's Firefox. Next
| | 03:46 | I want to switch over to Chrome and
show you some of Google Chrome's tools.
| | 03:50 | Now Google Chrome is WebKit-based
browser, so it uses something known as
| | 03:54 | WebKit Web Inspector.
| | 03:56 | Chrome and Safari use the exact same
set of tools, so I am going to show you
| | 04:00 | these in chrome, but in Safari it
works exactly the same way. So if you browse
| | 04:04 | in Safari and test in Safari, you
can use exactly the same set of tools.
| | 04:08 | And if you want to learn a little bit
more about Web Inspector, you can go to
| | 04:11 | trac.WebKit.org/wiki/Webinspector and
get a little bit more information on this.
| | 04:17 | So I am going to switch over
to our previewed page again.
| | 04:20 | And here, we don't have a console button,
but the easiest way to activate Web
| | 04:24 | Inspector is just finding an element
that you want to learn a little bit
| | 04:27 | more about and inspect, right-click it, and I
can say, hey, I want to inspect this element.
| | 04:31 | So as soon as I do that, I have the
WebKit Web Inspector open up, you can see it
| | 04:35 | looks very similar to Firebug.
Some slight differences obviously.
| | 04:38 | But as I mouse through the code, again I
am getting the CSS box model properties
| | 04:43 | visualized, which is very nice.
| | 04:46 | And again, I get my computed styles and
here. I can begin to sort of play around
| | 04:50 | with those, turn them on and off again.
| | 04:52 | So I get a lot of the same functionality
with the Web Inspector that I get with Firebug.
| | 04:56 | Now if you use Opera, Opera has a tool
called Dragonfly and I really like Dragonfly.
| | 05:02 | It's very, very good. Very similar Web
Inspector, very similar to Firebug, but
| | 05:05 | it's very powerful in its own right.
| | 05:07 | If you want to learn more about
Dragonfly, go to opera.com/dragonfly and
| | 05:12 | they have the whole section of their web site
dedicated to teaching you how to use this.
| | 05:15 | All right, so I am going to go over to my
page opened in Opera, and again, it's a same drill.
| | 05:20 | I just find an element, I right-click it, and I say okay, inspect
that element for me, and Dragonfly opens
| | 05:25 | up. And let me just make
this a little bit larger.
| | 05:27 | As I begin to mouse around elements
and inspect those elements, notice that I
| | 05:31 | get a series of guides that help me
find out whether elements that I am
| | 05:34 | wanting to are lining up with each other and how
much space they are taking up within the layout.
| | 05:38 | I also get a nice little preview of some
of those CSS box model properties as well.
| | 05:42 | Just as before, we have a console that
we can work with. We have styles that
| | 05:46 | show us computed styles.
| | 05:47 | We have different elements that we
could sort of turn on and off here. We could
| | 05:51 | get in sort of a preview
how the styles are working.
| | 05:53 | And Dragonfly even has a zoom, so you
can zoom up on certain elements as well,
| | 05:57 | baked right into the
console, which is really nice.
| | 05:59 | Now I'm sort of focusing on the CSS
capabilities of these tools, but obviously
| | 06:03 | there is a lot more to them.
| | 06:05 | They all have JavaScript consoles
where you go in and debug your JavaScript.
| | 06:09 | They have a lot of web
development tools available to them as well.
| | 06:12 | So there's a lot to these tools.
| | 06:14 | Now if you are on the PC and you are
using Internet Explorer, Microsoft does
| | 06:18 | have a similar set of tools. And if you
go to microsoft.com/download, and search
| | 06:22 | their Download Center for the Internet
Explorer Developer toolbar, you'll find a
| | 06:27 | toolbar that you can download and
install into Internet Explorer, and it gives
| | 06:31 | you a similar set of functionality.
| | 06:33 | So, now that we gotten a good idea as to
where to find CSS testing and debugging
| | 06:37 | tools within the browser, we need to
explore exactly how these tools can help
| | 06:41 | us author our CSS, and we are going to
go ahead and do that in our next movie.
| | Collapse this transcript |
| Using the Firebug Inspector and the WebKit Web Inspector| 00:00 | Now that we've seen how to access a
browser's web debugging tools, let's
| | 00:04 | experiment with using them to
troubleshoot our CSS and refine our page layout.
| | 00:08 | Now, for this exercise, we're going to
focus on using the two most popular web
| | 00:12 | debugging tools, Web Inspector and
Firebug, as a way of getting more comfortable
| | 00:16 | with using the tools, but don't be
afraid to use Dragonfly or Microsoft's tools,
| | 00:21 | whichever browser that you're going
to be using most frequently, and really
| | 00:24 | should be comfortable with
using all of these tools.
| | 00:27 | Okay, so I have index.htm opened up
here from the 01_11 folder, and the first
| | 00:32 | thing I'm going to do is I'm just
going to preview this in Firefox.
| | 00:36 | So, this is very common.
| | 00:37 | We work on a page for a while, we
save it, we test it, we preview it in the
| | 00:41 | browser, and we see something that
doesn't exactly look the way that it's
| | 00:44 | supposed to. And in a lot of cases, we
have to sort of guess why or go back in
| | 00:49 | our code and figure something out.
| | 00:50 | In this case, I want to use is browser
debugging tools to help me figure out
| | 00:54 | what's going on here. So, what's happening is this
banner headline right here, We love urban
| | 00:57 | photography, does not
look the way that it should.
| | 01:00 | We should see slightly a little bit
more letter spacing and that should be all
| | 01:03 | caps rather than mixed caps.
| | 01:05 | So, I'm not really sure what went wrong here,
| | 01:07 | so I'm going to turn on Firebug
and see if it can help me with this.
| | 01:09 | So, I'm going to go right up here and
turn the Firebug console on, and again just to
| | 01:14 | sort of refresh your memory about
Firebug, we have these different tabs which we
| | 01:18 | can look at: the HTML;
we can look at the CSS;
| | 01:21 | we can look at any scripts that are going on;
we have console view, that sort of thing.
| | 01:24 | I want to focus on the HTML right now
because notice that one of the things you
| | 01:27 | can do is you can just sort of parse
through your code and you'll see a preview
| | 01:32 | of the element and you'll actually
see some of the box model properties.
| | 01:35 | Purple is padding, yellow margin, and
then the blue that you're seeing that's
| | 01:40 | the actual content itself. And we can go through
and inspect any part of our code that we want.
| | 01:45 | We can open up our code structure.
| | 01:47 | We can look inside these various
elements, so we can really inspect all
| | 01:51 | the things we want to. All right!
| | 01:52 | So, going back to our banner here, we
also have this little tool right here that
| | 01:56 | says, "Click an element on the page to inspect."
| | 01:58 | So, if I grab that, I can just sort
of mouse around, visually grab the
| | 02:01 | element that I want.
| | 02:02 | That's going to focus on that within my code.
| | 02:05 | Okay, if I look over here on the right-
hand side of the Style panel, I can see
| | 02:08 | the computed styles for this element.
| | 02:10 | Well, the computed styles
aren't what I expect them to be.
| | 02:13 | Color, font-size, and padding-top,
they're exactly what I expect them to be, but
| | 02:17 | I'm missing a couple of properties.
| | 02:18 | I'm missing my letterspace property and
I'm missing my text transform property.
| | 02:23 | Now, there are a couple of
things that I can do here.
| | 02:25 | One of the things, for
example is, I can go to the console.
| | 02:27 | So, if I go over to the console and I
run my warnings--now sometimes you have to
| | 02:31 | refresh the page in order for
this to cycle through again--
| | 02:34 | I notice that right at the very top of
this it says, "Expected end of value but
| | 02:38 | found ':' Error and parsing
value for 'letter-spacing'.
| | 02:40 | Declaration dropped."
| | 02:42 | Now, it does tell me this happens on
line 285, but it doesn't tell me exactly
| | 02:45 | which selector this belongs to.
| | 02:48 | I happen to know for a fact it belongs
to the one we're looking at, but if you
| | 02:51 | didn't know that, you'd still be kind
of almost needle-in-a-hay-stacking this,
| | 02:55 | but it does tell me that
something is going on wrong here.
| | 02:58 | For example, that colon there, when
it's expecting a semicolon, that's going to
| | 03:02 | cause some parsing errors in my CSS.
| | 03:04 | So I kind of guess that
that's one of those issues.
| | 03:06 | Now, there aren't that many
differences between WebKit's Web Inspector and
| | 03:10 | Firebug, but this is one
of the bigger differences.
| | 03:12 | The fact that here it's just
showing me the computed styles.
| | 03:15 | It's not showing me all of the
properties that are actually in the CSS.
| | 03:19 | It's showing just the finished computed styles.
| | 03:21 | So, I want to go over to Chrome for a
moment and show you kind of what happens
| | 03:25 | when I look at the same element in Chrome.
| | 03:27 | So, if I go right over here and I view
and inspect the element for that banner
| | 03:31 | headline, I get a slightly different view.
| | 03:34 | You can still parse through all the
elements in the code. You still get your
| | 03:37 | visual aids, but the colors are slightly
different here in Chrome--or Web Inspector
| | 03:42 | I should say because it
looks exactly the same as Safari.
| | 03:44 | We have sort of that orange color for margins.
| | 03:46 | We have sort of that green color for
padding. And again if we inspect an element--
| | 03:50 | here's the inspect element
tool here in Web Inspector--
| | 03:53 | one of the things that Web Inspector
does for us that I really like that Firebug
| | 03:57 | doesn't is it gives me those CSS
properties, that sort of visualization, as well
| | 04:01 | as computed values as I
move through the elements.
| | 04:04 | So, that's really kind of nice.
| | 04:06 | Okay, but back to the task at hand.
| | 04:08 | Here, I see something very different.
| | 04:09 | When I look over here in the Styles
pane, I can see that letter-spacing has a
| | 04:14 | strike through and if I hover over this,
I can see that I've got a little warning
| | 04:18 | message here, and then my text
transform is not applying at all.
| | 04:21 | So, it's just basically
parsing this as one big, huge error.
| | 04:25 | So, I can tell that that's a problem.
| | 04:27 | Another thing that showing all of
these properties does for me is it helps me
| | 04:31 | catch other types of mistakes as well.
| | 04:33 | Let me show you what I mean.
| | 04:34 | Now, I've got a couple of
choices when inspecting elements.
| | 04:37 | One, I can come through and use the
Inspect Element tool and just click on elements.
| | 04:41 | I can do it that way, or I can come
directly down here in the code and really
| | 04:45 | sort of target exactly
the element I'm looking for.
| | 04:48 | Now, when I click on this heading 1
that's in the header, if I look over here in
| | 04:52 | my Styles, I notice there's a
strikethrough with this line-height and if I look at
| | 04:56 | that, the line-height is set to 100
pixels, but there's another line-height
| | 05:00 | declaration down here at 165.
| | 05:02 | Now, the likely culprit here is
when I was authoring the styles I
| | 05:06 | probably tried the line-height at 100 pixels
and didn't like it and added the line-height:
| | 05:10 | 165 property to the end instead of modifying it,
| | 05:13 | for whatever reason, who knows, I
just forgot to go back and remove the
| | 05:17 | initial line-height.
| | 05:18 | Now, what I really like about this in
WebKit Inspector is well, notice it tells
| | 05:22 | me this is on main.css line 185.
| | 05:25 | So, very quickly and very easily, using
both Firebug and Web Inspector, I found
| | 05:30 | two errors in my CSS that I need to address.
| | 05:33 | So, I'm going to switch back into
Aptana Studio, go back into my code, and I'm
| | 05:37 | going to fix those things.
| | 05:39 | So, I'm going to open up, from the CSS
folder here in 01_11, I'm going to open
| | 05:44 | up main.css, and using the information that I got,
I'm going to scroll down to around line 185.
| | 05:52 | Here we go. And I realize I don't
need that line-height declaration, so I'm
| | 05:55 | going to get rid of that. And then down
around line 280 or so, 279 now, I can
| | 06:02 | find that banner h1 rule, and
here's the error, right there.
| | 06:06 | So, instead of a colon, that
is supposed to be a semicolon,
| | 06:09 | so I'm going to change that and save
it, and now I'm going to go back into my
| | 06:14 | browsers and I'll refresh the page.
| | 06:17 | Now, notice the change in the visual.
| | 06:20 | So, we now have our text-transform is
working, the letter-spacing is working,
| | 06:23 | everything is happening there. And in
Firefox if I look over here in Firebug, now
| | 06:28 | I'm actually seeing those values.
| | 06:29 | There's the text-transform.
| | 06:31 | There's the letter-spacing.
I wasn't seeing that before.
| | 06:34 | If I go over to Web Inspector and
refresh the page, I see similar results. And
| | 06:39 | if I focus on that element, I can see that
those properties no longer have a strikethrough.
| | 06:44 | So, we've seen how we can use Web
Inspector and Firebug to debug some of our
| | 06:49 | CSS, but what if you just want to sort
of play around with it? What if you want
| | 06:52 | to manipulate it and really see almost
immediately the visual impact that you're
| | 06:56 | going to have on your code?
| | 06:58 | Well, that's pretty easy to do as well.
| | 07:00 | So, here I am, in Web Inspector, and one
of things I want to do is I want to focus
| | 07:04 | again on our heading here.
| | 07:06 | So, again I can do this through HTML code,
I can find this and click on it, or I
| | 07:10 | could just inspect it directly on the page.
| | 07:12 | Now, I've got more than just styles and
computed styles available to me over here.
| | 07:15 | If I come over, I have this Metrics pane,
and this Metrics pane is giving me the
| | 07:20 | box model properties of that particular element.
| | 07:22 | You'll notice, for example, if I hover
over a border, nothing shows up, margin
| | 07:26 | nothing shows up. It indicates those
properties don't exist for that particular
| | 07:29 | element. But if I go over padding, I
can visually see it; if I go over to the
| | 07:32 | computed width and
height, I can see that as well.
| | 07:34 | Now what's really nice about this is
let's say I want to change that padding value.
| | 07:38 | I can actually click right
here, double-click the value,
| | 07:41 | I can use arrows to go up or down and I
can visually see that happen. Or I can
| | 07:45 | even type in a value. Let's say I go
down to say 230 and hit Return. I can kind
| | 07:50 | of see what effect that's going to have
on that headline, and whether I like it a
| | 07:54 | little bit further down or not.
| | 07:56 | Now, I'm going to switch back over to
Firebug and show you pretty much how
| | 07:59 | the same thing is done.
| | 08:00 | So, they all have the
same tools for the most part;
| | 08:02 | they're just in slightly
different locations. All right!
| | 08:04 | Let me resize the Firebug pane here for
a minute and center on our headline here.
| | 08:11 | All right! So, if I go over in this point to the
Layout tab, now I really like this in Firebug.
| | 08:16 | This is nice because again
we get the same functionality.
| | 08:18 | If we mouse over to different properties,
you're going to be shown those properties.
| | 08:22 | Let me zoom up a little bit so we can
sort of see the padding there. There we go.
| | 08:25 | But we also, in Firebug, get rulers. You can
see the rulers show up on the browser now.
| | 08:29 | I'm getting guidelines to show me where
this is lining up. And again I can use
| | 08:34 | my arrows to nudge this.
| | 08:35 | I can type in a value.
| | 08:36 | Let's say I type in 290 this time, and
you know what? At 290, I kind of like that,
| | 08:41 | and I like that a lot.
| | 08:43 | So, I might go ahead and
decide to use that in my own CSS.
| | 08:47 | So, if I switch back to Style and my
computed style for this, you'll notice that
| | 08:52 | what it did is it put the sort of
in-line style directly in my HTML.
| | 08:56 | Now, it's not modifying the HTML on
your hard drive, or even on your server;
| | 08:59 | it's just modifying this particular instance.
| | 09:02 | Okay, so I like that value of 290.
| | 09:05 | Now, if I want to play around the way
things look, I can also edit my styles
| | 09:08 | directly in this window. And I can do
this in WebKit Inspector or Firebug, and in
| | 09:13 | this case I'm just going
to show you this in Firebug.
| | 09:15 | Notice I can click to create a
new line here, and I can experiment.
| | 09:18 | I can say okay, well, what if I put a
border on the bottom of this and I did
| | 09:23 | just a 1-pixel solid white border?
And now I can preview what that looks like.
| | 09:30 | I can toggle that on and off to see if I
like it or not, and I can decide whether
| | 09:35 | or not that particular property is for me.
| | 09:37 | Now, anytime, if I add these
properties, I could just go ahead and highlight
| | 09:41 | those and I could copy and paste all
those properties directly into my page.
| | 09:46 | So, if that's what I decided to go
with, I can simply copy and paste them.
| | 09:48 | I can even create brand-new rules
here in Firebug or Web Inspector.
| | 09:52 | So, you could even author CSS directly
in the browser and then copy and paste
| | 09:57 | them into your code.
| | 09:58 | So, if I go back into my CSS,
notice that I can come right here in the
| | 10:03 | padding-top, I can go ahead and plug in
that 290-pixel value that I liked so much.
| | 10:08 | I can go back into my page.
| | 10:09 | I can refresh that, and I can see the
change that I made here in the browser.
| | 10:13 | The visualization of that that I like is made.
| | 10:16 | So, I know this is a brief
introduction, but it should five you some idea of
| | 10:19 | exactly how powerful these tools are.
| | 10:21 | Now, taking advantage of them just
makes sense to you as a designer because
| | 10:25 | think about it. In a sense you're
working directly in the browser.
| | 10:29 | Now that means that you're testing it
in the rendering environment that you're
| | 10:33 | eventually targeting, and it just
doesn't get any better than that.
| | 10:35 | Now, I'm sure that by now you've
realized these tools offer far more in the way
| | 10:40 | of functionality than just CSS.
| | 10:42 | They can help you author and debug your HTML,
| | 10:45 | they feature a JavaScript console that
helps you test and debug your code, and
| | 10:49 | they have a full range of tools to help
you understand page loading, resource
| | 10:54 | management, and a lot more.
| | 10:55 | So, in that sense, regardless of which
editor you're using to write your HTML
| | 10:59 | and CSS, be sure to take full
advantage of these powerful tools as you begin
| | 11:04 | to develop your sites.
| | Collapse this transcript |
|
|
2. Design ConsiderationsPage design workflow| 00:00 | In this chapter I want to focus on the
process of designing page layouts and
| | 00:04 | creating the initial structure of your page.
| | 00:07 | Now unlike the rest of this course, many
of the movies in this chapter will not
| | 00:10 | be hands-on; rather, they're going to focus on
the overall concepts of page-design workflow.
| | 00:15 | One of the biggest misconceptions about
a web design is that web designers spend
| | 00:19 | most of their time working in code.
| | 00:21 | Now the reality is that on most sites
designers spend the majority of their
| | 00:25 | time in the planning and design process.
| | 00:28 | Now not all processes are the same,
and designer workflows are going to very
| | 00:31 | widely based on the personal
preferences of the designer, the size of the team,
| | 00:36 | client type, or specific site requirements.
| | 00:38 | But with these variables in mind, I
want to take a moment to discuss my own
| | 00:42 | personal workflow and the tools that I use.
| | 00:44 | Your own overflow is likely to
differ from mine, but if you're new to
| | 00:48 | designing web sites, this should
give you a few things to consider when
| | 00:51 | creating your own workflow.
| | 00:53 | First I take on what I
refer to as the discovery phase.
| | 00:57 | In this phase I'm interacting with the
client to identify what the goals of the
| | 01:01 | site are, what users should expect from
the site, what type of functionality the
| | 01:05 | site will require, and what the
site's content is going to be.
| | 01:09 | Now I then use this information to
begin to create wireframes and prototypes.
| | 01:15 | Depending up on the site, this might
range from simple sketches all the way to
| | 01:19 | fully realized prototypes.
| | 01:21 | The idea in this phase is to make
sure the site architecture is sound, that
| | 01:25 | content is organized within the site
properly, and the site functionality
| | 01:29 | has been thought through to make it is as
usable as possible for the target audience.
| | 01:34 | Around this time I'll also start working
on color and type treatments for the site.
| | 01:38 | Now color and typography are
critically important to communicating brand and
| | 01:43 | establishing the proper
emotional response from users,
| | 01:46 | so I'll usually play around with
establishing typographic rules for the site,
| | 01:50 | such as which fonts are going to be
used and when and how headings and body
| | 01:53 | copy should relate to each other.
| | 01:55 | With color I'll establish primary
colors and secondary colors and begin to set
| | 02:00 | rules for how the colors
are used within the site.
| | 02:02 | If I'm working with a client,
once I'm sure that the decisions on
| | 02:06 | functionality, site structure, and
color, and type are finalized, I'll begin to
| | 02:10 | generate page mockups.
| | 02:12 | In some cases I'll simply generate
quick sketches that give me an idea of how
| | 02:15 | page design will look, but most of the
time I like to generate very detailed
| | 02:19 | page mockups in programs like
Fireworks, Illustrator, or Photoshop.
| | 02:23 | Now these mockups give me several advantages.
| | 02:26 | They allow me to refine the design
with the client without having to generate
| | 02:30 | code, and they give me the ability to
create site assets directly from the mockup
| | 02:34 | with pixel-level precision.
| | 02:36 | I can export out things like images and
icons while having a precise design that
| | 02:40 | allows me to plan page structure and styles.
| | 02:42 | In fact, most of the time I know what
my HTML and CSS will be before I ever
| | 02:47 | start working in a code editor.
| | 02:49 | Now obviously this is a very high-level
overview of the page-design process, and
| | 02:53 | it's certainly not going
to be the same for everyone.
| | 02:56 | What you need to do is develop a
process that works for you, supports your
| | 03:00 | design aesthetic, and ultimately
meets the needs of your clients and the
| | 03:04 | site's users.
| | Collapse this transcript |
| Page design tools| 00:00 | As I mentioned earlier, most web
designers spend a tremendous amount of time
| | 00:04 | planning and designing sites before
they ever write their first line of code.
| | 00:08 | As such, it's essential that you have
a strong set of tools to help you with
| | 00:12 | the design process.
| | 00:13 | With that in mind, I want to spend a
little bit of time talking about the tools
| | 00:17 | that I use in my own design workflow
and how they might be useful in your own.
| | 00:22 | First I recommend getting a good sketchbook.
| | 00:25 | Every one of my sites
starts with a series of sketches.
| | 00:28 | This allows me to get ideas down
quickly, in a nonpermanent way, and I can
| | 00:32 | take notes, write down measurements,
and work through problems before I ever
| | 00:36 | start creating digitally.
| | 00:38 | In fact, I love working in sketchbooks
so much that I continue to sketch things
| | 00:42 | out and make notes
throughout the entire design process.
| | 00:45 | Next, I want to point out a
few online tools that I use.
| | 00:50 | First up, I want to show you Typetester.
| | 00:52 | Now Typetester allows you to compare up
to three different fonts to each other,
| | 00:56 | and what's really nice about this is the
list of fonts that you can choose from.
| | 00:59 | You can choose from the safe list,
which is essentially fonts that are on every
| | 01:03 | single machine out there.
| | 01:04 | You have your Windows defaults, your
Mac defaults, and even they go down into
| | 01:09 | Windows Vista and Google Fonts. So if
you're thinking about using the Google
| | 01:13 | Fonts API, you can test out
some of their fonts directly here.
| | 01:15 | So when you choose some fonts, after
choosing some fonts to compare to one
| | 01:19 | another, you can come in and change their size.
| | 01:23 | You can change the tracking, the
leading, the word spacing, colors.
| | 01:27 | You can change the text that they display.
| | 01:29 | This is a great way of comparing
fonts side by side or even seeing how well
| | 01:33 | certain fonts work together.
| | 01:35 | Another online tool I
use a lot is Adobe's Kuler.
| | 01:38 | You can find this at Kuler and
that's with K-U-L-E-R, kuler.adobe.com.
| | 01:44 | Now picking a color scheme is one of
the most important steps in web design, and
| | 01:48 | Kuler really helps take a lot of the
guesswork out of it, especially if you're
| | 01:51 | really bad with color like I am.
So let me show you kind of how this works.
| | 01:55 | Number one, a lot of people are members
here, and they'll upload their themes and
| | 01:58 | they'll play around with themes, so
lot of times you can just kind of go
| | 02:01 | through these themes that they have
here and choose one of those and kind of
| | 02:04 | use that as a starting point.
| | 02:06 | Now you can also sort of mix and match
your own. So if I click right here to
| | 02:10 | toggle the color viewer on, notice
that I can begin to move these around.
| | 02:14 | So I can move different colors around.
| | 02:17 | I can mix up my own colors.
| | 02:19 | I could even say, okay,
| | 02:21 | I want this to be the base color, and
let's use complementary colors. And then
| | 02:26 | you can sort of move these around as
well, and the relationship between those
| | 02:30 | colors remains the same.
| | 02:31 | Now once you do that, you can go down
here and tweak these colors individually
| | 02:35 | using the sliders, and you can grab the
HSV, RGB, CMYK, LAB, and even the HEX
| | 02:40 | value to use in your own sites.
| | 02:41 | Now you are limited to five colors at a
time, but of course you can pick a color
| | 02:45 | and then continue to sort of build
off of that to build a much bigger color
| | 02:48 | palette out of that.
| | 02:49 | So a huge fan of Adobe's Kuler, and it's
a free service, so that's really nice.
| | 02:53 | Now as far as Desktop tools go, I use a
combination of three applications when
| | 02:58 | designing page mockups.
| | 03:00 | Now some designers prefer to design
directly within the browser, but I really
| | 03:03 | like to generate fairly detailed
mockups before I begin writing code.
| | 03:07 | To do this, I use Adobe's
Photoshop, Illustrator, or Fireworks.
| | 03:12 | Depending upon the project, I may
only use a single program or some
| | 03:16 | combination of the three.
| | 03:18 | Now typically, I use Illustrator when
the layout calls for heavy use of vector
| | 03:23 | artwork, icon creation, or, like you
are seeing here, when I need to design a
| | 03:28 | responsive layout that's going to have
several different views based on the size
| | 03:33 | of the screen or the device that's being used.
| | 03:36 | I use Photoshop for all bitmap graphics,
photographs, or mockups that make heavy
| | 03:41 | use of image composition.
| | 03:43 | If I need to create a prototype,
especially one that allows clients to preview
| | 03:46 | interactivity and usability, I'll use
Fireworks, as it has a lot of different
| | 03:51 | built-in prototyping features.
| | 03:53 | Now speaking of mockups, the one
question I get asked over and over again is
| | 03:59 | how do I go from my mockups to finished code?
| | 04:02 | Well, currently there is no export
option from any program that creates
| | 04:06 | acceptable code, so if you're looking
for that feature, I'm sorry to disappoint
| | 04:10 | you, but it simply does not exist.
| | 04:12 | Now what I do, and the process that
we're going to be exploring for the rest of
| | 04:16 | this chapter, is use the mockup to help
me plan my initial page structure and
| | 04:20 | generate assets by exporting out
graphics and other page content.
| | 04:24 | Of course everyone's design process is
different, and the tools and processes
| | 04:29 | that work for me might
not be a great fit for you.
| | 04:32 | If you're a graphic designer, you might
already have a tool set that you use that
| | 04:36 | you're very comfortable with and maybe
it's a little different than mine, but it
| | 04:39 | allows you to be just as
productive. That's fine.
| | 04:42 | I encourage you to use what works for you.
| | 04:45 | Just think of this as an introduction
into a specific workflow. Take from it
| | 04:49 | what you think will work for you and
then modify it for the specific projects or
| | 04:53 | strengths that you possess.
| | Collapse this transcript |
| Determining page structure| 00:00 | For new designers the process of going
from mockup to code is probably the most
| | 00:05 | challenging aspect of web design.
| | 00:07 | Now obviously the more experience you
have at building sites the easier this
| | 00:11 | process becomes, but there are some things
that you can do to simplify things a bit.
| | 00:15 | Now first I recommend thinking
of the basic structure of the page
| | 00:20 | before anything else.
| | 00:21 | Don't get too concerned with exactly
how each element is going to be structured;
| | 00:24 | rather, think of the overall groupings of
content and what the basic structure of
| | 00:29 | the page will look like based on this.
| | 00:31 | It gives you a nice starting point, and it
keeps things becoming too complex too quickly.
| | 00:35 | Now to illustrate this, I want to show
you the mockup that I created for the
| | 00:39 | desolve.org site that we will be using
in some of our labs, and walk through the
| | 00:43 | process of determining the basic
page structure for the homepage.
| | 00:47 | Now if you have Illustrator installed,
you can go through this with me, as I've
| | 00:51 | included the Illustrator file in the
assets folder. Let me show you where that is.
| | 00:54 | I'm going to pull up my exercise files, and
you'll notice that directly in the exercise
| | 00:58 | files we have a folder called Assets.
| | 01:00 | If I open that up, here you can see the
mockup for the homepage, and I have also
| | 01:04 | included a PDF version of it as well
so that if you don't have Illustrator you
| | 01:08 | can open up the PDF and kind of
follow along with this as well.
| | 01:11 | Okay, so what we're looking at is the homepage.
| | 01:13 | Now typically when I do a mockup I'll
design not only the homepage but also
| | 01:17 | some of the secondary pages as well.
I don't design every single page that's
| | 01:21 | going to be in the site.
| | 01:22 | I don't have mockups for that. But if
there is something that's going to be on a
| | 01:25 | page that needs me to worked through some
of the design issues, otherwise I'm just
| | 01:29 | doing some secondary pages so that I
can determine what the consistent design
| | 01:33 | elements and structuring of
those pages are going to be as well.
| | 01:36 | But for brevity's sake, we're just
going to look at the homepage for
| | 01:39 | this particular mockup.
| | 01:41 | Okay, now the first thing that I like
to do after the mockup is finished--and
| | 01:44 | to be quite honest with you, this is
actually something that I do over the
| | 01:47 | course of designing it as well--
| | 01:49 | I'd like to think about where are the
basic structural areas? How is this
| | 01:52 | content group together, how does it
relate to each other, and what is that
| | 01:55 | going to mean semantically in terms
of how this content is going to be
| | 01:59 | structured in HTML?
| | 02:00 | So I'm just going to go
from sort of the top down.
| | 02:02 | I've designed a couple of visual aids
to help us sort of visualize kind of what
| | 02:06 | I was thinking of here.
| | 02:07 | So the first thing I am going to do is,
right at the top of the page we have the
| | 02:10 | Desolve logo, and we have the tagline
fine urban photography, so this is content
| | 02:15 | that acts as an identifier, who is
this organization, and that sort of thing.
| | 02:18 | So that can all be grouped
together in the header of the file.
| | 02:21 | Directly underneath that we
have a layer of navigation.
| | 02:24 | This will be the site's main
navigation, so it's going to sit inside of its
| | 02:27 | own region as well.
| | 02:28 | Now a lot of the choices that you
make are personal decisions. You make
| | 02:32 | decisions as designers about how
content is going to be organized.
| | 02:36 | Certainly this header content and the
navigation content could be grouped together.
| | 02:40 | It could all exist in one header.
It's very common to see a site navigation
| | 02:44 | inside the header of the document.
| | 02:46 | In this case I just felt like I
wanted the main navigation out by itself so
| | 02:50 | that it was his own specific
separate region, and that's how I'm going to
| | 02:54 | structure the page. So a lot of times
you're just making a decision based upon
| | 02:57 | that particular site and the needs
of that site, and sometimes it's just
| | 03:01 | personal preference.
| | 03:02 | Okay, now the next thing I'm taking a
look at, just below this where it says, "We
| | 03:05 | love urban photography," and it sort of
has a little About Us section here where
| | 03:08 | it describes who these people
are and what the site is all about,
| | 03:11 | that particular element is not going
to be on secondary pages; it's only here
| | 03:15 | for the homepage as a way of sort of
introducing the user or the viewer to what
| | 03:20 | this content is all about.
| | 03:21 | I'm calling that a banner, and it's going
to be in a separate region because it's
| | 03:25 | certainly not going to be
repeated throughout the site.
| | 03:27 | Okay, if I scroll down a little bit
more, we start to get into the actual main
| | 03:30 | content of the site.
| | 03:31 | I can see just below the banner we
have our latest galleries, which is
| | 03:34 | followed by a list of galleries, so
that's displayed visually. We have some
| | 03:37 | repeating structure there.
| | 03:38 | So all this content right here on the
left-hand side, all of that content relates
| | 03:42 | to each other, and is probably the
most important content on the stage, sort
| | 03:46 | of the main content, if you will.
| | 03:48 | So I'm going to group that together
as a single article. So this is, that
| | 03:51 | left-hand column, is a single
article which we will refine the structure a
| | 03:54 | little bit later on.
| | 03:55 | Now beside it we have some links to
archived galleries, so it relates to the article.
| | 04:00 | We have some contest information
right down here: this month's contest
| | 04:04 | and previous contest.
| | 04:05 | So all of this relates to the
galleries, but it's not part of it, so that's
| | 04:10 | going to go in the sidebar, and we'll
talk about what type of elements we might
| | 04:13 | use to represent that in just a moment.
| | 04:15 | Now I finish this up by going down to
the very bottom of the mockup, and here I
| | 04:18 | can see I have an area for
searching for content on the site,
| | 04:21 | I have some copyright information, a
link where they can follow us on Twitter.
| | 04:25 | So all of this is really
just footer information,
| | 04:28 | so content that goes in the footer of
the page, and that's exactly how I'm going
| | 04:31 | to display that structurally. So I'm
going to group that all as a footer.
| | 04:35 | So if you look at this, including the
footer, we have one, two, three, four,
| | 04:39 | five, six distinct regions of content
on this particular page, and that gives us
| | 04:44 | a really solid idea as to what the
initial structure of the HTML's going to be.
| | 04:50 | Now I'm going to move my page over just
a minute to give myself enough room to
| | 04:53 | visualize this, but I went ahead and
wrote out that initial structure if you
| | 04:57 | will, right here on the page. We'll
turn the visibility of that on. And what
| | 05:00 | we're looking at is just the basic
HTML structure for the content that we are
| | 05:04 | displaying here in the mockup.
| | 05:06 | So we have a header element, so that's
going to be followed by a nav element,
| | 05:09 | which is followed by a div.
| | 05:10 | Now the reason I'm using a div
here for the banner instead of another
| | 05:14 | element, like a section, is because I'd
really don't want this to stand out in
| | 05:18 | the document's outline.
| | 05:19 | If I was making a table of contents, for
example, for this page, banner would not
| | 05:23 | be part of that table of contents; it's
really just sort of a promotional element
| | 05:26 | design to just sort of show
off what the site is about.
| | 05:29 | So it doesn't really fit to any one
distinct section, so I'm going to use a div
| | 05:32 | there. And that's followed by an article
element and aside because, it's related
| | 05:36 | to the article, and then
finally the footer element itself.
| | 05:39 | Now a lot of the elements we're using
here are HTML5 structural elements, and for
| | 05:44 | some of you guys this may be the first
time you're seeing these elements, or it might
| | 05:46 | be the first time you've worked with them.
| | 05:48 | So in order to introduce you to those
I have a movie a little bit later on
| | 05:51 | that's going to talk specifically about
those HTML5 elements and sort of what
| | 05:55 | they mean to the page.
| | 05:57 | Okay, so in a nutshell, that's kind of
my process. By focusing on the overall
| | 06:00 | organization of this page content,
I'm able to identify the basic page
| | 06:04 | structure and obviously put some
thought into how the site is going to work
| | 06:08 | together as a whole.
| | 06:09 | Now while I'm doing all this, I'm trying
to solve certain problems, like how will
| | 06:12 | this page structure work all the way
throughout the site, how can I structure
| | 06:16 | the content so that it's semantically
correct so that the code is basically
| | 06:20 | giving meaning to the content side of
it and that meaning is consistent and
| | 06:23 | correct throughout the site?
| | 06:24 | How do I deal with changes to the page
structure? Maybe there are going to be
| | 06:27 | specific pages where page structure
has to change; is it flexible enough to
| | 06:30 | that? Is it flexible enough to handle
modifications to the content at a later
| | 06:34 | date? So those are all
things that I like to think about.
| | 06:37 | Now by focusing on questions like those,
I'm able to create a coherent strategy
| | 06:40 | around structuring the content, and if
you do that, you're going to have that
| | 06:44 | well before you actually
begin to code your page.
| | 06:46 | The more you do it, the
better you're going to get at it.
| | 06:49 | Now I know you've probably heard me
say this before, but most of the time I
| | 06:52 | really do already know how the HTML and
CSS is going to be written well before I
| | 06:56 | ever open up my code editor.
| | 06:58 | So I go through this process,
determine the page structure,
| | 07:00 | I can look at the visual aspects of
it, and understand how I'm going to
| | 07:03 | style those elements.
| | 07:04 | We're going to come back to this
process in just a moment as we begin to code
| | 07:08 | the initial structure of our page,
but before we leave the mockup, I want to
| | 07:11 | discuss a few things that you'll need
to consider when planning graphics for
| | 07:14 | your layout, and we're going to go
ahead and do that in our next movie.
| | Collapse this transcript |
| Creating image assets| 00:00 | Regardless of whether you create pixel-
precise mockups or just sort of sketch
| | 00:05 | your layouts on Post-it notes, at some
point you're going to need to create the
| | 00:08 | image assets for your site.
| | 00:10 | Now because of the image requirements of
your site will change based on multiple
| | 00:14 | factors, you need to take just as much
care in planning and creating image assets
| | 00:19 | for your pages as you do with any other
part of the process. Now to illustrate
| | 00:23 | this, I'm going to return
to the desolve.org.mockup.
| | 00:26 | And remember, you can find that, if you
go in the exercise files, you can
| | 00:29 | find that directly in the Assets folder.
| | 00:31 | And I'm going to use this to give you
some examples of things that you're going
| | 00:34 | to need to consider when
creating image assets for your sites.
| | 00:37 | Now if you don't have Illustrator
installed, you can open up the PDF file of the
| | 00:42 | same file that I've included in there as well.
| | 00:44 | But you don't really have to open it up.
| | 00:45 | We're not really doing anything here.
| | 00:46 | We're not going to be
exporting out any graphics.
| | 00:48 | This is more a discussion of the
decision-making process that I use when
| | 00:52 | deciding how to deal with images
within my site, and what type of images I'm
| | 00:56 | going to be creating.
| | 00:57 | Okay, so again, I'm just going to start
at the top and talk about some of the
| | 01:00 | factors involved in
planning image assets for my site.
| | 01:03 | Now the first thing that I'm faced
with is the Desolve logo right here.
| | 01:07 | You can see it's a separate graphic, but
it has the text right next to it with a
| | 01:10 | tagline. And one of the things that I
need to start thinking of is is this
| | 01:14 | entire logo going to be an image, or
can I create this typographically in CSS.
| | 01:21 | Now a few years ago that
wouldn't have even been a question.
| | 01:23 | This is a font called Cantarell
that isn't a default system font,
| | 01:27 | so it was something that I would not
have been able to do, but with the advent
| | 01:30 | of web fonts, I'm now able to take
fonts like this and use them in my web site
| | 01:35 | and not have to rely so much on images.
| | 01:37 | So in this case I'm thinking that the
background of the header element can
| | 01:41 | certainly be handled through CSS,
just assigning a color to it, and I could
| | 01:45 | probably just export the logo out as a
transparent PNG file and then use CSS to
| | 01:50 | go ahead and style the text so that I
don't have to rely on an image there and
| | 01:55 | do any really complex CSS where I am hiding
text and showing an image, that sort of thing.
| | 01:59 | Now the next thing I have to decide are
these icons, what I'm going to do, or how
| | 02:03 | I'm going to treat these icons.
| | 02:04 | These are all little icons that I've
created in Illustrator so I've got a little
| | 02:07 | camera, some word balloons there, a bag.
And obviously I'm probably going to use
| | 02:12 | those as background images.
| | 02:14 | But do I really need to go ahead and
export out four separate icons, or is there
| | 02:18 | a way that I can sort of combine these?
| | 02:20 | One of the things that I'm always
thinking about when I create image assets is
| | 02:24 | how to create the most efficient set
of assets for my site as possible.
| | 02:27 | I want to make as few requests to the
server so that if the site is being viewed
| | 02:32 | on mobile devices, for example, that
it's a little bit more responsive and it's
| | 02:35 | a little bit snappier.
| | 02:36 | Well, one of the things that I can do
through CSS is I could combine all of
| | 02:40 | those icons into a single file, and
then as I show those icons as background
| | 02:45 | graphics, I can just sort of move to a
new location for each of those images.
| | 02:48 | That's a technique called CSS sprites
that I've talked about before in a couple
| | 02:52 | of my titles, and it works really, really well.
| | 02:54 | Now before I went into creating my CSS
sprites file for those icons, there were a
| | 02:58 | few things that I had to think of.
| | 02:59 | For example, you can see
right down here in the Galleries,
| | 03:01 | we have a larger version of that
icon, and that's actually going to be
| | 03:05 | consistent throughout the site.
| | 03:06 | You go to the Contact page, for example,
this icon is going to show up here in a
| | 03:10 | much larger fashion.
| | 03:11 | When I go to GEAR, that's going to
show up in a much larger fashion.
| | 03:14 | So do I go ahead and create sprites
that are much larger and then just scale
| | 03:17 | them down in the navigation?
| | 03:19 | That's certainly an option.
| | 03:20 | But one of the things that we
continually have to think about now as web
| | 03:24 | designers is what happens when the
site is viewed on a mobile device? And
| | 03:27 | scaling images up or down actually
impacts the performance of lot of sites on
| | 03:31 | phones and things like that.
| | 03:33 | So basically, I really just did a compromise.
| | 03:35 | I created two sets of sprites,
and I want to show those to you.
| | 03:38 | These are also in the Assets folder.
And we have the icon sprites 25, which is
| | 03:41 | a 25x25-pixel icon, and then we
have the icon sprites 50, which is a 50xS0.
| | 03:47 | So I use the 50 sprites for the larger one.
I use the 25 sprites for the smaller one.
| | 03:52 | Yes, it's one more request, but I've
eliminated scalings. So these are all
| | 03:56 | things that you have to think about, in
terms of how are my graphics going to
| | 03:59 | impact the performance of my site?
| | 04:01 | Okay, now obviously I did not
create these images here in Illustrator.
| | 04:04 | The photograph of the New York City
skyline, the Philadelphia photograph, the
| | 04:08 | Chicago photograph, those are all the
images that I imported in from Photoshop.
| | 04:13 | Now the thing that I have to think
about with those images, however, in time
| | 04:16 | I've got these photos or any
raster-based images, are they going to be
| | 04:19 | represented through the use of an
image tag, or am I going to use background
| | 04:23 | graphics to show them?
| | 04:25 | This is an extremely
personal choice the designers make.
| | 04:27 | A lot of people use image tags for everything.
| | 04:30 | Some people try to use
almost no image tags if possible.
| | 04:33 | I have a very easy litmus test for
whether this is going to be a separate image
| | 04:38 | using an image tag or whether it's
going to be a background graphic of a
| | 04:41 | structural element, and it's simply this:
| | 04:44 | Would that image need to be
described to an assistive device?
| | 04:48 | And what I mean by that is if somebody
is browsing this site on a screen reader,
| | 04:52 | with the site's content to be impacted
negatively if that image wasn't described
| | 04:57 | or if that image wasn't there?
| | 04:59 | In that case I look at an image
and I say, okay, is this image purely
| | 05:02 | decorative in nature?
Yes, this is purely decorative in nature.
| | 05:05 | And so because of that, I'm going
to use a background image for that.
| | 05:08 | Same question gets put to these guys:
Is that purely decorative in nature?
| | 05:12 | And so you go throughout the
site and you think about that.
| | 05:15 | Is this something that's going to be a
background image or is this something
| | 05:17 | that's going to be foreground image
that I'm going to use with the image tag?
| | 05:20 | And that's typically how I decide it, but
again, it is an incredibly personal choice.
| | 05:24 | Now another thing that you need to
think about when you're designing graphics
| | 05:28 | for your site is, what can I handle
through CSS, and what am I going to need an
| | 05:31 | image to represent, and that is
constantly changing, which is one of the reasons
| | 05:35 | why you want to stay up with
all the new CSS techniques.
| | 05:38 | Take, for example, this overlay over here.
| | 05:40 | Again, a few short years ago, I would
have had to create this image as a whole
| | 05:45 | with that overlay as part of it and
then just sort of position the text over
| | 05:49 | part of the overlay to sort
of fake, if you will, that box.
| | 05:52 | But now CSS can handle semi-transparency.
| | 05:55 | It has basically alpha settings that
you can put on different color values now,
| | 06:00 | and so that is actually something that
we can do through CSS now, and I don't
| | 06:03 | have to worry about generating that
image with that overlay already in place.
| | 06:06 | That actually gives me a lot of
flexibility, because now it means if I want to
| | 06:10 | create a layout where this particular
box conflicts over that image or if it's a
| | 06:14 | flexible layout where the image can get
clipped behind it, then I don't have to
| | 06:18 | worry about that box resizing and repositioning.
| | 06:21 | The same is true of certain icons. For
example, if I scroll down and I see this
| | 06:24 | inner button right here,
| | 06:25 | again couple of years ago that is
something that we would have to save out as a
| | 06:29 | separate file, or I would have to
understand that say a default button from the
| | 06:33 | browser was going represent that. But
now through the use of CSS and gradients
| | 06:37 | and things like that I can go ahead and
create that through CSS and not have to
| | 06:41 | export that out as an asset.
| | 06:43 | Now when you do decide that
something needs to be exported out,
| | 06:45 | for example, down here our
Twitter icon, that icon is going to be a
| | 06:49 | background graphic for us, but I'm
going to need to export that out as a
| | 06:52 | transparent PNG file.
| | 06:53 | Now when I do that, one of the things I'm
going to do--and I'm just going to take
| | 06:56 | you over to that icon.
| | 06:58 | I'll export this out as a separate
graphic in its own file, and when I do that, I
| | 07:02 | plan out the dimensions for
the file very, very carefully.
| | 07:05 | So this particular file is 90x90 pixels,
and understanding that and
| | 07:10 | knowing that, it's going to make it a
lot easier for me to position this and
| | 07:14 | apply the proper amount of padding to my element
so that the icon is going to show up correctly.
| | 07:19 | I'll also center the icon
vertically or horizontally where I want it.
| | 07:22 | I might add a little bit of extra space
to one side or to the top or the bottom
| | 07:26 | based on how I'm going to be positioning
that graphic with other elements on the page.
| | 07:30 | So when you start creating these sort of
stand-alone images that you're going to
| | 07:33 | export out, you have to think a lot
about how it's going to interact with the
| | 07:36 | other elements on the page, and
do you need to modify it in anyway?
| | 07:39 | What's the perfect size for it?
| | 07:41 | Do you need extra space? Do you need
it to be centered in any one location?
| | 07:44 | So those are all things that
you'll need to think about.
| | 07:47 | Okay, now that is not by any means an
exhaustive list of all the things that
| | 07:51 | you're going to need to consider when
planning images and assets for your site.
| | 07:55 | I am fond of saying this
and it's absolutely true:
| | 07:57 | every single site is different, and the
needs of images from one site to the next,
| | 08:01 | they are going to change, and
sometimes very dramatically.
| | 08:04 | Now what's really important here is
that you spend as much time as you can
| | 08:07 | thinking about how images are going to
be used on your site, and what's the most
| | 08:10 | efficient way to display those images,
and then how to create those assets that
| | 08:13 | work exactly the way you need them
throughout the site and with your CSS.
| | 08:17 | Now if you're looking for more
information on the specifics of generating assets
| | 08:21 | for your site, I recommend checking
out a couple of titles in the lynda.com
| | 08:25 | Online Training Library.
| | 08:26 | Those would be the Illustrator CS5
for Web and Interactive Design, by Mordy
| | 08:30 | Golding, Fireworks CS5 Essential
Training, by Jim Babbage, and Photoshop CS5 for
| | 08:35 | the Web, by Jan Kabili.
| | 08:37 | Those are the three programs that I use
to generate most of my assets, and those
| | 08:40 | are three very, very good titles in
terms of describing that process to you.
| | 08:44 | Now keep in mind that we're adding
new titles to the library all the time,
| | 08:47 | so be sure to check out the library
for new titles on that subject, but those
| | 08:51 | titles go into a lot more detailed
information that I can in a single movie, so
| | 08:55 | be sure to check those out.
| | Collapse this transcript |
| Creating initial page structure| 00:00 | Now that we've taken a look at our
mockup and discussed the initial page
| | 00:03 | structure, it's time to go
ahead and start coding it.
| | 00:06 | Although we won't be authoring a lot
of code in this exercise, what we'll be
| | 00:11 | writing is extremely important, as
it's the foundation for our entire site.
| | 00:15 | Now as such, I'm going to have the
mockup here open as we work and discuss what
| | 00:19 | type of impact the decisions we make
will have on our eventual layout, so I'll
| | 00:23 | be switching back and forth between
those mockup and the code that we create to
| | 00:26 | kind of discuss how they are related.
| | 00:29 | So I've got the mockup_home.ai opened,
that we've been looking in the past couple
| | 00:34 | of exercises, but what I'm going to do
right now is switch back over to my code
| | 00:37 | editor, and go ahead and crate a
brand-new page for us to start working on.
| | 00:41 | So I'm just going to go up to File and
choose New, I'm just going to do a new file.
| | 00:45 | If you're not using Aptana, just
whatever code editor you're using, go ahead
| | 00:48 | and create a new file.
| | 00:49 | Now I'm going to place this file
in the Chapter 2, 02_05 folder.
| | 00:55 | So I'm just going to save it right in
there, and I'm going to name it index.htm.
| | 01:01 | Okay, so there is our new file.
| | 01:03 | Now the first thing I'm going to do is just
go ahead and code the initial page structure.
| | 01:06 | I am going to start off with a doctype
declaration, and I'm just going to do doctype html.
| | 01:11 | You know, doctype are not case
sensitive, so if you want to use a lower
| | 01:15 | case here, that's fine.
| | 01:16 | It doesn't really matter, just the
exclamation point, DOCTYPE, and then html.
| | 01:21 | Now you may be used to seeing a much
longer doctype for older versions of HTML
| | 01:25 | or even XHTML, but with new HTML5
doctype, we basically have the doctype there
| | 01:30 | to trigger standards mode and just
identify this as an HTML document.
| | 01:34 | It really doesn't need to
do anything besides that.
| | 01:36 | Now on the line below that I'm going to
go ahead and create an HTML tag, and I'm
| | 01:40 | going to give myself a little bit spacing there.
| | 01:43 | Inside the HTML tag the first thing
I'm going to do is create a <head>, and
| | 01:46 | inside the head, I'm going to go ahead
and create a metatag with a character set
| | 01:50 | attribute, so charset, and I'm going
to make that value equal to "UTF-8," and I'll close that now.
| | 01:58 | I don't need to self-close
that because I'm doing HTML5.
| | 02:00 | So the syntax is a little different.
| | 02:01 | I don't need a closing tag.
| | 02:03 | All that's really doing for us is
insuring that the property character encoding
| | 02:06 | is going to happen for our page.
| | 02:08 | Okay, on the next line, I'm just going
to go ahead and do a title, and inside
| | 02:12 | the title, I'm going to type in "Welcome
to Desolve." And then after the head I'm
| | 02:17 | going to go ahead and create my body tag.
| | 02:20 | I will give myself a little
bit space between that. Awesome!
| | 02:23 | Okay, I'm going to go
ahead and save that. All right.
| | 02:24 | So that's really just getting
the base structure out of the way.
| | 02:27 | We haven't really started structuring
any of our page content yet, and we'll do
| | 02:31 | that within the body, so this
is just a very minimal HTML page
| | 02:33 | that's going to give us
our basic starting point.
| | 02:35 | All right, so as we went back through and
identified regions in our mockup earlier,
| | 02:39 | remember, the first region
is going to be our header.
| | 02:42 | So I am going to go back into my code.
| | 02:44 | We're going to start with div tags
for our structure, but later on we'll go
| | 02:47 | back and revise these with HTML5 tags,
once we start talking a little bit
| | 02:50 | more about semantics.
| | 02:52 | So inside of this div tag I'm going to
type in "Header content goes here," just
| | 02:56 | so that we know kind of what belongs in that
particular region, and I'm going to save the file.
| | 03:01 | Now as I start building this, I'm
going to start thinking a little bit about
| | 03:04 | also the CSS that's
going to be driving the layout.
| | 03:07 | And if we start looking at these
regions, we can see that the header region and
| | 03:10 | the navigation and the banner, those
all stack right one on top of another, but
| | 03:15 | then down below that we have this
article and our sidebar that sits side by
| | 03:20 | side, and then we have finally a
footer at the very bottom of the page.
| | 03:23 | So we can see the normal document
flow is going to account for most of this
| | 03:26 | layout, but when we get to this point,
we're going to need to define some type
| | 03:29 | of mechanism within our layout to move
this column to left-hand side and that
| | 03:32 | column to the right-hand side.
| | 03:34 | Okay, so I'm just going to
keep structuring my code.
| | 03:37 | The next step is going to be our nav element, and
then that's going to be followed by banner.
| | 03:41 | So in my code I'm going to come
in and create a brand-new div tag.
| | 03:45 | And this time inside the tag, I'm
going to type in "Navigation goes here."
| | 03:51 | I have another div tag below that,
and for this one I'm going to type in,
| | 03:54 | "Banner content goes here."
| | 03:58 | Now below the banner, remember, we have
our article and our sidebar. Even though
| | 04:02 | those two elements are sitting side by
side in our layout, structurally I have
| | 04:05 | to figure out which one of these I
want to come first within my content. And
| | 04:09 | this is a very important decision
because screen readers or other type of user
| | 04:13 | agents are going to experience that
content in a different way than somebody who's
| | 04:17 | just say looking at it within the browser.
| | 04:19 | So you really have to make a decision
about which content is more important or
| | 04:23 | which content should precede the other.
| | 04:25 | In this case, I really want the article
to come first and then the sidebar to
| | 04:28 | come second, because the article is a
little bit more important, and that content
| | 04:32 | needs to be accessed.
| | 04:33 | So I am going to go back into my code,
I'll create another div tag, and here I'm
| | 04:36 | just going to type in "Article content
goes here," and then below that we'll do
| | 04:43 | another div tag and
we'll say "Sidebar goes here."
| | 04:47 | Okay, now the only other element left
on our page of course is this footer, so
| | 04:51 | I'm going to go ahead and code the
footer as well, and again just another div tag,
| | 04:56 | and we're just going to say
"Footer content goes here."
| | 04:59 | Now it really wasn't that long ago,
probably only two or three years ago, that I
| | 05:04 | would begin structuring my page
exactly like this, with this many divs.
| | 05:07 | Now, with the advent of HTML5, and I
have some more structurally or semantically,
| | 05:11 | I should say, sound elements to use,
and we're going to switch over to using
| | 05:15 | some of those just a little bit.
| | 05:16 | But I really want you just to
understand how the content is being grouped, in
| | 05:19 | terms of the structure of the page,
before we talk too much about semantics.
| | 05:22 | Now there are other decisions that
you're going to make at this point. Even
| | 05:25 | though this is the basic structure, you
might say to yourself, okay, are there
| | 05:29 | other ways that we might
group and arrange this content?
| | 05:32 | Header, you know, sort of by itself,
Navigation, I can see that being by itself.
| | 05:36 | These two items, the Article and the
Sidebar, those two items definitely relate
| | 05:40 | to each other in a very significant way.
| | 05:42 | And in most pages we're not going to
have this banner content, but in the
| | 05:47 | homepage at least, I can see the
banner content also being related to those
| | 05:51 | two elements as well.
| | 05:52 | So on the secondary pages, even
though the banner isn't going to be there,
| | 05:56 | I think it's still part of this main
content on the page. And so, because
| | 06:00 | of that, what I'm going to do is
I'm going to wrap those three elements
| | 06:03 | inside another div tag.
| | 06:05 | So what I'm going to do is I'm just
going to go above that banner and create
| | 06:08 | another sort of generic div tag, and
then just above the footer, I'll close it.
| | 06:14 | So these three elements are going to be
grouped inside of another div tag. And
| | 06:19 | a lot of times when you're authoring a page,
you need to make this kind of judgments,
| | 06:22 | thinking about how that's going to
affect the entire site. Does this grouping
| | 06:25 | make sense for my secondary pages, is
this something that's going to allow me
| | 06:28 | some flexibility a little bit later on,
and how does that impact the layout? How
| | 06:31 | does grouping those elements together,
is it going to make it more difficult to
| | 06:35 | display this as a two-column layout?
| | 06:36 | So those are all things you need to think about.
| | 06:38 | Okay, so that completes the
basic structure of our page.
| | 06:41 | Now as you can tell,
it's really nondescriptive.
| | 06:43 | I mean without the text inside those div tags,
| | 06:45 | we wouldn't know what was
supposed to go inside of them.
| | 06:48 | So because of that, the page really,
at this point, isn't making any sense,
| | 06:51 | semantically, at all.
| | 06:53 | So next, we'll explore how we can add a
little bit more meaning to our content
| | 06:56 | through IDs and classes, and then
we'll continue to move on to learning more
| | 07:00 | about HTML5's semantic elements.
| | Collapse this transcript |
| Adding meaning with classes and IDs| 00:00 | Although we've created the initial
structure of our page, our content currently
| | 00:04 | has no semantic meaning at all.
| | 00:06 | In fact, without actually examining
the content itself, there's no way to
| | 00:10 | establish the role of the content
regions or how they relate to each other.
| | 00:14 | Now, actually from a layout
view, that doesn't really matter.
| | 00:17 | Layouts can be created using whatever
type of elements and whatever organization
| | 00:22 | that you want. Semantic value doesn't
really play into CSS page layout at all.
| | 00:28 | However, leaving out this information
would not be a very good practice, and
| | 00:32 | it would make it very difficult for anybody
parsing our code to figure out what's going on.
| | 00:37 | So with that in mind, we're going to
add some organization and meaning to our
| | 00:40 | page by using the class and ID attributes.
| | 00:43 | Now if you've watched any of my other
titles, you've probably heard me say
| | 00:47 | that I often see designers make the
mistake of simply using class and ID
| | 00:51 | values for styling.
| | 00:52 | Now, while they are certainly
acceptable for that--you can use them as
| | 00:56 | styling hooks if you want--
| | 00:57 | their real role is to help
organize and identify contents.
| | 01:01 | So, let's see what they can do for us
in our page and towards that end, I have
| | 01:04 | the index.htm file open from the 02_06
directory. And it really is just sort of
| | 01:10 | picking up right where we left
off in our last movie. Okay.
| | 01:14 | So, the first thing I need to do as
I'm beginning to organize this is figure
| | 01:18 | out, number one, whether I need a class
or an ID and then what I want the name
| | 01:23 | of that class or ID
attribute to be. All right!
| | 01:25 | So, the first thing we're going to do
is we're going to go ahead and add a
| | 01:28 | little bit more
information about our header content.
| | 01:30 | So, I'm going to go right inside the
opening div tag there and I'm just going to
| | 01:34 | create an ID attribute, and I'm going to
give it an ID attribute of pageHeader.
| | 01:39 | Okay, so let's talk about the
difference between IDs and classes.
| | 01:43 | Now IDs are unique, and that doesn't
mean you're only allowed one ID per page,
| | 01:48 | but I can only have, at this point, one
element on my page named pageHeader.
| | 01:52 | I cannot use that ID
attribute again on this page.
| | 01:56 | I can use it throughout my site to be
consistent and say, okay, this is the page
| | 02:00 | header on this page, and this is the
page header on the next page, but on this
| | 02:03 | particular page, I can
only have one page header.
| | 02:05 | So, when I'm trying to decide whether
something should be a class attribute,
| | 02:09 | which you can use classes over and
over and over again on the page, or whether
| | 02:13 | it should be an ID attribute, the
question that I pose is, is the only time that
| | 02:17 | I'm going to have this type of element on
the page? And I'll only have one page header.
| | 02:21 | Now, the article on the page might have
its own header, the sidebar might have
| | 02:24 | its own header, but in terms of the header
for the entire page, this is the only one.
| | 02:28 | So in that sense, it makes
sense to use an ID for that.
| | 02:32 | Using the same type of reasoning, I'll go into
the next div tag and I'm going to add another ID.
| | 02:37 | This ID is going to be mainNav.
| | 02:39 | Now, the name that you use for your
different elements in your regions is
| | 02:43 | really up to you. And if you're
working in a team environment, it's a really
| | 02:47 | good idea to come up with some naming
conventions throughout your site, so that
| | 02:50 | everybody is using the same names, or is at
least coming up with names using the same formula.
| | 02:55 | You'll notice, for example, that I'm
using what we call CamelCase syntax to
| | 02:58 | name these, which is if I add more than
one word, first word is the lowercase,
| | 03:02 | every other word after that will be upper
case, and they're all sort of jammed together.
| | 03:04 | You can certainly use
underscores, but you can't use spaces.
| | 03:07 | So whatever name you give your IDs and
your classes, they need to be a single word.
| | 03:13 | Okay. So, I'm going to keep going.
| | 03:15 | I'm going to go to the div tag that's
sort of surroundings this container div
| | 03:18 | tag that's surrounding all of my
content, and thinking of it that way gives me a
| | 03:22 | really good idea for what the ID
attribute for that's going to be.
| | 03:25 | I'm just going to type in "ID," and the ID
for this is going to be content. Perfect!
| | 03:31 | Okay, now when I go to the banner,
I'm faced with another decision:
| | 03:35 | Is it possible in this site that I
might have more than one banner on a page?
| | 03:40 | I can think of times, for example,
where I might want a banner that is more
| | 03:43 | informational, like this one is where it
just says information about the site, and
| | 03:46 | I might have another banner that is
promotional, and I might have an ad in it, or
| | 03:49 | I might have more than one banner with ads.
| | 03:51 | So in this sense, I can probably see
this site having a page that has more
| | 03:55 | than one banner on it.
| | 03:56 | So, instead of using an ID for banner,
I'm going to use a class, and my class is
| | 04:01 | going to be just that, banner. Okay, perfect!
| | 04:03 | All right! I'm going to finish this up by going
into each of the additional elements here.
| | 04:07 | The div for my article, I'm going
to go ahead and give that an ID.
| | 04:11 | The ID that I'm going to give that is home.
| | 04:12 | It's the homepage article.
| | 04:14 | So I'm just going to call it home.
| | 04:15 | On other pages I might give the
article a specific name specific to that
| | 04:19 | particular article or
the subject of the article.
| | 04:21 | In this case, it's going to be home.
| | 04:22 | For the sidebar, I'll go ahead and give it
an ID of sidebar. And then finally, footer,
| | 04:28 | you can probably imagine
what that's going to be.
| | 04:29 | I'm going to go ahead and
give that an ID of pageFooter.
| | 04:32 | So, very much like the header,
the header's page header, this is going to be page footer.
| | 04:35 | That's the other thing.
| | 04:36 | Other elements, other articles
might have their own individual footer;
| | 04:39 | this is the footer for the entire page,
| | 04:41 | so I'm going to go ahead and
give it an ID of pageFooter.
| | 04:44 | So, now, really anybody that reads
through our code, even if I deleted the
| | 04:47 | contents of the div tags themselves,
would understand almost immediately the
| | 04:51 | structure of our content and how it
all relates to each other, so what the
| | 04:55 | relationship of the content is.
| | 04:57 | Now, we've used classes and ID values
to extend the meaning of our code, and
| | 05:01 | that's going to make our pages easier to author.
| | 05:03 | It's certainly going to make them
easier to organize. And consequently, all of
| | 05:07 | that makes it easier to style our content.
| | 05:10 | So, if you have really well-structured,
well-organized pages, they're just a
| | 05:13 | lot easier to style.
| | 05:14 | Now, in our next movie we're going to
take this a little bit further by seeing
| | 05:18 | how HTML5 can help us add
even more meaning to our code.
| | Collapse this transcript |
| Structuring content with HTML5| 00:00 | In our last movie we extended the meaning of
our content through using class and id attributes.
| | 00:06 | Prior to HTML5, that was almost all we had in
the way of adding semantic value to our code.
| | 00:12 | However, HTML5 introduces a whole new
set of elements that help us write more
| | 00:16 | specific code, and we're going to check
that out by updating our homepage to be HTML5.
| | 00:21 | Now, to do that, I have the index.htm file open.
| | 00:24 | It's actually found in the 02_07, but
it's just continuing our last exercise, so
| | 00:30 | if you still have that file open, you
can just go ahead and modify that one as well.
| | 00:33 | That's not a problem.
Now, a little bit about HTML5 before we start.
| | 00:37 | I know a lot of people are
saying, okay, is HTML5 ready?
| | 00:40 | Can we go ahead and use this as of this
recording? I am recording this early in 2012.
| | 00:44 | The answer is yes, we certainly can.
| | 00:46 | We most certainly can use HTML5,
especially the semantic elements.
| | 00:50 | Maybe some of the more complicated API
stuff, like canvas and things like that,
| | 00:54 | you might want to wait until it matures
a little bit more within the browsers.
| | 00:57 | But the structural elements, absolutely,
because there's an easy way to support
| | 01:01 | the structural elements in older
browsers. And as we start working in some of
| | 01:04 | the labs, I will discuss that.
| | 01:06 | But for this movie, just focus on the
fact that the HTML5 elements that we're
| | 01:08 | going to be using help us organize
and add meaning to our code. Okay.
| | 01:13 | So the first thing I am going to do, I
am just going to go through each one of
| | 01:16 | these elements, and I am going to talk
about whether or not an HTML5 element
| | 01:19 | would be better choice for this.
| | 01:20 | And the first element, when I
look at this, it's pageHeader.
| | 01:23 | It says, "Header content goes here," and
we do have a header element in HTML5,
| | 01:28 | so I am going to change this from a div
tag to a header--and I have to remember
| | 01:31 | to do that for both the
opening and the closing tag.
| | 01:35 | Now, we also are faced with the choice
of should we remove the id and class
| | 01:39 | attribute, because this is descriptive?
| | 01:41 | It says, hey, this is header content.
| | 01:42 | And in some cases the answer to that
is going to be, yes, and in some cases
| | 01:45 | it is going to be no.
| | 01:47 | In this case, the answer is going to be
no, because elements may have headers.
| | 01:51 | So, for example, you might have an
article or a section that also has a header.
| | 01:55 | So in that sense this might not be the
only header on the page, and so because
| | 01:59 | of that, I do still want to identify
this as being the page's header, so I will
| | 02:03 | keep the id for this particular element.
| | 02:05 | I will do the same thing for nav.
| | 02:07 | We do have a navigational element,
n-a-v, so Nav. And I have to remember to
| | 02:12 | change both the opening and the closing
tag and, again, I'm going to leave the
| | 02:16 | id in there as well.
| | 02:17 | Now, the two elements that we've used
so far, header and nav, they're very
| | 02:21 | descriptive in terms of
what type of content that is.
| | 02:24 | This is the header of the
container that I am inside of.
| | 02:26 | Navigation says this is a
navigational aid, some type of menu, some type of
| | 02:30 | construct like that.
| | 02:31 | But we also have some more
general-purpose content tags that we can use.
| | 02:36 | So, for example, the content region
right here that's sort of surrounding all
| | 02:40 | three of these elements,
| | 02:42 | I am going to change that from
being a div tag to being a section.
| | 02:46 | Now, a section of content basically
says that this is grouped content, it
| | 02:51 | all belongs together, but it's not something
that I want to stand by itself, not freestanding.
| | 02:57 | Think about it this way:
Would you syndicate this entire section?
| | 03:00 | In this case, no, I would not.
| | 03:01 | Now, I'm looking at my banner and I'm
thinking, are there any of the HTML5
| | 03:05 | structural elements that can help me out here?
| | 03:07 | And the answer to that is no.
Sometimes div is exactly the right choice.
| | 03:11 | In this case, I just need a generic
grouping of content to say, hey, this is a banner.
| | 03:15 | It doesn't need to be any specific section.
| | 03:17 | It doesn't need to be an
article, that sort of thing.
| | 03:19 | But that's the other thing that I need
to point out about these HTML5 structural
| | 03:23 | elements is that if you look at the
page as a table of contents, as maybe an
| | 03:27 | outline that you could create, each
of those particular tags creates a node
| | 03:31 | within that outline, or an
item in the table of contents.
| | 03:34 | The banner, I don't really--
it's not important enough for that.
| | 03:37 | I don't want it to do that.
| | 03:38 | So in this case I'm using sort
of a generic div tag for that.
| | 03:41 | Now, for the home article, Article
content goes here, that sort of gives away
| | 03:45 | the tag I want to use for that.
| | 03:47 | I am just going to use article.
| | 03:48 | Now, the article element, what that does
is it basically surrounds a grouping of
| | 03:52 | content that can stand on its own,
that if it was read all by itself or
| | 03:56 | syndicated by itself or exported out by
itself would make sense and would just
| | 04:00 | live on its own outside of this page.
| | 04:02 | In this case, this article certainly would
do that, so I am going to choose article.
| | 04:06 | Now, I am going to make another change here now.
| | 04:09 | I am going to keep that id, but the
element below it, the sidebar, we have a
| | 04:13 | brand-new element that isn't
necessarily called sidebar;
| | 04:16 | it's called an aside. And I am going
to replace, not only the div tag itself,
| | 04:20 | but the id as well with just a
generic aside tag. All right!
| | 04:23 | So what is an aside?
| | 04:24 | Well, an aside tag is related content.
| | 04:27 | It's content that relates to
siblings within its container.
| | 04:30 | So in this case, because this article
and the aside are inside this section,
| | 04:35 | it's basically saying that this
content and the aside relates to this article
| | 04:39 | content without actually
being a part of the article.
| | 04:42 | Now, we could, if we wanted to, give it
an id. It wouldn't hurt to say sidebar or
| | 04:47 | related content or something like that,
but in this case I think the aside works
| | 04:51 | all by itself without having to
necessarily need an identifier for it. And as
| | 04:55 | you can tell, a lot of these are judgment calls.
| | 04:58 | Now, the next thing I am going to do
is I am going to go down to my very last
| | 05:00 | div tag and I am going to
replace it with a footer.
| | 05:02 | Once again, because the different
articles and sections can have footers, so
| | 05:06 | we might end up with, depending upon
how complex our page gets, we might end
| | 05:09 | up with multiple footers, so I am going to
keep that id on there as well, all right.
| | 05:12 | I am going to go ahead and save that page.
| | 05:15 | So now we have our basic page structure,
and it's a lot richer in terms of its
| | 05:19 | organization and semantic content.
| | 05:21 | Now, I know one movie really isn't enough to
really appreciate what HTML5 can do for your site,
| | 05:27 | so if you're intrigued by this, I
recommend going out and reading the HTML5
| | 05:31 | specification, which you can find on
w3.org. Or you can go to the WHATWG homepage
| | 05:37 | which is whatwg.org, WHATWG, if you
want to read through the specification. And
| | 05:43 | if you're interested in looking at a
few more titles of this in the lynda.com
| | 05:47 | Online Training Library,
| | 05:48 | I have an HTML5 First Look title and
an HTML5 Structure and Semantics course
| | 05:53 | that might be worth
checking out as well. All right!
| | 05:56 | So in our next movie, we're going to
finish up by taking a closer look at how
| | 05:59 | page structure and layout relate to
each other as we explore building the
| | 06:03 | internal structure of our page.
| | Collapse this transcript |
| Building internal structure| 00:00 | I want to finish this chapter by
taking some time to discuss many of the
| | 00:04 | decisions that you'll be faced with,
regarding page layout and page structure.
| | 00:08 | So we're still working with the
index.htm file, but this time I've opened it
| | 00:12 | from the 02_08 directory. And a quick
glance at the code shows us that we have a
| | 00:20 | lot more content here than the
last time we looked at this file.
| | 00:23 | Well, the goal of this movie isn't
simply to add all the remaining content;
| | 00:27 | rather, I want to focus on how certain
layout decisions will affect the page
| | 00:31 | structure, and how you're going to need
to have a strategy in place to help you
| | 00:35 | make those decisions
consistently across your site.
| | 00:38 | Now, to help us with this, I also have
the homepage mockup open, and I'm going to
| | 00:42 | switch over to that.
| | 00:43 | Now, this is the Illustrator file
that you'll find in the Assets directory.
| | 00:46 | It's the mockup_home.ai.
| | 00:49 | If you don't have Illustrator,
there's also a PDF file you can open up
| | 00:53 | that's the same exact file, and at the
end of the day, you don't really need to
| | 00:56 | open them up at all, because we're
not going to do anything to the mockup;
| | 00:59 | we're just using it to compare the
design to the actual structure of the page
| | 01:02 | that we're building. Okay.
| | 01:04 | The first thing I want to do is I want
to zoom up on our menu so we can talk
| | 01:08 | about the structure of our menu based on
the design that we've created here. Okay.
| | 01:12 | So each of these links has link text.
| | 01:15 | In the case of our first one here,
Galleries, it has an icon right beside it,
| | 01:19 | and then below that we have a little
tagline that is descriptive of the link. In
| | 01:23 | this case, this one says, "explore our photos."
| | 01:24 | Now, when we design something like
this, one of the first things we have to
| | 01:28 | think about in terms of creating this
page is how we're going to structure and
| | 01:31 | code these menu items.
| | 01:33 | For example, does the icon get its own element?
| | 01:37 | The tagline, "explore our photos," is
that going to need to be a separate element
| | 01:41 | in order for us to style
it the way that we want?
| | 01:43 | And this is what I was talking about
when I said you need to have a consistent
| | 01:46 | strategy in place, so that whenever you
are faced with something like this, you
| | 01:49 | kind of have an idea already of
how you're going to structure this.
| | 01:52 | And the rule of thumb that I used
for this site, and it's one that I
| | 01:55 | actually recommend that everybody
uses, which is, you write the cleanest
| | 01:59 | markup you possibly can.
| | 02:01 | You want your markup, above anything
else, to be semantic, meaning the tags
| | 02:05 | actually mean something, and you only
want to represent the content that needs
| | 02:09 | to be represented or passed
off onto any other device.
| | 02:12 | As designers, we think so much about
presentation and design that we forget the
| | 02:16 | fact that HTML is a markup language
that is designed to essentially identify
| | 02:22 | content within a document and structure that.
| | 02:24 | So in this case, I'm going to switch
back over to our code, and I'm going to
| | 02:28 | scroll down to about line 19
or so, so we can find that menu.
| | 02:32 | Now, you can see that I've used an
unordered list to structure the menu, and
| | 02:37 | that is extremely common. Most
people do that. Most menus you'll find are
| | 02:40 | structured within an unordered
list, for a couple of reasons.
| | 02:43 | It groups all of our links together and
it indicates that they're related, and
| | 02:47 | it also gives us some styling hooks.
| | 02:49 | We have the unordered list tag.
| | 02:50 | We have the list item tags.
| | 02:51 | We have the anchor or a tags, and all
three of those are styling hooks for us.
| | 02:55 | Now, it terms of those icons, a
policy that I use for images is that if the
| | 02:59 | image is purely decorative in nature,
meaning it doesn't really need to be
| | 03:03 | passed on to any other user
agent that doesn't understand styles,
| | 03:07 | if it's just for decoration, then it
shouldn't really be represented by an
| | 03:10 | element if you can avoid it.
| | 03:11 | In this case we don't have to.
| | 03:13 | We have the list item tags.
| | 03:14 | We have the a tags.
| | 03:15 | That icon could be a background
graphic for either of those, and we could
| | 03:18 | use that to style it.
| | 03:20 | Now, the taglines, on the hand,
that's a totally different story.
| | 03:23 | We have to have a
different styling hook on those;
| | 03:25 | we have to have some way of separating
them visually from the rest of our links.
| | 03:30 | So I'm going to highlight the first
tagline right here, "explore our photos," and
| | 03:34 | we're going to wrap this in a tag.
| | 03:36 | Now, what tag we're going to
wrap it in, that matters as well.
| | 03:39 | When you're faced with the decision
like this where you have content that you
| | 03:41 | need to structure in order to style it
the way that you want to style it, if
| | 03:45 | you can do that in a way that still
uses semantic markup, then really it's the
| | 03:48 | best of both worlds.
| | 03:49 | So I'm going to go ahead and wrap
that in an em tag, or an emphasis tag.
| | 03:53 | And again, that does two things for us.
| | 03:54 | It gives us a styling hook necessary to
move the tagline down and format it the
| | 03:58 | way I want to format it, but it also
emphasizes the text, and within that larger
| | 04:02 | link, it lets other user agents know
that this particular section of text stands
| | 04:06 | apart and is different than the
actual link text itself. All right!
| | 04:11 | So I'm going to save the file and I'm
going to switch back over to my mockup.
| | 04:15 | Now, next I want to focus on the area
right below the menu, and that's where we
| | 04:19 | have this headline, "WE LOVE URBAN
PHOTOGRAPHY." We have some descriptive text to
| | 04:23 | the right of that, and behind all that
we have this big skyline image, and the
| | 04:27 | text that's sitting on top of a
box is sort of semi-translucent.
| | 04:30 | So from a design perspective, it almost
looks like we have four separate elements:
| | 04:33 | we have the image; we have the headline;
we have the text; and we have the blue box.
| | 04:37 | A lot of people that are new to web
design, when they have a mockup that they
| | 04:41 | design or they grab a mockup from
somebody else, they tend to try to put every
| | 04:46 | single element within their design into
an element within code, and it doesn't
| | 04:50 | really have to work that way.
| | 04:52 | So if you look at this, it is a
distinct section--and I'm going to call this
| | 04:56 | banner, so it is a distinct banner
section--but really there's only two
| | 04:59 | elements that really need to be
represented here, and that would be the
| | 05:02 | headline and the paragraph.
| | 05:04 | We'll talk about how we're going to
deal with the image in just a moment.
| | 05:06 | I'm going to switch back over to the
code, and if I scroll down, I can see that
| | 05:11 | we have our text here, "We love urban
photography," and then the copy right below
| | 05:14 | that, but it is wrapped in a div tag.
| | 05:17 | Now, a div tag is an anonymous block of content.
| | 05:20 | So this one has a class of banner
to identify as being the banner.
| | 05:24 | We're not using a section or article tag
here because it doesn't really rise to
| | 05:27 | that level of importance.
| | 05:29 | Now, the text, "We love urban
photography," that's clearly a headline, but
| | 05:32 | regarding the use of headings and
paragraphs and things like that, you also need
| | 05:37 | to have policies in place that
determine when it's appropriate to use one
| | 05:40 | heading over another.
| | 05:41 | Now, the policy that I created for this
site basically says, if you're the first
| | 05:46 | or main headline within a distinct
section of content, you're allowed to be an
| | 05:51 | h1 tag, but it has to be an
important section of content.
| | 05:54 | In this case, remember we're using an
anonymous container here, the div tag, so
| | 05:58 | that tells us that the section, while
distinct, really isn't that important, in
| | 06:02 | terms of the actual content of the page.
| | 06:04 | So in that case I'm going to go ahead and
wrap that in an h2 tag instead of an h1.
| | 06:09 | Now, I'm sure there's some of you out
there that are like, "Oh, well, you know, I
| | 06:12 | read a thing on Google that says
you can only use one h1 per page."
| | 06:14 | That is not the way the HTML5
specification puts it, and in fact, it's not even
| | 06:19 | the way Google does their algorithm anymore,
so that is not altogether accurate. Okay.
| | 06:23 | The next thing I'm going to do is move
down to our text, "We're betting you do
| | 06:27 | to." So that is a single block of text,
and since it's not a heading, it just
| | 06:31 | make sense to go ahead and
wrap that in a paragraph tag.
| | 06:34 | Now, you may have not noticed this in the
mockup, so let me switch back real quick.
| | 06:37 | You can see the word Welcome right
there looks a little bit bolder than
| | 06:40 | the rest of the text.
| | 06:41 | So we want to emphasize that as well.
| | 06:43 | So I'm going to highlight the word Welcome
there and I'm going to wrap that in a strong tag.
| | 06:48 | Perfect! We have well-structured semantic code
that is identifying this content exactly
| | 06:53 | the way that we want it to, based on
the strategy that we have for the site.
| | 06:56 | Now, you might be saying to yourself,
"Yes, yes, yes, but what about that image,
| | 07:00 | and what about that blue box?"
| | 07:01 | Well, again, go back to the box model
properties that we've been working on.
| | 07:05 | This div tag is a wrapper that
surrounds all of that content, so it would be
| | 07:10 | very easy to place that image as a
background graphic, give it a width and
| | 07:13 | height, and then just have
the content sit on top of it.
| | 07:16 | As for the paragraph itself, it's
very easy to also give that a width and a
| | 07:20 | height, assign it a color, and make the
color semi-transparent, and then using
| | 07:24 | some techniques that we're going to
learn in upcoming chapters, move it over to
| | 07:27 | the right-hand side so that it's
sitting to the right of the image.
| | 07:30 | So we don't really need any
extraneous markup here whatsoever.
| | 07:33 | Now, that would be lovely if we could
structure the entire site the same way,
| | 07:37 | without any extraneous markup, and when
you put a strategy in place like that,
| | 07:41 | you really should try your best
to make sure that you follow it.
| | 07:45 | However, you're always going to
have to make exceptions to the rule.
| | 07:48 | I'm going to go back into the mockup
for just a moment and I'm going to scroll
| | 07:51 | down, and I want to turn your
attention to our gallery previews.
| | 07:55 | So our gallery previews, we have three of them,
| | 07:57 | Philadelphia, Chicago, and New York, and you
can see they're structured exactly the same.
| | 08:00 | We have a headline. We have the date. But what I want to
really talk about here is this image.
| | 08:05 | So we have an image here that lets
us preview what's in the gallery.
| | 08:08 | Now, I don't have it available in this
particular mockup, but let's say we're
| | 08:12 | going to have several
different versions of this page.
| | 08:15 | Eventually, later on in the title,
we'll be creating what we call responsive
| | 08:18 | designs, where we have one layout for
desktop, another layout for tablet, and
| | 08:22 | another layout for mobile devices.
| | 08:24 | This image is going to change dramatically.
| | 08:26 | In the tablet layout, for example, this
image is going to be on one side and all
| | 08:30 | the text is going to be
lined up on the other side.
| | 08:32 | So the practice that we've been
using, which is to structure images as
| | 08:36 | background images and just sort of
use the semantic elements that we have
| | 08:40 | already in place to put the
image in, really doesn't work here.
| | 08:43 | It's also decorative in nature here, so
I don't really want to use an image tag,
| | 08:47 | and there's actually several different
reasons for that, a lot of which has to
| | 08:49 | do with some responsive design stuff
that we'll cover a little bit later on.
| | 08:53 | So if I go back into our code, if I
scroll down, I'm going to show you what
| | 08:57 | we're doing in these sections.
| | 08:59 | So here, you can see we have an empty
div tag, and that div tag has a class of
| | 09:03 | preview, and inside of it
there's actually a link,
| | 09:05 | so you can click on that image
and go to that particular gallery.
| | 09:08 | Now, that's non-semantic markup.
| | 09:10 | It's extraneous markup.
| | 09:11 | If you were to write really just clean
code, that probably wouldn't be there.
| | 09:16 | So it's one thing to have your policies
in place, but every now and then you're
| | 09:20 | going to have to deviate from those
policies in order to get your layout to look
| | 09:24 | exactly the way you want it to.
| | 09:26 | You just want to make sure that
that is the exception and not the rule.
| | 09:30 | So when you have to resort to that,
that's fine, but if you find yourself doing
| | 09:33 | that over and over and over again,
perhaps your page isn't structured quite as
| | 09:37 | well as you need it to be.
| | 09:39 | Now, more than anything else, I'm hoping
that this exercise illustrates how your
| | 09:43 | page structure is actually going to be
the results of dozens of small decisions
| | 09:47 | that you're going to have to make based
on the coding standards that you've set
| | 09:51 | for your page and the layout
goals that your mockup is giving you.
| | 09:54 | There is no one-size-fits-all, and if
you gave the same exact mockup, if I
| | 09:59 | took that Illustrator file and gave
it to three different web designers, I
| | 10:03 | would bet you money that we would get
back three different page structures in
| | 10:06 | terms of the HTML code.
| | 10:08 | That is why it's so important to
learn the rules for creating standards-
| | 10:12 | compliant code and for learning as many
different layout techniques as possible.
| | 10:16 | That way you'll have the ability to
make really good decisions regarding page
| | 10:20 | structure while having several
different options available to you to achieve
| | 10:24 | the desired layout.
| | Collapse this transcript |
|
|
3. Working with FloatsFloating elements| 00:00 | Of all the different properties
involved in CSS layout, perhaps the most
| | 00:04 | important to learn and
master is the float property.
| | 00:08 | Floating allows us to alter the normal
position of an element by moving it to
| | 00:12 | the leftmost or rightmost edge of its parent.
| | 00:15 | That may not sound like such a big deal,
but floating forms the basis for the
| | 00:20 | overwhelming majority of CSS site layouts.
| | 00:23 | Of course there's a little more to it
than just moving elements from side to
| | 00:26 | side, and in this chapter we're going
to focus on the ins and outs of floating.
| | 00:31 | We're going to start by examining the
property in action. So I have the float.htm
| | 00:36 | file open from the 03_01 directory.
| | 00:40 | I'm just going to give you a brief
preview of the structure of the page.
| | 00:44 | If I scroll down into the body of it,
you'll notice that we've got a couple of
| | 00:47 | introductory paragraphs, and then we
have three empty div tags with the classes
| | 00:52 | elements 1, 2 and 3, and that
is who we're going to control.
| | 00:56 | Now if I preview this in my browser,
you can see kind of what's going on here.
| | 01:02 | We've got normal document flow happening.
| | 01:04 | We have element1, element2, and element3
just stacked right on top to each other,
| | 01:08 | so we're using CSS to apply a background
color and to give them a defined width
| | 01:12 | and height, that sort of thing, but
normal document flow is just stacking them
| | 01:16 | one on top of each other.
| | 01:16 | Now, when we use the float
property, we have four possible values.
| | 01:21 | You can see those right here.
| | 01:22 | We've left, right, inherit, and none.
| | 01:24 | Now left is going to take that object
and float it to the far leftmost edge of
| | 01:30 | its parent container.
| | 01:31 | Float right is going to do the
same thing in the opposite direction.
| | 01:34 | It is just going to float it all
the way over to the rightmost edge of
| | 01:37 | its parent container.
| | 01:39 | Inherit basically just says, hey,
whatever my parents is doing, I want to do
| | 01:42 | that as well. And none, will
basically turn a float off.
| | 01:45 | So none says, okay, no
floating is occurring on this element.
| | 01:49 | For the most part, left is kind
of what happens to objects anyway.
| | 01:53 | Now I say for the most part because
the default for an object is that it is
| | 01:57 | actually lined up with the
leftmost edge of its parent.
| | 02:00 | However, one of the things that floating
does that normal document flow does not
| | 02:05 | is it actually removes the
object from normal document flow.
| | 02:08 | Now this is can have some really
interesting side effects, which we're
| | 02:11 | going to see as we sort of
experiment with the float property.
| | 02:14 | All right, I'm going to go back into my
code and if I scroll right up into my
| | 02:18 | styles, I can see that I already have
some selectors written for element1,
| | 02:22 | element2, and element3, and that's who
we want to focus on, so I'm going to go
| | 02:26 | first up to element1 and I'll add a
new line. And I'm just going to do a float
| | 02:30 | property, so just float, and then I'm
going to give it a value of right, so we
| | 02:34 | can see it in action.
| | 02:34 | I'm going to save that, go back to my
browser, test it, and you can see what happens.
| | 02:40 | Element1 floats all the way over here to
the rightmost edge of its parent, but
| | 02:45 | notice what happened to element2 and
element3. Because element1 is removed from
| | 02:51 | normal document flow, element2 and
element3 move up to occupy the space where 1
| | 02:58 | used to be, because they don't see 1
anymore. 1's removed from normal document
| | 03:01 | flow, so they act as if 1 does not
exist; they just move straight up to occupy
| | 03:07 | that now-empty space.
| | 03:09 | Now that can have some very interesting
consequences, as we're going to see in just a moment.
| | 03:12 | All right, so I'm going to go back into
my code, and I'm going to change float:
| | 03:16 | right to float: left.
| | 03:18 | So I'm going to save that,
go back to my browser.
| | 03:22 | Now, remember, this element1, the
brown one is element2, the orange one is
| | 03:27 | element3, and if I update my
page, something very curious happens.
| | 03:31 | Now we floated element1 to the
left, so it looks like its back where
| | 03:34 | it used to be, so it's all the way up
against the left edge of its container
| | 03:37 | element, but it looks like
element2 has disappeared.
| | 03:41 | Well, in reality it hasn't disappeared.
Remember, floating removes it from
| | 03:45 | normal document flow, right, so element2
and element3 moved up to occupy that space.
| | 03:51 | It's just that element1
happens to be there as well.
| | 03:55 | So that gives us another
little piece of the puzzle here.
| | 03:57 | When we float an element and remove
it from normal document flow, it is
| | 04:00 | allowed to overlap other elements, and it's
also going to be stacked on top of them initially.
| | 04:05 | So in this case element2 is really
just sort of hiding, if you will, just
| | 04:10 | underneath element1.
| | 04:11 | Okay let's go back in our code and
let's take a look at what happens when we
| | 04:16 | float multiple elements.
| | 04:17 | I'm also going to float element2 to the
left, and I'm going to float elements3 to left.
| | 04:23 | Now what this is going to do, if I
save this and test it, you can see that it
| | 04:29 | basically stacks these
elements one on top of another.
| | 04:32 | So essentially, 1 is floating all
the way as far left as it can get.
| | 04:36 | 2 is also removed from normal document flow.
| | 04:39 | It's floated as far left as it can
go now, as far left as it can go is on
| | 04:44 | the rightmost edge of the first
element, and element3 follows suit.
| | 04:48 | A lot of people actually use this
technique to create horizontal menus or photo
| | 04:54 | galleries or things like that. As a
matter of fact, if I go back into the code
| | 04:57 | and for each one of these go ahead
and do a margin right, let's just do a
| | 05:02 | margin right of 1em, right--so I'm going
to save that and just copy it and paste
| | 05:08 | it for each one of these guy.
| | 05:09 | So, essentially what I am going to do
is I'm giving each one of these guys a
| | 05:11 | right margin, so I'm going to save this,
preview it in the browser, and you can
| | 05:16 | see, you can control the spacing
between them through the use of margins. So
| | 05:19 | essentially you can just sort of create
this nice horizontal menu or horizontal
| | 05:23 | list or photo galleries or things like that.
| | 05:26 | Now I don't know if you caught this or
not, but this white background that's
| | 05:32 | part of the body tag used to go
underneath these guys and now it does not.
| | 05:37 | So what's happening here is
something that's known as container collapse.
| | 05:41 | So the container, in this case the
body tag, that was containing these floats,
| | 05:45 | so the parent-containing element that was
containing these floats, no longer is containing them.
| | 05:50 | The reason for that is because
remember, each of these items are floated.
| | 05:54 | That means that each one of those is
removed from normal document flow, so the
| | 05:57 | parent doesn't see them. It doesn't
think that it contains anymore, so it
| | 06:01 | collapses upwards until it finds
content again, and sometimes this will result
| | 06:06 | in a parent element collapsing
entirely so you can't even see it.
| | 06:10 | So parent container collapse is
definitely something we have to deal with, and
| | 06:14 | we're going to talk about a few different
ways that we can deal with it in this chapter.
| | 06:18 | There's one more thing I want to talk
about here in regards to floated element,
| | 06:21 | before we get into the
individual specifics of them.
| | 06:24 | That's basically the rules that govern
how many of these sort of floated elements
| | 06:28 | will fit on one line.
| | 06:29 | It all has to do with the
available width of those elements.
| | 06:33 | So I'm going to go back into my code
for a second, and you can see, we have our
| | 06:37 | body element here, and our body
element has a restricted width of 600 pixels.
| | 06:43 | So if I go in and I just increase the
size of my div tag, so let's say I make
| | 06:47 | their width 200 pixels. Okay, so
obviously two times three, there are three of them,
| | 06:52 | should be 600 pixels, but remember, we
have some margins between them as well.
| | 06:56 | So if I save this and preview that in
the browser, you can see they no longer
| | 07:00 | fit on that one line.
| | 07:01 | So what happens is is once they run out
available space, the next floated element
| | 07:06 | just breaks down and
resumes floating on another line.
| | 07:10 | In terms of layouts, that's
something that can really cause problems.
| | 07:14 | We call that column collapse. Because
if each of these were a column in a three-
| | 07:18 | column layout, right now we wouldn't
have a three-column layout; we would have one
| | 07:21 | column breaking over here.
| | 07:22 | So that's another issue that we're
going to discuss how to deal with it as we
| | 07:26 | get deeper into floats as this chapter goes on.
| | 07:29 | So in terms of just you know overall
concept, floating is pretty easy to grasp;
| | 07:33 | however, there's a lot more involved in
creating float-based layouts than just
| | 07:37 | utilizing the float property.
| | 07:39 | Now for the rest of the chapter, we're
going to focus on float-related concepts
| | 07:42 | that will help take the mystery out of
controlling floated elements, and we're
| | 07:46 | going to start by introducing the
clear property in our next movie.
| | Collapse this transcript |
| Clearing floats| 00:00 | As important as the float property
is to creating layouts, it would be
| | 00:03 | practically worthless without
the use of the clear property.
| | 00:07 | The clear property allows us to turn
floats off and restore normal document flow
| | 00:11 | and together, floating and clearing
allows us to exercise precise control over
| | 00:16 | the flow of our layouts.
| | 00:18 | To demonstrate that, I have the
clearing.htm file open, and you can find that
| | 00:22 | in 03_02 directory.
| | 00:26 | Now, structurally it's very similar
to the file we were using in our last
| | 00:30 | exercise. As a matter of fact, if I
scroll down, I can see that the only big
| | 00:33 | difference is that instead of only
having three elements, we now have six.
| | 00:37 | For styling purposes, you'll notice
we've got a lot going on just in the regular
| | 00:41 | div rather than installed individually.
| | 00:44 | All of the divs are being floated to
the left, and they all have a little bit of
| | 00:47 | margin to the right to give us
a little bit of spacing. Okay.
| | 00:50 | So I'm going to save this, and I
want to preview this in my browser.
| | 00:55 | Currently, you can see all the
elements are floated to the left.
| | 00:58 | Now, they would all appear on one
line except for the fact that we have a
| | 01:02 | constraint going on right here with the page.
| | 01:04 | So if the page were a little bit wider,
they would all show up on the same line,
| | 01:07 | but because it's constrained at 600
pixels, when we run out of room, the next
| | 01:11 | floated element breaks down
to the line and floats resume.
| | 01:15 | So how does clearing work?
| | 01:16 | Well, let's say that we wanted to have
two rows of equal items, so we wanted two
| | 01:21 | rows of three, right?
| | 01:23 | We have a couple of values
available to us here when we do clearing:
| | 01:27 | we have left, right, both, inherit, and none.
| | 01:30 | Now, none is turning clearing off.
| | 01:31 | Inherit basically says whatever my
parent has, that's what I want, so it's these
| | 01:35 | three that really matter for what
we're doing in this exercise. So clear:
| | 01:39 | left, essentially it tells an element
nothing can float to my left; clear:
| | 01:44 | right says, all right, nothing is
allowed to float to my right; clear:
| | 01:47 | both says nothing is allowed
to float to my right or my left.
| | 01:50 | So if something is cleared, it
essentially breaks down to the next line and
| | 01:54 | reestablishes normal document flow.
| | 01:57 | So currently, for example, number two,
this two element right here, has one
| | 02:01 | floating to its left, three has two
floating to its left, so forth and so on.
| | 02:06 | So if I go back into my code and I go
right down here to element number four and
| | 02:12 | I just say, okay, let's go ahead
and clear that element to the left.
| | 02:17 | So if I save this, go back in my
browser and preview, that is exactly what
| | 02:21 | happens. Four breaks down on the next
line and reestablishes normal document flow.
| | 02:26 | Now, just because normal document flow
is reestablished doesn't mean that you
| | 02:29 | can't then at that very moment
go ahead and resume floating.
| | 02:32 | We're certainly doing that here.
| | 02:34 | So four is still floated to the left,
five and six are still floated to the
| | 02:37 | left, but for just that moment we're
clearing those floats and reestablishing
| | 02:42 | that normal document flow on another line.
| | 02:44 | Well, that works great.
Right works the same way.
| | 02:47 | I'm sure you can envision
and imagine how that works.
| | 02:49 | But what about both? Shouldn't we know
whether an element is going to going to
| | 02:52 | float to the right or left;
why would we need both?
| | 02:55 | To demonstrate that, I'm going to go back
into our code and just modify it slightly.
| | 03:00 | I'm going to remove the
clear that we just applied to 4.
| | 03:02 | Then I'm going to go up to my just default divs.
| | 03:05 | I'm going to remove float to the
left, so go ahead and get rid of that.
| | 03:09 | I'm going to remove the margin-right, and
then I'm going to change the width to 150 pixels.
| | 03:15 | So now all of my elements are just
stacked, normal document flow, they're 150
| | 03:20 | pixels wide, and we no longer
have any right margin on them. Okay.
| | 03:24 | Now, let me go down to the first
two elements, and we're going to modify
| | 03:27 | those slightly as well.
| | 03:28 | We're going to take element number one
and I'm going to float that to the right.
| | 03:33 | I'm also going to set its width to 50 pixels.
| | 03:37 | For element number two, I'm
going to float that to the left.
| | 03:41 | So we've got one element floated to the
right, we've got another element floated
| | 03:44 | to the left, and I'm going to give it
a width of 50 pixels as well. Okay.
| | 03:48 | Now, if I save that and go in and refresh
this, it looks weird, but bear with me here.
| | 03:53 | So element number 1 is floating all
the way over to the right-hand side.
| | 03:56 | element2 is floating over to the left-hand side.
| | 03:59 | 3, 4, 5, and 6 are in normal document flow.
| | 04:01 | Remember, when I float 1 and 2, I removed
them from normal document flow, so the
| | 04:05 | remaining elements move up to occupy that space.
| | 04:08 | So essentially, two is just sort of
overlapping three, and that's one of
| | 04:12 | the reasons why we made those other elements
wider, so we could sort of see that overlap.
| | 04:17 | So if I go back into my code--and
element3 is who we want to focus on right now.
| | 04:21 | If I tell element3 clear to
the right, and check that,
| | 04:28 | now what happens is it says, okay,
number one, you can't float to my right, so
| | 04:31 | it's going to go down onto the next line,
| | 04:33 | it's going to reestablish normal document flow,
and the page layout just sort of continues.
| | 04:38 | But what if I said
instead of clear: right, clear:
| | 04:42 | left, what would happen then?
| | 04:43 | So if I save this and
preview it, no change. Okay.
| | 04:47 | So in this case clear: right and clear:
| | 04:49 | left do exactly the same thing, because
three basically had one floating to its
| | 04:53 | right and two floating to its left, so
really they're both doing the same thing,
| | 04:56 | so why in the world would I need clear: both?
| | 04:59 | Right now we're working with a very
static layout in terms of, we know exactly
| | 05:03 | the element dimensions of both of
these, but it isn't always that simple.
| | 05:07 | Now, one thing I want to point out
here is, do you notice how we've kind of
| | 05:10 | messed with source order a little bit?
| | 05:12 | The first element that any sort of user
agent would encounter in the code would
| | 05:15 | be element number one, but visually
we're almost making two look like it comes
| | 05:20 | before one, because we
typically read from left to right.
| | 05:25 | So let me go back into the code.
| | 05:26 | Let's say we go up to element one and we
change its height to 200 pixels. So I'm
| | 05:32 | going to go ahead and save that and preview it.
| | 05:36 | And what happens is is now element one,
because it is 200 pixels tall, can float
| | 05:43 | to the right of all these elements.
| | 05:45 | These elements are simply going to move
up and underneath floated elements, but
| | 05:49 | since we have clear: left applied to three,
| | 05:52 | it's breaking down here and
reestablishing normal document flow, but we're not
| | 05:55 | preventing elements from floating to
its right, in this case, the number one.
| | 06:00 | If I went back into my code and I told
element three, no, no, no, no, clear to
| | 06:04 | the right please, and
save that and test it, okay,
| | 06:08 | now it's clearing to the right, it's
reestablishing normal document flow, and
| | 06:11 | it's not letting either of
those float left or right of it.
| | 06:15 | But again, this all has to do
about the height of the elements.
| | 06:18 | Again, if I come back into element two
and I change its height so that it's 250
| | 06:24 | pixels, save that and test it, and
you can see, we get overlap again.
| | 06:30 | So to prevent overlap, when you really
don't know, you're not really sure if
| | 06:34 | elements are going to be floated to its
left, you're not really sure if elements
| | 06:36 | are going to be floated to the right,
you're not really sure in terms of the
| | 06:39 | height of the various elements,
| | 06:41 | you can always come in and
say instead clear: both.
| | 06:46 | And now it doesn't matter who is taller.
| | 06:49 | It's simply going to clear both of them.
| | 06:51 | So right now two is taller than one,
so it's clearing that and reestablishing
| | 06:54 | normal document flow.
| | 06:55 | But if I take element two, take its
height back to, say, 100 pixels, you can see
| | 07:01 | it's still not going to go above
where one is either. That's clearing.
| | 07:06 | It gives us a precise amount of
control over which elements we allow to float
| | 07:11 | and when we want to stop floating
and resume normal document flow.
| | 07:15 | Clearing also allows us to deal with
another very tricky problem related to
| | 07:19 | floats, and that's how containing elements
will collapse when child elements are floated.
| | 07:24 | We're going to take a closer
look at that in the next movie.
| | Collapse this transcript |
| Containing floats| 00:00 | Earlier in this chapter, we saw one of the
unfortunate side effects of floating elements.
| | 00:05 | Remember, floated elements
are removed from normal flow.
| | 00:08 | That means that the height of their
parent elements then collapse as if the
| | 00:12 | floated elements inside
them simply weren't there.
| | 00:16 | This can cause a whole host of
undesirable results, such as disappearing
| | 00:20 | backgrounds and overlapping content.
| | 00:22 | Now, fortunately, we have a few
ways to prevent this from happening.
| | 00:26 | So we have the containing.htm file open,
and you can find that in the 03_03 folder.
| | 00:32 | If I scroll down just a little bit, you
can see that we have a section. Inside
| | 00:37 | that we have three divs, with
the classes One, Two, and Three.
| | 00:40 | If I were to preview just the default
styles in a browser, you can see these
| | 00:44 | elements are just stacking, normal
document flow, one on top of each other:
| | 00:47 | One, Two, and Three.
| | 00:49 | Well, currently the height of the
section is being controlled by the
| | 00:53 | elements inside of it.
| | 00:54 | That's actually quite common.
| | 00:56 | Height is generally considered
unless it's set explicitly to be auto.
| | 00:59 | That means the contents of
an element define its height.
| | 01:03 | So once we float these elements and
remove them from normal flow, then section
| | 01:07 | really doesn't have any height
and it's just going to collapse.
| | 01:09 | So I am going to go back into my code,
and what I am going to do is, each one of
| | 01:14 | these div tags, One, Two, and Three, I am just
going to go ahead and float those to the left.
| | 01:19 | So I am going to do that for each of them,
so that we can observe the parent collapsing.
| | 01:26 | So I am going to go back into the
browser, refresh the page, and you can see
| | 01:30 | that's exactly what's happening now:
| | 01:32 | One, Two, and Three are floating.
| | 01:33 | They're removed from normal document
flow. Section doesn't see it inside of it
| | 01:37 | anymore, and so it collapses.
| | 01:38 | And in fact, the only thing we're
seeing here right now, guys, is the padding
| | 01:42 | that's set inside the section.
| | 01:44 | So let's take a look at a couple of
ways that we can help contain those floated
| | 01:48 | elements inside the section. Okay.
| | 01:51 | So if I go back into my code, well,
one of the ways to do this is if you have
| | 01:55 | an element that's underneath your
floated elements and you clear that to
| | 02:00 | restore normal document flow, then
the parent container will go all the way
| | 02:03 | down to contain it as well.
| | 02:05 | So if I go down here and right
past the last div tag I add another
| | 02:09 | paragraph, and inside of that paragraph I can
just say "Clearing floats help to contain them,"
| | 02:17 | so if I save this, and I can just come
right up here and create another selector
| | 02:23 | for the paragraph and just
tell that to clear: both.
| | 02:28 | We added a new element underneath our
floated elements, and then we told that
| | 02:32 | element to clear, meaning
reestablish normal flow.
| | 02:35 | So if I go back into my browser and
refresh that, you can see what happens.
| | 02:39 | Our paragraph shows up down here.
| | 02:40 | It's cleared, meaning normal flow is
reestablished, and our section is now
| | 02:46 | extending down to contain that,
so that's one way of containing it.
| | 02:49 | Of course to do that we have to have
another element below our floated elements,
| | 02:53 | and that's not always going to
be the case with your layouts.
| | 02:56 | So there are a couple of
other methods that you can use.
| | 02:58 | Let's take a look at those.
| | 03:00 | So if I come back into my code, I am
going to get rid of that paragraph,
| | 03:04 | selector and the paragraph itself,
there we go. And what I am going to do is I
| | 03:09 | am going to go up to the section
selector, the one that's controlling its
| | 03:12 | styling, and I am going to
use the overflow property.
| | 03:15 | Now, the overflow property is a
property that basically tells the browser what
| | 03:19 | to do when the contents of a
box no longer fit inside of it.
| | 03:24 | So we have a few options
available to us. Hidden is one.
| | 03:27 | Hidden just says, hey, clip
off any content that overflows.
| | 03:31 | Auto would create scrollbars, either
horizontally or vertically, based upon the
| | 03:35 | flow of the content.
| | 03:36 | And Scroll will force scrollbars in.
| | 03:39 | Visible, by the way, just causes
that content to be visible and overlap.
| | 03:42 | Well, there is a side effect to using overflow.
| | 03:45 | So I am going to type in overflow: hidden.
| | 03:47 | Now, anything other than Visible will work
with it, so it could be Hidden, Auto, or Scroll.
| | 03:51 | Now, obviously Scroll is going to force
scrollbars to show up, and you don't want that.
| | 03:55 | Auto will work, and it will work almost
all the times with no side effects, but
| | 04:00 | occasionally you're going to have a
time when scrollbars show up for just weird
| | 04:04 | reasons, because the floated elements
inside of it perhaps are forcing a certain
| | 04:08 | amount of auto flow.
| | 04:09 | So by saying overflow:
| | 04:10 | hidden, we're essentially saying, hey,
we want to set overflow on this element,
| | 04:14 | but we don't want any scrollbars to show up.
| | 04:15 | So if I save this and test it, now
even without the extra content in the div
| | 04:21 | tag, the float is being contained and that's
the overflow property that is doing that for us.
| | 04:26 | That's going to work for you about say
90% of the time, but there are going to
| | 04:31 | be certain times when that overflow:
| | 04:33 | hidden property is going
to come back to bite you.
| | 04:35 | Let me show you what I mean.
| | 04:37 | So if I go back into my code, let's
say I take the third div tag here, and I
| | 04:40 | apply something relatively new, like box-shadow.
| | 04:43 | So if I do box-shadow--now, when you're
doing a box-shadow, that's just really,
| | 04:48 | it's sort of a drop-shadow for this div tag.
| | 04:50 | So I am going to give 10-pixel offset
to the X, 10-pixel Y offset, give it a
| | 04:56 | 10-pixel blur, 10-pixel spread, and then
the color for the shadow I will just go
| | 05:01 | ahead and make that black, so #000.
| | 05:03 | If I save this--and those are really
high offsets, but I really wanted you to
| | 05:08 | be able to see this, if I go back into
the browser and load that up, you can
| | 05:11 | see what's happening.
| | 05:13 | Our drop shadow is showing up, but
because the section has overflow set to
| | 05:17 | hidden, it's going to hide
this portion of the box shadow.
| | 05:21 | It's not going to expand to fill that.
| | 05:23 | So there are times when overflow:
| | 05:25 | hidden, even though it will contain
floats for you, is going to give you some
| | 05:28 | negative side effects.
| | 05:30 | We do have one more
technique that can work for us.
| | 05:32 | So I am going to go ahead
and get rid of the box-shadow.
| | 05:34 | I am going to go ahead and get rid of overflow:
| | 05:37 | hidden, and I want to modify
one last little thing here.
| | 05:42 | You will notice, for example, that
body has a background color of white and a
| | 05:45 | width of 600 pixels.
| | 05:47 | So I am going to take the section and I am
going to set its width to say 480 pixels.
| | 05:52 | Now, why am I doing that?
| | 05:53 | Well, if I save this, and if I preview
this in my browser, you can see now the
| | 05:57 | section is actually not as wide as body,
and you can also see that body sort of
| | 06:03 | has that white background color here.
| | 06:05 | Why am I doing that?
| | 06:06 | Well, another method that you can use to
contain floats is that if you float the
| | 06:10 | parent element, meaning the container
element, if you float that one as well,
| | 06:14 | all floats inside of
that will also be contained.
| | 06:17 | So if I take section and I apply float:
| | 06:21 | left to it as well, save that,
and preview that in the browser,
| | 06:25 | you can see what happens.
| | 06:25 | The float is now contained.
| | 06:27 | But it sort of has a chain reaction.
| | 06:30 | You'll notice, for example, that the
body tag is now collapsing as well. We no
| | 06:33 | longer see that white background
because all of the content inside of it is now
| | 06:37 | floated, and so it collapses.
| | 06:39 | So a lot of times that works, but
you end up having to go back through
| | 06:44 | your layout and clear all these other items
that you wouldn't have to clear previously.
| | 06:48 | So it's not always the right answer either.
| | 06:50 | So we've seen three ways that allow
us to prevent container collapsing.
| | 06:55 | We can clear child elements
that appear below floated elements.
| | 06:59 | We can set the overflow property of the
parent container to either Hidden, Auto,
| | 07:03 | or Scroll. Or we can set a float
value on the containing element itself.
| | 07:08 | Now, as we've seen, each one of these
methods have their pros and their cons,
| | 07:13 | and you're going to have to very
carefully consider when they're appropriate
| | 07:16 | within your own layouts.
| | 07:17 | Now, personally, I use
either one of two methods:
| | 07:20 | I will either use the overflow:
| | 07:22 | hidden method, which is going to
contain my floats, or I am going to use a
| | 07:27 | clearing method for containing all the
elements that have floated children, so
| | 07:30 | clearing an element below it.
| | 07:31 | Now, specifically, I use a method
called clearfix, because the method I showed
| | 07:36 | you in this particular example
requires there an element to be underneath it,
| | 07:41 | but the clearfix method doesn't.
| | 07:43 | Now, since the syntax of clearfix needs
a little bit of explanation, we're going
| | 07:47 | to go ahead and discuss
that in a separate movie next.
| | Collapse this transcript |
| Clearfix technique| 00:00 | By now, you might be a little tired
of hearing me talk about containing
| | 00:04 | and clearing floats.
| | 00:05 | However, because it is so important to
page layout, I want to take a closer look
| | 00:10 | at a specific clearing technique
called clearfix, and how it can help make
| | 00:14 | containing the floats in your
layouts a little bit easier.
| | 00:17 | Open up the clearfix.htm file, which
you can find in 03_04 directory. And if I
| | 00:25 | scroll down, I can see that I have a
section with a class of clearfix applied to
| | 00:31 | it, and then I have three divs:
| | 00:33 | One, Two, and Three, and all three
of those divs are currently right now
| | 00:37 | floating to the left.
| | 00:38 | So we kind of know what to expect here;
| | 00:40 | we expect the section, that
parent-containing element, to collapse.
| | 00:44 | So I am going to preview this in my
browser, and that is exactly what happens.
| | 00:48 | All three of those elements are floating
and so the containing element collapses.
| | 00:53 | So back in the day when we first started
attempting to clear the floats, one of
| | 00:57 | the things that we used to do is we
would put in our CSS these class styles and
| | 01:02 | we would just call them
like clear: left, clear: right, clear:
| | 01:06 | both, whatever we want to clear, and
we would apply that property to them.
| | 01:10 | And then whenever we would need
clearing to apply, we would apply that class.
| | 01:13 | Now, that still happens a good bit, and
I usually have some of those classes in
| | 01:18 | my CSS so that I can clear
elements on the page when they exist.
| | 01:22 | But in this instance where you've
got a situation where you've got three
| | 01:26 | elements floating inside of a container
and nothing underneath it, what a lot of
| | 01:30 | people would do is they would
come in and they would do this.
| | 01:32 | They would put in an element like this,
like a line break, and then they would
| | 01:36 | apply the class clear: left or clear: both or clear:
| | 01:40 | right, just something sort of invisible, like a
line break or a span tag or things like that.
| | 01:45 | So if I save this now and preview it, you
can see that now it's containing the floats.
| | 01:50 | The problem with that approach is
that you end up putting in a lot of extra
| | 01:54 | markup, markup that just really should
not be there and that's not required for
| | 01:58 | the page to read the way that you want it to.
| | 02:00 | So it was kind of a hack, if you will.
| | 02:03 | Over the course of working with this
type of clearing, some very bright people
| | 02:08 | came up with the clearfix method,
and we're just going to go through it
| | 02:11 | piece by piece so you can kind
of see what this does for us.
| | 02:14 | So I am going to come up here to my clear:
| | 02:16 | left style that I added and I am
going to modify this a little bit.
| | 02:19 | First off, I am going to change it to clearfix.
| | 02:23 | Now, some people use CF, some people
use clearfix, some people are using the
| | 02:27 | class called group so that it has some
semantic value to it. It's whatever you want to do.
| | 02:33 | This takes advantage of not a relatively
new CSS property but one that only over
| | 02:38 | the last couple of years has been
supported across the board by browsers.
| | 02:41 | So this technique still has problems
with older browsers, and we'll talk about
| | 02:46 | how to deal with those in just a moment.
| | 02:48 | But it uses something called generated content.
| | 02:50 | So after clearfix, I am going to type in a
colon, and then I am going to type in after.
| | 02:55 | So what this is saying is it's saying
that, hey, any element that this class is
| | 02:59 | applied to, I want you to generate
some content directly after this.
| | 03:04 | What I am going to do is inside the
selector, I am going to go ahead and
| | 03:08 | create some content.
| | 03:09 | So I am just going to use the content
property and I am going to create a blank
| | 03:13 | section of content here.
| | 03:14 | So the empty quotation marks that you're
seeing here, that's an empty literal string.
| | 03:18 | So it means create some content, but
don't create anything. Put nothing there.
| | 03:22 | So it's just going to put sort of this
empty literal string in there, if you will.
| | 03:26 | Now, in older versions of Firefox, like
versions 3.5 and below, you would need a
| | 03:31 | period there, because trying to pass
nothing in this generate content would cause
| | 03:34 | Firefox to go a little squirrely, but
since 3.5 and above, it's had no problem
| | 03:39 | with that whatsoever.
| | 03:40 | Now, the next thing I am going to do
is change the display property to block.
| | 03:44 | So this is basically saying that this
empty bit of content here, this no text,
| | 03:49 | go ahead and display that
as a block-level element.
| | 03:52 | And then finally, I am going to
come in and set clear to both.
| | 03:57 | It's generating content.
| | 03:58 | Now it's still inside the closing tag, just
so you know where generated content goes.
| | 04:02 | It's till inside the closing tag, but it's
at the very bottom, and it's the last
| | 04:06 | thing in the element now.
| | 04:07 | So we have the sort of empty piece of
white space that's displaying as block, and
| | 04:11 | it's being told to clear.
| | 04:13 | So now all I need to do is go down and
make sure the clearfix class has been
| | 04:17 | applied, and indeed it has. And if I
save this and now if I test this in my
| | 04:21 | browser, you can see, once again, our
floats are being contained, and now we're
| | 04:27 | doing it without any extraneous markup.
We've got no extra markup going on whatsoever.
| | 04:31 | We're just using the generated content.
| | 04:34 | It would be lovely if the story
would end right here, but unfortunately,
| | 04:38 | obviously this is a technique that has
evolved over the years, because certain
| | 04:42 | browsers have trouble with parts of this.
| | 04:45 | One of the things that causes
problems in Internet Explorer is the whole
| | 04:49 | concept of generated content before and after.
| | 04:51 | But essentially what happens is is you
end up with some collapsing margins on
| | 04:56 | the top of the element that you
don't have towards the bottom of it.
| | 04:59 | So we're going to modify this a little bit.
| | 05:01 | I am going to change this by
adding another group selector to this.
| | 05:06 | I am going to do
clearfix:before, clearfix:after.
| | 05:11 | So I am modifying the selector itself
so that it's generating content at the top
| | 05:15 | of the element and the
bottom of the element as well.
| | 05:18 | I am also going to change the
display from block to table.
| | 05:22 | This is a recent addition, and I am going to
show you where you can read more about that.
| | 05:25 | But what that does for you, instead
of generating block-level content, it
| | 05:29 | generates sort of empty
table cell. You won't see it.
| | 05:32 | It's not visible, and you won't have the
collapsing margin problem, which is awesome.
| | 05:36 | Now, we don't need to clear the
content at the top of the element.
| | 05:38 | If we do that, it can really
negatively impact our floating.
| | 05:42 | So I am going to cut that out of that
selector and then create a brand-new
| | 05:46 | selector down here to do my clearings.
| | 05:48 | So I will do clearfix:after, and
we're going to do clear: both.
| | 05:55 | So what this is doing is it's generating
content at the top and the bottom of your element.
| | 06:00 | It's generating an empty table cell,
which will prevent any collapse of margins
| | 06:04 | from happening, and then the one
on the bottom is being cleared.
| | 06:08 | So if I save this and preview and
test it, we don't notice any difference.
| | 06:13 | It really works the same, but now it's
much more solid, in terms of the code involved.
| | 06:17 | Now, I mentioned that this method
still does cause problems with certain
| | 06:21 | browsers, and Internet Explorer is one of those.
| | 06:24 | Now, I am going to defend Internet
Explorer here because it's not so much a bug
| | 06:28 | in Internet Explorer;
| | 06:29 | it's how Internet Explorer deals with
elements on the page that has something
| | 06:33 | that we call hasLayout.
| | 06:35 | If you're really serious about page
layout in CSS, you need to go up to
| | 06:39 | Microsoft's developer blog and read
the history of hasLayout and kind of what
| | 06:45 | hasLayout is and how
Internet Explorer deals with it.
| | 06:48 | So what we're going to do is we're
going to create another style tag.
| | 06:51 | Now, this thing may seem kind of weird,
but we're going to create one style tag
| | 06:55 | inside of another one, and inside this
one, I am going to do a little comment
| | 06:58 | here that says For IE < 8 (trigger hasLayout).
| | 07:06 | So essentially, what we're doing is for
older versions of Internet Explorer, we
| | 07:09 | need to go ahead and trigger hasLayout.
| | 07:11 | Now, this needs to be a comment, so I
really should have commented that out at
| | 07:14 | the beginning of this.
| | 07:15 | So bookend that statement with a /**/.
And below that I am going to type in
| | 07:21 | my clearfix selector, and I am going
to do a zoom of 1, which is 100% zoom,
| | 07:28 | which means don't zoom.
| | 07:29 | But just by applying zoom on the
element, you trigger, in Internet Explorer,
| | 07:33 | hasLayout, and it will go
ahead and do your clearing for you.
| | 07:36 | Now, obviously I only want
Internet Explorer to apply these styles,
| | 07:41 | so what I'm going to do now is I am
going to wrap that sort of style tag that
| | 07:45 | we've got there in a conditional comment
for us that is Internet-Explorer-specific.
| | 07:50 | So I am going to open up a tag and do
a little comment here, !--, and then in
| | 07:56 | bracket notation, I am going
to type in "if lt," less than, "IE 8."
| | 08:02 | Internet Explorer is the only one that's
going to respond to that. And then I'll
| | 08:07 | go ahead and close that, and then I am
going to go down to the very bottom of
| | 08:11 | this, and once again, the explanation point,
and in bracket notation I am going to
| | 08:15 | do endif to end that conditional
comment and that ends with -->. There we go!
| | 08:23 | You can just copy and paste that from
the finished file if you like, if you
| | 08:26 | don't want to go to the
trouble of typing a lot of stuff out.
| | 08:28 | Now typically, what I would do,
obviously most of your styles are going to be
| | 08:31 | linked to pages, and typically I will
have a link to a style sheet that is IE-
| | 08:36 | specific, and these styles will
just be sitting into that style sheet.
| | 08:39 | I won't actually go to the
trouble of doing that on every page.
| | 08:41 | That doesn't seem very efficient, does it?
| | 08:43 | So I am going to go ahead and save
my file. And I know that seems a little
| | 08:47 | complicated at first,
| | 08:48 | but the beauty of this, you just write
the code once in your styles, and you
| | 08:52 | simply apply the clearfix class to
any element that you need to contain the
| | 08:56 | floats inside of it.
| | 08:57 | It's very simple, and it may be
slightly non-semantic in terms of the classes
| | 09:02 | you are applying, but it gets the job done
without a lot of extra markup, which is even better.
| | 09:07 | If you want to learn more about
the clearfix syntax, its history and
| | 09:11 | understanding the concepts behind it,
I have a few articles that I am going
| | 09:15 | to recommend you read.
| | 09:17 | Now, I would start with--and I know I
am going to pronounce his name wrong,
| | 09:20 | so I am terribly sorry
about this--Thierry Koblentz.
| | 09:24 | I hope that's close.
| | 09:26 | But Thierry is, he wrote a series of
articles on clearfix that is just wonderful.
| | 09:31 | Now, the first one is "Everything you
Know about Clearfix is Wrong" and this does
| | 09:35 | a great job of explaining exactly how
clearfix works and how those cross-browser
| | 09:41 | issues evolved, specifically Internet Explorer.
| | 09:43 | You can find this on his blog
tjkdesign.com. Just search for everything you know
| | 09:48 | about clearfix is wrong.
| | 09:49 | He also wrote another article called
"clearfix Reloaded + overflow:hidden
| | 09:55 | Demystified," where he talks more on
those two methods and sort of refines the
| | 09:58 | syntax for clearfix, and you can find
this on Yahoo!'s User Interface Blog, the
| | 10:03 | yuiblog.com. Just search
again for clearfix-reloaded.
| | 10:07 | And then finally, I want to point out
Nicolas Gallagher's really, really cool
| | 10:11 | article, "A new micro clearfix hack."
| | 10:14 | This goes ahead and takes what Thierry
was doing and extends his work a little bit.
| | 10:18 | It reduces the amount of code and is, for the
most part, the syntax that we used in our movie.
| | 10:23 | So if you check out this syntax, it's going
to be very similar to what we used in our file.
| | 10:26 | Now, I know this syntax can be
a little bit hard to remember,
| | 10:30 | so for the techniques like clearfix, I
typically recommend saving the code as a
| | 10:34 | snippet and then just simply
reusing it for each project.
| | Collapse this transcript |
| Floating inline elements| 00:00 | So far we've focused on floating
large block-level elements, as they are the
| | 00:05 | building blocks of all of
your initial page layouts.
| | 00:08 | Now in this movie, we're going to
focus on floating inline-level elements and
| | 00:12 | how they affect the elements around them.
| | 00:14 | So I have inline.htm open from the 03_05.
| | 00:19 | Just to give you some idea as to what
we're going to be doing, I'm going to go
| | 00:21 | ahead and preview this in a browser.
| | 00:23 | So here I've opened up the page in Safari.
| | 00:26 | Now essentially, I have three
sections that we're going to work with.
| | 00:29 | First, we're going to take a look at
using floats to wrap text around an image,
| | 00:32 | so we have an image right here.
| | 00:34 | We have some text following it.
| | 00:35 | And right now, we've got a bunch of empty space.
| | 00:37 | It would look a lot better if we could just
sort of wrap the text around that image.
| | 00:41 | The next thing we're going to do is
create a drop cap here, and then finally
| | 00:44 | we're going to be styling more of a
complex region, like a product description,
| | 00:48 | and seeing how floating can
help us with that as well.
| | 00:50 | So this is more about how floating
could be used to help tweak layouts and sort
| | 00:54 | of improve them a little bit.
| | 00:55 | So we have those three sections.
| | 00:57 | So I'm going to go back into my code
and just look at the actual structure of
| | 01:00 | the first section that we're
going to work with, right here.
| | 01:03 | You can see we have a section
here with a class called textWrap.
| | 01:07 | Inside that, we have an image which is
inside our first paragraph, and then we
| | 01:11 | just follow that with some content.
| | 01:14 | So what I'm going to do is I'm going
to go up to about line 64 or 65 where I
| | 01:20 | have this little comment.
| | 01:21 | So the first thing we're going to do
is we're going to target that specific
| | 01:23 | image, and I'm going to do that by
using the textWrap class selector, and then
| | 01:28 | I'll write a descendent
selector that adds the image to that.
| | 01:30 | So it's saying, hey, find any image that
is also in an element with the class of
| | 01:34 | textWrap, so we're
targeting that one specific element.
| | 01:37 | Okay, so what I'm going to do here is I'm
going to make it look a little different.
| | 01:41 | I'm going to apply a border to it. I'm
going to put a 1-pixel solid border on it,
| | 01:45 | and we're going to make that gray, so #333.
| | 01:48 | To wrap the text around it, we're just
going to go ahead and float that to the
| | 01:52 | left, just that simple.
| | 01:53 | So I'm going to save this, go
back into my browser, and refresh,
| | 01:59 | and indeed the text does wrap around it.
| | 02:00 | There is my outline, and as you
can see, oh, that doesn't look great.
| | 02:04 | When we float text which is inside of a
paragraph or even outside of a paragraph
| | 02:08 | and it has paragraph text next to it,
the text itself is going to wrap around
| | 02:12 | the image, but it goes
right up to the edge of it.
| | 02:14 | So how can we prevent that?
| | 02:16 | Well, we can use margins to help create
sort of a gap or a gutter, if you will,
| | 02:20 | between the image and the text itself.
| | 02:22 | So if I go back into my
code, right after the float:
| | 02:26 | left, I'm going to apply a margin to this.
| | 02:28 | And the margin that I'm going to do
here is 0 for top, 1em for the right-hand
| | 02:34 | side, 1em for the bottom,
and 0 for the left-hand side.
| | 02:40 | So saving this and then previewing it
again gives me that nice little sort of
| | 02:45 | standoff if you will between
the content and the image itself.
| | 02:49 | So that's really nice.
| | 02:50 | But what happens if you don't want a
specific element to wrap around this?
| | 02:55 | So, for example, this headline.
| | 02:57 | This headline really should go down.
Maybe it's the beginning of another section
| | 03:00 | and it doesn't pertain to this image.
| | 03:03 | The same rules to clearing floats
apply to inline elements as they do to
| | 03:07 | block-level elements.
| | 03:08 | So if I go back into my code, I can
just very quickly write a selector that
| | 03:13 | says textWrap h3 to target the heading,
and then just tell it to clear both.
| | 03:22 | So if I save that, preview it, boom,
| | 03:26 | now our headline drops right back down again.
| | 03:28 | Now I want to clear up something,
because typically, there is a little bit of a
| | 03:31 | misconception with what's
actually happening here.
| | 03:33 | If you remember from our earlier demos,
when we float something to the left, the
| | 03:37 | content underneath it ignores
it and then comes up under it.
| | 03:41 | And now you might be asking yourself,
how come the text just didn't go right
| | 03:44 | up under the image?
| | 03:46 | Well, that has everything to do with
what we call a line box. What's a line box?
| | 03:50 | Well, if I highlight this
line of text, you can see it.
| | 03:53 | That is a line box.
| | 03:54 | So when line boxes encounter a floated
element, what they do is they shorten
| | 03:59 | themselves so that they can
appear beside the floated element.
| | 04:04 | The paragraph itself did
come up under the image.
| | 04:07 | That may take you a second to sort of
process that, but I can show you that
| | 04:11 | visually, and I'm just going
to do this really quick.
| | 04:12 | This is going to be a really quick
little demo of this concept that I'm
| | 04:15 | talking about here.
| | 04:16 | If I come down, I can create another
style called textWrap p, and I'm just
| | 04:22 | going to give it a background color. And I'll
just give it a background color of say c4d4cb.
| | 04:31 | Why so complicated? I don't know.
| | 04:33 | And I also want to add a little bit of
left margin to my image so that you can
| | 04:37 | really kind of see that background
color floating up behind the image.
| | 04:40 | So if I save this and again preview it,
you can see exactly what's happening here.
| | 04:45 | The paragraph itself is moving up to
occupy the space the image used to, because
| | 04:49 | it's removed from normal document flow.
| | 04:51 | So there is paragraph one.
There is paragraph two.
| | 04:53 | They're floating up underneath it.
| | 04:55 | The heading is clearing it,
so it doesn't do that.
| | 04:57 | Now the line boxes themselves, however,
instead of going up underneath it, the
| | 05:02 | line boxes shorten themselves
so they will float beside it.
| | 05:05 | So this is going to work perfectly as
long as you don't have a background color
| | 05:09 | behind your paragraph that
might shine through like this.
| | 05:12 | I'm going to get rid of that background
color and I'm going to get rid of that
| | 05:16 | 10 pixels' worth of margin. All right!
| | 05:18 | So let's go down and talk about our drop caps.
| | 05:21 | I'm going to refresh this. There we go.
| | 05:23 | So we want to create a little
drop cap here in this paragraph.
| | 05:26 | And if I go down into the actual code,
you can see that I have another section
| | 05:30 | with the class of drop cap, and I
want it to affect that first paragraph.
| | 05:34 | So I'm going to go up to my styles,
and I'm going to start doing this in
| | 05:38 | the drop cap styles.
| | 05:40 | I'm going to write a
pretty complex selector here.
| | 05:42 | If you watched my previous course, the
CSS: Core Concepts, I went into a lot of
| | 05:48 | different selector types,
| | 05:49 | so this will be sort of a
refresher for that particular course.
| | 05:52 | If you didn't take that course and
you're curious about those types of
| | 05:54 | selectors, you can go back and
watch the section on targeting content.
| | 05:58 | So I'm going to type in drop cap--
remember that's the class that's applied to the
| | 06:02 | section--space, p, so that's
targeting paragraphs inside the drop cap.
| | 06:07 | Now here's where it gets complex.
| | 06:08 | I'm going to do a colon and
I'm going to do first-of-type.
| | 06:15 | So what this is saying is it's
saying, hey, when you find the first
| | 06:18 | paragraph inside this class, go
ahead and apply it, so with the first
| | 06:21 | paragraph inside this drop cap.
| | 06:23 | Now we're not done yet
because right after first-of-type,
| | 06:25 | I'm going to type in another colon,
and I'm going to type in first-letter.
| | 06:31 | That is incredibly specific.
| | 06:33 | We're saying, hey, go find the first
paragraph inside of an element with drop
| | 06:37 | cap applied and then inside
that, find the first letter.
| | 06:41 | There are other ways to do this.
| | 06:42 | You could wrap that letter in a span tag,
for example, and target the span tag,
| | 06:46 | but this is a way of doing it without
adding any additional markup to your code.
| | 06:50 | Now inside this, let's just
go ahead and start styling it.
| | 06:53 | We're going to float the letter to the left.
| | 06:55 | That's going to wrap all the
rest of the text around it.
| | 06:58 | Then we're going to change things, like for
example, I'm going to change the font-family.
| | 07:01 | I'm going to change the font-family
to Georgia, Times, and then serif.
| | 07:07 | I'm going to set the font-size, obviously
I want drop caps to be a little bit larger.
| | 07:11 | I'm going to set font-size to 4ems.
| | 07:12 | I'm going to control its spacing, or
its placement, if you will, with margins.
| | 07:18 | So top margin I'm going to do 0.
| | 07:20 | Right margin I'm going to do 5 pixels--
| | 07:22 | that'll hold the text away from the drop cap
a little bit--and then 0 for the rest of them.
| | 07:27 | So really all I'm trying to do
there is give it a little offset.
| | 07:29 | I'm going to have to do something here
because of the way that we're doing this.
| | 07:32 | And so instead of targeting an element in a
span tag, we use this first letter selector.
| | 07:39 | And that causes a little bit of
problems with cross browsers and believe it or
| | 07:43 | not, it has nothing to
do with Internet Explorer.
| | 07:44 | It has everything to do with
WebKit-based browsers like Safari and Chrome that
| | 07:48 | we're going to be using, and Firefox.
| | 07:50 | Here's how this works.
| | 07:51 | We're going to go ahead and do line-height.
| | 07:53 | line-height is essentially the space
between lines or the height of the box that
| | 07:59 | the text is contained inside of.
| | 08:01 | And I'm going to set that to 0.7.
| | 08:04 | So here's essentially what happens.
| | 08:06 | In Firefox, you can't put
line-height on a first-letter pseudo-selector.
| | 08:12 | What happens is, anytime you use this,
the line-height is inherited from the
| | 08:16 | paragraph that it's contained
inside of, so I can't do that.
| | 08:20 | But WebKit allows me to. So Safari
and Chrome will allow me to do that.
| | 08:24 | So Safari and Chrome compute the
value on the letter itself, whereas Firefox
| | 08:30 | gives it the computed value of the parent.
| | 08:32 | So that means that in Firefox and inside
Google Chrome, their line-heights won't
| | 08:36 | match up, so they won't align to each other.
| | 08:38 | If you were to test this page without
doing that, in both of those browsers you
| | 08:41 | would see that the drop cap doesn't line up.
| | 08:44 | So essentially, you have to pass a
value for line-height in there and kind
| | 08:48 | of play around with that value so that
Chrome and Safari will match up with Firefox.
| | 08:53 | I typically start it at about 0.8 and
kind of play around with it from there.
| | 08:56 | That seems to be a good starting point.
| | 08:58 | I'm going to save this, go back into
my browser, and test it. And boom!
| | 09:03 | There's our drop cap.
| | 09:04 | So by taking that one letter and
floating to the left and wrapping the text
| | 09:08 | around it, all that's really required
is just doing some additional styling.
| | 09:12 | Do we want to change the font, do we
want to change the color, how big do we
| | 09:15 | want to make it, that sort of thing.
| | 09:17 | Okay, now the final thing we're going
to do here with floating inline elements
| | 09:20 | is create a more complex region down here.
| | 09:22 | So what if this were like a product description?
| | 09:24 | And we have a little shot here,
maybe it's a print that's for sale.
| | 09:28 | We want to float the text next to it, and
then we have this More information and $19.95.
| | 09:31 | Maybe we want those to appear sort of side
by side, but style them very differently.
| | 09:38 | Floating can really help us with that.
| | 09:40 | So I'm going to get back into our code,
just so we can see the structure of what
| | 09:44 | it is that we're going to be styling.
| | 09:45 | We have a section with a class of complex.
| | 09:47 | It has an image inside the paragraph. And
then we have a paragraph for the class of more,
| | 09:53 | that's our More information, and a
paragraph for the class of price.
| | 09:57 | So going back up to our complex styles,
you can see already we have what's
| | 10:02 | controlling the background of that and
the border around it and that sort of thing.
| | 10:06 | Well, we're going to need
to add some things here.
| | 10:09 | So after that one, I'm going to type
in .complex img, so we're targeting any
| | 10:13 | images inside the section
with the class of complex.
| | 10:18 | And for that, we're going
to float images to the left.
| | 10:20 | This will help wrap the text around it.
| | 10:22 | And then I'm going to apply a margin to
the right of 1em. And of course that's
| | 10:26 | going to help us hold the text away from it.
| | 10:28 | So if I save this and test it, it's
something we've already done, so we're kind
| | 10:31 | of expecting how that should look, and
it looks exactly the way we expect it to.
| | 10:36 | Our text is wrapping around it,
but More information and $19.95,
| | 10:39 | we're going to have to do some
additional tweaking of that to get it to look the
| | 10:43 | way that we want it to.
| | 10:45 | So I'm going to come down and create
another selector for more, so .more.
| | 10:50 | I'm going to float that text to the left.
| | 10:53 | I'm going to set its margin to 0, but
I'm going to give it a margin to the left.
| | 10:59 | So I'm basically clearing out any
existing margins that that paragraph might
| | 11:02 | have and then just coming in
and setting a margin to the left.
| | 11:05 | And I'm going to do 14ems. Now, that's a lot.
| | 11:08 | I'm going to show you why
I'm doing it in just a moment.
| | 11:11 | Now for line-height, I'm going to go
ahead and set line-height to 1.6ems.
| | 11:19 | So essentially again, that's going to
give it sort of a taller line box that
| | 11:22 | it's going to be sitting inside of.
| | 11:25 | For padding, I'm going to do 0 padding
top and bottom, 5 pixels right and left,
| | 11:29 | and then I'm going to give it a background,
| | 11:31 | so that's one of the reasons why we
needed padding because we're giving it
| | 11:33 | a background color.
| | 11:35 | And the background color is going to be
#3b2f24. And then finally, the color of
| | 11:40 | the text itself will be white.
| | 11:43 | Okay, now if I save this and I
test it, you can see More information.
| | 11:47 | It's floated to the left, but it's
got this really wide margin left
| | 11:52 | that's pushing it away from these other elements.
| | 11:54 | Now why did I do that?
| | 11:55 | Because I want price to show up on the
right-hand side of that, so we're going
| | 11:58 | to need to style price a little bit differently.
| | 12:00 | So I'm going to come in and I've got
one more selector to make, and that's going
| | 12:04 | to be the .price selector.
| | 12:07 | So for that one, I'm going
to float it to the right.
| | 12:09 | I'm going to set its margin to 0, so
stripping out any default margins that
| | 12:14 | might exist for the paragraph.
| | 12:15 | I'm going to change its font size to
1.6ems because we're really trying to
| | 12:20 | emphasize that price.
| | 12:21 | I'm going to set the font-weight to bold.
And then finally, I'm going to set the
| | 12:28 | margin-top to -.3ems.
| | 12:33 | So that's going to move it up a little bit.
| | 12:34 | So I'll save that, preview it.
| | 12:37 | It looks great. Oh, but it doesn't.
| | 12:41 | More information and $19.95 are
showing up the way I want them to, lining up
| | 12:45 | right side of each other, but there is that
pesky container collapse showing up again.
| | 12:49 | So I go back into my code, I'm going to
go back up to where our complex is, and
| | 12:54 | I'm just going to set overflow to hidden.
| | 12:58 | Now you're probably
wondering, hey, wait a minute.
| | 13:00 | You went through that whole clearfix thing
last time. Would that have worked? Sure!
| | 13:04 | I've actually got the clearfix class right here.
| | 13:08 | So I could have come down and applied
clearfix to that, and it would have worked
| | 13:12 | just fine as well, but this way I
don't have to apply another class.
| | 13:15 | And if this is static, meaning I know
exactly the content that's going to do inside of it--
| | 13:20 | I know it's not going to have any
special effects like drop shadows or things
| | 13:22 | like that that could get clipped off--
then overflow hidden works just fine.
| | 13:26 | So I'm going to save this,
preview that in my page, and then boom!
| | 13:30 | There is my completed complex region.
| | 13:32 | I want to point something out
about the price and More information.
| | 13:36 | You can see that More information
comes first, price comes second.
| | 13:40 | And I definitely wanted price over here
on the right-hand side and I wanted More
| | 13:44 | information on the left-hand side.
| | 13:45 | I could've floated both of them to the
right and then added the margin this way,
| | 13:49 | or I could have done it the way I did
it within here, which is floating More
| | 13:52 | information to the left, applying a big
margin to it to kind of move it over as
| | 13:56 | far as I want, and then
floating the price to the right.
| | 13:59 | There's always more than
one way to style a layout.
| | 14:01 | So I guess from this, you can probably
guess that the purpose of this exercise
| | 14:06 | wasn't really how to teach you how to
style drop caps or wrap text or even
| | 14:10 | create a product detail region.
| | 14:11 | That really wasn't the goal.
| | 14:13 | What I wanted to illustrate was how
flexible the float property is when styling
| | 14:17 | various elements all the way throughout
your design, and to show you how often
| | 14:21 | you have to be creative when
dealing with some of the details.
| | 14:25 | Now keep in mind how important the
use of margins are when floating inline
| | 14:28 | elements and when to utilize the
clear property to go ahead and reestablish
| | 14:32 | normal document flow.
| | Collapse this transcript |
| Two-column floated layouts| 00:00 | Now that we've had some time to
become familiar with the concepts of using
| | 00:03 | floats and how they affect surrounding
elements, I want to show you a few common
| | 00:08 | approaches for creating float-based layouts.
| | 00:10 | I'm going to start with the most common
layout, and that is a two-column layout.
| | 00:14 | Now we're going to be doing three
different versions of exactly the same layout.
| | 00:19 | So the same HTML structure, we're
just going to do it three different ways.
| | 00:24 | And that's really to show you guys that
often it's a personal choice as to how
| | 00:29 | you control the layouts.
| | 00:31 | Okay, so we have three
files that I've opened up here.
| | 00:35 | If you look in the 03_06 directory, you're
going to find 2col_v1, 2col_v2, and 2col_v3.
| | 00:42 | Just go ahead and open all three of
them up, so that you know the structure of
| | 00:46 | the page that we're going
to be working with here.
| | 00:47 | Very simple structure, just some
basic building blocks if you will.
| | 00:51 | Inside the body we have a header, which
is typical. We have a section, which is
| | 00:54 | going to be our first column.
| | 00:56 | We have an aside, which is the sidebar.
| | 00:58 | It's going to form our second column.
| | 00:59 | And then finally, at the bottom we have a footer.
| | 01:02 | So that's a pretty basic page layout:
header at the top, two columns side to
| | 01:06 | side, footer at the bottom.
| | 01:08 | If I go back up to our body tag, I can
see that the width of the page is set to
| | 01:14 | a fixed value of 960 pixels.
| | 01:18 | So what we're going to do is we're
going to have a left column that is 640
| | 01:23 | pixels wide and a right
column that is 300 pixels wide,
| | 01:27 | and that's going to leave us with 20
pixels' worth of space between the two
| | 01:30 | columns, or a 20-pixel gutter
for you designers out there.
| | 01:35 | So the first method of doing this is
what I call float one margin for the other.
| | 01:40 | And so for our first column, column1,
I'm going to come in and I'm going to go
| | 01:45 | ahead and float column1 to the left.
| | 01:49 | The next thing I'm going to do is give
it a defined width, because we want our
| | 01:52 | column to be a specific size.
| | 01:53 | I'm going to give it a width of 600 pixels.
| | 01:55 | Now I know I said, hey, the left
column is going to be 640 pixels,
| | 02:00 | so I'm also going to do some padding
and the padding is going to be 20 pixels.
| | 02:05 | So remember, 20 pixels to the left, 20
pixels to the right, of padding, adds up
| | 02:09 | to a total of 640 pixels.
| | 02:11 | Okay, if I save this and preview this in one
of my browsers, you can see what happens here.
| | 02:18 | This is where the really important stuff goes.
| | 02:21 | This is where the related content goes.
| | 02:22 | So here's my left column. Here's my sidebar.
| | 02:25 | Now the problem is the sidebar is
coming up underneath, so we're basically
| | 02:29 | seeing both that and the footer
slide up underneath the left column here.
| | 02:34 | So I'm going to go back into my code,
and I'm going to start styling my column2.
| | 02:40 | So for column2, what I'm going to do
here is I'm going to set padding to 20
| | 02:43 | pixels as well, so a consistent
padding all the way throughout.
| | 02:47 | And instead of setting a defined width
on column2, what I'm going to do is I'm
| | 02:51 | going to do a margin-left.
| | 02:54 | What margin-left is going to do for me--
think about what's happening here.
| | 02:57 | column2 is right now
sliding up underneath column1.
| | 03:00 | By applying a wide enough
margin on the left-hand side,
| | 03:03 | I'm creating enough empty room for
that left-hand column to display.
| | 03:08 | So what I'm going to do for the margin-
left is a really big value, 660 pixels.
| | 03:12 | That's 640 pixels for the width of the
column on the left-hand side and then
| | 03:17 | another 20 pixels for gutter
space right there in the middle.
| | 03:20 | Now for our footer, one of the things
we're always going to do for our footer is
| | 03:24 | we're going to go ahead and clear that.
| | 03:26 | So I'm just going to type in clear: both.
| | 03:27 | Now the reason for that is you don't
want the footer sliding up underneath the
| | 03:31 | left column as well.
| | 03:32 | So I'm going to save that, go back
into my browser, refresh, and you can see,
| | 03:37 | there's our two-column layout.
| | 03:38 | Footer at the bottom, and then we
have a ton of left margin over here for
| | 03:42 | this column, and we give it just enough to
create that extra 20 pixels' worth of space.
| | 03:47 | So that's version 1.
| | 03:48 | Now I'm going to go over to 2col_v2.htm,
and we're going to start styling that one.
| | 03:54 | Okay, now for this one, we're going to
float both columns, and we're going to
| | 03:58 | float both of them to the left.
| | 04:00 | So if I go down into my code for
column1, it's going look very similar.
| | 04:05 | I'm going to go ahead
and float that to the left.
| | 04:07 | I'm going to go ahead and give it a
width of 600 pixels and give it padding of
| | 04:15 | 20 pixels on both sides.
| | 04:17 | So that gives us a total of 640
pixels, and we're floating that to the left.
| | 04:21 | Now for column2, I'm going to come in
also and float that column to the left.
| | 04:26 | The next thing I'm going to do is I'm
going to give it a padding of 20 pixels
| | 04:30 | as well, and this time I'm going
to give it a width of 260 pixels.
| | 04:36 | Now if you think about this, 260, and
we've got 20, so it gives me 300 pixels
| | 04:40 | worth of space there.
| | 04:42 | I've got 640 pixels here.
| | 04:44 | But the one thing I don't have is the
gap, the gutter, the space between them.
| | 04:48 | And when you're dealing with two
elements floating side by side, one of the best
| | 04:51 | ways to get that is just use a margin.
| | 04:53 | So for column1, I'm going to come up
and apply a margin-right of exactly the
| | 04:59 | value we need, which is 20
pixels, so there's our gutter.
| | 05:02 | So if I save this and preview this in
our browser as well, you can see it's
| | 05:08 | working perfectly, except for the
footer, which is now stretching all the way
| | 05:11 | up underneath that.
| | 05:12 | So remember, we always have to
go down to that footer and clear it.
| | 05:16 | And so I'm going to ahead and Clear Both.
| | 05:18 | So if I save that and preview it again,
| | 05:22 | now the footer is in its right
place, and I've got my columns.
| | 05:25 | Now the thing about using this approach
where you're floating one to the left
| | 05:28 | and then you float another one to the
left, it works just fine, but the big
| | 05:32 | problem here is going to be column drop.
| | 05:34 | Column drop happens when the
content no longer fits within that space.
| | 05:38 | So that could be content overflowing out
of one of the columns. It could be that
| | 05:42 | we just got the math wrong.
| | 05:43 | So if I go back into this, if I just
tweaked it a little bit, for example, if I
| | 05:47 | come into the column2 and I
change the width to 270 pixels
| | 05:51 | that's just 10 pixels' worth of
difference here, and I preview that,
| | 05:55 | you can see the second column drops because
now there's no longer any space for it over here.
| | 06:00 | So using this type of a layout, you
need to be very, very precise with your
| | 06:03 | measurements and make sure that your
content inside of this is going to adhere
| | 06:07 | to those boundaries as well.
| | 06:09 | So let's do our last version, 2col_v3, and
this happens to be my personal favorite.
| | 06:14 | We're still going to float both of the
columns, but we're going to float one to
| | 06:17 | the left and we're going to
float the other one to the right.
| | 06:20 | So I'm going to scroll down and find column1.
| | 06:25 | And for that, we're going to float
that to the left, we're going to give it a
| | 06:28 | defined width of 600 pixels, and we're
going to give it a padding of 20 pixels.
| | 06:36 | Now the thing I like about this is
we're going to let the defined widths of the
| | 06:40 | two columns determine how wide the gutter is.
| | 06:42 | We don't need to worry about margins.
| | 06:44 | We don't need to worry about it because
we're going to take column 2 and instead
| | 06:47 | of floating it to the left, we're
going to float that to the right.
| | 06:51 | Next thing, we're going to do is
we're just going to go ahead and give it
| | 06:54 | 20 pixels' worth of padding, just as we did
before, and we'll set the width to 260 pixels.
| | 06:59 | But notice this time I'm not having to set any
margin on it to sort of push it over in place.
| | 07:04 | By floating it to the right, it's
automatically going to snap to the right-hand side.
| | 07:08 | And that of course means that if the
body increases in size, the only thing
| | 07:11 | that's really going to happen
negatively is that my gutter is going to get
| | 07:14 | a little bit wider. All right!
| | 07:15 | The next thing I need to do is come down
to my footer, just clear both, save that.
| | 07:21 | And if I preview this in my browser as well,
you can see there is my two-column layout.
| | 07:28 | Here's the method we just tried,
there's the method of floating both of them to
| | 07:32 | the left, and there's the method of
floating one to the left and using margins.
| | 07:36 | Now visually, if I tab through these, can
you tell the difference? No, of course not.
| | 07:41 | They look exactly the same, but
they're using three very different methods to
| | 07:44 | achieve the same layout.
| | 07:46 | As I mentioned, I really do prefer
that last method, but really this lesson
| | 07:50 | isn't about what my preferences are;
| | 07:52 | it was about showing you
multiple techniques that you can use.
| | 07:55 | Now in many cases, the source order of
your content, in terms of the order that
| | 07:59 | it's encountered or the complexity of
your page, might drive you to use one of
| | 08:03 | these methods over another.
| | 08:05 | Now most of the time, it's just
personal preference, but by understanding
| | 08:08 | exactly how these techniques work,
you're going to be better prepared to react
| | 08:12 | to circumstances where you have to be
a little creative in order to achieve
| | 08:16 | the correct results.
| | Collapse this transcript |
| Three-column floated layouts| 00:00 | Let's take the techniques that we
used in our last movie a little bit further
| | 00:04 | by creating three-column layouts.
| | 00:06 | Now, although the source order doesn't
matter that much when creating two-column
| | 00:10 | layouts, it does come into play a
little bit when considering different
| | 00:13 | techniques when building three-column layouts.
| | 00:16 | So as with our two-column layouts, we're
going to take a look at three different
| | 00:19 | ways to create roughly the same layout.
| | 00:22 | So I have three files open here,
| | 00:23 | the 3col_v1.htm, 3col_v2.htm, and
3col_v3.htm, and you can find those in
| | 00:29 | the 03_07 directory.
| | 00:32 | Now, we're going to start
with our version one first.
| | 00:34 | Now, I just want to go down and show you
the page structure really quickly here.
| | 00:38 | So we have a header, just like we did
last time, and then we have three sections.
| | 00:42 | Notice that one just follows the other
one, column1, column2, and column3, and
| | 00:45 | then we have our footer
where our copyright stuff goes.
| | 00:48 | So just to show you what that looks
like in normal document flow, we just have
| | 00:53 | these three sections
following one right after the other.
| | 00:57 | So I'm going to go back up into my
code, and the first thing I want to is just
| | 01:02 | sort of explain the math
that we're faced with here.
| | 01:05 | The overall width of our page is 960,
and what I want to have is a gap of 20
| | 01:10 | pixels' worth of space between my columns.
| | 01:13 | That leaves us with 940 pixels' worth
of space for the columns themselves.
| | 01:17 | If I divide that by 3, I get
306.6666666, and it just keeps going.
| | 01:24 | Now, since we're using 20 pixels' worth
of padding on both the left and right of
| | 01:28 | each column to hold off the interior
contents, that actually leaves us with
| | 01:33 | 266.6666666 for each column.
| | 01:37 | Let's go to our column1 selector.
| | 01:41 | What I'm going to do here is I'm
just going to float column1 to the left.
| | 01:44 | I'm going to give it that padding that
we just talked about, 20 pixels' worth of
| | 01:48 | padding, and then for width, we're
going to go ahead and do 266.6 pixels.
| | 01:54 | Now, browsers can handle a lot
more decimals than that, so if you do
| | 01:58 | complicated math and you get it out
to, say, five or six digits out, your
| | 02:03 | browsers can handle that.
| | 02:04 | So the only reason I'm doing it right
here is just for brevity's sake, if you will.
| | 02:08 | And then finally, I'm going to do
a margin-right here of 20 pixels.
| | 02:15 | So that's the first one.
| | 02:17 | Now, I'm just going to go ahead and
copy these properties, the ones that I just
| | 02:21 | entered in, because I'm going to do
the exact same properties for column2 and
| | 02:26 | the exact same properties for column3,
except column3 doesn't need the margin to
| | 02:31 | the right. Now the margin to the right
really is only giving us spacing here on
| | 02:36 | the first two columns.
| | 02:37 | So if I save this, go back into my
browser, and refresh my page, you can see,
| | 02:43 | there is our three-column layout.
| | 02:44 | Now, take a look. We have a
little bit of a gap right there.
| | 02:49 | The reason for that gap: all of our values
are actually working out to 959.8 pixels.
| | 02:57 | And this is one of the things
that happens when you do float:
| | 03:00 | left for all three columns, even if
you're doing like a photo gallery and you
| | 03:04 | float all your images to the left, a
lot of times you're going to see just
| | 03:07 | really weird little spacing issues like that.
| | 03:10 | So let me show you a quick
and easy way to fix this.
| | 03:12 | I'm going to go to my column3 and I'm
going to change it from float: left to float:
| | 03:17 | right. And then what I'm going to do is I'm
going to go up to column2 and I'm going to
| | 03:21 | remove that margin-right for spacing.
| | 03:23 | I don't need that anymore, because the
widths of the two columns are going to
| | 03:27 | give me the space, and remember, one is
floating to the right and the other one
| | 03:29 | is floating to the left.
| | 03:31 | And by the way, notice
that the footer has clearing:
| | 03:34 | both already applied to it, so
I saved us a little time there.
| | 03:37 | So if I save this and preview that,
now that snugs right up against that. And
| | 03:42 | this gap happens to be 0.2 pixels off
from this gap, but I don't think most
| | 03:46 | people are going to notice that. So that works.
| | 03:49 | Here we have a three-column layout.
| | 03:51 | We're floating the first
two columns to the left.
| | 03:53 | We're floating the third column to
the right, controlling the gap between
| | 03:56 | the first two through a margin,
controlling the gap between the second two
| | 03:59 | there through just the available space
leftover after the column widths have been calculated.
| | 04:04 | Let's go in and do our second version
now. Source order does come into
| | 04:09 | play in this one, and I'm going to
scroll down and show you the source order
| | 04:12 | and how it differs.
| | 04:14 | Our first column says, "This is where
the really important stuff goes." Notice
| | 04:17 | this time the second column says,
"I have to be the far right column."
| | 04:21 | So in terms of the way that we're doing
this particular layout, this one has to
| | 04:24 | be the far-right column.
| | 04:25 | And then we have our third column
which says, "I have to be the middle column."
| | 04:30 | And all that has to do with the fact
that I'm going to be floating column1 to
| | 04:33 | the left, column2 to the right,
allowing column3 to come up underneath them, and
| | 04:38 | then control the width of
column3 through the use of margins.
| | 04:41 | So it's kind of a take on the very
first two-column layout we did, but this
| | 04:45 | time instead of having a column on just one
side, we're going to have columns on both sides.
| | 04:49 | It will probably get a little clearer as we do it.
| | 04:52 | So I'm going to go up to column number 1,
and what we're going to do for that is
| | 04:56 | we're going to float this to the left,
| | 04:59 | we're going to give it a padding of
20 pixels, and we're going to give it a
| | 05:04 | width of 266 pixels.
| | 05:07 | I'm sorry, I'm tired of
dealing with all those decimals.
| | 05:10 | For the second column, column2 here,
we're going to float this one to the right,
| | 05:15 | we're going to give it padding of 20
pixels as well, and again, we're going to
| | 05:21 | give it a width of 266 pixels too.
| | 05:24 | Now, if I save this and if I just
preview this in the browser right now, you can
| | 05:28 | see what's happening here: the first
column is floating to the left; the second
| | 05:32 | column is floating to the right;
and then the third column is coming up
| | 05:35 | underneath both of them.
| | 05:36 | You can even see right here the height
doesn't match anymore because it's just
| | 05:39 | coming up between them.
| | 05:41 | Now, our footer is clearing, so we
don't need to really worry about that.
| | 05:44 | So what we're going to do with this
middle column is we're going to set its
| | 05:46 | height equal to the other two, and
we're going to control the width of it
| | 05:50 | through margins, so we're going to do
an equal amount margins on both sides.
| | 05:53 | So I'm going to come into column3, and
in column3 I'm going to go ahead and do a
| | 05:58 | padding of 20 pixels, same as the other two;
| | 06:00 | I'm going to go ahead and define its
width same as the other two, 266 pixels;
| | 06:05 | but for margin, here I'm going to do a
technique that we learned a little bit earlier.
| | 06:08 | I'm going to do a margin of 0
and then auto for left and right.
| | 06:11 | If you remember what that does is it
basically says, okay, how much space is
| | 06:14 | left to my right, how much space is
left to my left? Go ahead and even those
| | 06:18 | values out, which really centers the content.
| | 06:20 | So this is going to center this 266-pixel
column in the middle of the two other 266 columns.
| | 06:27 | So if I save this and
preview it, there's our spacing.
| | 06:31 | The margins on both sides are
centering this column in the page.
| | 06:34 | It's coming up and floating up
underneath these two floated elements, and then
| | 06:39 | our footer is clearing.
| | 06:40 | So there's another three-column layout.
| | 06:42 | It looks very similar to our first one,
except for the fact that the source order
| | 06:46 | is different, and in the second
layout the source order matters. Okay.
| | 06:50 | Let's do our final version,
so I'm going to go to 3col_v3.
| | 06:55 | We're going to take a look at creating
a three-column layout when the structure
| | 06:58 | of the page is may be a little bit more complex.
| | 07:00 | Now, oftentimes when you have multiple
columns, certain columns relate to each
| | 07:04 | other while other columns don't.
| | 07:06 | So in this case, if I scroll down and
look at the code, I can see that the first
| | 07:11 | two columns are actually
contained with an article.
| | 07:13 | Now, this is very, very common.
| | 07:15 | You might have a main content section
where you have two columns that sort of
| | 07:19 | relate to each other and then you
might have a sidebar that you still want to
| | 07:23 | form a three-column layout, but
these guys sort of belong together.
| | 07:27 | In order to do this, we're actually
going to create a two-column layout for the
| | 07:32 | article in the aside and then add in
two additional columns inside the article.
| | 07:36 | So you can sort of nest these
layouts one inside of each other to create
| | 07:40 | more complex pages.
| | 07:41 | We're going to scroll up, and we're going
to need to add a couple of selectors here.
| | 07:45 | So after heading1, I'm going
to come in and do my article.
| | 07:48 | So basically right now I'm just
kind of doing the two-column layout.
| | 07:52 | For article, I'm going to float that to
the left, I'm going to give it a width
| | 07:57 | of 634 pixels, and then I'm
going to follow that with the aside.
| | 08:03 | And with the aside, I'm going to float
that to the right, give it a width of 266
| | 08:09 | pixels, give it a height of 500 pixels.
| | 08:13 | Now, normally, you want the content to
form the height, but in this case we're
| | 08:16 | just putting a fake height in there so
we can really kind of see the layout.
| | 08:19 | And then finally, padding of 20 pixels and
a background of rgb(173, 169, 130).
| | 08:32 | Okay. If I save this, and I test that
in my browser, here is my article--
| | 08:37 | it's over here in the left-hand
side--and here's my aside sidebar.
| | 08:42 | Now I need to form the two
columns inside that article.
| | 08:46 | And really, we already know how to do
that, because we've done it several times.
| | 08:49 | So underneath the aside, I'm
going to create a .col1 selector.
| | 08:53 | And inside that, I'm going to go
ahead and assign it a background color.
| | 08:57 | So that's going to be rgb(237, 228, 214).
| | 09:06 | Underneath that, we're going to go ahead and
give it the same fake height of 500 pixels.
| | 09:10 | We're going to float this to the left.
| | 09:13 | Now, remember, it's
floating inside of our article.
| | 09:15 | We're going to go ahead and give it a
padding of 20 pixels, and we're going to
| | 09:20 | give it a width of 266 pixels. Really
the same measurements we've been using for
| | 09:25 | all of our columns so far.
| | 09:26 | col2 is going to be done
in a very similar fashion.
| | 09:30 | In this case, I'm going to go ahead and
give this a background of rgb(219, 126, 64).
| | 09:41 | I'm going to give it a height of 500
pixels, just the same as the other ones.
| | 09:45 | And for this one, I'm
going to float it to the right.
| | 09:47 | Now, remember, its rightmost edge is
going to go up against the rightmost edge
| | 09:50 | of the article, which we've already
given that a defined width, so this is going
| | 09:53 | to not butt it up against the
other column on the right-hand side,
| | 09:56 | It's going to give us the space between that.
| | 09:59 | and then I'm going to go ahead and give
it a padding of 20 pixels, and a width,
| | 10:04 | just like the other ones, 266 pixels.
| | 10:07 | So if I save that and preview it,
what do you know? There we go.
| | 10:11 | So now we have a three-column
layout, three versions of them.
| | 10:15 | These two look almost exactly the same.
| | 10:18 | These two look a little different,
simply because the source order changes.
| | 10:22 | So when you get to doing a three-column
layout, they're a little bit more complex.
| | 10:26 | Typically, source order does matter
and you're going to have certain things
| | 10:30 | grouped together, but you still have
identical three-column layouts using three
| | 10:34 | different techniques.
| | 10:35 | These two columns are grouped within an
article which is floated to the left.
| | 10:38 | We have an aside that's floated to the right.
| | 10:40 | In this one, we float one column to the
right, another column to the left, and
| | 10:43 | allow the middle column to have some
margins which define it, and it gets to just
| | 10:47 | float up in the middle of the two.
| | 10:49 | And then finally, our initial layout,
if you remember this one, we have one
| | 10:52 | floating to the left, another one
floating to the left, and we could have this
| | 10:55 | one floating to the left, but in order
to make it a little bit easier to get it
| | 10:58 | snug up against the edge of this,
| | 10:59 | we're floating this one to the right.
| | 11:02 | I'm trying to stress the fact that if
you just master floating and clearing, you
| | 11:06 | can pretty much create the basic
structure of any layout that you can dream up.
| | 11:10 | Now, over time you're going to find
that you begin to develop strategies around
| | 11:14 | page structure and layout
techniques that work with your projects.
| | 11:17 | Just make sure, as you begin to
create your own layouts and your own
| | 11:20 | techniques, that you're focusing on
writing the most efficient code possible
| | 11:24 | and creating layouts that give you
the most flexibility in presenting your
| | 11:28 | content the way you want.
| | Collapse this transcript |
| Column height considerations| 00:00 | In the previous layout examples we've
been forcing our columns to be fixed height
| | 00:04 | so that we can visualize our
sample layouts a little bit better.
| | 00:08 | Now, in practice, the height of
columns is typically determined by the
| | 00:11 | content inside of them.
| | 00:12 | Now, most of the time designer simply
factor this into their design and build
| | 00:16 | layouts that work with a
natural height of columns.
| | 00:19 | But what happens if you need a column
to stretch to match the height of another
| | 00:23 | column, or if you want it to take
up all the vertical space available?
| | 00:27 | Well, in those cases you're going to
have to carefully plan your layouts around
| | 00:30 | those requirements, and you'll need to
understand exactly how browsers calculate
| | 00:34 | the height of elements.
| | 00:35 | So before we can get into specific
layout techniques around controlling element
| | 00:39 | height, I want to take a closer look
at how browsers calculate height itself.
| | 00:44 | If I scroll down, I can see
it's a very simple structure.
| | 00:48 | So inside the body tag we have a
section here, and we just have a
| | 00:52 | paragraph inside of that.
| | 00:53 | If I preview that in my browser, you
can see that right now the body's width is
| | 00:58 | set to 960 pixels and the
section's width is set to 50%.
| | 01:02 | Now, the reason for that is, once we
start stretching these columns, I want you
| | 01:06 | to be able to tell what's the
body and what's the section.
| | 01:09 | Now, most people's misunderstanding of
height comes from them understanding what
| | 01:14 | happens with width, and let me
show you that really quickly here.
| | 01:17 | So I go into the file and I remove
the width of the body and I remove the
| | 01:22 | width of section and
preview that in a browser,
| | 01:27 | what happens is both the body
stretches to 100% and any block-level content
| | 01:32 | inside of it, in this case the
section, stretches to 100% as well.
| | 01:35 | So the default for block-level
elements inside the browsers if no width is
| | 01:39 | defined, they're just going to stretch
out to be 100% the width of their parent
| | 01:43 | element, in this case the entire viewport.
| | 01:45 | So a lot of times designers, when they
set height to 100%, they're expecting the
| | 01:49 | same behavior, that the column will
just go ahead and stretch to the height of
| | 01:53 | the window, and when that doesn't
happen, it kind of confuses them,
| | 01:56 | so let's go and take a look at that.
| | 01:57 | So I am going to go back into my code here,
and I am just going to undo those widths.
| | 02:02 | I sort of need those so that
we can see what's going on.
| | 02:05 | I'm going to come down here to
section and I am just going to set
| | 02:07 | section's height to 100%.
| | 02:11 | So I am going to save that, preview
that in my browser, and bam, nothing.
| | 02:16 | Well, that's not absolutely true.
| | 02:19 | So what's happening here is that the
height of an element is set to auto by default.
| | 02:24 | What that means is is the contents
of the element defines its height.
| | 02:29 | So in this case, body's height is being
defined by the content inside the section.
| | 02:36 | So when I tell the section to be 100%,
it's saying be just as tall as the body.
| | 02:41 | The body is getting the height from the section,
| | 02:43 | so in essence, we're saying be 100% of yourself.
| | 02:49 | It might be fulfilling, but it
doesn't work the way we anticipate it.
| | 02:53 | So what we have to do is we have to go
in and set explicit heights on every single
| | 02:58 | parent element above the
one that we are targeting.
| | 03:00 | So if I come in for body and I say height 100%,
| | 03:08 | unfortunately, that doesn't work either,
because there is another tag above body
| | 03:13 | and, yes, that's the HTML tag.
| | 03:14 | So if I come here and say, okay, height
100% on the HTML tag as well, now if I
| | 03:21 | save this and test it, yay, everything
is stretching, including the body and
| | 03:27 | including our section.
| | 03:29 | Now, all seems well, but
it just sort of seems well.
| | 03:32 | Remember, it's stretching to the height of
the viewport, which means the height of
| | 03:34 | the available space, so what happens
if the content is longer than that?
| | 03:40 | So if I come down, for example, here to my
section and I grab this paragraph and copy it.
| | 03:46 | Let's say I am going to paste it a few times.
| | 03:48 | One, two, three, four, five,
six, seven should be enough.
| | 03:54 | So if I save this and go back into my
browser and test it, you can see it's
| | 03:59 | still stretching to 100% of the height.
| | 04:00 | But when happens when I scroll? Oh, hmm.
| | 04:04 | So the initial column height and the
initial body height is the height of the viewport.
| | 04:10 | So when I begin to scroll, that
height that was fixed at that size no
| | 04:14 | longer stretches to fit the viewport, so now
my column is just sort of overflowing here.
| | 04:20 | So that is really not what I'm wanting.
| | 04:24 | So if I go back into my section,
however, and instead of section I say height
| | 04:28 | 100%, what if I said minimum height,
| | 04:31 | meaning, is the shortest it can be as 100%.
| | 04:34 | So if I save this, and go back in
and test it, aha, now it stretches, but
| | 04:39 | unfortunately, the body doesn't.
| | 04:41 | If I go back into the body and tell
its minimal height to be 100% as well,
| | 04:45 | trying this method, you're almost
always sort of chasing your own tail.
| | 04:49 | Now, the other reason this works--and
I am just going to scroll back up at
| | 04:52 | the top and do that again--is
because we don't really have any padding or
| | 04:55 | anything like that.
| | 04:56 | If I go back in and reduce this content--
and I am not going to get rid of all of it.
| | 05:02 | I just want to get rid of about half
of it. And if I go back up to my section
| | 05:06 | here, and I add say some padding.
| | 05:10 | So if come in and add padding of 10 pixels.
| | 05:13 | Now, here's the thing about using
percentages for both height and width.
| | 05:17 | When you do a padding of 10
pixels, height is added to that.
| | 05:20 | Those effects are cumulative.
| | 05:22 | So the 10 pixels' worth of padding top
and 10 pixels' worth of padding on the
| | 05:26 | bottom are added to that 100% height;
they're not factored into it. So if I save this,
| | 05:31 | again, test it in my browser, what
happens is is even though the content
| | 05:35 | doesn't stretch all the way down, you
see we've got a page that can scroll and
| | 05:38 | this is still overlapping, and that's
that extra spacing that we are getting
| | 05:42 | through our padding.
| | 05:44 | So it's really frustrating.
| | 05:46 | Now, we have a really simple layout here.
| | 05:48 | As our layouts get more and more complex,
these issues that we are taking a look
| | 05:53 | at right now, they magnify, because
you're going to have to start dealing with
| | 05:55 | the height of several elements above this one.
| | 05:59 | So does this mean that you should never
try to have elements' content stretch to
| | 06:03 | fit the screen, or its parent?
| | 06:05 | No, that's not what it means at all.
| | 06:06 | But you really need to understand how
height works in order to properly plan and
| | 06:11 | execute that type of layout.
| | 06:13 | Typically, for example, there is a lot
of wrapping div tags and things like that
| | 06:16 | involved to keep some of those
negative side effects from happening.
| | 06:19 | Now, I recommend checking
out a few gallery sites online.
| | 06:23 | A few of my favorites are cssbeauty.com,
where you can look at some sample sites
| | 06:27 | that designers have submitted.
| | 06:29 | Pattern Tap, which is awesome.
| | 06:31 | They have different patterns for
footers and buttons and sidebars and headers
| | 06:36 | and all sorts of really cool things.
| | 06:38 | There is the bestcssvault.com,
which is, again, user-submitted sites.
| | 06:42 | And you could even go to like wordpress.org
and check out some of their sample themes.
| | 06:47 | Now, what you're going to find,
almost overwhelmingly, is that most
| | 06:50 | designers simply design their sites
so that variable-height columns don't
| | 06:54 | negatively impact it.
| | 06:56 | Sometimes knowing the limitations of
a technique is just as important to
| | 07:00 | designing it as knowing its strengths.
| | Collapse this transcript |
| Creating equal-height columns| 00:00 | In our last movie we talked a little
about the limitations of specifically
| | 00:04 | setting a height on a column.
| | 00:06 | Now we also talked about how difficult
it is to stretch the height of a column
| | 00:10 | to match its parent.
| | 00:11 | There are times, however, when
crating layouts of equal-column heights is
| | 00:15 | desirable, and for those times, you're
going to need to be creative in how you
| | 00:19 | plan and structure your layouts.
| | 00:21 | Let's take a look at a couple of
methods that you can use to do that.
| | 00:24 | So I have columns.htm open
and columns_faux.htm open.
| | 00:30 | So I am going to show you what's
going on here in the columns one first.
| | 00:33 | If I look at the structure page, I
have a header, followed by an article.
| | 00:37 | So I have a wrapper that's going
around these different sections.
| | 00:40 | I have one section that has a dialog
from Aristotle in it, and then I have
| | 00:44 | another section, or in aside in this case,
that has a dialog from Socrates, or as
| | 00:50 | Bill and Ted used to say, Socrates.
| | 00:51 | Then at the very bottom, I have a footer. Cool!
| | 00:56 | So the technique we are going to use
has actually been around for a very long
| | 01:00 | time, at least in terms
of the history of the web.
| | 01:04 | If you go out to positioniseverything.net
and search for One True Layout, you'll
| | 01:08 | find the origins of this particular technique.
| | 01:11 | So what we are going to do is we are
going to kind of do a little bit of a hack.
| | 01:15 | We are going to force those two
columns, the section and the aside,
| | 01:19 | we are going to force them way, way,
way down, and when I say way down, I mean
| | 01:24 | further than anyone will ever
scroll, by using bottom padding.
| | 01:29 | But then what we are going to do is
we are going to assign the exact same
| | 01:33 | negative value to a margin bottom for
it, which is going to take that wrapper
| | 01:38 | and it's going to move that wrapper
back up, just like a window shade would.
| | 01:42 | Then what we'll do is we'll clip off
the content that overflows by using
| | 01:47 | overflow hidden on the parent article.
| | 01:49 | Trust me, it works great!
| | 01:51 | Now if you're wondering how this
looks in the browser right now, let me
| | 01:53 | switch over to show you.
| | 01:55 | You can see that we have
a two-column layout here.
| | 01:57 | Here's Aristotle and here is Socrates.
And as I scroll down I can see that
| | 02:01 | Socrates article is a little bit
longer, based upon the width of the column.
| | 02:05 | So I am going go back into my code and
what I am going to do is scroll down into
| | 02:09 | the styles where I have this little
"styles go here," right on line 73 and I am
| | 02:15 | going to go ahead and create a section, aside.
| | 02:19 | So it's going to be one of my selectors.
And inside this, I am going to go ahead
| | 02:23 | and set that really huge padding.
| | 02:24 | So I am going to do be padding bottom, and
trust me, this will not look natural at first.
| | 02:28 | I am going to 1000 ems. That's a lot.
| | 02:33 | Now underneath that I'm going to do a
margin-bottom, and I am going to do -1000 ems.
| | 02:39 | So again, we are pushing the bottom of
both of those columns down by 1000 ems by
| | 02:45 | using the padding, but then we're
giving a negative margin of the exact same
| | 02:49 | value to the bottom of it.
| | 02:50 | What that's going to do is the
article that's wrapping around those two,
| | 02:53 | it's going to basically window-shade,
if you will, that article right back up.
| | 02:58 | So in order to clip the content off at
the bottom of the article, I am going to
| | 03:02 | create another selector
that's an article selector--
| | 03:05 | now this is our wrapper--
| | 03:06 | this is going around these two columns,
and I am just going to go ahead and
| | 03:09 | do overflow: hidden.
| | 03:13 | If you want to really kind of see
what's going on with this, you can
| | 03:17 | apply a background color to it.
| | 03:20 | In this case I am going to do just
background rgb (219, 126, 64), because I want
| | 03:27 | you to visualize the role that the
article is having in this technique.
| | 03:31 | So if I save this, go back out to my
layout, and test it, there's the background
| | 03:36 | color of the article now, showing it's
containing all of this. And check out what it's doing.
| | 03:40 | It's going all the way down to the
longest one, because remember, I'm using
| | 03:45 | the same amount of padding on both of them
and the same negative margin on both of them.
| | 03:49 | It's coming back up to the very bottom
of the tallest one, and then the article
| | 03:53 | is just clipping it off.
| | 03:54 | And that works fantastic.
| | 03:55 | Now just like any other technique,
there are going to certain constraints that
| | 03:59 | you have with page layout and design.
| | 04:01 | So you're going to have certain times
when this technique is not going to be
| | 04:04 | effective, but nine times out of
ten, it's an oldie but a goodie.
| | 04:08 | It works, and it works really, really well.
| | 04:10 | I am going to go back in and
get rid of that background color,
| | 04:14 | save the file, preview it again, and
there is our two-column layout with
| | 04:19 | equal-column heights.
| | 04:20 | It doesn't matter which one is taller;
| | 04:22 | they are always going to be exactly the
same amount and they're always going to
| | 04:25 | go all the way down to the
bottom of the footer. Perfect!
| | 04:28 | Now another technique that I
want to show off is faux columns.
| | 04:31 | Now faux columns has been
around for quite some time too.
| | 04:33 | When faux columns first came out,
essentially we used background images to
| | 04:38 | handle this technique.
| | 04:39 | It's very similar in the fact that we are
going to have a wrapper around our two sections.
| | 04:43 | So if I scroll down in my code, once
again, we have that article around the
| | 04:47 | section and around the aside.
| | 04:50 | So the structure is exactly the same.
| | 04:52 | So that article that we have wrapping
around the two of them, if we apply a
| | 04:55 | background color to that article, or
if we give it a background graphic, one
| | 04:59 | of the things that we could do was create a
background graphic that tiles vertically
| | 05:04 | that's a solid color and is
only as wide as one of the columns.
| | 05:09 | And you could actually do two of them
if you wanted to, and it would give the
| | 05:12 | illusion that you had background
colors for those columns, when in fact, the
| | 05:17 | column height would stop at a certain
point, but the background color for the
| | 05:20 | wrapper would continue
all the way to the bottom.
| | 05:22 | Now if that's a little unclear, let
me show you what I'm talking about.
| | 05:25 | I am going to go ahead and
preview this in my browser.
| | 05:27 | You can see that we don't have any
background colors on these guys at all right now.
| | 05:31 | However, if I were to go in, and let's
just say I go ahead and create an article
| | 05:37 | and just put a background color on that article.
| | 05:40 | Let's say I go rgb and then
(125, 125, 125). That is a gray.
| | 05:48 | Now one of the things we need to do,
remember, we are floating both of these
| | 05:50 | columns, so we need to go
ahead and contain those floats.
| | 05:54 | And luckily I thought ahead and I
applied clear fix to our styles,
| | 05:59 | so I can go right down here
in my code and on that article
| | 06:02 | I can class = clearfix.
| | 06:07 | So if I save this now and preview this in
my browser, I can see that gray background.
| | 06:15 | Notice that it's going all the way down,
because article is containing these
| | 06:18 | floats and it's stretching all the way down.
| | 06:20 | So in the past what we've done is
instead of using a background color, we will
| | 06:23 | use a background graphic, and that
background graphic will tile vertically and be
| | 06:27 | only as wide as we need to for the columns.
| | 06:30 | You can do just one background graphic
or you can do a background graphic that
| | 06:34 | has two colors in it.
| | 06:35 | So you can really be flexible with it.
| | 06:37 | Now the downside of that of
course is you're adding overhead.
| | 06:40 | You're increasing a resource that needs
be downloaded when the styles are loaded.
| | 06:44 | What's nice about evolving CSS
techniques is that now instead of using
| | 06:48 | a background image,
| | 06:50 | we can actually use a
gradient to do the same thing for us.
| | 06:53 | Now most of time people think of
gradients as going from one color to another sort of
| | 06:57 | gradually and sort of fading in.
| | 06:59 | But if you want, gradient
color stops can be very abrupt.
| | 07:02 | It can go directly from one color to another
one without fading between the two of them.
| | 07:07 | So that's how we can great some of these
fake or faux columns, if you will, in our file.
| | 07:12 | So I am going to go back into our code,
and I've got an asset that's going to
| | 07:16 | help us out a little bit here.
| | 07:17 | If you go into the 03_09 folder
and open up assets, you'll see the
| | 07:23 | background.txt file.
| | 07:25 | Go ahead and just open that up. And
what I've got is I've got some syntax in
| | 07:28 | here that is a lot easier to
copy and paste than it is to type.
| | 07:33 | So I am going to highlight all of that
text, just copy it, and then going into
| | 07:39 | my faux columns, I am just going to
paste it below my existing background.
| | 07:44 | Just to give you a heads-up in terms of
what's happening here, we are applying a
| | 07:47 | linear gradient that's going from one color,
| | 07:51 | it goes to 0, and then it goes to 62,
changes to white, stays at 62, stays
| | 07:59 | at white, goes to 65.
| | 08:00 | So at 62% and 65% we have white,
and then it switches to another color.
| | 08:06 | So we've got one color on the left-hand side,
| | 08:08 | we've got a gap of white in the middle,
and then it switches to another solid
| | 08:11 | color on the other side.
| | 08:12 | Now where am I getting these
percentage breaks for the gradient?
| | 08:16 | Well, it has everything to do with
the width of these guys right here.
| | 08:21 | So I'm calculating those
based on the width of those.
| | 08:23 | And this is a flexible layout,
| | 08:25 | so here, we are calculating
percentages rather than pixels.
| | 08:28 | So if I save this, go back in, and
preview it now, there are our two columns
| | 08:35 | looking exactly the way it did before.
| | 08:37 | They look like they're equal
heights, but we know they're not.
| | 08:39 | This is actually just the background
of our article wrapper that's stretching
| | 08:44 | down all the way to the footer, because
the float is being contained, and this
| | 08:48 | is why it's called faux columns.
| | 08:50 | Now this gradient syntax can be a little
cumbersome, and I will be honest with you,
| | 08:55 | this is a lightweight version of the syntax.
| | 08:57 | This is not fully cross-browser compliant.
| | 08:59 | I don't have anything in
there for Internet Explorer.
| | 09:02 | I don't have anything in there for Opera.
| | 09:04 | So there's a lot more that
you can do with the syntax.
| | 09:07 | If you're curious about CSS gradients
and you want to learn a little bit more
| | 09:10 | about them and generate the syntax for
them, I really recommend this site, The
| | 09:14 | Ultimate CSS Gradient Generator, which
I've actually recommended before. You can
| | 09:19 | find this at colorzilla.com/gradient-
editor, and if you're familiar with
| | 09:24 | creating ingredients in, like, Photoshop,
or Illustrator, it offers you a nice
| | 09:29 | visual editor to create your gradient.
| | 09:31 | You can even come in and double-click
the colors and choose whatever you want.
| | 09:35 | And I am going to make a
really horrible gradient,
| | 09:38 | so bear with me on that.
| | 09:41 | Then if you're happy with the
gradient--who wouldn't be happy with that?--
| | 09:44 | you can someone just copy and paste
the CSS that it generates for you.
| | 09:48 | You can even go ahead and throw
in support for Internet Explorer 9.
| | 09:51 | So this is a really neat online tool
that you can use to generate some pretty
| | 09:55 | complex syntax, because the syntax for color
gradients continues to evolve all the time.
| | 10:00 | It's a handy tool to know about.
| | 10:02 | Now, I've just shown you two
techniques here, and those are certainly not the
| | 10:06 | only two ways to create columns of equal height.
| | 10:10 | Designers are extremely creative
people by their nature, and they continue to
| | 10:13 | find new and very creative way as to tackle
all these problems that are inherent to CSS.
| | 10:18 | If you go out and research it,
you're bound to find a bunch of articles
| | 10:21 | discussing this very problem.
| | 10:23 | Now I want to encourage you to take
techniques like the ones I've shown you
| | 10:27 | here as starting points.
| | 10:28 | Go ahead and experiment with
them, try out variations on them
| | 10:31 | that might be better suited for
your personal projects, and as you gain
| | 10:34 | experience working with them, try
approaching those problems in new ways, and go
| | 10:39 | ahead and develop your own solutions.
| | Collapse this transcript |
| Floats: Lab| 00:00 | Welcome to your first lab.
| | 00:02 | Now in our labs you get to put what
you've learned up till this point to the test.
| | 00:06 | They are little different than regular
exercise files, because instead of me
| | 00:09 | giving you step-by-step instructions,
I am going to give you the overall
| | 00:13 | goals for the project, and then it's
up to you to decide how to solve the
| | 00:17 | problems that I give you.
| | 00:18 | After you're done working on your lab,
be sure to check the solutions movie that
| | 00:22 | follows this one to
compare your solutions to mine.
| | 00:25 | So for our lab on floating, go into
the 03_10 directory and open up the
| | 00:31 | index.htm and the main.css file.
| | 00:34 | Now I want to preview this page in a
browser and I am going to compare it to the
| | 00:39 | finished version so you can
see kind of what our goals are.
| | 00:41 | So here's the page in its current state.
| | 00:44 | If I scroll down, after the banner some
things start to appear maybe not the way we want.
| | 00:49 | We are still in a single-column layout.
| | 00:51 | We've got these two boxes that are
stacked vertically. Our Archived Galleries
| | 00:55 | list is way too wide.
| | 00:57 | So obviously here our layout is in a
single column instead of the two-column
| | 01:01 | layout that we are shooting for.
| | 01:02 | If we look at the finished version of the
file, if I scroll down, you can see that
| | 01:06 | this content is now in a column on the
left-hand side, our Archive Galleries are
| | 01:11 | a column on the right-hand side.
| | 01:12 | They look a lot narrower.
| | 01:13 | They look a lot better like that.
| | 01:14 | These two boxes are stacked horizontally
now, and then there are our page footer.
| | 01:19 | So that is what we are shooting for.
| | 01:21 | Now I am going to go back into the
code and talk about what explicitly we are
| | 01:25 | going to need to do.
| | 01:26 | Okay, so I am going to
focus on the main.css file.
| | 01:29 | At the very top of the CSS file, I have
in a comment the goals of your lab, so
| | 01:34 | as you're working through the lab, feel
free to go back up to these and take a
| | 01:37 | look at all of your goals in order.
| | 01:40 | Now I am just going to go down through
the code and sort of show you, in the
| | 01:44 | code, where you are going to be writing
certain selectors and which selectors you
| | 01:47 | are going to need to
modify to achieve what we want.
| | 01:49 | All right, so I am going to go down
to about right around line 160 or so.
| | 01:53 | I have got a section on the styles right here
| | 01:54 | that says, "Basic layout styles."
| | 01:56 | Currently right now there are
only two selectors in there,
| | 01:59 | so we are going to have
to add some stuff to this.
| | 02:00 | Now the first thing that you need to
do is you are going to need to write a
| | 02:03 | selector for the body
| | 02:04 | that's going to set the overall width
of the page to 1280 pixels, and then you
| | 02:09 | are going to need to use that
selector to center the entire layout.
| | 02:12 | Go back through. We didn't have a
specific movie on centering, but in many of
| | 02:16 | the movies in this chapter, I talked
about using a technique with margins to
| | 02:20 | center content on the page,
| | 02:21 | so that's kind of what we are going for there.
| | 02:23 | Now the next thing we will need to do is
write a selector for the article tag, or
| | 02:28 | the article element, that makes it the
left column in our two-column layout.
| | 02:32 | You need to give it 50 pixels' worth
of space on the left-hand side, and it
| | 02:37 | should take up a total of
900 pixels' worth of space.
| | 02:40 | Now after you are done with the article,
write a selector for the aside that makes
| | 02:44 | it the right-hand column
in our two-column layout.
| | 02:47 | Now for it, it will need 50 pixels'
worth of space on the right-hand side, and
| | 02:51 | then I want its total width that when
it's added to the left-hand column, leaves
| | 02:55 | you with 50 pixels' worth of
space between the columns.
| | 02:58 | So you are going to have to do a
little math here. Think about this.
| | 03:01 | Your left-hand column is going to take
up a total of 900 pixels' worth of space.
| | 03:05 | Your page all total is 1280 pixels wide,
| | 03:08 | so essentially, the right-hand column
will need to have 50 pixels' worth of space
| | 03:12 | on the right-hand side and then 50
pixels' worth of space between the left and
| | 03:15 | the right-hand column.
| | 03:16 | And you are going to need to decide
exactly how wide that's going to need to be.
| | 03:20 | The last thing here that I'll
need you to do is the page footer.
| | 03:23 | We want to ensure that the page footer
always remains below our two columns, so
| | 03:28 | you are going to need to modify
that selector so that that occurs.
| | 03:31 | Now I am going to scroll down to right around line 332
or so, there we go, and find the news selector.
| | 03:41 | So this is those two boxes that are
stacking currently right now, vertically on
| | 03:45 | top of each other, but in the finished
version, they are stacked horizontally.
| | 03:48 | That's what we need to take care of.
| | 03:49 | So we are going to modify the news
selector so that the two news items are going
| | 03:53 | to appear horizontally.
| | 03:55 | We are going to use margins to separate
the two so that there is 50 pixels' worth
| | 03:58 | of space between them.
| | 04:00 | Here's the tricky part though.
| | 04:02 | You've got to make sure the spacing only
appears between the two news items and
| | 04:06 | doesn't create
additional spacing on either side.
| | 04:10 | Now what I mean by that is if you were
to go ahead and apply just margin right
| | 04:13 | to both of them, then you end up with
instead of just 50 pixels between the two of them,
| | 04:18 | you've got another 50 pixels on the other side.
| | 04:20 | So you've got to figure out how to solve that.
| | 04:22 | That could require an extra selector.
Maybe you could do it with just a
| | 04:26 | selector, but you might have to write an
additional selector as well, and that's
| | 04:29 | something that you're just going to
have to really put on your thinking cap
| | 04:31 | about and try to solve that particular problem.
| | 04:34 | My advice is to take a moment before
you start this, look through the HTML and
| | 04:39 | the CSS--I know there's a lot of code
here--and get familiar with the elements
| | 04:43 | that you are going to be controlling.
| | 04:44 | It's always more difficult to modify
somebody else's style sheet rather than your own,
| | 04:48 | so I realize I'm putting you in the
middle of a difficult situation here.
| | 04:52 | So think about how you can use floating
to achieve the goals that I just talked
| | 04:56 | about, and then carefully plan on how
you are going to use padding and margins
| | 05:00 | to achieve the desired
spacing in your elements as well.
| | 05:03 | So you should use padding in this
instance. You should use margin; that's something you
| | 05:06 | are really going to do need to think about.
| | 05:07 | Now as I've stated throughout the
chapter, there's going to be multiple ways to
| | 05:12 | create the desired layout using floats,
| | 05:14 | so don't get too caught up in
trying to guess exactly how I did it.
| | 05:18 | Simply decide for yourself what the
most efficient way is to solve the problems
| | 05:23 | that I have given you.
| | 05:24 | Have fun!
| | Collapse this transcript |
| Floats: Solution| 00:00 | Well, I hope you had a good time
working on the lab and getting our two-column
| | 00:03 | fixed layout to its finished state.
| | 00:06 | In this movie, I am going to show you
how I styled the elements that you were
| | 00:09 | tasked to finish in the lab.
| | 00:10 | Feel free to compare your solution
to mine, and remember, especially with
| | 00:14 | floats, there are multiple ways that
you could have achieved the same layout.
| | 00:18 | So I am just going to go over our
main.css file, and I have got the
| | 00:21 | index.html opened here as well.
| | 00:23 | These are found in the finished
files directory within the 03_10 folder.
| | 00:28 | So I am just going to get right
into each one of the steps of our lab.
| | 00:31 | I am going to scroll down to about line
160 or so, where our basic layout styles are.
| | 00:38 | So the first thing that we were
asked to do was take the body and set its
| | 00:41 | width to 1280 pixels,
| | 00:43 | and then the next thing was
to center that content as well.
| | 00:47 | So to center the content, I gave it a
margin of 0 for top and bottom and then
| | 00:51 | auto for left and right.
| | 00:52 | Remember, that splits the available
space in the viewport equally to the left
| | 00:56 | and right-hand sides, centering the content.
| | 00:59 | Now the next thing was
to create our two columns.
| | 01:01 | So in this case, I wrote a selector for article,
| | 01:04 | I floated article to the left, I gave
it a width of 850 pixels, and gave it a
| | 01:09 | padding left of 50 pixels.
| | 01:12 | So the 850 pixels plus the additional
50 pixels gives us the 900 total pixels
| | 01:17 | that we need for that column.
| | 01:19 | I used padding instead of margin, and
margins certainly would have worked and
| | 01:24 | would've been preferable had I had a
background color behind the article, but
| | 01:28 | since I didn't, padding works just fine.
| | 01:30 | And even though I'm not as worried
about Internet Explorer 6 anymore, there's
| | 01:35 | an older Internet Explorer 6 bug
where if you apply the margin to the same
| | 01:39 | direction that you have a
float, it doubles that margin.
| | 01:42 | There are ways around that, but one of the
easiest ways around it is just not doing it,
| | 01:46 | so I have sort of gotten into that
habit over the years, and so I am using
| | 01:50 | padding there instead of margins.
| | 01:52 | Now if I look at the aside, it's very similar.
| | 01:55 | I'm floating it to the right.
| | 01:56 | Now remember, we could have floated it
to the left and added a little bit of
| | 01:59 | right margin to the article, but for me,
it's much easier to go ahead and just
| | 02:03 | float that to the right.
| | 02:04 | So it's going to go all the way
to the right edge of the containing
| | 02:06 | element, which is the body.
| | 02:08 | And I gave it up a padding-right
of 50 pixels, so same thing here.
| | 02:12 | I gave padding-left, here I used
padding-right to hold the content of 50 pixels
| | 02:16 | from the edge of the containing element.
| | 02:18 | I had to calculate exactly how much
space I had left and since I started with
| | 02:22 | 900 pixels, I can subtract 1280 by 900 and it
| | 02:26 | let me know how much space I had
remaining. And I wanted to have 50 pixels' worth
| | 02:31 | of space on the right-hand side--that's
my padding--and 50 pixels' worth of space
| | 02:35 | between those two columns, which leaves
me with 280 pixels of available space for
| | 02:40 | my aside, and that becomes
the assigned width for it.
| | 02:43 | For the page footer, in order to make
sure the page footer stays below both of
| | 02:46 | those columns, I simply set the clear
property to both. Remember, that's going to
| | 02:50 | reestablish normal document flow and it
guarantees that the page footer is going
| | 02:53 | to be at the very bottom of the page.
| | 02:56 | Now the last thing that we had to focus on were
those two interior elements, the news sections.
| | 03:02 | So I am going to scroll down and
show you guys how I handled those.
| | 03:06 | All right, so about line 351 in the
finished file. So for news, essentially
| | 03:11 | what I did is I floated both of them
to the left, and then I gave them a
| | 03:14 | margin-right of 50 pixels.
| | 03:16 | So that's going to make both of them
appear horizontally, side by side.
| | 03:20 | It's also going to space
them apart by 50 pixels.
| | 03:22 | But there is a downside to doing it
this way, and the downside is is that both
| | 03:26 | of them now have a right margin of 50 pixels.
| | 03:29 | So although it's going to space them 50
pixels apart, it's also going to push
| | 03:33 | the right one maybe further away
from the edge than I wanted it to be.
| | 03:37 | So to deal with that, I created
another selector here, and I used the sibling
| | 03:41 | selector that says, hey, when a item
with the class of news follows immediately
| | 03:46 | after another item of the class of news,
set its margin right to 0, and just sort
| | 03:51 | of canceled that out.
| | 03:52 | So I used a very specific
selector to target that element.
| | 03:55 | There are certainly other ways of doing it.
| | 03:56 | There are probably more efficient ways
of doing it, if I want to be honest with
| | 04:00 | you guys, but that is
certainly one way to achieve that.
| | 04:03 | And I'm going to go ahead and preview
the index file in a browser, so we can see
| | 04:07 | our finished results.
| | 04:08 | As I scroll down, here is our two-column layout.
| | 04:11 | Here are the two interior
elements with their two columns.
| | 04:14 | Notice that we have 50 pixels' worth of
space on either side of our article, and
| | 04:18 | aside; we have 50 pixels' worth of space
between these two guys; and then we have
| | 04:22 | another 50 pixels' worth of space here
for the gutter. So notice that right-hand
| | 04:26 | margin is not negatively impacting that.
| | 04:28 | And then our footer is forced down at
the bottom of our columns, exactly the way
| | 04:32 | that we wanted it to.
| | 04:34 | You know you can see from doing this
lab that it doesn't really take a lot of
| | 04:37 | CSS to create floated layouts.
| | 04:38 | I mean, I know there are other
elements within the layout that we didn't
| | 04:41 | style, and those certainly required a
little bit of work, but we handled the
| | 04:45 | main content regions:
| | 04:47 | The article, the aside, the footer and
then some of those interior elements as
| | 04:51 | well, like these two news items.
| | 04:53 | So hopefully, one of the things that
you can see from this lab is not only how
| | 04:57 | easy it is to use floats to create
layouts, but how efficient it is to let
| | 05:01 | normal float handle the bulk of the
layout. The only thing we're really floating
| | 05:05 | are these two main page elements.
| | 05:07 | All of the other main structural
elements are being handled through normal
| | 05:10 | document flow. And that sort of
describes the strategy that I use, which is to
| | 05:14 | let normal flow handle the bulk of the
layout, and then use floats to adjust and
| | 05:19 | create columns when necessary.
| | Collapse this transcript |
|
|
4. Positioning ElementsRelative positioning| 00:00 | When people talk about controlling
page layout with CSS, often the property
| | 00:05 | that they are actually
referencing is the position property.
| | 00:08 | In fact, way back in the day when
designers first started crafting layouts
| | 00:13 | without tables, they even referred to the
CSS involved as CSS-P, or CSS positioning.
| | 00:21 | Now the positioning property
is indeed an important one,
| | 00:24 | and in this chapter, we are going to go
over the various properties and values
| | 00:28 | associated with positioning and how
we can use those properties to control
| | 00:32 | elements within our layout.
| | 00:33 | Now we are going to start with
what is perhaps the most commonly used
| | 00:37 | positioning value, and
that's relative positioning.
| | 00:40 | To demonstrate this, I have the relative.
htm file open from 04_01 folder. And in
| | 00:47 | fact, if I scroll down you can see, we
have a fairly simple page. I've got a
| | 00:51 | little bit of text referencing the
positioning property, and then I have these
| | 00:54 | three elements right here
that we are going to focus on.
| | 00:57 | There are three div tags, and they
have the class attributes of elements
| | 01:01 | One, Two, and Three.
| | 01:02 | And in fact, if I preview this in my
browser, you can see there are elements
| | 01:06 | One, Two, and Three, and they are
just stacking one on top of another.
| | 01:09 | Now that means that these
elements are in normal document flow.
| | 01:13 | I have been talking about normal
flow for pretty much the whole title,
| | 01:16 | but we are finally in a position
where we can discuss the three different
| | 01:21 | positioning schemes of CSS.
| | 01:23 | And we are going to discuss them in
the context of the positioning property.
| | 01:27 | Now you can see the positioning
property has five possible values, although we
| | 01:31 | can--almost everybody has inherent.
| | 01:33 | So let's focus on the four values here.
| | 01:36 | Static and relative, both of those
values are considered to be in normal flow.
| | 01:41 | In fact, static is kind of the default
positioning of all the elements on your
| | 01:45 | page, if you want to look at it that way.
| | 01:47 | Absolute and fixed, on the other
hand, are in the second positioning
| | 01:51 | scheme, which is absolute.
| | 01:53 | Now we are going to talk
about those in just a moment.
| | 01:56 | The third positioning scheme is floats,
and we covered floats in our last chapter.
| | 02:01 | So, of the three position schemes we have,
an element is considered to be either
| | 02:05 | a normal flow, floated, or absolutely positioned.
| | 02:09 | So it's considered to be
one of those three things.
| | 02:12 | Elements with positioning values of
static or relative are considered to
| | 02:15 | be within normal flow.
| | 02:17 | And that not only controls the
behavior of that element, but it also controls
| | 02:21 | the behavior of the elements around it.
And to demonstrate that, let's go ahead
| | 02:24 | and experiment with relative positioning.
| | 02:26 | I'm going to go back into my code, and I
am going to scroll up until I find the
| | 02:30 | selectors that are
controlling elements 1, 2, and 3.
| | 02:33 | We are going to start with element1,
and I am just going to come up and I'm
| | 02:37 | going to do position: relative.
| | 02:40 | There we go.
| | 02:41 | So if I save that, and refresh my
browser, you can see, ah, nothing
| | 02:47 | happened. Absolutely nothing.
| | 02:50 | Well, that's not entirely true.
| | 02:52 | Actually, element number one now has
positioning, and if you put quotes around
| | 02:57 | that when I said it--I did little air
quotes, you can't see that obviously, but,
| | 03:01 | element1 now air quotes has positioning.
| | 03:04 | Now what that means is that element is
considered to be positioned, which we will
| | 03:08 | talk more about later on in the
chapter as we look into absolute positioning,
| | 03:12 | and also gives us the
ability to offset this element now.
| | 03:16 | So once you have an element as
positioned, you can offset it from its normal
| | 03:21 | position within the layout.
| | 03:22 | So if I go back into my code, I am
going to go right here into the element1
| | 03:26 | selector and I am just
going to do some offsets here.
| | 03:28 | I will do top of 10
pixels and left of 10 pixels.
| | 03:36 | So what this is going to do for us is
it's going to go to the top edge and the
| | 03:42 | left edge of our element.
| | 03:43 | You could actually think of a point on
the box here in the top left-hand corner,
| | 03:47 | because that's the point
it's going to move it from.
| | 03:49 | An offset from the top pushes it down
from the top. An offset from the left
| | 03:54 | pushes it from the left-hand side,
which actually moves it to the right.
| | 03:57 | So if I save this, go back into my
browser, and refresh, you can see what
| | 04:02 | happens to our element.
| | 04:03 | It moved over by 10 pixels and then
down by 10 pixels, so if offset from this
| | 04:09 | point over 10 and down 10.
| | 04:12 | Now again, you can use all four sides.
| | 04:14 | You can also use right and bottom.
| | 04:16 | Positive values are going to move it
away from that edge. Negative values are
| | 04:20 | going to move it towards that edge.
So, if instead of 10 pixels to the left, I
| | 04:24 | did -10 pixels to the left--let me save that--
| | 04:28 | you can see that it moves
in the opposite direction.
| | 04:30 | It moves it to the right.
| | 04:31 | In fact, -10 pixels to the left is
exactly the same as a positive 10 pixels
| | 04:38 | to the right, so if I save that and
preview it, see the element doesn't move at all.
| | 04:43 | So these offsets allow us to sort of
tweak the position of our element based on
| | 04:48 | which sides we are going to move it from.
| | 04:49 | You have to be really careful with this.
| | 04:51 | I mean, what would happen if I told it
to go 10 pixels to the right and then 10
| | 04:55 | pixels to the left at the same time?
| | 04:57 | Not much. And I'm also being very
cruel to my browser. So don't do that.
| | 05:02 | Usually you are just going to use
one or two of the offsets, okay.
| | 05:06 | You may have also noticed
something pretty curious too.
| | 05:09 | The other elements, elements
2 and 3, didn't move at all.
| | 05:12 | To demonstrate that a little bit more,
let's make these offsets a little bigger.
| | 05:14 | So I am going to change the first
offset to left, and I am going to give it a
| | 05:18 | left offset of 200 pixels, so
now I am really going to offset it.
| | 05:22 | And then I am going to give it a top
offset of 100 pixels. So that's going to
| | 05:25 | move it 200 pixels to
the right, 100 pixels down.
| | 05:29 | If I save this and refresh
it, you can see what it did.
| | 05:32 | But more importantly, you
can see what it didn't do.
| | 05:36 | Elements 2 and 3 are not affected at all,
| | 05:39 | and that's due to the fact that one
is considered to still be part of normal
| | 05:43 | flow, so even though it's offset from
its normal position, elements 2 and 3
| | 05:48 | think that 1 is still here.
| | 05:50 | So they don't respond at all.
| | 05:52 | That's not to say that these elements
still aren't related to each other and
| | 05:55 | they still won't respond
to each other; they will.
| | 05:57 | In fact, if we go back into our code,
and we change something about element1,
| | 06:02 | let's say we change element1's height
to 200 pixels, so if I save this, and
| | 06:09 | preview it, you can see what happens.
| | 06:13 | Element1 gets twice as tall and
then elements 2 and 3 move down as if
| | 06:18 | element1 were still there.
| | 06:21 | This is a very different behavior than
what we saw in the last chapter with floats.
| | 06:25 | Remember, if we floated something to the
right, these elements would move up to
| | 06:28 | occupy its space unless we cleared that float.
| | 06:31 | So when people first see this, they are
like, "Oh wait a minute. This is cool.
| | 06:35 | I can move elements around and not have
all that trouble that I had in the last
| | 06:39 | chapter with floats with
stuff moving all over the place."
| | 06:42 | But there is a bigger problem.
| | 06:44 | We have this empty space here where
one would occupy, and in order to move
| | 06:47 | something into space, I have
to offset those values too.
| | 06:50 | So if you try to do a layout based
purely on relative positioning, you have a
| | 06:56 | lot to keep track of.
| | 06:57 | I have never seen it done.
| | 06:58 | Somebody probably did it just as an
exercise, but it would be so difficult to
| | 07:03 | remember where everything was supposed
to be normally, to understand how much
| | 07:07 | you are supposed to offset it,
| | 07:08 | it wouldn't be worth the trouble.
And then if you change one element then the
| | 07:13 | whole layout flexes and changes as
well, because everybody is responding to
| | 07:17 | everybody else, because they are assumed
to still be in normal document flow.
| | 07:21 | So obviously, relative positioning is
not going to be used to create an entire
| | 07:25 | layout, so what is it for?
| | 07:27 | Well, overall relative
positioning is used mainly to do two things.
| | 07:32 | First, just provide slight tweaks for
your layout, when you need to offset an
| | 07:36 | element in a specific direction.
| | 07:37 | So if you just need to move something
up a little bit or over a little bit
| | 07:41 | to make sure your layout is doing what you
needed to do, relative positioning is great for that.
| | 07:44 | And second, it provides a
positioning value for container elements.
| | 07:51 | So why in the world would you need to do that?
| | 07:53 | Well, that has everything to do with
absolute positioning, which is something we
| | 07:57 | are going to explore next.
| | Collapse this transcript |
| Absolute positioning| 00:00 | As we mentioned in our last movie,
absolute positioning is one of the three
| | 00:04 | positioning schemes in CSS.
| | 00:07 | When you use it to position an element,
that element is removed from normal flow
| | 00:12 | and no longer affects the elements
around it. Nor in turn is it affected by any
| | 00:17 | changes to those elements.
| | 00:18 | To illustrate how this works, let's
experiment with absolute positioning using
| | 00:23 | the absolute.htm file, which you
can find in the 04_02 directory.
| | 00:29 | Just a brief look at this page shows
us that it really is sort of exactly the
| | 00:33 | same page we were working on,
but there is one minor change.
| | 00:37 | Down here where we have our three div
tags, we have a section now wrapping those
| | 00:42 | div tags, and notice that the section
has a class of container. And we will see
| | 00:47 | the importance of that in just a moment.
| | 00:49 | So I am going to scroll up to our styles.
And before we do anything, let's just
| | 00:54 | sort of preview the page, so that we
can see what it looks like before we begin
| | 01:02 | positioning our elements.
| | 01:03 | So again, One, Two, and Three, just
stacking right on top of each other the
| | 01:06 | same way they did in the last exercise. Okay.
| | 01:10 | If I go to element1, and this time I
set position to absolute and save the
| | 01:18 | file, if I go back in my browser and
refresh it, you can see something odd just happens.
| | 01:24 | Now, One is in the same exact spot, but Two
looks like it's gone, and Three has moved up.
| | 01:29 | Okay. So you probably figured out from going
through the float lesson what's happened here.
| | 01:35 | One has been removed from normal flow,
so Two and Three, they don't think it's
| | 01:39 | there anymore and they just
move up to occupy that empty space.
| | 01:43 | So what's really happening is we can't see
element2 because it's exact same size as element1.
| | 01:48 | In reality, it's just up underneath it;
| | 01:50 | we just can't see it.
| | 01:51 | So let's add some offsets and
see what happens when we do that.
| | 01:55 | So I'm going to go back into our code, go back
to element1, and I am going to give it a
| | 02:00 | top offset of 125 pixels and then a
left offset of 125 pixels. All right!
| | 02:09 | So I am going to go ahead and save that,
go back into my browser, and refresh it.
| | 02:13 | Now, I've got to ask you, is that where
you were expecting to see the element offset?
| | 02:20 | We offset it by a left value of 125
and we offset it by a top value of 125.
| | 02:27 | Now, I assure you that the offsets
work exactly the same with absolute
| | 02:31 | positioning as they would
with relative positioning.
| | 02:33 | So it moved from the left edge,
| | 02:34 | it moved to the right, if you will, by
125 pixels, and it moved down 125 pixels.
| | 02:39 | What's really different here, however, is the
origin point that is used to move the element.
| | 02:46 | Now, if you were assuming that this was
going to be the origin point from its
| | 02:49 | normal document flow, that's not
quite how absolute positioning works.
| | 02:53 | The way absolute positioning works
is it looks for the nearest containing
| | 02:58 | element to have positioning, and it's
just going to keep going up and up and up
| | 03:03 | and up, until finally it just goes to
the initial containing block, which in
| | 03:06 | this case will be the HTML tag, and
it says, okay, fine, I'll just do that.
| | 03:10 | So in this case, really the
viewport is the offset point for this
| | 03:15 | particular element right now.
We can change that.
| | 03:17 | For example, remember, this
white box here is the body tag.
| | 03:21 | So if I go back in the code and I go
all the way up to our selectors--let's go
| | 03:26 | up to the body selector--I can
give it a position attribute as well.
| | 03:30 | So remember, in order for an element
to be the offset point for an absolutely
| | 03:34 | position element, it has
to itself be positioned.
| | 03:37 | So we're just going to give it relative
positioning, and we know from our last
| | 03:40 | exercise that that's not
going to affect the body at all.
| | 03:43 | Body still stays in normal document flow.
| | 03:45 | We are not offsetting body, so
it's not going to move anywhere.
| | 03:48 | In fact, the only thing that we've just done
to body is we've given it a position value,
| | 03:53 | meaning it has position.
| | 03:55 | So now, our element1, which is
right here, is going to keep going up.
| | 04:00 | It's going to say, hey, are you a
positioned element? No, I am not.
| | 04:04 | Then it's going to go up to
its next containing element.
| | 04:06 | It's going to say, hey, to the
body, are you a positioned element?
| | 04:09 | And this time body is
going to say, well, yes, I am.
| | 04:11 | So now it's going to use body as its
starting point, and if we save this and test
| | 04:16 | it, you can see that it does just that.
| | 04:18 | It starts at this point, goes 125
pixels over and 125 pixels down.
| | 04:24 | So that means that in order to really
gain a fair amount of control over this
| | 04:28 | element, we have to know which
containing block we want to be positioned and how
| | 04:33 | it's going to move in
relation to that containing block.
| | 04:35 | So if we go up, currently we are using body,
but what we want to use is this container.
| | 04:43 | So I am going to go to the container and
I am going to choose position: relative.
| | 04:48 | So if you've ever looked through
anybody's code, and I know when I was first
| | 04:52 | learning CSS--and I will be
honest with you, I still do it now--
| | 04:55 | I would go to sites that I really
admired and I'd say, wow, that's a really neat
| | 04:58 | layout, and I would take a look at
their CSS, and I would just sort of go
| | 05:01 | through it and see how they were
doing different things and what kind of
| | 05:04 | techniques they were using.
| | 05:05 | And this is something I used to see a good bit.
| | 05:07 | I would see position:
| | 05:08 | relative, and then I wouldn't see any
offsets, and I'd be like, what in the
| | 05:10 | world are they doing with that?
| | 05:12 | And it wasn't until I really learned
about absolute positioning that the light
| | 05:15 | bulb when off and I said, oh, oh, okay.
| | 05:17 | So basically anything inside container
that's going to be absolutely positioned
| | 05:21 | is now going to move relative to this container.
| | 05:24 | And that's almost like grouping
elements and moving them around,
| | 05:27 | so it's a really cool technique.
| | 05:28 | So if I save this and go back up and
refresh that, so that's now going to move
| | 05:32 | over and down from the top-left
edge of our containing element.
| | 05:36 | So now that I know what point it's going
to be moving relative to, I have a much
| | 05:41 | finer degree of control over this element.
| | 05:43 | So if I come back in, for example, and
start changing some things--so like, let's
| | 05:47 | say, for example, that I take my top
value and I change that to 25 pixels, and I
| | 05:52 | take the left value and I
change that to, say, 150 pixels.
| | 05:59 | So if I save this and preview it,
you can see it sort of lines up, one
| | 06:04 | right beside number two.
| | 06:06 | In the last exercise we used relative
positioning and we saw that how when
| | 06:11 | you changed one element, because it
was still in normal document flow, it
| | 06:14 | affected the other elements.
| | 06:16 | For absolutely positioned
elements, we really don't have that.
| | 06:19 | So, for example, if I come in and told
element1 to now be, let's say, 300 pixels
| | 06:27 | wide and 200 pixels tall, if I save
this and preview it, you can see that
| | 06:35 | although it changes this, it doesn't
affect Two and Three in the slightest.
| | 06:40 | So when you position something as an
absolutely positioned element, it totally
| | 06:44 | removes it from normal document flow.
| | 06:45 | You can even think of it as sort of
hovering or floating over the page, and the
| | 06:49 | other elements on the page just go
about their business as if that element
| | 06:52 | never really existed.
| | 06:54 | Now, of course this means that we
have to be very careful with how we use
| | 06:57 | absolute positioning, to avoid unwanted effects.
| | 07:00 | For example, if I come back in and
let's say that I take this left value and I
| | 07:06 | only offset it by 25 pixels instead of 125.
| | 07:10 | So if I save that and test it, you
can see that it now covers those up.
| | 07:16 | I mean, you can overlap them as well.
| | 07:18 | If I up that value to, say, 75 pixels,
you can see that now it's just sort
| | 07:24 | of overlapping them.
| | 07:25 | So if we are not careful about how we
are positioning these elements within our
| | 07:29 | containers, we have some unintended
side effects of overlapping elements, and
| | 07:33 | usually you see that more when
an element changes unexpectedly.
| | 07:37 | Like, for example, if element2 had a
bunch of text in it and I positioned
| | 07:40 | element1 over here and the initial text
only came this far, there would be no overlap.
| | 07:46 | But then if somebody came in and wrote a
new blog post, for example, which had a
| | 07:49 | really long string of text in it, we
might get some unwanted overlapping, so we
| | 07:53 | need to be very careful about how
we structure our layouts when we use
| | 07:56 | absolutely positioned elements.
| | 07:58 | To be honest, I have seen some designers--
and I know, I told you I hadn't seen
| | 08:02 | anybody create an entire layout with
relative positioning--well, I have seen
| | 08:05 | some designers create entire
layouts using absolute positioning.
| | 08:09 | While this does allow you to position
the elements exactly where you want them,
| | 08:13 | what you're left with when you do this
as an entire layout, you're left with
| | 08:17 | elements that don't relate or
react to each other in any way.
| | 08:21 | That means that unless the content stays
exactly the same, you're probably going
| | 08:25 | to end up with a really rigid layout
that consists of all these overlapping
| | 08:30 | elements that you really don't want overlapping.
| | 08:32 | Now, it's better to think about absolute
positioning and approach it as a way to
| | 08:37 | reposition elements within a
container when the conditions allow it.
| | 08:42 | Keep in mind that the containing
element needs to be positioned as well,
| | 08:46 | usually with a relative value so that
the containing element remains within the
| | 08:50 | normal document flow.
| | 08:51 | So next up, we are going to continue
to explore absolute positioning as a
| | 08:56 | scheme, by working with the fixed value.
| | Collapse this transcript |
| Fixed positioning| 00:00 | Fixed positioning is part of the
absolute positioning model, and it allows you to
| | 00:05 | position element relative to the viewport.
| | 00:08 | Unlike relative or absolute
positioning, fixed positioning wasn't initially
| | 00:12 | supported very well by browsers, which
is why it's not quite as well known as
| | 00:16 | absolute or relative positioning.
| | 00:18 | However, the reason increase in support,
especially among mobile devices, means
| | 00:23 | that fixed positioning is beginning to
see widespread use among designers. Now
| | 00:28 | to demonstrate fixed positioning, I
have the fixed.htm file open from the 04_03
| | 00:35 | directory, and if I scroll down, I can
see that we are pretty much using the
| | 00:39 | same file that we've been using
for the past couple of exercises.
| | 00:42 | We have our three elements, elements 1,
2, and 3, and they are wrapped in our
| | 00:47 | section, with the class attribute of container.
| | 00:50 | Okay, so I am going to go up to element
1 here, and let's just go ahead and set
| | 00:55 | position for that to fixed.
| | 01:00 | Now since we understand the concept of
offsets now, we will go ahead and apply
| | 01:03 | some offsets to this. And I am going to
do a top offset of 25 pixels and then a
| | 01:08 | right offset of 25 pixels as well,
and then I'm going to save the page now.
| | 01:13 | Remember, those offsets mean that it's
going to push it down from the top edge
| | 01:16 | by 25 pixels and push it from its
right edge over to the left by 25 pixels.
| | 01:21 | But if I go out of my browser and refresh the
page, you can see what happens to element 1.
| | 01:27 | It's removed from normal document flow,
so Two and Three move up, just because
| | 01:32 | it's part of the absolute position
model, but One positions itself right over
| | 01:36 | here, relative to the viewport.
| | 01:38 | That's pretty much the exact same
thing we saw with absolute positioning, but
| | 01:42 | there's a very big difference.
| | 01:44 | Whereas, absolute positioning is
always looking to the container elements to
| | 01:47 | see who the nearest element, the
nearest containing element has positioning is,
| | 01:52 | fixed positioning does not care about
that at all; in fact, if I go back into my
| | 01:58 | code and I go to container, and I say,
position relative, save that and refresh,
| | 02:08 | it has no affect whatsoever.
| | 02:11 | So elements that have fixed
positioning don't care what type of positioning
| | 02:15 | their containers have.
| | 02:16 | They are always relative to the viewport.
| | 02:18 | Now what's the viewport?
| | 02:19 | Well, the viewport is the available
viewing space within your browser.
| | 02:23 | So if I take the browser and I resize
that, you can see that it remains fixed to
| | 02:28 | the viewport, 25 pixels over and 25 pixels down.
| | 02:33 | Now this has a lot of
implications for scrolling.
| | 02:36 | Let me show you what I mean.
| | 02:37 | I am going to go back into my page, and I
am just going to modify it really quickly.
| | 02:41 | I am going to take this paragraph, copy
this, and I am just going to paste it a
| | 02:45 | few times, just to make sure that
we have enough text in here to force
| | 02:49 | scrolling if you will.
| | 02:51 | So if I save this now, go back up to
my browser, and refresh it, the page is
| | 02:54 | going to look a little weirder, but it's
going to really reinforce its concept.
| | 02:57 | You will notice that now if I scroll
the page, that element remains fixed
| | 03:02 | in position relative to the viewport, no
matter what's happening to the page itself.
| | 03:06 | Now on the one hand that's really cool,
because I could put and ad over here, or
| | 03:11 | a banner, or some navigational aids,
and they're always going to stay in that
| | 03:15 | position relative to the viewport and
not really care what's going on the page.
| | 03:19 | Of course, the down side of that is if
the viewport size changes dramatically,
| | 03:24 | you could end up with an element
that's running right over the top of your
| | 03:27 | content and getting in the way of something.
| | 03:30 | So obviously, fixed positioning isn't
going to be right for every single layout
| | 03:34 | that you are working with.
| | 03:35 | However, recently a lot of designers
are using it to provide users with ever-
| | 03:40 | present navigation, like I was just
talking about, feedback opportunities or as a
| | 03:44 | way to display some type of related
content. Now if you do decide to use it, you
| | 03:49 | need to plan for how those fixed
elements might interact with other elements on
| | 03:53 | the page, especially if the browsers
resize, and then how content might be
| | 03:58 | overlapping if scrolling
or something like that occurs.
| | 04:01 | Be aware also that fixed positioning
isn't well supported in older browsers.
| | 04:04 | Now by that I am talking about like
Internet Explorer Version 7 and older,
| | 04:08 | really old versions of
Firefox, things like that.
| | 04:11 | The support is even worse for
older versions of mobile devices.
| | 04:15 | So if you are going to use it, test it
thoroughly based on your audience and
| | 04:18 | then provide users with fallback
options for when it's not supported.
| | Collapse this transcript |
| Controlling stacking order| 00:00 | You may have noticed in several of
our exercises so far that positioning
| | 00:04 | elements can often result in
them overlapping each other.
| | 00:08 | To make sure that your layouts behave
the way that you expect them to, you need
| | 00:11 | to understand the rules that govern the
stacking of these elements and how you
| | 00:16 | can control stacking through CSS.
| | 00:19 | So I have the stacking.htm file open,
and there are a few changes. For the
| | 00:24 | most part it's the same, but we have
some text now that describes Z-index,
| | 00:30 | which is the property that we are
going to be controlling, and then we have
| | 00:33 | our containing element and the three div
tags inside of it, so that much is the same.
| | 00:38 | But currently, now, all three of
those elements have been positioned using
| | 00:43 | absolute positioning. And if I preview
the file in a browser, you can see these
| | 00:48 | three elements are stacking one right on
top of the other because their offsets
| | 00:52 | aren't far enough to keep them from overlapping.
| | 00:54 | So notice that by default right now we
are not controlling the stacking in anyway.
| | 00:59 | Notice that by default, they are
overlapping one on top of the other, and what's
| | 01:04 | controlling the order of the stacking
right now is the source order of the code.
| | 01:09 | So the last object encountered in the
code, the last one rendered, is stacked on
| | 01:14 | top of the other objects.
| | 01:15 | You can think of them as sort of like
the first one will be on the bottom, then
| | 01:18 | the second, and then the third.
| | 01:19 | In fact, if we change that source order,
so if I go down here to our elements and
| | 01:24 | if I take the first element here, and I
am just going to cut that out and then
| | 01:31 | move it down here below the third one,
| | 01:33 | now it's not going to change their
position in the layout at all, because
| | 01:37 | they're being absolutely positioned.
| | 01:38 | What it does change, however, is the
order in which they're encountered by the
| | 01:42 | browser in the code.
| | 01:43 | So now, if I save that and go back into
the browser and refresh, you can see that
| | 01:50 | now One is actually on top of Two.
| | 01:53 | It would be on top of Three actually as
well, if they were overlapping, because
| | 01:57 | now One is encountered last,
so it is the topmost object.
| | 02:01 | All right, I am going to undo that
because I want us to work from the context of
| | 02:07 | sort of the default one
as we begin to control it.
| | 02:09 | Now if we want to take control of the
stacking process, the property that we use
| | 02:14 | id does the Z-index properties.
| | 02:16 | You can think of Z-index, like, you
have an X axis and a Y axis that control
| | 02:21 | horizontal and vertical positioning.
| | 02:23 | You can think of the Z axis as
controlling stacking, and Z-index allows us to
| | 02:29 | tell an element where it fits
along that Z axis, if you will.
| | 02:33 | All right, so I am going to go to
element 1, and I am just going to do Z-index.
| | 02:39 | That's the name of the property, z-
index, z-index, and I am going to go ahead
| | 02:43 | and give it an order of one,
or a value of 1, I should say.
| | 02:47 | For element 2, I am going to give a
z-index of 3, and for element 3 I am going to
| | 02:53 | give it a z-index of 2.
| | 02:57 | Now I am doing these in
one-value increments, one, two, and three.
| | 03:00 | The actual value doesn't matter;
what matters is which value is higher.
| | 03:05 | The higher the value, the
higher it is in the stacking order.
| | 03:08 | So I could have put element two at
400 and it wouldn't have mattered;
| | 03:12 | it would still be on top of those other two.
| | 03:15 | So how far away you space them in
values is totally up to you, and is usually
| | 03:19 | dependent upon how many objects you have
stacking and how much control you need.
| | 03:23 | So if I save this, go back to the
browser and refresh, boom, you can see that
| | 03:28 | now element number Two is on top
because it has the highest z-index value.
| | 03:33 | If I go back into the code, let's see
what happens if two elements have exactly
| | 03:38 | the same z-index value.
| | 03:40 | So, if I go to element1 and give it a
z-index of 3 and leave element 2's
| | 03:45 | z-index of 3, so if I save that and
preview it, you can see that it doesn't
| | 03:52 | appear like anything else has happened,
but what's actually happening here is to
| | 03:55 | resolve the conflict between One and Two
who have the same z-index value, source
| | 03:59 | orders is then used, so it falls back source
order and since Two comes after One, Two
| | 04:04 | wins the battle, even though the two
of them have exactly the same z-index.
| | 04:08 | You can use negative values. If I go
into element1 and change its z-index from
| | 04:14 | 3 to -1, if I save this and go back to my
browser, let's take a look at what happens.
| | 04:19 | So that actually moves it down
below elements that are considered in
| | 04:23 | normal document flow.
| | 04:24 | I mean one of the ways that I like to
describe this to people is think about a
| | 04:27 | piece of paper, just being two-
dimensional, flat. All of your elements in normal
| | 04:31 | document flow are kind of painted on the
flat canvas. And then if you position
| | 04:36 | elements using positioning, it pretty
much takes them off of that flat canvas.
| | 04:40 | It sort of hovers them,
if you will, over the page.
| | 04:42 | Well, negative values send it below the
page. But what you have to understand is
| | 04:47 | it's going to send it below everything
except for what it calls the initial
| | 04:52 | stacking context, which is really fancy
and will impress people at the cocktail
| | 04:57 | parties if you use that term.
| | 04:58 | So our HTML tag, or this gray background
back here, is the initial stacking context.
| | 05:04 | It's the first element, so it
establishes the initial stacking order.
| | 05:07 | So negative values will move it
below everything except for that initial
| | 05:11 | stacking context, which is why it's
below the body, this white box here, but not
| | 05:15 | below the HTML tag, which is the gray box.
| | 05:17 | Stacking contexts are another thing
that you really need to understand, and it's
| | 05:23 | not the easiest thing in
the world to understand.
| | 05:25 | Every element, once that element is
given a z-index rating, it establishes a
| | 05:30 | new stacking context.
| | 05:33 | So initially the only stacking context
you have on the page is the initial root
| | 05:37 | tag, which is the HTML element.
| | 05:39 | But once you apply a z-index rating
to an element, that element begins a
| | 05:43 | new stacking context.
| | 05:45 | Now, if it contains child elements,
they are now all considered part of that
| | 05:50 | one stacking context, which is different.
| | 05:53 | It's easier to see than it is to sort
of understand it the first time you hear,
| | 05:57 | so let me show you.
| | 05:58 | So we know that our div tags are
wrapped in this section, so that section, you
| | 06:04 | can think of that as a containing element.
| | 06:06 | So if go up to my container selector and I
add a z-index value here of 1 and save that,
| | 06:17 | if I go back in the browser and refresh,
watch what happens to the number One.
| | 06:21 | All of a sudden, even though it
has a negative value, it comes up.
| | 06:24 | Now it is still the bottom of our
stacking order here, but the reason that it
| | 06:29 | comes up is that now it belongs to
the stacking context of the containing
| | 06:34 | element, which is this
sort of brown background here.
| | 06:37 | So it no longer belongs to the
stacking context of the HTML tag;
| | 06:40 | it belongs to the stacking context of
the container section, which means that
| | 06:45 | now it's going to order
itself based on that context.
| | 06:49 | So now that we have seen this a little
bit, let's go through this list that we
| | 06:52 | have right here in the browser
| | 06:53 | that talks about the rules behind
stacking context and how stacking
| | 06:57 | conflicts are resolved.
| | 06:58 | So the first the first bullet point
and the very first thing you see here is
| | 07:01 | that the backgrounds and borders of the element
forming the stacking context is painted first.
| | 07:07 | In this case, you can think of it as
the gray background to the browser window.
| | 07:10 | And then next, any child-stacked elements
with a negatives z-index. Now that would
| | 07:14 | have been our element number 1, but
it's in a new stacking context now.
| | 07:18 | Next after that, elements
in normal document flow.
| | 07:21 | That will be the body, all the text that
you see on the page, that sort of thing.
| | 07:25 | Then any non-positioned floats, so
floated elements do hover over elements in
| | 07:30 | normal flow, but they're not quite as high
as elements that are positioned with z-index.
| | 07:35 | After that, it would paint any child-
stacked elements with z- index of zero or
| | 07:39 | auto. So if you position something, if
you say, position absolute, for example,
| | 07:44 | or position fixed, and you don't
give it a z-index rating, the z-index is
| | 07:48 | considered to be zero or auto. And
then right after that, any child-stacked
| | 07:53 | elements with a positive z-
index value, lowest to highest.
| | 07:57 | So that's how stacking order is
determined as the page is being painted
| | 08:01 | within the browsers.
| | 08:02 | Now, in most cases you are not
going to need to go into it that deep.
| | 08:05 | Most of the time the default stacking
orders are going to work just fine, but
| | 08:09 | every now and then you are going to
find yourself needing to tweak your layouts
| | 08:12 | and use z-index property.
| | 08:14 | Now it's especially true if you're
working with heavily positioned layouts or
| | 08:18 | for when you're building complex widgets or
interface components, things like that.
| | 08:22 | Now in those cases, understanding how
stacking context and the z-index property,
| | 08:27 | understanding how those work,
can be extremely important.
| | Collapse this transcript |
| Clipping content| 00:00 | One of the things that absolutely
positioned elements allow us to do that we
| | 00:04 | can't do with other element types is to
use the clip property. Now the clip property
| | 00:10 | allows us to essentially crop
an element and its contents.
| | 00:14 | Let's take a look at that by opening up
clipping.htm, which you can find in the
| | 00:18 | 04_05 directory. And the page
structure of this one has changed a little bit.
| | 00:25 | Instead of our normal three div tags
that we have been using, essentially we
| | 00:29 | have a section with a class of container,
and now inside of that we have a div
| | 00:34 | that has a paragraph inside of it as
well. So we want a little bit more content
| | 00:37 | inside of this so that you can
actually see the clipping taking place.
| | 00:41 | So essentially we are just going to
crop that content down a little bit.
| | 00:43 | I am going to preview that in the
browser for you, so you can see what's kind of
| | 00:47 | going on here, and here is the
content that we are going to be clipping.
| | 00:50 | You can see it's being
positioned using absolute positioning.
| | 00:53 | So what values can we use for the clip property?
| | 00:56 | Well, there are not too many.
| | 00:58 | The clipping property has
three values that we can use.
| | 01:01 | We have Shape, Auto, and Inherit.
| | 01:02 | Now Inherit and Auto are pretty much
the same as doing nothing. Inherit is
| | 01:06 | asking the parent what's your clipping
property, whereas Auto is just nothing.
| | 01:11 | Now Shape, on the other hand, that is something.
| | 01:13 | Shape allows us to pass a shape and
some offsets into it that describe the
| | 01:18 | shape of the clipping.
| | 01:19 | Now, currently the only shape that
browsers will accept is a rectangle.
| | 01:24 | You can see the syntax right here.
| | 01:27 | So the only shape that it allow us to
pass into it right now is rectangle.
| | 01:30 | There's hope that in the future we
will be able use different shapes, like
| | 01:33 | ovals, or polygons, but for
right now rectangle is it.
| | 01:36 | Now that is followed by a series of offsets.
| | 01:38 | Now these offsets basically start at
the top, so the first offset is top, then
| | 01:44 | we have right, bottom, and left.
| | 01:50 | So if you're looking for a way to
remember that, you can think of trouble,
| | 01:54 | top, right, bottom, left. Or you can think of
starting with top and going in a clockwise fashion.
| | 01:58 | So what we want to do is we want to
take this element and clip it using offset
| | 02:02 | values such as these.
| | 02:04 | So I am going to go back into my code
and I want to go up and find element1, so
| | 02:09 | this is who we are going to clip.
| | 02:10 | Remember, this is only available
for absolutely positioned elements.
| | 02:14 | So I am going to go down on the next
line here and I am going to type in clip,
| | 02:19 | and then I am going to do the
rectangular shape, and then inside the parentheses,
| | 02:22 | I am going to give it an offset of 50
pixels for the top, comma, 200 pixels for the
| | 02:29 | right-hand side, comma, 150 pixels for the
bottom, and then after another comma,
| | 02:36 | finally 50 pixels for the left-hand side.
| | 02:39 | Then I am going to remember my semicolon.
| | 02:41 | I will go ahead and save that.
| | 02:43 | I am going to go back out to the
browser and refresh the page, and now you can
| | 02:48 | see our content is clipped.
| | 02:49 | Given the values that I just gave you,
50, 200, 150 and 50, is that what you were expecting?
| | 02:55 | I'm betting not. And most of the time
people get really, really confused about
| | 03:01 | clipping properties.
| | 03:02 | Basically, let's just practice
using these values right here.
| | 03:05 | Most people would assume that a top
offset of 10 pixels means that it would come
| | 03:09 | down and start clipping here, and
then a 10-pixel offset from the right,
| | 03:12 | they assume it comes to the right-
hand side, it comes 10 pixels in.
| | 03:15 | 25 pixels, 25 pixels up and then 10
pixels, 10 pixels over. But actually nothing
| | 03:20 | could be further from the truth.
| | 03:22 | Really what happens is top and bottom
offsets start from the top. Right and left
| | 03:29 | offsets start from the left-hand side.
So a top offset of 10 would start here
| | 03:35 | and go down 10, just like you would expect,
| | 03:37 | but then a bottom offset of 25 would go
down 25 pixels and start clipping here.
| | 03:43 | So it creates a sort of inner frame
from those edges, and although once you
| | 03:49 | think about it, it makes sense,
| | 03:51 | it's still kind of hard to calculate
exactly what you're going to be clipping, to
| | 03:55 | be quite honest with you.
| | 03:56 | So in order to really control the clip
property, you need to know what the width
| | 04:01 | and height of the element that you are
working with is; otherwise, you've got no
| | 04:04 | real way of controlling
what content gets clipped.
| | 04:07 | So I am going to go back into my code,
and I don't see any height or width on
| | 04:12 | element1, but it's a div tag, so if I go
up, I can see that in the div tag, I've
| | 04:17 | got 400 pixels' worth of width.
| | 04:20 | In most cases that's pretty much what
your elements are going to be like, and
| | 04:23 | the height is generally created by the
content and the padding and that sort of
| | 04:27 | thing. But in this case if you are
going to do clipping, one thing is that it
| | 04:31 | only happens on absolutely positioned elements.
| | 04:32 | So for those, you generally are going
to be setting element width and height
| | 04:36 | probably more frequently than you
would on elements that are on normal flow.
| | 04:40 | But here we don't have a height, so
I am going to go ahead and set one.
| | 04:43 | So right after our width, I am going to go
ahead and set a height value of 150 pixels.
| | 04:49 | So let's think about this for a moment.
| | 04:51 | We have 400 pixels' worth of
width, 150 pixels' worth of height.
| | 04:55 | We have 25 pixels' worth of padding all
the way around, so the true height is 200
| | 05:00 | pixels and the true width is 450 pixels.
| | 05:04 | Then we have this 2-pixel border.
| | 05:06 | So let's give ourselves a little exercise here.
| | 05:09 | Let's say we want to take the clip
property and just clip the 2-pixel border off.
| | 05:14 | Why would you ever do that?
| | 05:15 | Well, you could do something really cool.
| | 05:16 | You could take the border off and
then based on user interactivity or
| | 05:20 | something like that,
| | 05:21 | you could undo the clip property
and make the border come back up.
| | 05:23 | You could make elements
sort of expand and contract.
| | 05:26 | I mean there's all sorts of really kind
of cool stuff you can do with clip if you're
| | 05:29 | using it with absolutely positioned elements.
| | 05:30 | So I am going to go down to element1
and I am going to change our clip here.
| | 05:34 | I am going to change the top clip to 2 pixels.
| | 05:37 | Remember, that's 2 pixels down from
the top. And then I'm going to show you
| | 05:40 | different way to write this syntax.
| | 05:42 | Instead of using commas, I am just going
to use white space between them, so no
| | 05:45 | comma, but I do need a white space there.
| | 05:47 | The next thing I am going to do is
I am going to go ahead and give this
| | 05:50 | offset at 452 pixels. Now, why 452?
| | 05:55 | Remember, this is the right-hand offset.
| | 05:57 | That means it's going go all the way over
from the left edge to the right, 452 pixels.
| | 06:03 | Think about the width of our element.
450 pixels of width, with 4 pixels of
| | 06:09 | total border, so two on the left-hand
side, 2 on the right-hand side, so this is
| | 06:12 | going to clip off the two
that's on the right-hand side.
| | 06:14 | Now our bottom offset is going to be 200
pixels. Again, remember that the bottom
| | 06:20 | offset starts at the top of
the element and then comes down.
| | 06:23 | I am going to get rid of the comma,
make sure I have my white space, and then
| | 06:27 | the very last one, which is the left-
hand side, is also going to be just 2
| | 06:33 | pixels, because it's going to start at left-
hand side and go over 2 pixels and clip it.
| | 06:37 | Again, I've got to
remember the white space there.
| | 06:39 | Okay, so what's the
difference in the two syntaxes?
| | 06:42 | The first syntax we used had
commas; the second syntax does not.
| | 06:45 | Well, the first syntax, the one with
commas in it, that is the one that the W3C
| | 06:50 | specification says is the proper syntax.
| | 06:53 | The syntax you are seeing here is
the one that older versions of Internet
| | 06:56 | Explorer actually support.
| | 06:58 | Now because all the modern browsers
support this as well, just to be backwards
| | 07:02 | compatible, because back in the day,
Internet Explorer 8 and above now support
| | 07:07 | the standard syntax, but older versions
of IE, IE7 and 6, for example, in order
| | 07:12 | to get it to work, designers would use
this syntax. So all the other browsers,
| | 07:16 | like Chrome and Firefox and browsers
like that, said, okay, we will support that
| | 07:20 | too, whatever. So if you want to
support older versions of IE use this syntax.
| | 07:24 | If you want to use it in the standards-
compliant way, use the previous syntax.
| | 07:28 | So if I save this, go back out to the
browser, and refresh, you can see that it
| | 07:33 | is doing exactly what we wanted it to do, it's
clipping off just the border and nothing else.
| | 07:38 | Remember, this clip property works
for any element that is absolutely
| | 07:42 | positioned, and that means that any
element that's considered to be in the
| | 07:46 | absolute positioning model.
| | 07:48 | So if we go back to element1 and
change its position from absolute to fixed,
| | 07:53 | remember, fixed elements are also
considered to be part of the absolute
| | 07:57 | positioning positioning
model. That sounds weird to say.
| | 07:59 | But the absolute positioning model, if
I save that, and preview it again, yes,
| | 08:04 | it changes the position of that, but
again, the clip property is still working.
| | 08:08 | If I change the position relative,
the clip property wouldn't work.
| | 08:11 | Now I doubt that you are going to need
to use clipping very often, but it is
| | 08:14 | nice to know that you have yet
another way to control absolutely positioned
| | 08:18 | elements within your layouts.
| | Collapse this transcript |
| Controlling content overflow| 00:00 | We briefly came in contact with the
overflow property during the chapter on floats.
| | 00:05 | In this movie I want to discuss the
overflow property in a little bit more
| | 00:08 | detail and how it can help us when
dealing with positioned elements.
| | 00:13 | To do that, I have the overflow.htm
file opened up and if I look through the
| | 00:17 | code of this file, after a section
where we talk about the overflow property
| | 00:22 | a little bit, we have this section
with a class name of container and it has
| | 00:26 | a lot of text in it.
| | 00:28 | If I preview this in a browser, you
can see that right now the text is just
| | 00:33 | forming the height of the section itself,
so we don't have a defined height on
| | 00:37 | this section. So because of that, the
height is actually being determined by the
| | 00:40 | content, so there really isn't
any overflow going on at all.
| | 00:44 | Now this is typical for your elements.
If you don't declare a specific height,
| | 00:47 | for example, the contents of
the element forms the height.
| | 00:51 | Now I want to go right back up here
for just a minute and talk about the
| | 00:54 | different values of the overflow
property and what it can do for us.
| | 00:57 | First off, we have to understand what it
means for an element to be in overflow.
| | 01:02 | If you have an element that you have a
defined width and height on it and the
| | 01:06 | content no longer fits within that element,
| | 01:09 | it is considered to be overflow. Our
properties here, visible, hidden, scroll,
| | 01:16 | auto, and inherit, all describe what
should happen to the content of an element
| | 01:21 | where we have overflow.
| | 01:22 | Now visible basically says, okay, just
display anyway. Even though it's going to
| | 01:26 | overflow the content edge of the element,
it doesn't matter; the content still
| | 01:30 | needs to be visible.
| | 01:31 | Hidden is going to basically clip the
content so that any content that would
| | 01:35 | normally overflow it is not visible.
| | 01:38 | Scroll tells the browser to put
scrollbars on the element, and that way if you
| | 01:43 | do have overflow content, you
can scroll through the content.
| | 01:46 | It should be noted that scroll puts
scrollbars on the content whether it needs
| | 01:51 | it or not, which is where auto comes in.
| | 01:53 | Auto is your way of basically saying,
hey, give me scrollbars if I need them.
| | 01:57 | If I don't, then please don't.
| | 01:59 | Then inherit obviously says
whatever my parent element is doing.
| | 02:02 | So let's go back to our code and
trigger overflow so that we can see these
| | 02:05 | properties in action.
| | 02:06 | So I am going to go back into my code, I
am going to scroll up to my styles, and
| | 02:11 | where it says container here, I am
going to add a height to this. And I am just
| | 02:15 | going to give it a height of 300 pixels.
| | 02:17 | Now that is not nearly tall
enough to display this content.
| | 02:21 | So if I save this, go back into the
browser, and refresh the page, now if I
| | 02:27 | scroll down into the content, you can
see, the container no longer is able to
| | 02:31 | contain all the content--
| | 02:32 | it's only 300 pixels tall--and the content is
allowed to overflow outside the content width.
| | 02:38 | Okay, so you can see by looking at
this that visible is the default for
| | 02:43 | elements, so anytime overflow is
triggered, if that property is not set
| | 02:47 | explicitly, visible is
considered to be the value.
| | 02:51 | So if we go back into our code and we
go to the styles of container, if I
| | 02:55 | set overflow to visible and save it and
refresh the page, we don't see any difference.
| | 03:05 | Now on the other hand, if I change
that value to hidden, save it, and refresh
| | 03:11 | the page, you can see what
happens to our overflow content.
| | 03:15 | It's trimmed off, and notice that the page
is not even scrolling down that far anymore.
| | 03:19 | That content is gone and will
not affect content around it.
| | 03:22 | Of course, the downside is you
can't read that content anymore.
| | 03:26 | Even if I go down and highlight and
try to push it down, you can't see it.
| | 03:30 | It's totally hidden. It's clipped off.
| | 03:32 | Now if I go in and tell it to scroll, if I
save that and preview, you can see that
| | 03:40 | now over here on the right-hand side
of this element, and this element only,
| | 03:45 | I get scrollbars that allow me
to scroll through the content.
| | 03:48 | This is one of the coolest things
that we can do for positioned elements.
| | 03:51 | Let's say, for example, that you have
some type of a notice that you're going
| | 03:55 | to need to position using absolute positioning
and floating over other elements, or to the side.
| | 04:00 | You may not be able to have a
flexible height on that element. Perhaps you
| | 04:04 | need it to be a specific size. But
you're not 100% sure how much content is
| | 04:08 | going to go inside of it.
| | 04:09 | Well, now the overflow property allows
me to go ahead and put scrollbars on the
| | 04:13 | element if I need it, and that way
the users can still read through all the
| | 04:16 | content, even though it's restricted in size.
| | 04:19 | Now of course, there is a big
difference between scroll and auto, and if I go
| | 04:23 | back into the CSS, if I choose auto,
notice that if I refreshed my page right now,
| | 04:30 | we don't really see any change.
| | 04:32 | We see a slight change, but
really, scrollbars are still there.
| | 04:35 | However, if I go and get rid of the
height property, save that, and test it,
| | 04:41 | notice that the scrollbars go away.
| | 04:43 | They are no longer necessary, because
the content is no longer overflowing.
| | 04:47 | Of course, if you had scroll
instead of auto, notice that you get the
| | 04:54 | scrollbars, whether you need them or not.
| | 04:56 | So that sort of negatively impacts my element.
| | 04:59 | So if you're not 100% certain whether
you're going to need the scrollbars or
| | 05:04 | not, then just go ahead and use auto.
| | 05:06 | Just be aware of the fact that adding
the scrollbars is going to impact the
| | 05:10 | width of the element slightly, so if
you are sort of planning for whether
| | 05:13 | the scrollbars are going to be there
or not, you need to account for them
| | 05:16 | within your layout.
| | 05:18 | So I think you can see pretty quickly
here how handy the overflow property is
| | 05:22 | when creating layouts,
especially for positioned elements.
| | 05:25 | In some layouts, position elements
will be restricted to specific widths and
| | 05:29 | heights, and by using the overflow
property, you can control exactly how the
| | 05:34 | browser displays any content that
doesn't fit within those regions.
| | Collapse this transcript |
| Positioning elements: Lab| 00:00 | Controlling positioning is an
incredibly important part of CSS layouts, but
| | 00:05 | perhaps not in the way that all
new web designers think. Rather than
| | 00:09 | controlling the bulk of the page
layout, positioning is typically used to
| | 00:13 | control specific elements within it or
to build complex interface components
| | 00:17 | that other positioning methods
really aren't well suited for.
| | 00:20 | With that in mind, in this lab we are
going to be focusing on tweaking a couple
| | 00:24 | of areas on our desolved.org layout.
| | 00:27 | Go ahead and go into the 04_07 directory,
open up the index.htm file from that,
| | 00:34 | and go inside the _css
folder and open up main.css.
| | 00:37 | Those are the files that we
are going to be working on.
| | 00:40 | So I only have two things in
this lab that I need you to do.
| | 00:43 | But before you go, oh wow, only two things,
| | 00:45 | this is going to be a really quick lab,
| | 00:47 | there are two things that are going to
take a little bit of time on your part to
| | 00:50 | think through and decide exactly
how you want to solve the problems.
| | 00:53 | So it may take a while, even
though there are only two tasks.
| | 00:56 | So before we get into the specifics of
them, I am going to switch over to my
| | 01:00 | browser, and I'm going to look at the
page as it is now and then compare that to
| | 01:04 | the finished version.
| | 01:06 | So currently right now, if I scroll down
a little bit, our banner does not look
| | 01:10 | the way that it should.
| | 01:11 | This paragraph which should be over
here on the right-hand side is down below
| | 01:16 | the banner, overlapping it in a weird way.
| | 01:18 | So this is what it should look like.
| | 01:20 | If I go over to desolve.org, in this layout you
can see the paragraph is over on this hand side.
| | 01:25 | It's overlaying the image, the height
matches, and it's in a place where it
| | 01:30 | lines up with the column below it.
| | 01:31 | So that's one thing that
you're going to need to take care of.
| | 01:34 | The second thing, some of you
have probably already noticed it.
| | 01:37 | Look at this little bird
over here, isn't that cool?
| | 01:40 | As I scroll through the page, the bird
stays right there, and of course, that
| | 01:44 | is a link which allows people to follow
me on Twitter. So if you want to follow
| | 01:48 | me on Twitter at jameswillweb, you can
simply click that link and follow me on Twitter.
| | 01:52 | It's fun stuff. But it's right down there in
position, and you will notice that always stays in
| | 01:56 | exactly the same place.
| | 01:58 | In the current version of the layout,
if I go all the way down to the footer,
| | 02:01 | the bird is right there, so
we need to move that as well.
| | 02:05 | So going into the
specifics of what we need to do,
| | 02:07 | let's go into the main.css and at the
very top of the style sheet, I have got
| | 02:12 | the Lab steps here for you.
| | 02:13 | So the first step, in the banner
styles section, which is around line 276,
| | 02:18 | you need to modify the styles for the
banner and banner paragraph so that its height
| | 02:23 | now that will be the height of the
paragraph, matches the banner, and its width
| | 02:27 | matches that of the aside column, so you
are going to need to look at those styles
| | 02:30 | and figure out exactly how wide that is.
| | 02:32 | Now remember to take their current
padding into account when you are trying
| | 02:36 | to match up widths.
| | 02:37 | Then use positioning to line up the
paragraph with the right edge of the banner
| | 02:42 | so that it appears to line up
with the aside column below it.
| | 02:46 | Finally, ensure that the content is
not allowed to flow outside of the banner
| | 02:49 | div tags. So there is a couple
of things we need to do here.
| | 02:52 | It might be second nature to you
after the floats chapter to look at the
| | 02:56 | finished version of this and say to
yourself, well, I'll just float this over here.
| | 03:01 | But in this case, instead of floating,
positioning is a little bit better suited
| | 03:04 | for this task, and I want you
to tackle it using positioning.
| | 03:07 | Now the second task for you is to go down
to the footer, locating the Twitter link.
| | 03:11 | Now using the class attribute, write a
selector at around line 691. So you are
| | 03:16 | going to have to go into the HTML code,
locate the Twitter link, and look at
| | 03:20 | the class attribute.
| | 03:21 | So using that, you are going to write a
selector that fixes the position of the
| | 03:24 | Twitter icon to always be 20% away from
the bottom edge of the screen, and snug
| | 03:30 | up against the left edge of the screen.
| | 03:32 | Now, okay, so yeah, that's only two things,
but trust me, you've got a lot to think about.
| | 03:38 | Now determining how to size and
positioning the banner paragraph may take a
| | 03:42 | little while, and if you are having
trouble with it, don't get frustrated.
| | 03:45 | Just keep trying and feel free to
sneak a peak at the finished files if you
| | 03:49 | need a little help.
| | 03:50 | And once you are finished, be sure to
check out the solutions movie so that
| | 03:54 | you can compare your code to mine and
hear me discuss the solution in a little
| | 03:58 | bit more detail.
| | Collapse this transcript |
| Positioning elements: Solution| 00:00 | Hopefully, you were able to complete
the positioning elements lab without too
| | 00:04 | much trouble, and without getting too mad at me.
| | 00:06 | Now, if you did get stuck, don't feel bad.
| | 00:09 | It takes a while to fully
understand how positioning works.
| | 00:12 | So let's take a look at the finished
files and how I coded those elements.
| | 00:16 | So again, I have the
index.htm and the main.css files open.
| | 00:20 | Now, this time I went into the 04_07
folder and into the finished_file folder,
| | 00:24 | so I'm opening from there.
| | 00:27 | For the banner, I'm going to scroll down
to about line 270 or so, and we go there.
| | 00:34 | There is my banner style. And again,
I'm previewing this in the browser, so we
| | 00:38 | can sort of visualize kind of
the solution that's happening here.
| | 00:41 | Okay, now the banner paragraph is
the one that I'm having to position.
| | 00:45 | Now, I had to go ahead and take in
the account of the padding of this when I
| | 00:48 | set the width and the height values.
| | 00:49 | So, taking the padding into account,
I've set a height value that's equal to the
| | 00:55 | height of the banner above it, and
then I set the width value that again, along
| | 00:59 | with the padding, gave it the
same width as the aside below it.
| | 01:02 | Now, in terms of positioning it, I'm
using absolute positioning and I'm giving
| | 01:07 | it a top and a right offset of 0 and 0.
| | 01:10 | So, rather than trying to figure out
exactly where the left or top-left offset
| | 01:15 | would be, I just went ahead and gave it
a top-right offset and what that's going
| | 01:19 | to do is it's going to align the top
right-hand edge of this paragraph up with
| | 01:24 | the top right-hand edge of the banner,
and then if the width is correct, then
| | 01:29 | the position is going to be correct.
| | 01:30 | Now, the next thing I needed to
remember to do was to go up to banner and set
| | 01:35 | its position to relative, and that is
a step that a lot of people may have
| | 01:38 | skipped or may have forgotten about.
| | 01:41 | Remember, if you don't set the
containing element's position to relative, what
| | 01:45 | an absolutely positional element does
is it positions itself relative to the
| | 01:49 | nearest positioned ancestor. And in case of
this file, it would probably be the HTML element.
| | 01:54 | I also went ahead and set the overflow
on banner to hidden so that if there was
| | 01:59 | any overflow content it'd
go ahead and trim that off.
| | 02:02 | It is worth pointing out and noting that
since banner p, the paragraph itself, is
| | 02:06 | absolutely positioned it's still kind
of above and outside of the banner. It's just
| | 02:11 | using it as a point of origin.
| | 02:12 | So, if I expanded the size of the
banner paragraph or made it bigger, that
| | 02:17 | overflow property is not
going to affect it at all.
| | 02:19 | So, it's more to make sure that other
content within the banner doesn't flow
| | 02:22 | outside of it, not so much the banner paragraph.
| | 02:25 | Now, I'm going to scroll all the way
down towards the bottom of my styles, to
| | 02:28 | about line 691 or so, and I'm going to take
a look at the twitter selector that I wrote.
| | 02:35 | So, this one was actually pretty
simple once you got down to it.
| | 02:38 | We're just going to set position to fixed.
| | 02:40 | We know that that sets its position
relative to the viewport and not any
| | 02:44 | other containing elements. And then I set
the top value to 80% and the left value to 0.
| | 02:50 | Now, I'm sure that some of you
went ahead and set the bottom to 20%.
| | 02:54 | That's very similar to setting the top to
80%, but essentially, it's not exactly the same.
| | 02:59 | That's based of where the offset is.
| | 03:01 | Remember, the bottom offset would set
the bottom of the element to 20%, whereas
| | 03:07 | the top 80% is lining the
top of it with 20% as well.
| | 03:11 | So, there're a couple of ways that you
could've approached it and gotten the same results.
| | 03:15 | In the end, as long as you're happy
with it, it doesn't really matter if your
| | 03:18 | code matches mine or not.
| | 03:19 | So, again, if I look at this in the
browser, there's the twitter icon,
| | 03:23 | scrolling down the page.
| | 03:25 | Because it's positioned-
fixed, it remains in place.
| | 03:28 | So again, remember, there's always more
than one way to accomplish something in CSS.
| | 03:32 | So if your styles didn't exactly match
mine, it's not a problem, as long as they
| | 03:36 | still work and you got the desired results.
| | 03:38 | However, if our styles are different,
take a moment, examine the rules, and
| | 03:42 | think about which method is more
efficient, easier to update, and maybe easier to
| | 03:47 | maintain over the long run. As always,
those should be very important goals for
| | 03:51 | your sites.
| | Collapse this transcript |
|
|
5. Building Fixed LayoutsDesign considerations for fixed layouts| 00:00 | In this chapter, we're going to focus on
building fixed layouts, and we've worked
| | 00:04 | with fixed layouts already, and for
the most part we've discussed all the
| | 00:08 | concepts that you need to
know in order to create them.
| | 00:10 | So our focus here will be on defining
exactly what a fixed layout is, and on
| | 00:15 | the issues that you're going to need to
consider when you're thinking about using them.
| | 00:19 | So fixed layouts are layouts that are
set to an overall fixed size that doesn't
| | 00:25 | react to changes like browsers being
resized or device-orientation changes.
| | 00:30 | In fact, in their pure form, fixed
layouts really don't care about things
| | 00:34 | like the width of the browser window,
what device they are on, or how the
| | 00:38 | site is being viewed.
| | 00:40 | Most fixed-width layouts start with an
overall width value that's applied to the
| | 00:44 | body tag or to a wrapper element
that surrounds the site's content.
| | 00:49 | The side is then centered or
aligned based on personal preference.
| | 00:53 | Interior spacing is then defined for
container elements at values that divide up
| | 00:58 | the available space.
| | 00:59 | Element spacing is typically
controlled through the use of margins or padding,
| | 01:03 | and the resulting values will
typically add up to the overall defined width.
| | 01:08 | Most fixed-width sites are designed
with the desktop in mind. As such, the
| | 01:13 | average target size has
increased over the years.
| | 01:16 | Now, originally designers targeted
640x480 monitors, which increased to
| | 01:21 | 1024x768, and has currently grown
to occasionally targeting 1280x960.
| | 01:28 | Regardless of which size you're
targeting, most designers set the width to a
| | 01:33 | value slightly smaller than the target
size to allow for things like browser
| | 01:37 | chrome or maybe floating
browser windows that aren't maximized.
| | 01:41 | Many layouts currently target around 960
pixels, which would still be visible on
| | 01:46 | the 1024x768 monitor.
| | 01:49 | Now, like any technique, there are
pros and cons to using fixed layouts.
| | 01:53 | Fixed layouts tend to be easier to
create and require less code than
| | 01:57 | other layout types.
| | 01:59 | You're only targeting one size, so
you have less to consider when designing
| | 02:02 | and writing the layout.
| | 02:04 | You also have a greater amount of
control over the visual aspect of your design.
| | 02:08 | Since elements are fixed in place, it's
a little easier to create pixel-precise
| | 02:13 | layouts that look exactly
the way that you want them to.
| | 02:16 | Because they don't change, they also
provide a consistent look and feel for the user.
| | 02:20 | There are of course some
downsides to using fixed layouts.
| | 02:24 | Their very nature means that they
don't adapt to other devices or smaller
| | 02:29 | browser windows, meaning that users
sometimes have a less-than-optimal experience,
| | 02:34 | due to increased scrolling
or content being cut off.
| | 02:38 | On larger monitors, smaller fixed
layouts can look lost, with large amounts of
| | 02:43 | empty space surrounding the layout.
| | 02:45 | They are also tied to the very rigid nature.
| | 02:48 | An element-spacing problem that might
even go undetected on a flexible layout
| | 02:53 | could potentially break a fixed layout,
meaning that small changes to layouts
| | 02:57 | have to be very thoroughly tested.
| | 02:59 | Now, as a designer, you should keep all
these points in mind when deciding on
| | 03:03 | whether to use a fixed layout or not.
| | 03:05 | The recent explosion of mobile devices
means that fixed layouts to some degree
| | 03:09 | ignore a significant part of
a site's potential user base.
| | 03:13 | Later on, we're going to explore
creating flexible layouts that change when
| | 03:17 | resized and responsive layouts that
change based on factors such as screen size,
| | 03:21 | orientation, and resolution.
| | 03:23 | For now, let's take a closer
look at building fixed layouts.
| | Collapse this transcript |
| Establishing the layout grid| 00:00 | Because the planning stage of the
design process is so critical to a site's
| | 00:04 | success, I want to take a few movies
to walk through my typical workflow.
| | 00:08 | I want to start by illustrating the
use of grids for planning layouts.
| | 00:12 | Although I use a grid as
the basis of all my layouts,
| | 00:15 | fixed layouts lend themselves
particularly well to grid-based designs.
| | 00:20 | If you're already a graphic designer,
I'm betting that you're pretty familiar
| | 00:23 | designing around a grid; and if you
are not, I think you'll soon see the
| | 00:27 | advantages that grids give
you when creating layouts.
| | 00:30 | So I am going to be working with this
file fixed_planning.ai, and here I am
| | 00:35 | again, of course, in Illustrator.
| | 00:37 | Now, I have saved the finished
version of this file in the Assets folder,
| | 00:42 | which is a located directly in the exercise
files folder, and if you want, you can open it up.
| | 00:46 | And of course you are going to open
up the finished version of what we are
| | 00:48 | going to be doing here.
| | 00:49 | Actually, what I would most encourage
you to do is to just grab a scrap piece of
| | 00:53 | paper, a scrapbook, some graph paper,
or something like that, because if I was
| | 00:58 | doing this on my own and not filming
it for this particular lesson, that's
| | 01:02 | exactly what I would be doing.
| | 01:03 | I'd have my sketchbook opened up.
| | 01:04 | I would have a piece of graph paper or
something like that, and that's what I
| | 01:07 | would be using to do this planning
session that we are about to go over.
| | 01:11 | However, because I am filming it here
as part of the title, I can't really
| | 01:15 | show my sketchbook.
| | 01:16 | It wouldn't film very well, and I'll be
quite honest with you, nobody is going to
| | 01:20 | be able to read my writing,
| | 01:22 | so I am just going to use Illustrator.
| | 01:24 | You do not have to do it with me, but
if you're very comfortable in Illustrator
| | 01:27 | or another layout program,
feel free to use that instead.
| | 01:30 | But I am a big fan of sketching
these things out beforehand, actually.
| | 01:34 | We are going to go through all these
different steps that I use to plan layouts,
| | 01:38 | and I just want to mention that even
though we are planning a fixed layout, most
| | 01:42 | of these steps are the same for
whatever type of layout I am doing.
| | 01:45 | Some of them are specific to fixed
layouts, because that's our focus this
| | 01:48 | chapter, but really this workflow process
is what I used for almost all of my layouts.
| | 01:53 | The first thing that you do with a fixed
layout is you define the target resolution.
| | 01:58 | That's job number one.
| | 02:00 | Now, monitor sizes are trending
upward a little bit, but we need to
| | 02:04 | target something that's pretty much the most
likely resolution for your target audience.
| | 02:09 | For the most part, the average
monitor size out there is 1024.
| | 02:12 | Now 1280 is certainly a resolution
that's gained in popularity, and there are a
| | 02:17 | lot of people out there using them, but
so many people are still using 1024x768,
| | 02:21 | that's the resolution size or the
target resolution that I'm going to choose.
| | 02:26 | You don't want to make your layout
exactly 1024, because you got the browser
| | 02:30 | chrome, such as the scrollbars or
toolbars. What if somebody is browsing with a
| | 02:34 | window that's only half open?
| | 02:36 | So my target resolution for this
particular layout is going to be 960 pixels.
| | 02:41 | That's what I am going to target.
| | 02:41 | It's a little bit smaller than 1024,
but it's not altogether going to look lost
| | 02:46 | in a 1280-layout either.
| | 02:49 | Now you may or may not
have seen that 960 resolution.
| | 02:53 | It's very, very popular with web sites,
especially fixed sites, and there is a reason for that.
| | 02:58 | There is a method behind why
some people choose this size.
| | 03:02 | 960 is divisible by a lot of
numbers. Just to give you an idea,
| | 03:07 | 1, 2, 3, 4, 5, 6, 8, 10, 12 15, 16,
20, 24, 30, 32. You get the idea.
| | 03:15 | It just keeps going.
| | 03:16 | There are a lot of numbers that will
divide into 960, and what that allows you
| | 03:20 | to do is when you're creating a grid
like we are going to be creating in just a
| | 03:23 | moment, it allows you to create a grid that
gives you a lot of flexible column creation.
| | 03:28 | You can have 12 columns, 16 columns, 30
columns, 6 columns, however you want to
| | 03:33 | do it, and still divide it by 960,
| | 03:36 | so that is another reason why that is
such a popular target resolution for layouts.
| | 03:41 | So what I am going to do is I am
just going to go over here and grab a
| | 03:43 | rectangle and I am just going to draw
a box that is 960 pixels by 1200 pixels.
| | 03:51 | I am just going to click OK.
| | 03:53 | There's my box. And I am just going to move
this so that it's on the artboard. All right!
| | 04:00 | So that's sort of the predefined space,
if you will, and I will line it up in
| | 04:03 | just a moment when I get my grid, but
that's more or less sort of the predefined
| | 04:06 | space that I am going to be designing
inside of as I begin to do my layout.
| | 04:11 | The next thing that I want to do is I
want to define the base unit for my grid.
| | 04:15 | As I mentioned before, all the layouts I
do I design on a grid, and that really
| | 04:20 | helps create very coherent
compositions, so that everything sort of relate to
| | 04:24 | each other and everything has a place
to line up that is based on a similar
| | 04:28 | unit of measurement.
| | 04:29 | That base unit that you are going to
use for your grid is going to very widely
| | 04:33 | based on what you are trying to do.
| | 04:35 | One of the things I would recommend
doing is doing a number that your target
| | 04:38 | resolution is divisible by.
| | 04:40 | So that's one of the things
that I would recommend doing.
| | 04:42 | The other thing is it should have
some meaning for content within the page.
| | 04:47 | Let me give you an example.
| | 04:48 | If I was doing a photo gallery, for
example, the thumbnail size might be a
| | 04:53 | really good place to start when I am
talking about defining a base unit for my
| | 04:57 | grid, or something that's going to
be divisible into my thumbnail sizes.
| | 05:01 | An image, it could be really anything you want.
| | 05:03 | Now the page that we are going to be
sort of crafting over the course of this
| | 05:07 | chapter is very text heavy,
| | 05:09 | so basing a layout off of your
default text unit is not a bad idea.
| | 05:14 | So what I am going to do is, my base unit for
my grid in this case is going to be 16 pixels.
| | 05:21 | That's the default font size for
almost every browser out of the box.
| | 05:25 | Now users can certainly change it, but
you are never going to get to a situation
| | 05:30 | where you craft a layout for
people online that they can't change in some
| | 05:34 | way through their browser, whether
zooming up on it or changing the text size or
| | 05:38 | telling images not to display.
| | 05:39 | They have got all sorts of
control over your layout.
| | 05:42 | So what I am doing is I am basically
establishing a baseline for my layout. The
| | 05:46 | base unit for it is going to be 16 pixels.
| | 05:48 | I will say I'm a glutton for punishment
here because most examples I see of the
| | 05:52 | people that are doing tutorials like this,
| | 05:54 | they will define a grid that's based
off of ten pixels because the math is
| | 05:57 | whole lot easier to do.
| | 05:59 | But I want this to be a very real-world
example, and I frequently create grids
| | 06:03 | that are based off of 16 pixels,
especially for layouts that are going to be
| | 06:07 | very text heavy, because
that's essentially the size of 1em.
| | 06:10 | So later on, when I am writing my
styles and I make something 1em, I know it
| | 06:14 | corresponds to the layout grid that I am using.
| | 06:16 | So there is a rationale behind
picking a weird number like 16.
| | 06:19 | So I am going to go up and
look at my Preferences here.
| | 06:23 | I want to show you something about Illustrator.
| | 06:25 | One of the nice things you can do is go
ahead and define a grid, and I am going
| | 06:28 | to put a gridline every 80 pixels,
and I am going to subdivide that by 5.
| | 06:32 | So of course, 16 goes in 80 5 times, is
going to give me a gridline every 16
| | 06:36 | pixels, but more importantly, by
putting a grid line at every 80 pixels, that's
| | 06:40 | going to give me a total of 12
columns within my 960 pixels.
| | 06:45 | So essentially, I am going to have 12
columns that I can use to arrange all the
| | 06:49 | elements on my page in my layout.
| | 06:52 | Now, why 12 columns?
| | 06:53 | It's kind of just an
arbitrary number that I picked.
| | 06:55 | I could do 16. I could do anything
that's divisible by 960, but 12 gives me a
| | 07:00 | nice sort of even number to work from.
| | 07:02 | So I am going to click OK.
| | 07:03 | I am going to turn on the
visibility of my grid, and there is my grid.
| | 07:06 | Now I am going to take this box that I
created. I am going to sort of reposition
| | 07:10 | that, so that it's lined
up to the grid here, okay.
| | 07:14 | So I am just going to save my file.
| | 07:15 | Now, if you were sketching this out,
obviously graph paper would come in really
| | 07:18 | handy here, but you don't
need to have that defined grid.
| | 07:21 | You don't have to draw that grid on your page.
| | 07:23 | You know, I typically will just do a box,
draw a little box on a piece of paper,
| | 07:27 | and then just write little notes to
myself inside, 16 pixels, and then I'll make
| | 07:31 | sure that everything that I am doing
is divisible by those numbers so that I
| | 07:35 | come out with a layout that's
still based off of this grid.
| | 07:38 | So now we know which resolution we are
targeting, we know what our base unit of
| | 07:42 | our grid is going to be, and we know
how many columns we are going to be using
| | 07:45 | within our grid, and that's 12 columns.
| | 07:47 | So next up, we are going to need to
finalize our layout planning by defining
| | 07:51 | column spacing and then calculating our
element dimensions, and we are going to
| | 07:55 | do that in our next movie.
| | Collapse this transcript |
| Defining column spacing| 00:00 | In the previous movie, we began
the process of planning a sample
| | 00:03 | two-column fixed layout.
| | 00:05 | We established the target
resolution, we decided which unit we were going
| | 00:10 | to base the grid off of,
and we defined our grid.
| | 00:13 | So in this movie, we are going to
complete that process by using the layout grid
| | 00:17 | to determine how to space our columns
and then calculate the element dimensions
| | 00:22 | we will need for our CSS.
| | 00:24 | So I am just going to keep
working in the fixed_planning.ai.
| | 00:27 | In the previous movie, if you opened
up a layout program and worked with
| | 00:31 | that, then you can just continue
doing that. And if you grabbed a piece of
| | 00:34 | sketch paper and you are sketching it out on
that, then that's awesome. Just keep doing that.
| | 00:38 | The first thing I want to
focus on is the main column.
| | 00:41 | Now I have already mentioned how this
layout is going to be text heavy, so that
| | 00:44 | means that wherever the body copy
or the main text is, that's the most
| | 00:48 | important content region on the page,
and that is where I typically like to
| | 00:51 | start with my layout.
| | 00:53 | I am going to bring up
something that as an art major
| | 00:56 | I tried to avoid for years and years and years,
| | 00:58 | so just give me a moment.
Yes, there it is; the calculator.
| | 01:02 | As an art major, I try to stay as far
away from math as possible, but it finally
| | 01:06 | caught up to me again.
| | 01:08 | So in terms of spacing columns, we
really have to think about readability.
| | 01:13 | One of the things that you learn if
you study typography is that the ideal
| | 01:17 | column width for readability
is about 66 characters wide.
| | 01:22 | So if you can make a column that's
around 66 characters, that's really the
| | 01:26 | sweet spot, somewhere around in there.
| | 01:28 | Now a character is typically
one half of an em, so 0.5 ems.
| | 01:33 | So if our base unit is 16 pixels, that
would be the default size of our text,
| | 01:37 | I am going to use 8,
| | 01:39 | I will multiply that by
66, and that gives me 528.
| | 01:45 | So that is the initial target for my
main column, which is going to be on the
| | 01:49 | left-hand side, for our
particular layout, 528 pixels.
| | 01:53 | So I am going to go back into my
layout program, and I've sort of done myself
| | 01:57 | a little favor here.
| | 01:58 | I have given myself some
starter blocks to work with.
| | 02:01 | That's the magic of editing;
| | 02:03 | it's sort of like owning your own cooking show.
| | 02:05 | You can just put something in the
oven and you are ready to go with it.
| | 02:07 | So here is my first initial containing
block, and I am just going to go ahead
| | 02:12 | and make that 528 pixels wide, and I
will just make it 1200 pixels tall to
| | 02:18 | match the rest of our layout.
| | 02:20 | So let me get control over this thing.
| | 02:22 | I am going to line it up right here
with our layout grid, and you can see it
| | 02:26 | just sort of lines up.
| | 02:27 | The thing that I have to think about
here is, remember, when we set up our grid,
| | 02:31 | we're basing this off of a 12-column layout.
| | 02:35 | So you can see these heavy gridlines
right here are those columns, and there are
| | 02:39 | 12 of them over the course of my layout.
| | 02:42 | That means that my content regions
really need to line up with those columns.
| | 02:47 | So what I want to do here then is grab
this and just move it out until it lines
| | 02:53 | up with the nearest column, in this
case which is right here, and if I'm
| | 02:57 | counting that, that's 1, 2,
3, 4, 5, 6, 7 columns.
| | 03:02 | If you are thinking to yourself,
"Oh, but James, you had it perfect.
| | 03:05 | It was going to be 66 characters long."
| | 03:07 | Remember, number one,
that's just an approximation.
| | 03:10 | If you get close to that, that's fine.
| | 03:12 | That's kind of a starting point for us.
| | 03:14 | We have to have everything that we are doing
based off of the grid that we are building,
| | 03:17 | so it's okay.
| | 03:18 | Plus, the other thing to remember is
that there is going to be some padding
| | 03:21 | inside this and there'll also be
some margins between the two columns,
| | 03:24 | so this isn't exactly the width of the content;
| | 03:27 | this is the width of the column, and
those are not always the same thing.
| | 03:31 | Now what's really nice about this is
since we are doing a two-column layout, the
| | 03:35 | other column is already defined for us now.
| | 03:37 | So I am just going to take little guy and
move him over and then once that's lined up--
| | 03:44 | let's go ahead and move this over
as well to line that up--
| | 03:46 | now just so I can keep who is who
straight, I am going to go ahead and grab that
| | 03:51 | color, so that I have two
different color columns.
| | 03:54 | So this is the very
beginning of our two-column layout.
| | 03:57 | We have one region that's based off of
seven columns of our layout and we have
| | 04:01 | another region on the right-
hand side that's based off of five.
| | 04:04 | Oddly enough--and I promise you
I did not plan this, this way;
| | 04:06 | it's just kind of worked
out when I was doing this.
| | 04:08 | I was like, huh, the 7:5 ratio is
actually part of the golden mean.
| | 04:13 | So if you are familiar with the golden
mean as a ratio, 7:5 works out to that.
| | 04:18 | So it should make a very pleasing
layout once we are finished with this.
| | 04:22 | Once I have sort of these regions
blocked out, now I need to think about what is
| | 04:25 | the actual width of these going to be?
| | 04:28 | So if I click on this particular
column, I can see that that column is 560
| | 04:32 | pixels wide, which means of course
that this one is 400 pixels wide.
| | 04:37 | So I am just going to grab this text.
| | 04:39 | I would normally make notes in
my sketchbook, but here we are.
| | 04:42 | So I am going to go 560 overall for this
particular column and then this one of
| | 04:49 | course is going to be 400.
| | 04:50 | That's going to give us the overall
container block width for these elements,
| | 04:55 | but the container block width and the
content width is not the same when you're
| | 04:58 | talking about CSS, because we need to
start factoring in spacing, such as padding
| | 05:03 | and margin and things like that.
| | 05:04 | So I am going to work with padding now, and
I'm going to grab this little block right here--
| | 05:10 | yellow is a good color for padding--and
I am just going to move this out right
| | 05:14 | here and start working with that.
| | 05:16 | Again, I want my padding
to be based off of my grid.
| | 05:19 | A single gridline is 16 pixels, so I
could use that for padding, but in the
| | 05:23 | layout like this, 16 pixels is
going to be really close to the edge.
| | 05:26 | You are talking about, like, 1em.
| | 05:28 | So I am going to go out to the very
next gridline, and that gives me 32 pixels,
| | 05:32 | and that's what I am
going to use for my padding.
| | 05:34 | So I am just going to change the height
of this to 1200 to match everybody else,
| | 05:38 | and that's going to shoot
it way up there obviously.
| | 05:39 | And then I am going to take it and align with
the upper right-hand corner right there.
| | 05:44 | Now I want the same padding on both sides,
| | 05:46 | so I am going to place that over there,
and then I have to think about the
| | 05:50 | spacing in between these columns.
How are these guys going to be spaced?
| | 05:54 | I really like having a gutter that
equals the padding on both sides,
| | 05:58 | so I am going to grab
this and then copy it over.
| | 06:01 | Now, do I want 32 pixels between them,
do I want the spacing on this side?
| | 06:07 | Actually, in this case, what I am going to
do is I am going to split the difference.
| | 06:09 | I want to put 16 on one side and I
am going to put 16 on the other side.
| | 06:14 | What that's going to do for me is it's
going to keep that sort of ratio, that
| | 06:17 | nice 7:5 ratio that I have got here going on,
and not skew it towards one side or the other.
| | 06:23 | So now I have padding on this side,
padding on this side, and then the gutter
| | 06:27 | between the two of them, which
can be controlled through margins,
| | 06:30 | it can be controlled through padding,
or it can just be controlled through
| | 06:33 | setting the element widths and
floating one to the left and one to the right,
| | 06:35 | just like we did in the last chapter.
| | 06:37 | But what I need to do now and what I
will need to know for my CSS is okay, what
| | 06:42 | is this going to do to
the overall content widths?
| | 06:44 | So if I grab these measurements, I am
just going to come down here and say,
| | 06:48 | okay, this is 32, this is 32, and that's 32.
| | 06:55 | Now the rest of these obviously have
to add up to 960 pixels, and we sort of
| | 07:00 | have this overall width.
| | 07:01 | So this 560, I would subtract 32 from
it on this side, and I would subtract 16
| | 07:07 | for this amount of spacing right here.
| | 07:09 | So, if I bring this down, that's going to
give me a total width right here of 512 pixels.
| | 07:17 | I will do the same thing right over here.
| | 07:21 | I have got 400 pixels, and I'm going to
have to subtract 48 pixels from that, so
| | 07:28 | that's going to give me a
total width here of 352.
| | 07:33 | Again, I am not great at
math, but 352 pixels wide.
| | 07:38 | So in essence, what we are doing
right now is we're writing our CSS.
| | 07:42 | We know we have a column on the left-
hand side, we know we have a column on the
| | 07:45 | right-hand side, we know the padding
values of those columns on the left and
| | 07:50 | right side of the respective columns,
we know the width of the columns, and we
| | 07:53 | know how much spacing we
need between the two of them.
| | 07:57 | Now if I wanted to, I could go ahead
and throw some headers and footers in here
| | 08:00 | and just as part of the exercise here,
| | 08:03 | if I were to do that, I would want
that header based off of the grid.
| | 08:07 | So if I draw a header here and then
let's just make it a little bit more
| | 08:11 | palatable by making a little lighter,
I would need to think about how tall I
| | 08:16 | want this header to be. And because I
have this snapping to the grid, I can just
| | 08:20 | say okay, along which gridline do I
think it's going to be appropriate for my
| | 08:24 | header? And a lot of that of course
is going to be what's up there.
| | 08:27 | In this case, I am just going to go
ahead and create a header of 128 pixels.
| | 08:31 | Notice it's still based on that grid
line and now for my header, at least I know
| | 08:35 | what the height of the header is going
to be, and the height of the header here
| | 08:38 | is going to be 128 pixels.
| | 08:40 | So I'm fond of saying, and you have
heard me say this throughout the title,
| | 08:44 | that a lot of times
| | 08:45 | I know what my CSS is going to be
before I ever open up my code editor, and I
| | 08:50 | hope this gives you some idea as to
kind of what I am talking about with that.
| | 08:53 | I know that I am going to have a header,
I know that I am going to have a left
| | 08:56 | column and a right column, I know how
tall the header is going to need to be, I
| | 09:00 | know the amount of padding that's
going to be on either column, and I know the
| | 09:03 | amount of space that I
want between the two of them.
| | 09:05 | So that gives us a fantastic starting
point for our fixed-width two-column layout.
| | 09:11 | Now I am betting that based on
everything we have covered up to this point,
| | 09:14 | you probably have a pretty good idea of
what our initial HTML structure of the
| | 09:18 | file is going to look like, and what the
initial styles are going to be as well,
| | 09:22 | and we are going to test that out in
our next movie as we write the styles for
| | 09:26 | our layout based on the
grid that we've just created.
| | Collapse this transcript |
| Applying the grid through CSS| 00:00 | Now that we've gotten the hard part out
of the way--and trust me, the planning
| | 00:05 | is definitely the hard part--
| | 00:07 | it's time to apply our
grid to our layout using CSS.
| | 00:11 | While we'll be using techniques like
floats that we've already covered in
| | 00:14 | previous chapters, we're going to
see how our planning really pays off in
| | 00:19 | making our CSS easier to write and how our
typographic styles will tie in to our layout.
| | 00:25 | So I've got the grid.htm file open here,
and you can find that in the 05_04 directory.
| | 00:33 | And there's just a couple of things
that I need to do right off the bat.
| | 00:36 | One is just sort of give you an
overview of the structure of the page.
| | 00:39 | If I scroll down past the styles here,
you can see that we have a header,
| | 00:45 | followed by a section with a class of col1.
| | 00:48 | That has a lot of text in it. And as I
mentioned before, this layout is very text focused.
| | 00:53 | After that we have an aside with a class of
col2, and at the very bottom we have a footer.
| | 00:58 | So basic structure.
| | 00:59 | And of course if I previewed the page
in the browser right now, you can see
| | 01:03 | design-wise, it is no great shakes, but
the structure is there, and we know the
| | 01:07 | CSS that we need to write for this. Okay.
| | 01:09 | I am going to scroll back up into my
styles, and I've got on about line 28 here
| | 01:15 | a little comment that says layout, and
we are going to write the layout styles
| | 01:18 | directly underneath that.
| | 01:19 | Before we do that, we're going to
modify the body tag, because remember, step
| | 01:23 | number 1 in our planning process was to
define a target resolution for our page
| | 01:28 | and then come up with a value for that.
| | 01:31 | So in the body selector what I am going
to do is I am going to assign a width to
| | 01:35 | the page of 960 pixels.
| | 01:38 | Remember, that's our target size.
| | 01:40 | And then below that I am going to go
ahead and center this content on the page.
| | 01:45 | I am going to give it a margin of 0 for
top, auto for left and right, and 2ems
| | 01:50 | of margin on the bottom.
| | 01:51 | Now, the only reason I am doing 2ems on
the bottom is I kind of always like my
| | 01:54 | pages to sort of float above the bottom
edge instead of be snugged to it, in my
| | 01:59 | opinion. It lets the reader know, hey,
this is it, the scene and the content,
| | 02:01 | nothing is being clipped off.
| | 02:03 | So I am going to go down into our
layout, and I am going to start coding.
| | 02:07 | Now, as I mentioned before, we already
know the measurements that we are going
| | 02:10 | to be using, and I am going to flip
back to the planning document that we were
| | 02:13 | using in our previous movies, and here
are all the measurements that we need for
| | 02:17 | the elements that we are
going to be styling on our page.
| | 02:20 | So we'll come back here, grab the
measurements, and go back into the code.
| | 02:23 | So the first thing we are
going to style is our header,
| | 02:25 | so I am just going to write a selector
for our header. And on the first line
| | 02:29 | here I am going to give it a background color.
| | 02:31 | Now, this is a decision that was made off-site,
so we didn't see this one being planned out.
| | 02:36 | If you don't like the colors I am using,
please feel free to substitute your own.
| | 02:39 | So rgb value of 76, 67, 65,
and then remember the semicolon.
| | 02:47 | Then I am going to go down to the next line
and I am going to give this a margin-bottom.
| | 02:50 | Now, that's going to separate the
header from the content beneath it, and I am
| | 02:54 | going to go ahead and give
that a margin-bottom of 16 pixels.
| | 02:57 | Since we are basing this off font-
size, I could certainly give it a
| | 02:59 | margin-bottom 1em, but again, I am just
sort of reinforcing the fact that this
| | 03:03 | is based off of 16 pixels, in terms of our grid.
| | 03:07 | Now, for height, I am
going to give it 96 pixels.
| | 03:10 | And if you were thinking to yourself,
hey, wait a minute, in the planning
| | 03:14 | document, didn't you say 128?
| | 03:15 | well, you've got to remember that
padding plus height and/or width equals total
| | 03:21 | height and total width.
| | 03:22 | So back in our CSS, 96 is for the height,
and that tells us that we're also going
| | 03:26 | to add some padding. And the padding
for this is going to be 32 pixels top
| | 03:30 | padding, and then 0 pixels for the right,
0 pixels for the bottom, 32 pixels of
| | 03:36 | padding on the left-hand side.
| | 03:38 | So the 32 and the 96 give us the 128
pixels total height that we need, and then
| | 03:43 | the 32 pixels of padding on the left-
hand side matches the 32 pixels' worth of
| | 03:48 | padding that we want everywhere.
| | 03:49 | So now we've defined our header and
we're going to move on to our next element,
| | 03:53 | which is our first column.
| | 03:54 | So I am going to write a selector for col1.
| | 03:56 | Now, that's the class name
that we used for this column.
| | 04:00 | Since we only really have a section
and an aside, I could use those elements
| | 04:05 | that they are inside of as well, but
since we have those class names available
| | 04:07 | to us, I am going to take advantage of them.
| | 04:09 | So this is col1, and I am
going to float this to the left.
| | 04:12 | Now, just like we learned in our last chapter,
this is going to create a two-column
| | 04:16 | layout, one column on the left-hand side,
another column on our right-hand side.
| | 04:19 | So this one is going to be floated to the left.
| | 04:21 | I am going to give it a padding to
the left of, you guessed it, 32 pixels
| | 04:26 | and, again, if I am looking for our
width, I can go back to the mockup and it
| | 04:30 | tells me 512 pixels.
| | 04:32 | So on the next line I am just going to
type in width and I am going to do 512
| | 04:39 | pixels and save that.
| | 04:41 | I am going to scroll down a little
bit more so you guys can see this a
| | 04:43 | little bit better, and then we are
going to go ahead and create the styles
| | 04:47 | for our second column.
| | 04:49 | So that one is .col2. That's a class
selector for the second column.
| | 04:54 | This one is going to be floated to the right.
| | 04:55 | So again, this is going to help
us create our two-column layout:
| | 04:58 | one is going to be on the left-hand side,
one is going to be on the right-hand side.
| | 05:01 | Now, if I go back to our mockup, I can
see that I need 32 pixels of padding on
| | 05:04 | the right here and I need
352 pixels for its width.
| | 05:09 | So if I go back into my code, I go
down to the next line, and I'll just go
| | 05:13 | ahead and give it that width of 352 pixels.
| | 05:17 | I'll give it my padding-right of 32
pixels, and then I am just going to do a
| | 05:25 | couple of things here for typography.
| | 05:26 | I am going to give it a font-size of 90%.
| | 05:28 | I want the text in the sidebar of the
aside there to be a little bit smaller
| | 05:33 | than our body copy text. And I'm
going to give it a line-height of 1.6, so
| | 05:38 | there's a good amount of vertical
separation between the text there. All right!
| | 05:41 | I am going to go ahead and save that,
and then we have one more element left to
| | 05:45 | do and that is the footer.
| | 05:46 | So I am going to write a selector for my footer.
| | 05:48 | I am going to scroll a little bit so
you guys can see this a little bit better.
| | 05:52 | Again, for our footer,
we'll do a background color.
| | 05:55 | Again, feel free to change this if you don't
like the color that we are working with here.
| | 05:58 | I am just going to do rgb. The value for
this is going to be 100, 98, 102. Don't
| | 06:06 | forget the semicolon.
| | 06:07 | And then on the next line, we are going to
go ahead and give that a height of 80 pixels.
| | 06:12 | Now, I know we didn't put this in the
mockup but, again, that 80 pixels, the
| | 06:15 | height there is based off of that 16 pixels.
| | 06:17 | We don't have any content
in our footer right now.
| | 06:19 | Later on, if we put content in it, we
would probably add a little bit of padding,
| | 06:23 | and then we would have to
adjust that height value.
| | 06:25 | And then, because we're doing a two-
column layout with floats, what do we need
| | 06:29 | to do to the footer that we
learned in the last chapter?
| | 06:31 | That's exactly right.
| | 06:32 | We need to go ahead and clear that footer,
so I am just going to do clear:
| | 06:34 | both and save that.
| | 06:37 | So I am going to go ahead and preview
this in my browser again, and when I
| | 06:42 | refresh the page, I can see my two-column layout.
| | 06:45 | The layout looks okay, but it doesn't
look particularly tied together, does it?
| | 06:50 | And the reason for that is that even
though these elements are based off of that
| | 06:54 | 16-pixel grid that we were
working with, the text right now isn't.
| | 06:59 | So there's really nothing to sort of
tie it together visually, and even though
| | 07:04 | the columns are spaced the way we want
them to, we're really not getting that
| | 07:07 | sensation that this is all tied together.
| | 07:10 | So it's not just about defining element widths;
| | 07:12 | you really have to think
about the layout as a whole.
| | 07:14 | I am going to go back into my
code and I am going to uncomment out
| | 07:18 | these typographic styles.
| | 07:20 | So there's a little beginning comment
right beside the h1 there, and then if I
| | 07:24 | scroll down, there's an
ending comment at the bottom of it.
| | 07:26 | Now, if I save these and go back into
my browser and refresh, you can see that
| | 07:33 | now that looks a lot better,
a lot more put together.
| | 07:37 | It looks a lot more tied together, and
that's because all of the typographic
| | 07:41 | styles that I just enabled are also
based off of that sort of 1em 16-pixel grid,
| | 07:48 | so everything sort of ties together.
| | 07:50 | Now, if you want to examine that in
more detail, just go back into the code and
| | 07:54 | go through all the styles that I created here.
| | 07:56 | There's really not that many.
| | 07:56 | There are just four styles.
| | 07:58 | But go through, take a look at their
font-size, take a look at the margins that
| | 08:02 | we're using here, take a look at
line-height and the spacing, run these
| | 08:05 | calculations and sort of figure out how
they tie in to the same 16-pixel grid.
| | 08:10 | So the majority of our layout is now
finished, and let me ask you: How much
| | 08:15 | easier is it to have that out of the
way during the planning stages, so that
| | 08:19 | you just come in here and you just plug in your
values and you know your layout is going to work?
| | 08:24 | That's why it's so important to spend
the time that you need in the planning
| | 08:28 | stage to make sure that everything with
your layout is working as you intend it
| | 08:32 | to within that grid that you defined.
| | 08:34 | So for the most part our layout is done,
but even though our layout is primarily
| | 08:38 | focused on text, it doesn't mean that we
won't occasionally have images or other
| | 08:43 | types of assets that we're going
to need to add to this page context.
| | 08:47 | So in our next movie, we're going to
take a look at how to make sure our page
| | 08:51 | assets are working with our grid
that we've established as well.
| | Collapse this transcript |
| Creating grid-based assets| 00:00 | If you are going to create a
grid-based design, it's important that all page
| | 00:04 | elements relate to the grid in some way.
| | 00:06 | This will help your design achieve a
more balanced composition and help you
| | 00:10 | create consistent layouts from page to page,
which is especially important for fixed layouts.
| | 00:15 | To illustrate this, we will work with
the addition of assets to our page and
| | 00:19 | make sure that they follow the layout
guides laid down by our initial grid. And
| | 00:23 | to that end, I have a document here,
the fixed_planning_elements, which is just
| | 00:27 | a modified version of our
earlier planning document.
| | 00:30 | You can find the finished version of
this in the Assets folder, directly in
| | 00:33 | your exercise files.
| | 00:34 | Again, it's not important
that you have this open.
| | 00:36 | We're just sort of going
over some concepts here.
| | 00:38 | This is another thing
that I do when I plan sites.
| | 00:41 | In addition to planning out the columns,
I also plan out any type of assets that
| | 00:46 | might go into my content and how it
relates to that grid by creating some
| | 00:50 | default measurements for it.
| | 00:51 | As you can see in the left column here,
I have several default sizes for assets,
| | 00:55 | including assets that might go side by side.
| | 00:58 | You are free to kind of play around
with these and experiment with different
| | 01:01 | sizes and sort of compare how
they might relate to each other.
| | 01:03 | For example, I could certainly work
with the height of these, make a couple of
| | 01:07 | them perhaps a little bit more vertical,
but what I am doing is I am making sure
| | 01:10 | that each one of these
adheres to the grid in some way.
| | 01:13 | So you can see they are all divisible by 16.
| | 01:15 | They all fit specifically into the grid itself.
| | 01:18 | Now, I've set other policies in place too.
| | 01:20 | For example, in the right-hand column,
the only way I want assets to display in
| | 01:24 | the right-hand column is all by
themselves and sort of floating in the middle of
| | 01:29 | the column, so I developed
a default size to do that.
| | 01:32 | Whereas in the left-hand column, I have
to really think about these assets and
| | 01:35 | how they are going to relate to the content.
| | 01:37 | Will the content flow around them?
| | 01:39 | Will the content be on a line all by itself?
| | 01:42 | Will it sit aligned left, or will
it float in the middle of the layout?
| | 01:47 | Those are all things that I have to
consider, but I can use this to sort of
| | 01:50 | gain some measurements.
| | 01:51 | If I have two elements that are
going to sit side by side like this, for
| | 01:53 | example, I now know what their width is
going to be, what the gap between them
| | 01:57 | is going to be, that sort of thing.
| | 01:59 | So this is something I
want to plan out beforehand.
| | 02:01 | These don't have to be just image assets.
| | 02:03 | These could be any elements
that you use in your page.
| | 02:06 | They could be pull quotes.
| | 02:07 | They could be asides within an article.
| | 02:09 | So there are all sorts of
different things that these could be.
| | 02:12 | They could be video.
| | 02:13 | So you start planning out where those
assets are going to go and how they are
| | 02:16 | going to adhere to the grid.
| | 02:17 | So now I am going to go back into our
code, and I have opened up the grid.htm
| | 02:21 | file from the 05_05 directory.
| | 02:25 | Now, you are going to notice if you look
in the exercise files that there's also
| | 02:27 | an images folder in that directory, and
you can see we have several images here.
| | 02:31 | Those images were sized based on the
measurements that we determined within
| | 02:35 | the planning documents.
| | 02:36 | So the names of the images
correspond to their widths and heights.
| | 02:39 | If I go through the code of my document,
I can see that those images have been
| | 02:43 | added to the page so that we can see how
they relate to the content and how they
| | 02:47 | fit within the grid.
| | 02:48 | Now, if I scroll through my code, I
can also see that we have two brand-new
| | 02:52 | sections right here within the main
column, with the class of news, that we are
| | 02:56 | going to have to style in order to
fit within our layout grid as well.
| | 03:00 | Now, if I go ahead and preview this
page in our browser, I can see the images
| | 03:04 | look more or less harmonious with the
layout and with the grid, but of course,
| | 03:09 | stylistically right now, they are not
interacting with the content at all.
| | 03:12 | So I am going to have to work on their styling.
| | 03:15 | And if I scroll down, those two
sections really aren't doing anything to
| | 03:18 | differentiate themselves from the
content, so we are going to need to work on
| | 03:21 | the styling of those as well.
| | 03:22 | So I am going to go back into my code,
and I am just going to add these right
| | 03:26 | here underneath the footer in our layout styles.
| | 03:29 | So about line 53 or so, I am just
going to create some empty space here.
| | 03:33 | So the first thing I want to address is how
my content is going to interact with images.
| | 03:37 | So I am just going to go ahead and
write a selector for my images on the page,
| | 03:40 | and I am just going to float the
images to the left. And I am going to set
| | 03:45 | their margin to 0 for top, 1em for right--
and what that will do is it will just
| | 03:51 | sort of hold the text off of the right edge
of the image--0 for bottom and 0 for left.
| | 03:57 | So just setting some images there.
| | 03:59 | Now, if I save this and refresh my
browser and go up, I can see now, for these
| | 04:04 | images, the text is floating around it,
and it's looking okay. But remember, we
| | 04:09 | wanted this image in the right-hand
column to be centered and sort of all by
| | 04:13 | itself so that the text
isn't wrapping around it.
| | 04:16 | For this larger image, I don't
think having a text around it is very
| | 04:20 | advantageous either. I think,
obviously, that's hard to read.
| | 04:22 | It can be very confusing. People are
going to wonder if that's a caption or if
| | 04:25 | there was a mistake made there.
| | 04:27 | So for both of these we really need
those images to sort of stand alone and by
| | 04:31 | themselves within the layout.
| | 04:33 | So to do that, we are
going to apply a class to them.
| | 04:36 | So I am going to go ahead and write the
class selector, and we'll just call it largeImg.
| | 04:42 | So just large image, .largeImg.
| | 04:45 | And then for the properties, we'll go
ahead and set the display property to block.
| | 04:49 | We'll turn floating off, so we'll say float:
none, so it doesn't float.
| | 04:53 | And then for margin, what we'll do for
margin is we'll do 1em top and bottom,
| | 04:57 | and then we'll auto-margin the left and
right sides, and as we know, that's going
| | 05:00 | to center that content within those columns.
| | 05:02 | Well, that's only part of it.
| | 05:03 | We've got to go down to those images
and we've actually got to apply that.
| | 05:06 | So what I am looking for
is down on Line around 101,
| | 05:09 | we'll find this 448_400 image, so we
are going to go ahead and grab that, and
| | 05:15 | I'll go ahead and apply that
class to that, the largeImg class.
| | 05:18 | And then scroll down a little bit
further, find the 256_256 image, which is in
| | 05:24 | the side, and we'll go ahead and
apply the largeImg class to that as well.
| | 05:30 | So we'll go ahead and save that.
| | 05:31 | Now, if I go back into the browser and
refresh this, you can see what that does to
| | 05:35 | the image in the sidebar.
| | 05:36 | It's now sort of on its own line,
the text is not floating around it, and it's
| | 05:40 | centered within the column.
| | 05:41 | If we go down to our larger image,
it's taking up its own space,
| | 05:45 | it's centered within that column, and
it's interacting with the layout in a
| | 05:48 | much pleasing fashion.
| | 05:50 | Then the last thing we need to do
here is we are going to style these two
| | 05:53 | elements so that they are
sitting side by side each other.
| | 05:56 | In our planning document we're able
to sort of sit these side by side so we
| | 06:00 | know exactly how much space we need between
them, and we know what their width is going be.
| | 06:04 | In this case, the width is going to be
around 240 pixels based on our fixed layout.
| | 06:08 | So I am going to go back into my code.
| | 06:10 | I am going to scroll up to our CSS,
and I'll stick with the layout styles.
| | 06:16 | And what I am going to do is create
a news selector, because you may have
| | 06:19 | noticed the class attribute on
both of those sections is news.
| | 06:23 | We are going to go ahead
and give it a width of 208.
| | 06:26 | Remember, total width and
width are not the same thing.
| | 06:29 | So if I set some padding on this, I'll
set 16 pixels' worth of padding, so 16 on
| | 06:35 | one side, 16 on another side equals 32,
add that to the 208, and then we get our
| | 06:39 | 240 pixels' worth of width.
| | 06:42 | For font-size, I am going to go to
90%, which is going to just decrease the
| | 06:46 | font-size inside those
discreet sections just a little bit.
| | 06:49 | For line-height, I am going to go to
1.8 to give a lot of space in lines, and
| | 06:55 | that's just personal preference.
| | 06:57 | And then for background, we are
going to go ahead and give this a
| | 06:59 | background color as well.
| | 07:00 | I am going to do rgb
(237, 226, 197), and don't forget your semicolon.
| | 07:08 | And then finally, I have to handle the
spacing and the positioning of these, so
| | 07:12 | the margin-right for this is going to
be 32 pixels, and then finally, we are
| | 07:17 | also going to float them to the left.
| | 07:18 | We are almost done. I know that
seems like a lot, but it's really not too
| | 07:21 | much styling on these.
| | 07:22 | Remember, we are floating them side by
side. The margin-right is going to give
| | 07:25 | us 32 pixels' worth of space between them,
and then we've just sort of qualified
| | 07:28 | the dimensions of the elements as well.
| | 07:30 | However, remember, we only
want that spacing on one side,
| | 07:33 | so I am going to come in
here and write another selector.
| | 07:35 | I am going to say, hey, anytime you
find a news section following immediately
| | 07:41 | after another news section,
set its margin-right to 0.
| | 07:45 | So I am going to go ahead and save that,
and we are going to go back into our browser.
| | 07:49 | I'll refresh the page, and you can
see now we've got those two elements.
| | 07:53 | The space in between them is even.
| | 07:55 | And because they are based off our grid, they
relate to the rest of the layout quite well.
| | 07:59 | Now, if we wanted to, we can certainly
polish this layout up a little bit, but
| | 08:03 | the overall organization and structure
of the layout is quite sound, thanks to
| | 08:07 | the underlying grid that we are using.
| | 08:09 | Now, I use some sort of grid on
almost all my layouts, regardless of what
| | 08:14 | type of layout it is.
| | 08:15 | To help underscore the importance of
grids in design, I want to give you some
| | 08:19 | excellent resources on designing with
grids, and we are going to do that in our
| | 08:23 | next movie before we move on to the lab.
| | Collapse this transcript |
| Grid design resources| 00:00 | Before we move on to the lab, I want to
leave you with some of my favorite tools
| | 00:04 | and resources for working with
grid-based designs. And I've included this file
| | 00:08 | for you in the 05_06 directory;
| | 00:12 | it's the grid_resources.htm file.
| | 00:15 | Now, the first site I want to
take you to it is Design by Grid.
| | 00:18 | Now, this is a great collection of
articles, tutorials, and resources on
| | 00:22 | designing with grids, and they also
have a nice showcase of sites that focus
| | 00:26 | on grid-based design.
| | 00:28 | Perhaps my favorite site in dealing
with grid-based layout is The Grid System,
| | 00:32 | and you can see they have different articles.
| | 00:34 | They have some tools that
can help you design with grids.
| | 00:37 | They have different books, links
to grid-based templates, and a blog.
| | 00:41 | Now, you'll notice from these dates
that they haven't updated in a while,
| | 00:45 | so I'm not really sure what the long-
term prospects for the site is, but
| | 00:49 | the articles and the information and the
tools that you'll find on the site are invaluable.
| | 00:54 | So even just because they're a couple
of years old, it doesn't devalue what
| | 00:58 | this site has in terms of resources, so
this is a site you should definitely check out.
| | 01:02 | Now, I also recommend reading
through The Elements of Typographic Style
| | 01:07 | Applied to the Web.
| | 01:08 | It's a very long title, but this is a
web adaptation of Robert Bringhurst's
| | 01:13 | famous The Elements of Typographic
Style book and again, it's being adapted
| | 01:17 | for web typography.
| | 01:18 | Now, it's slow going.
| | 01:20 | They're going all the way through
Robert's book, and right now they're just sort
| | 01:24 | of beginning on Chapter 3 and work kind
of comes and goes with this, but this is
| | 01:29 | an absolutely fantastic resource.
| | 01:32 | It's not just for grid-based design,
but since typography is such an important
| | 01:36 | part of your web site and understanding
how to control typography correctly and
| | 01:40 | how to style it correctly for the web
is going to help you in great type into
| | 01:44 | your grid-based design.
| | 01:45 | So this is definitely a resource
that you need to spend some time with.
| | 01:49 | I'm also a really big fan of
the Golden Ratio Calculator.
| | 01:52 | I love designing with specific ratios,
and there's a lot of different ratios you
| | 01:56 | can use, but probably the
Golden Mean is the most famous.
| | 01:59 | And with this you would just
enter a width or an important number.
| | 02:02 | Let's say, for example, we're
going to do a 12-column design.
| | 02:05 | I can type in 12 and I get a
couple of different sets of measurement.
| | 02:09 | This one says, okay, if you're going
to use a 12-column design, a 7:5 split
| | 02:14 | fits that golden ratio.
| | 02:16 | On the other side of it, it says,
if one of your columns is based on 12
| | 02:19 | units, the column on the other side should
either be 7 or 19, or you could even do both.
| | 02:24 | So this is a really neat tool for you to
help understand what the ratios of your
| | 02:29 | different page elements and grid-
based design should be based off of.
| | 02:33 | I'm not a huge fan of grid
systems. I'll be honest with you,
| | 02:35 | I don't use any of the grid
systems that are out there.
| | 02:38 | I prefer to make my own. But that
doesn't lessen the impact that they've had on
| | 02:42 | the design world, and probably the most
famous grid system out there right now
| | 02:45 | is the 960 Grid System.
| | 02:46 | A ton of people are using this, but if
you go out to Google and you search for
| | 02:50 | CSS grid system, you're going to find
dozens of these out there that people are using.
| | 02:55 | So a grid system is essentially a
collection of styles that are sort of
| | 02:59 | preformatted to help you design on a
grid, and they'll include classes that
| | 03:04 | you can use in order to control the widths
and the layout of the elements on your page.
| | 03:09 | So they're very handy to have, but they
do add a little bit of bloat to your CSS.
| | 03:15 | But what I like about the 960 Grid
System site is there are a lot of really
| | 03:19 | cool things on here.
| | 03:20 | They have a custom CSS generator.
| | 03:22 | They have nice documentation that will
help teach you a lot about grid-based
| | 03:26 | design, not just using this particular system.
| | 03:28 | They also have a Grid Overlay Bookmark,
which will help you design a longer
| | 03:32 | grid, even if it's not this one, and they
have some neat resources like this demo.
| | 03:36 | For example, if you were designing on
a 960 grid, it helps you understand the
| | 03:40 | different column breakdowns that
are possible and some of the different
| | 03:43 | measurements for columns so
that they will fit within the system.
| | 03:46 | Now, of course their spacing
here is based off of 20 pixels.
| | 03:49 | So if your base unit of measurement is
going to be different, it's not going to
| | 03:51 | fit exactly into this column spacing,
but you get a good idea of what's
| | 03:55 | possible within 960 pixels.
| | 03:58 | They also have a nice gallery, or
showcase of sites, that are using the 960 Grid,
| | 04:02 | and one of the things that this will
help you do as a designer is it's going to
| | 04:05 | help inspire you and going to help
you see that designing on a grid doesn't
| | 04:08 | have to be restrictive.
| | 04:09 | You can really have just an amazing
variety of layouts created off of a single
| | 04:15 | type of grid system.
| | 04:16 | So the 960 Grid System, I would
encourage you to go check that out and read a
| | 04:20 | little bit more about it.
| | 04:21 | Now, I also have another gallery site
here, Grid Based, which has a gallery of
| | 04:26 | grid-based designs. And again, this is
a great place to go for inspiration or
| | 04:31 | just seeing how certain
people have designed on the grid.
| | 04:33 | You can go into their CSS, break
down the grid that they're working with,
| | 04:37 | and sort of understand how you
might want to adapt that grid to your
| | 04:39 | particular workflow.
| | 04:42 | Finally, I have a couple of
little tools here that I really like.
| | 04:44 | This one, #grid, it's a nice little,
lightweight piece of JavaScript that you can
| | 04:49 | start putting into your
sites as you're developing them.
| | 04:52 | And what this allows you to do is, for
example, if I hit G on the keyboard, you
| | 04:56 | can see here it gives me
a grid overlay of my site.
| | 04:59 | So as you're working, you can set up
this grid to the measurements that you
| | 05:03 | need, and then you can just toggle
that grid on and off when you're testing
| | 05:06 | your page to make sure that you're lining things
up the way you're supposed to within your grid.
| | 05:11 | A very similar tool to this is the 960
Gridder tool, and this 960 Gridder tool
| | 05:16 | actually is just a bookmark.
| | 05:18 | So if I take this and make a
bookmarklet out of this particular file, then I
| | 05:22 | have the ability, anytime I click on
that bookmarklet, to have this overlay.
| | 05:26 | And what's really nice about this one
is you get a lot of control over the
| | 05:31 | opacity of this, over the number of columns
that you're going to be using within this grid,
| | 05:35 | so you can just kind of modify this at any time.
| | 05:38 | And then using the keyboard shortcut of
Alt+Ctrl+C, I can just toggle that grid
| | 05:42 | kind of on and off once it has been enabled.
| | 05:44 | So again, that's another resource that
will help you develop grid-based designs
| | 05:48 | by allowing you to sort of test within
the browser and overlay the grid that
| | 05:51 | you've established right on top of it.
| | 05:53 | I want you to keep in mind
that grids are just tools.
| | 05:57 | They can help you create harmonious
designs and they certainly make the process
| | 06:00 | of planning things like
fixed layouts a lot easier.
| | 06:03 | However, don't see them as just rigid
structures that restrict your ability to design.
| | 06:08 | Now, at the end of the day, you're the
designer and your design has to work on
| | 06:12 | a level that's acceptable to the client,
and perhaps more importantly, to the audience.
| | 06:16 | Incorporate them into your design process,
but don't be afraid to go outside the
| | 06:19 | grid if the demand warrants it.
| | Collapse this transcript |
| Building fixed layouts: Lab| 00:00 | For this chapter's lab, I want to
do something a little different.
| | 00:04 | Instead of opening one of my partially
completed sites and then finishing it, I
| | 00:08 | want you to create a fixed-width layout
from scratch. Well, almost from scratch.
| | 00:14 | There's a little bit of a catch here.
| | 00:15 | I actually want to find one of your
favorite layouts and then re-create it. By
| | 00:20 | examining an existing layout and then
breaking down its grid, you'll gain a
| | 00:24 | greater insight into the planning and
structuring that goes into creating sites.
| | 00:28 | Just as the way of showing you kind of
the workflow that I want you to do for
| | 00:32 | this lab, I have the lynda.com site open here.
| | 00:35 | Pick one of your favorite layouts;
| | 00:36 | it could be any site you want,
or just a layout that you like.
| | 00:38 | If it's a site that you can get
into and kind of look through the CSS,
| | 00:42 | that's even better.
| | 00:43 | So in the case of lynda.com site,
sometimes it's kind of hard to pick out
| | 00:48 | exactly which CSS file I should be looking at.
| | 00:52 | So you might want to try to find one
that is a little bit easier to go into
| | 00:57 | and look into the appropriate CSS, but
that's not critical for what we are doing here.
| | 01:01 | You don't absolutely have to be able
to know what's going on with their CSS.
| | 01:05 | So when you go to one of your
favorite sites, just go ahead and take
| | 01:07 | a screenshot of that.
| | 01:08 | Now I have taken the screenshot of the
lynda site, and I'm dropped this in to an
| | 01:11 | Illustrator document. And I know, I am
in Illustrator again, right, but it does
| | 01:15 | not matter which page-
layout program you're using here.
| | 01:17 | You can even print out a copy of the
site that you're working with and then just
| | 01:22 | sort of draw the things that
I'm talking about on the screen.
| | 01:26 | So the first thing you should do is
find out what the underlying grid is for
| | 01:30 | this particular site, and the way that I
did this here was just place guidelines
| | 01:34 | on the page, where it's obvious
that a column or a gridline is.
| | 01:39 | I am looking and making sure
that these columns are equal width
| | 01:41 | so I can really determine what the grid
structure of the page is, and once I do
| | 01:45 | that, I then come in and overlay
shapes where I think of the page regions.
| | 01:50 | So obviously this is a two-column
layout from the standpoint of the fact that
| | 01:53 | I have a right column over here and
left column over here, but the left column
| | 01:57 | itself is broken into three separate
columns as well. I needed to sort to know
| | 02:02 | sort of the spacing requirements for those.
| | 02:04 | So at this point, I would go in,
I'd start taking some measurements,
| | 02:07 | I'd start thinking about the initial
structure of this page, and then I'll have
| | 02:11 | what I need to create the initial HTML and CSS.
| | 02:15 | Don't get me wrong.
| | 02:16 | I'm not asking you to
re-create these layouts pixel perfect;
| | 02:19 | I'm asking you to recreate the
structure of these layouts and then place your
| | 02:22 | own content inside of them.
| | 02:24 | To that end, if you go into the exercise
files, if you look in the 05_07 folder,
| | 02:31 | I have a bunch of images that you can use.
| | 02:33 | You can resize those images any way
that you want to fit within your layout.
| | 02:38 | Again, just make sure they adhere to the
grid that you have established for that
| | 02:41 | layout. And then I have a couple of text files.
| | 02:44 | As a matter of fact, these are
all Mark Twain's, A Dog's Tale.
| | 02:46 | There is a lot of text there that you
can copy and paste and use for dummy text.
| | 02:51 | I can't stand using Loren Ipsum text, so I
am just giving you some old copyright-free,
| | 02:55 | I might add, Mark Twain text,
it's fun to read as well.
| | 02:59 | So pay attention to the grid,
what the grid is based on.
| | 03:02 | You want to go ahead and establish a
target resolution, which doesn't necessarily
| | 03:05 | have to match the layout that you
are kind of basing your site off of.
| | 03:09 | And then when you get into placing
assets in that, really concentrate on making
| | 03:13 | the typography fit with
that layout grid as well.
| | 03:16 | Now when you're finished, go back to the site.
| | 03:19 | If you can, find its CSS.
Compare your layout styles to theirs.
| | 03:23 | Again, on more complex sites like
this one, they might be a little hard to
| | 03:26 | find the CSS. Coming through the
styles and isolate and layout might be a
| | 03:30 | little difficult, but you should be
able to at least compare the basic
| | 03:33 | structure and styles.
| | 03:34 | In fact, you may want to do that stage
before you get started, just to make sure
| | 03:39 | that comparing styles is
possible once you're done.
| | 03:41 | Just don't evaluate the
styles too much before you begin.
| | 03:44 | The whole point of this lab is to see how
closely you can match the desired styles.
| | 03:48 | Keep in mind that you are only
comparing styles just to compare and evaluate
| | 03:51 | your approach to layout.
| | 03:53 | The overall goal of this lab is
to gain experience in planning and
| | 03:57 | executing desired layouts, not
making sure that you're matching somebody
| | 04:01 | else's files exactly.
| | 04:02 | I know this is a big, broad,
open-ended lab. Go have fun with it.
| | Collapse this transcript |
|
|
6. Building Flexible LayoutsDesigning for flexible layouts| 00:00 | Flexible layouts allow you to create
layouts that adjust based on the width of
| | 00:04 | the browser or the viewport.
| | 00:07 | If the browser is resized, flexible
layouts will increase or decrease the
| | 00:12 | available space for all
content regions within a layout.
| | 00:15 | This gives you the ability to design a
layout that takes advantage of the space
| | 00:19 | available to it, and can present a
different look to viewers, based on the size
| | 00:22 | of the browser window.
| | 00:24 | Designing flexible layouts can be much
more labor-intensive than designing fixed
| | 00:28 | layouts, as you have to carefully
plan out the relationship between all the
| | 00:32 | elements within the layout.
| | 00:34 | What looks good at one size
doesn't necessarily work at another size.
| | 00:39 | That means that just like fixed
layouts, there are pros and cons to
| | 00:42 | using flexible layouts.
| | 00:44 | Now the biggest positive for you users
is that you have a layout that conforms
| | 00:48 | their current resolution, and they're
not having to do unnecessary scrolling,
| | 00:52 | zooming, or size adjustments.
| | 00:55 | It also gives them the freedom to
resize the window without the additional
| | 00:59 | penalty of horizontal
scrollbars or content being lost.
| | 01:02 | As a designer, you're freed from the
rigid constraints of fixed layouts.
| | 01:07 | Instead of defining a pixel-perfect
relationship between elements, you focus more
| | 01:11 | on how those elements should relate
and interact to each other in a generic
| | 01:15 | way, and are less worried about
exactly how much space a certain gutter or
| | 01:20 | element is occupying.
| | 01:21 | The flip side of that is that you do
have to give up a certain amount of
| | 01:25 | control over your design,
| | 01:27 | and designers often balk at not being able to
control exactly how their content is viewed.
| | 01:32 | But with flexible layouts, you have to be
content with losing some of that control.
| | 01:37 | Flexible layouts also often have
element-spacing issues, especially at the
| | 01:42 | extremes of viewport width.
| | 01:43 | Now, really large resolutions often
end up with a tremendous amount of space
| | 01:48 | between elements, while smaller
resolutions often create layouts that don't
| | 01:52 | have enough separation.
| | 01:54 | That's why it's common to have minimum
and maximum width values specified for
| | 01:58 | flexible layouts, to create a
range of acceptable resolutions.
| | 02:02 | Now this also means the flexible
layouts are a lot harder to design.
| | 02:06 | They require more planning, and the
code for them is generally more complex.
| | 02:11 | Keep these factors in mind as you
begin to plan your layouts and they'll help
| | 02:14 | you determine whether a flexible
layout is right for your project or not.
| | 02:19 | For the rest of this chapter, we will
break down what goes in to planning and
| | 02:22 | building flexible layouts, and we are
going to start by tackling one of the
| | 02:25 | hardest aspects of it first,
determining your layout dimensions.
| | Collapse this transcript |
| Calculating percentage values| 00:00 | For the most part, you'll find that
planning a flexible layout is almost exactly
| | 00:04 | the same as planning a fixed layout.
| | 00:07 | Now, the biggest difference, and
honestly one that adds just another entire
| | 00:12 | layer of difficulty, is calculating the
percentage values that you'll need for your elements.
| | 00:18 | Now, rather than setting a fixed-pixel
values for widths, margins, and padding
| | 00:23 | you'll need to determine the proper
exchange values for the desired layout.
| | 00:27 | Because of the way percentage values
work, this can often be a little tricky, so
| | 00:31 | I wanted to take some time to go over it here.
| | 00:33 | Now, again I have a document open.
| | 00:35 | I've got fluid_planning.ai, which is an
Illustrator file opened up in Illustrator.
| | 00:39 | If you want to do this a little along
with me, feel free to grab another piece
| | 00:43 | of sketch paper, or you can open this up
in Illustrator if you have Illustrator.
| | 00:46 | It doesn't really matter. What's the
most important thing here is that we're
| | 00:49 | focusing on how to properly calculate
percentage values for elements within your layout.
| | 00:55 | When I use the term fluid and flexible,
it means that the web site is responding
| | 00:59 | to the size of the browser change.
| | 01:01 | So, really they're the same thing.
| | 01:02 | I don't mean to cause any confusion, but
I find myself sort of using those terms
| | 01:06 | interchangeably, and I felt like I
needed to go ahead and define them for you.
| | 01:10 | Just like our fixed layout, we've
got a two-column layout going on here.
| | 01:13 | This time I based the grid off of 10
pixels, just again, makes a little bit
| | 01:17 | easier for us to do the math.
| | 01:19 | And I want to go over the steps that I
have over here on the left-hand side of
| | 01:22 | the page, steps 1, 2, 3, and 4, and I
want you to compare them to what we were
| | 01:26 | doing in the previous chapter with
fixed layouts, in terms of planning.
| | 01:30 | First, just like with fixed, go ahead
and define a target resolution and a grid.
| | 01:34 | Now, that sounds kind of odd because
you're like, wait a minute, if I'm doing a
| | 01:37 | fluid layout why am I
establishing a target resolution?
| | 01:40 | Well, essentially what you're doing
when you establish a target resolution with
| | 01:43 | a fluid layout is you're saying okay,
this would be the "ideal size" for this,
| | 01:49 | and what that's going to allow you to do
is it's just going to help you pick out
| | 01:51 | values for padding and
margins and things like that.
| | 01:55 | If you say okay, I'm targeting an
ideal size for this at 960 pixels, for
| | 01:59 | example, you can say I want my padding
to be 20 pixels or 40 pixels, and then
| | 02:03 | it's going to help you calculate what
percentage of your overall width 20 or 40
| | 02:07 | pixels is going to be.
| | 02:09 | To make calculating percentages easier,
you mock up that layout at an ideal
| | 02:13 | size, just as we mentioned here with
the target resolution. So we're going to
| | 02:16 | go ahead and mock that up just like we
have here with two columns and we've got
| | 02:20 | some spacing in here.
| | 02:22 | Then we use our ideal
measurements to calculate percentage values.
| | 02:24 | Now, what does that mean? Well, I'm going to turn on
the measurements and show you.
| | 02:27 | In this sense, we were targeting
960 pixels' worth of resolution.
| | 02:31 | We were planning this as if
we were doing a fixed layout.
| | 02:34 | I've got 590 pixels total width for
the left-hand column, 350 pixels of total
| | 02:39 | width for the right-hand column, and
then 20 pixels' worth of space between them.
| | 02:43 | That means that we have got 20 pixels'
worth of padding over here on this side,
| | 02:46 | 20 pixels' worth of padding on this side
and then 330 pixels of width, 570 pixels
| | 02:52 | of content width for those columns.
| | 02:54 | So, we're sort of creating those numbers
first as a starting point for our fluid layout.
| | 03:00 | The most important thing that we're going to
cover in this entire lesson is point number 4.
| | 03:06 | Remember that margins and padding
calculate their values as a percentage of
| | 03:12 | the parent element.
| | 03:13 | We'll talk about what that means as
we go through the planning stages.
| | 03:17 | Okay, so the first thing that I do is
when I have these sort of top global
| | 03:20 | values, I come up with just whatever
the percentages of those are going to be.
| | 03:25 | I'm going to bring up the calculator.
| | 03:27 | This is pretty easy to do.
| | 03:28 | I'm just going to say okay, 590 pixels
divided by 960 pixels gives me .614, so
| | 03:36 | forth and so on, so around 62% if you will.
| | 03:38 | Now, browsers can handle decimal
points just fine and if you look in certain
| | 03:43 | people's layouts when they do fluid
layouts, you'll find percentage values that
| | 03:47 | go out to the 100ths or
1000ths or 10,000ths of a point.
| | 03:51 | It's up to you to decide kind of
how precise you want to get with this.
| | 03:55 | In this case just to keep things
simple, we're going to round our values up.
| | 03:59 | Same thing for the 20 pixels. So if I take
20 pixels divide that by 960, I get around 2%.
| | 04:07 | If I take 350 pixels and divide that
by 960, I get around 36%. And again, I can
| | 04:14 | round these values if I just want to
make things a little bit simple for us,
| | 04:16 | because remember, we're not
expecting this to be a specific size.
| | 04:19 | We're more interested in what the proper
percentages is to get this ratio. All right!
| | 04:24 | So, I'm going to go back into Illustrator.
| | 04:26 | I'm just going to turn on those top-
level percentages, and you can see we're
| | 04:29 | rounding here: 62% for that, 2% for the
space between them, and then 36% for the
| | 04:35 | overall right-hand column width.
| | 04:36 | Now, those values are helpful to
know, but they're not as important as the
| | 04:39 | values underneath them.
| | 04:40 | Now, values underneath them, remember,
are the padding for left-hand column; the
| | 04:45 | content width for the left-hand column,
which is 570 pixels; the spacing or the
| | 04:50 | margin between those two columns, which
is 20 pixels; and then the content width
| | 04:53 | and the padding of the right-hand column.
| | 04:55 | When I calculate these percentages--and
I'll go ahead and turn those on--here is
| | 04:59 | where people typically get
confused when doing fluid layouts.
| | 05:03 | Inside this particular element we
have a width of 570 pixels and we have
| | 05:09 | padding of 20 pixels.
| | 05:10 | Now, when you're calculating this
it's really, really tempting to say okay,
| | 05:15 | what percentage of 590 is 20 pixels, and that's
what I need for my padding, but that is wrong.
| | 05:21 | Padding and margins are calculated
based upon their parent elements.
| | 05:25 | So, this element, this orange column
right here, that element's parent element is
| | 05:29 | the body tag, which is
based off of the 960 pixels.
| | 05:33 | So, in order to get the correct
percentage for that padding, I have to say what
| | 05:37 | percentage of 960 pixels is
20 pixels and in this case it's 2%.
| | 05:42 | So, I break my percentages down.
| | 05:43 | 2% for the padding, 60% for the content
width, 2% for the spacing between them,
| | 05:48 | 34% for the content width
here, and then 2% for the padding.
| | 05:53 | Now, that's pretty easy to calculate on
a top-level basis, but the more complex
| | 05:57 | your layout gets, the harder it gets to
calculate the proper percentage values,
| | 06:01 | especially for margins and padding. And
let's demonstrate that by taking a look
| | 06:05 | at the possibility of adding
interior shapes to our layout.
| | 06:08 | So, if I just do the interior
measurements of this particular element, we have
| | 06:11 | 250 pixels for the content width of
this and we have 10 pixels for the padding
| | 06:16 | all the way around it.
| | 06:17 | Now, that's going to leave us with
right around 20 to 30 pixels' worth of
| | 06:23 | spacing in between that.
| | 06:25 | If these interior shapes have padding
more than 10 pixels, remember their parent
| | 06:29 | element is this orange left-hand column.
| | 06:33 | So, that 10 pixels needs to be calculated
as a percentage of the width of this column.
| | 06:39 | However, for padding and
margins you don't use the total width;
| | 06:44 | you use the content width.
| | 06:47 | So, I need to know what the percentage
10 pixels would be of 570 and not 590.
| | 06:53 | That is a really big distinction,
because when you're calculating the content
| | 06:58 | with itself, in this case 250 pixels,
I have to calculate that based on the
| | 07:03 | container width itself.
| | 07:05 | To make this point again: when you're
calculating percentages just for content
| | 07:08 | width, you calculate that based on total width.
| | 07:13 | When you calculate percentages for
margin and padding you calculate that
| | 07:17 | percentage based on just content width,
and so because of that, when I turn on
| | 07:22 | these values again, you can see that
for the padding of this I'm at 1.75%.
| | 07:28 | Again, I'm rounding here.
| | 07:29 | For content width I'm at 44.5, but for
spacing between these two, I'm actually
| | 07:33 | at 4%. And again, those
values have just been rounded.
| | 07:38 | So, I can't just pass this 2% value
here or here and get what I'm expecting.
| | 07:44 | So, I can't just calculate the interior padding
or margin between these based on this 2% value.
| | 07:49 | I have to go back to the overall
content width and container width from
| | 07:52 | that column to do that.
| | 07:54 | Now, we have the percentage values
that we need to create our fluid layout.
| | 07:58 | Now remember that above all else
fluid layouts are really just about the
| | 08:02 | relationship between elements.
| | 08:04 | Don't get too caught up in finding the
absolutely precise percentage points for
| | 08:09 | a target measurement.
| | 08:10 | I mean it's helpful to use this as
a starting guide, but don't get too
| | 08:14 | carried away with it.
| | 08:15 | What you do need to remember, however--
and this is the most important thing from
| | 08:19 | this movie--that margins and padding
values are calculated based on the content
| | 08:23 | width of their parent elements.
| | 08:25 | In most cases when the fluid layouts
fail it's these values that typically turn
| | 08:30 | out to be the problem,
| | 08:31 | so you want to pay extra
attention to them when you're planning and
| | 08:34 | writing your styles.
| | Collapse this transcript |
| Setting flexible width values| 00:00 | In our last movie, we calculated the
percentage values that we are going to need
| | 00:04 | to create a two-column fluid layout.
| | 00:06 | In this movie, we are going to put
those values into practice by applying them
| | 00:09 | to the appropriate elements.
| | 00:11 | So I have the fluid.htm file open from
the 06_03 directory, and if you remember
| | 00:18 | from our fixed layout in the last
chapter, we have a page structure that is
| | 00:23 | pretty much almost exactly
the same as we had before.
| | 00:27 | I just want to preview this page in
a browser really quickly to show you
| | 00:31 | something about default styling. All right!
| | 00:34 | So I have opened up our page in the
browser, and you can see we don't really
| | 00:36 | have any margins or padding goings on
within the elements themselves. And as we
| | 00:41 | look through this, obviously the elements are
just sort of stacking one on top of each other,
| | 00:44 | so we still need to position everything.
| | 00:46 | But as I resize this browser, I want
you to notice something about layouts.
| | 00:51 | By default, layouts are fluid.
| | 00:53 | If you have a block-level element, that
block-level element, if a width is not
| | 00:57 | defined on it, it will go out and
stretch to fill the parent container, meaning
| | 01:01 | its width is set by default to 100%.
| | 01:04 | Even if you don't do anything at all,
your layout is more or less fluid.
| | 01:08 | So I am going to go back into our code,
and the first thing that I'm going to do
| | 01:12 | is I'm going to scroll down into my
styles to the body selector. And we need to
| | 01:17 | define a width for this.
| | 01:18 | Now, unlike in the previous chapter when
we were doing fixed layouts, instead of
| | 01:22 | applying a fixed-target resolution to
this, I'm simply just going to use a
| | 01:26 | percentage value for the width.
| | 01:28 | And in this case, I'm going to go
ahead and give it a width of 80%.
| | 01:31 | How wide you make the wrapper
container, in this case the body selector,
| | 01:35 | is entirely up to you.
| | 01:38 | In some cases people like to do 90%,
95%, if you don't want a whole lot of space
| | 01:42 | on the edges. It really boils down to
how much space you want on the right and
| | 01:46 | left side of this. If
you're centering this at 80%,
| | 01:48 | if I save my file and go back to the
browser and refresh that, you can see it
| | 01:52 | gives me a nice amount of space over
here on either side, and based on the
| | 01:57 | available browser space, it's going to
give you nice column widths as well. Okay.
| | 02:02 | I am going to keep scrolling down, and
one of the things that most people forget
| | 02:05 | to do in fluid layouts is set padding.
| | 02:07 | It happens all the time.
| | 02:09 | You concentrate so much on the columns
of your layout and the various elements
| | 02:13 | that you sort of forget that every
single one of those elements that needs to
| | 02:17 | have padding that's going to line
elements up, should have the same padding.
| | 02:20 | So this header, we need to go in and
change this padding here so that it's
| | 02:24 | getting a percentage for its left padding.
| | 02:26 | So where right now I have 32 pixels--and
remember that was our old fixed layout--
| | 02:30 | I am going to highlight this and I am going to
change that left padding to 2% and save that.
| | 02:36 | So now it has 32 pixels' worth of
top padding and then 2% for the left.
| | 02:41 | And if I go out to the browser and
refresh that, you can see the spacing here in
| | 02:46 | the headline up in the
header changed a little bit. Okay.
| | 02:49 | Now, we are going to go down and do our columns.
| | 02:51 | Notice we have column1 floating to the
left. We have column2 floating to the right.
| | 02:55 | Now, they don't have any defined widths
right now, so we're really not getting
| | 02:59 | the effect we want to with those floats.
| | 03:01 | So with column1, I am going
to go down in that selector,
| | 03:04 | I am going to give it a width of 60%.
| | 03:07 | Now, we remember those
from our previous exercise.
| | 03:09 | If you still have your notes you have
taken, if you were sketching that in
| | 03:12 | a sketchpad, you should be able to see
those percentages and just plug those right in.
| | 03:16 | Underneath that I am going to do
padding to the left and again, I am going to
| | 03:20 | do a padding-left of 2%, and will save that.
| | 03:24 | Of course that means I am going to go down
to column2 and do something very similar.
| | 03:28 | In this case, column2's width is going
to be 34% and its padding, this time to
| | 03:35 | the right and not the left,
is also going to be 2%.
| | 03:37 | You will notice because of the layout
method that I use of floating one to the
| | 03:40 | left and floating the other one to the right,
| | 03:43 | I don't need to specify any type of
margins between the two of them. Their
| | 03:46 | widths will create an absence of
space in between them, which gives me the
| | 03:50 | spacing, and I don't have to actually
declare that, which, for me, is nicer. Okay.
| | 03:54 | I am going to save this.
| | 03:55 | Once again, I will go out to the
browser, refresh the page, and there is
| | 03:59 | our two-column layout.
| | 04:01 | Again, if I resize the browser, you
can see that this is now flexible.
| | 04:05 | I am getting a flexible amount of
space and a flexible amount of padding
| | 04:08 | for both of those guys.
| | 04:09 | Now, down a little bit lower, we
still have these two elements, these
| | 04:13 | two interior elements.
| | 04:14 | So we're going to go in and set those
percentage values on the interior elements
| | 04:18 | that we were calculating in
the last exercise as well.
| | 04:21 | So going back into the code, I can
scroll down and I can find those two
| | 04:26 | news items right there.
| | 04:28 | So in the main news one, what I am
going to do here is set its width to 44.5%.
| | 04:34 | Remember, they are both
going to be exactly the same.
| | 04:35 | So I am going to give them both the same width.
| | 04:37 | And then for padding, well, I want to
set padding all the way around, so I am
| | 04:40 | just going to do 1.75% for the padding.
| | 04:44 | I also need to set some spacing
between these two of them, because I'm not
| | 04:48 | floating one to left and one to the right.
| | 04:50 | So I need to do margin-right on these,
and the margin between them, if you
| | 04:54 | remember from the last
exercise, is going to be 4%.
| | 04:58 | And then I have this other selector
right down below that that is stripping the
| | 05:02 | margin-right value from the second news,
so we don't get an extra bit of spacing
| | 05:06 | there on the right-hand side of that.
| | 05:07 | So if I save this, go back out to the
browser and refresh my page, now we get
| | 05:12 | our interior spacing.
| | 05:13 | And what I really want you to focus on
is take a look at the space between these
| | 05:15 | two columns, these two elements, and
this element. And they're very close.
| | 05:20 | Now, we had to give them all
different percentage values.
| | 05:23 | This is 2%, this is 4% based on where
it's located, and this of course we are
| | 05:27 | letting the actual columns create that space.
| | 05:30 | But we are seeing sort of a consistent
spacing between them because we took the
| | 05:34 | time to plan that out and really
calculate what those various percentages are
| | 05:38 | going to be based upon their parent elements.
| | 05:40 | So there you have it.
| | 05:41 | It is a basic two-column fluid layout.
| | 05:44 | Now, your designs are probably, over
time, going to be a lot more complex
| | 05:48 | than this, but as long as you
remember the rules behind calculating
| | 05:52 | percentage values, and especially
how it pertains to margins and padding,
| | 05:56 | you should be fine.
| | 05:57 | Now, next up, we are going to explore
how page assets like images and other
| | 06:01 | assets can affect fluid layouts and
how to make those assets flexible.
| | Collapse this transcript |
| Making images flexible| 00:00 | As long as your page content is limited
to a content that automatically reflows,
| | 00:05 | like text, you'll be fine.
| | 00:07 | However, once you start putting
images and other fixed-width resources like
| | 00:11 | video on your page, you are going to
quickly find that your fluid layout
| | 00:14 | has some limitations.
| | 00:15 | So to demonstrate that, I have the
fluid.htm file opened here from the 06_04
| | 00:22 | folder. And if I just open this in a
browser, you can see we've added an
| | 00:26 | image to our layout.
| | 00:27 | And right now everything looks just fine.
| | 00:29 | It's fitting in there fine.
The text is reflowing around it okay.
| | 00:32 | However, if I begin to resize
this image, watch what happens.
| | 00:37 | Whereas the content and the columns are
flexing, this image has a very fixed width.
| | 00:42 | So at the end of the day, you just end up
with this text running right over the top of it.
| | 00:47 | It's colliding and it's tearing up
your layout, and that's going to happen
| | 00:50 | wherever you use fixed-width images
within your fluid or flexible layouts.
| | 00:56 | There are some things that we
can do to help us with this.
| | 00:59 | So I am going to go back into my code
and I am going to scroll down, and let's
| | 01:04 | take a look at the image, which
is about on line 107 or so here.
| | 01:09 | If I take this image and I change its
width from 448 pixels to 100%, let's
| | 01:15 | see what happens then.
| | 01:16 | So I am using a percentage value rather
than a fixed value for the image width.
| | 01:20 | I am going to save this, go
back to my browser, and refresh.
| | 01:24 | You'll notice that it did a couple of things.
| | 01:25 | It distorted the image, so it sort
of stretched it, if you will, and it
| | 01:29 | stretched it to fill the entire column.
| | 01:30 | So that tells us a couple of things here.
| | 01:33 | Number one, we don't want to
leave the height at a fixed value.
| | 01:37 | The other thing is that the width, just
like when you're calculating the width
| | 01:41 | of elements and padding and margin, it
is relative to its parent element. And
| | 01:46 | you're not saying 100% of what the
normal width of this element would be;
| | 01:49 | you are actually saying give me 100% of
its parent element, which would be the
| | 01:53 | entire width of the column.
| | 01:54 | So we need to find what the
appropriate percentage is to display this image
| | 01:59 | in its natural state.
| | 02:00 | And I've got to tell you something.
| | 02:01 | That is not easy to do.
| | 02:03 | You can't just say, "Okay, what's
my target resolution? All right!
| | 02:06 | Let me go ahead and factor that in,"
because it's not always quite that simple.
| | 02:10 | Let me show you, though, a very easy way
I've found to sort of work through this issue.
| | 02:15 | So what I am going to do is I am going
to revert back to the image the way it
| | 02:18 | was before, and then I'm going to
copy this image, and then I'm going to
| | 02:23 | paste it right in there.
| | 02:27 | Now, if I save this, if I preview
this, this gives me two of these images
| | 02:30 | stacked right on top of each other.
| | 02:32 | And when I am looking at these images,
one of the things I'm thinking about
| | 02:35 | right now is, okay, what percentage of
this column width is this image. What
| | 02:39 | percentage is that taking up?
| | 02:40 | If you had to guess, what would you say, around
70, 75, 80%, somewhere around in that range?
| | 02:46 | That's typically where I start out.
| | 02:48 | I sort of look at that and say,
okay, what percentage is that?
| | 02:50 | So if I flip over here and I take
the second image and I get rid of its
| | 02:54 | height, I am going to strip the height out,
and I take its width value and I change that,
| | 02:58 | so let's say I changed it to 70%, and
if I save this, and then preview it, you
| | 03:05 | can see the flexible image now is a
little bit smaller. So it's close there, but
| | 03:09 | it's not quite on the money.
| | 03:11 | So if I go back in, I can start
manipulating this value a little bit.
| | 03:14 | If I go up to 78% and save it and preview it,
I can see that it's a little bit larger.
| | 03:20 | Now, one thing that you really want to
try to avoid is you want to try to avoid
| | 03:23 | scaling the image up.
| | 03:25 | That's going to damage the image
quality, and it's going to cause some issues.
| | 03:28 | So if you can find a happy
medium, then that's fine.
| | 03:32 | And if I go back here, let's try 74%, save
that, preview it, and that's really close.
| | 03:40 | I mean, you are talking about a couple
of pixels off. And since this image is
| | 03:43 | going to be fluid anyway,
that's not a bad place to start from.
| | 03:47 | I am going to go back over and get rid
of my fixed image and just sort of leave
| | 03:54 | this one where the other one used to be.
| | 03:56 | So I stripped the height value out.
| | 03:58 | I gave it a width of 74%.
| | 03:58 | If I save this now and preview it,
I am left with my flexible image. And
| | 04:04 | now you'll notice if I resize the browser,
the image resizes with it, which is really cool.
| | 04:09 | There are some downsides to this.
| | 04:12 | Performance in mobile devices can be
negatively impacted by the browser having
| | 04:16 | to constantly scale images.
| | 04:18 | You also have to think
about image quality itself.
| | 04:20 | The image quality can suffer.
| | 04:22 | It's not suffering quite as much
if you scale down instead of up.
| | 04:24 | And notice if I had a really larger
monitor than this and I kept expanding, I
| | 04:29 | would actually be scaling up.
| | 04:30 | So a good rule of thumb is to use
maybe a slightly larger image and make sure
| | 04:35 | that you're always sort of scaling it
down a little bit, so that you're not
| | 04:37 | losing a lot of image quality.
| | 04:40 | There are other ways to make
images or elements responsive as well.
| | 04:43 | Now, the same technique that we just
did here would also work on video, and you
| | 04:47 | definitely want to make sure not to
leave the height value in there for those
| | 04:50 | video objects either, because you
definitely want to make sure the aspect ratio
| | 04:53 | remains the same on those.
| | 04:54 | But you can do that for video.
You can do it for canvas.
| | 04:57 | You can do it for all sorts of assets
that you might be placing here on the
| | 05:00 | page if they need to be fluid as well.
| | 05:03 | But there is another method that we can
use that specifically targets images, and
| | 05:08 | that's working with background graphics.
| | 05:10 | So if I go back into our code and I
scroll down, I can see that on 110 I have an
| | 05:15 | empty div tag here with the class of banner.
| | 05:17 | Now, typically I wouldn't use an empty div tag.
| | 05:19 | I mean that's non-semantic markup,
but if I'm wanting an image that's just
| | 05:23 | purely decorative in nature and I
want the image to be able to flex with the
| | 05:26 | layout, then sometimes using this
technique is actually a pretty nice solution.
| | 05:30 | So I am going to scroll up to my CSS and we
are going to see how we are going to use this.
| | 05:35 | We have an empty banner
selector already up there.
| | 05:38 | So what I'm going to do is I am
going to give it a height of 250 pixels.
| | 05:43 | Now, how do I know the height?
| | 05:44 | Well, the image that I am going to be
using here within this banner, I know it's
| | 05:47 | 250 pixels tall, so I kind of
have a little leg up on this.
| | 05:51 | Speaking of that image, I am going to
go ahead and do a background image here,
| | 05:55 | and I am going to give it a url of
_images/philly_banner.jpg. And then I am
| | 06:05 | going to go ahead and just tell that no-
repeat, so that it doesn't tile, in case
| | 06:09 | the container stretches out wider or
taller than the actual image itself.
| | 06:13 | The next thing I am going to
do is set some margins on this.
| | 06:15 | I am going to do a margin
of 2% for top and bottom--
| | 06:18 | that will keep the text away from the
top and bottom of the image--and then
| | 06:21 | 0 from side to side.
| | 06:23 | So if I save this and then preview this in
the browser--let me just refresh this page--
| | 06:29 | if I scroll down, now,
here's my image coming in.
| | 06:32 | Now, remember, I didn't
give this a width at all.
| | 06:35 | Knowing that the behavior of a div tag,
for example, is to stretch to fill
| | 06:39 | its parent container,
| | 06:40 | I knew that by default that div tag
is just going to expand to fill the
| | 06:44 | column, so that's fine.
| | 06:45 | I now have an image that
stretches the entire width of the column.
| | 06:48 | The height is determined by the image itself.
| | 06:50 | And again, because we didn't specify a
width, you'll notice that as we resize
| | 06:53 | the browser, the div tag resizes as well.
| | 06:56 | However, the image itself doesn't resize.
| | 06:59 | Essentially what we're doing is we are
almost cropping off a portion of that
| | 07:02 | image as we resize this; it's sort of sliding.
| | 07:05 | So when you're doing something like this,
number one, it has to be a decorative image,
| | 07:08 | and number two, you have to realize that
at certain resolutions you are going to
| | 07:12 | be losing part of that image.
| | 07:13 | That way if I was creating an image
where something had to be seen, I would make
| | 07:17 | sure that that subject matter was on
the left-hand side here rather than on the
| | 07:20 | right-hand side, because I know that
that has a chance of being hidden based
| | 07:25 | upon the size of the screen.
| | 07:27 | If you're going to be integrating images
into your fluid layouts, you really have a
| | 07:31 | lot of factors that you need to
sit down and think through as you are
| | 07:34 | planning your layout.
| | 07:35 | You need to consider how scaling images
might affect image quality, what type of
| | 07:40 | performance hit you are going to take
within the browser, especially for mobile
| | 07:43 | devices, whether or not you can
effectively control content reflow.
| | 07:47 | So if you're making it flexible and
the content is reflowing around it, what
| | 07:51 | happens if a headline above this
suddenly comes down below this image? Do I need
| | 07:55 | to clear those within the
float, that sort of thing.
| | 07:58 | So in our next movie we are going to
explore how we can use minimum- and maximum-
| | 08:03 | width properties to give us greater
control over not just image assets, but all
| | 08:07 | parts of our fluid layouts.
| | Collapse this transcript |
| Setting minimum and maximum widths| 00:00 | On every flexible layout, there comes a
point at which the layout just no longer works.
| | 00:05 | You know at the small enough size,
columns become too small to hold the content,
| | 00:09 | and the relationship between the
elements is lost as they begin to collide and
| | 00:13 | overlap each other.
| | 00:14 | At larger widths, layouts are often
not as effective either, because column
| | 00:18 | widths can increase to a size that
affects readability, and images and other
| | 00:22 | assets begin to move away from
the elements that they represent.
| | 00:26 | So we have a couple of values, the
minimum- and maximum-width properties, and
| | 00:29 | those properties allow you to set a
range of values for layouts that can
| | 00:33 | still give you the flexibility you want,
while ensuring that the layout stays
| | 00:36 | within an effective size.
| | 00:38 | So to demonstrate kind of how layouts
fail at various ranges, I've got the
| | 00:42 | fluid.htm file open from the 06_05 directory.
| | 00:48 | If I open this in a browser, you can
see it's pretty much the same layout
| | 00:51 | we were working with.
| | 00:52 | We do have a couple of extra elements
down here that we are going to be talking
| | 00:55 | about in a little bit, and a new
image that's been added to the page,
| | 00:58 | so we are going to have to
account for that in just a moment.
| | 01:01 | But at this maximum size,
it doesn't look too bad.
| | 01:03 | Of course, the monitor I am on
is a 1280-pixel-wide monitor.
| | 01:07 | If I was on something at 440, this might
stretch even more, and this column would
| | 01:11 | be a little bit difficult to read.
| | 01:13 | If I begin to resize this, at a
certain size, it just becomes kind of hard to
| | 01:18 | read, just because the
column widths are so small.
| | 01:21 | But then, when it gets down to
this size, it really and truly fails.
| | 01:24 | You will notice it won't go
any further than that size.
| | 01:27 | And that's not because there's
already a minimum width on it.
| | 01:30 | If I scroll down, you can see that this image
down here is just not allowed to go any further.
| | 01:37 | So it's the fixed nature of that
image that's stopping that scrolling.
| | 01:40 | And this, obviously, if we were looking
at this layout, even on really positive
| | 01:45 | terms, it's a failure. It's really a failure
by anybody's measure at that size.
| | 01:48 | Now you might say to yourself, well, yeah,
but who is going to view at that size.
| | 01:52 | Well, phones, for example.
| | 01:53 | So let's go ahead and examine the
minimum-width and maximum-width properties and
| | 01:58 | how they can help our layout.
| | 01:59 | I am back in the code, and I am going
to scroll down to my body selector.
| | 02:05 | In my body selector, right now, the
width is 80%, and that's pretty open ended.
| | 02:09 | It's just like, hey, whatever the
available space is, give me 80% of that.
| | 02:13 | But what we can do is just below that we
can set a max-width, so maximum-width property.
| | 02:20 | And we can say okay,
don't go beyond 1200 pixels.
| | 02:24 | And then we can give it a minimum width,
say min-width, and I can say hey, don't
| | 02:28 | go below 480 pixels.
| | 02:31 | So that it is, in essence, establishing a range.
| | 02:34 | It's like take up 80% of the available
space,, as long as you never go wider than
| | 02:38 | 1200 pixels and narrower than 480 pixels.
| | 02:42 | So how do you determine that range?
| | 02:44 | Well, if I save this file, go back into
my browser, and refresh it, you can see,
| | 02:50 | especially at maximum size, it doesn't
really have any affect to me there,
| | 02:53 | because right now I am not even viewing
it at a thousand pixels wide, but if I
| | 02:57 | go down, that's 480.
| | 02:59 | Is that enough, is it too much?
| | 03:02 | No, layout is still failing.
| | 03:04 | So one of the things that you'll need
to do when you're doing things like this
| | 03:08 | is to start to flex your layout
and find those points of failures.
| | 03:12 | And one of the things that I'll
typically do when I do that is I'll take a
| | 03:14 | screenshot and I'll just measure that.
| | 03:17 | Now, there are plenty of tools that you
can use to do this, like Snapz Pro, for
| | 03:21 | example, when you take a screenshot. You
can do a selection and it will actually
| | 03:24 | give you the physical measurements.
| | 03:26 | There are measurement tools
that you can do to measure screens.
| | 03:28 | There are JavaScript plug-ins you can
get for your browsers that will let you
| | 03:31 | know what the available browser space is.
| | 03:34 | So there are a lot of different ways to do that.
| | 03:35 | So I am going to go back into my
code and I am going to modify this.
| | 03:39 | So, after taking some screenshots and
after looking at some things, I decided
| | 03:42 | that I am going to restrict
this between 1024 and 640.
| | 03:47 | And now if I save this,
go back in, and refresh it,
| | 03:52 | now its maximum size is 1024, which we're
still not really bumping into at this resolution.
| | 03:58 | But as we go down, you can notice
it freezes right there at 640 pixels.
| | 04:04 | So we still have a readable right column.
| | 04:06 | We still have a readable left column.
| | 04:07 | As I scroll down, this image is still failing,
| | 04:10 | so we are going to have to deal with that.
| | 04:11 | But that has to do more to the fixed
nature of that image than it has to do
| | 04:15 | with the minimum or maximum range.
| | 04:18 | So in this case, I am just saying,
okay, can I still read these, do they
| | 04:20 | still look okay, how is the column
width? And at about 640 pixels here, we
| | 04:26 | are at a fairly decent space, so you can
still sort of read this, so I am happy with this.
| | 04:31 | Maximum width can really help
us out with these images as well.
| | 04:34 | Now, one of the things that I wanted
you to focus on first about this image is
| | 04:37 | how it fits within its container box.
| | 04:40 | You'll notice that there is
nothing to the left of it.
| | 04:42 | There is nothing to the right of it.
| | 04:43 | We are not reflowing any content.
| | 04:45 | I want this image to scale to fit the
width of its parent element, which in this
| | 04:48 | case is the new section.
| | 04:50 | We could go into the code and set the
image's width to 100%, but the problem
| | 04:56 | there is that if I can have this image
display at its native width and height, I
| | 05:03 | would love to do that.
| | 05:04 | That way I don't having
any scaling involved at all.
| | 05:06 | Well, there is a way to do that.
| | 05:07 | So I am going to go back into my code
and I am going to scroll down to the
| | 05:12 | image, which is down here towards the bottom.
| | 05:14 | It's in this news section, and it's
under the Featured images section.
| | 05:18 | So what I am going to do is I am just
going to strip out width and height altogether.
| | 05:20 | I am not going to set width to 100%.
| | 05:21 | I am not going to set it to
any percentage point at all.
| | 05:24 | I am just going to get rid of it.
| | 05:26 | Now if you leave off the width and the
height, the HTML specification tells the
| | 05:30 | browser to go ahead and use the
native width and height of the image.
| | 05:33 | So if no width and height is provided,
the browser basically calculates it based
| | 05:37 | on the image properties and then displays that.
| | 05:39 | I am going to modify that just a little
bit by coming in here and applying a class
| | 05:44 | to this image, and the class that
I am going to give this is flex.
| | 05:47 | All right, so I am going to save that,
and then I am going to scroll up into my
| | 05:51 | CSS, and just underneath banner, I am going
to write a selector for the class of flex.
| | 05:57 | And in flex, I am going to
use something very simple:
| | 05:59 | I am going to type in max-width 100%.
| | 06:03 | So what does that do?
| | 06:04 | Well, it allows the image to display at
its native width and height if it can.
| | 06:08 | But it's also saying, however,
your maximum that you can be is 100%.
| | 06:15 | So the browser is going to calculate
the width and height of the image based
| | 06:18 | upon the available space, its native
width and height, and whether or not it
| | 06:23 | fits in within the element.
| | 06:24 | So if I save this and preview it,
you can see that even though the image
| | 06:29 | naturally is larger than this, its
maximum width is being set to 100%, meaning
| | 06:33 | it can't be any wider
than this particular element.
| | 06:36 | So now we have an image that flexes
within that space, but still when it can,
| | 06:42 | will display at its normal or native
resolution, which is a really neat solution
| | 06:47 | to creating these flexible images
within those container elements.
| | 06:51 | So essentially here, our fluid
layout is free to react to whatever screen
| | 06:55 | size it's viewed in, while still
being constrained within a range that
| | 06:59 | enforces our layout's viability.
| | 07:01 | Now we have also integrated images
into our layout in a way that maintains
| | 07:04 | the relationship between
images and other page elements.
| | 07:08 | Planning and executing flexible layouts
requires a lot more effort than fixed layouts.
| | 07:12 | I mean that's just a fact of life.
| | 07:14 | However, the extra work gives you a
layout that is not constrained to a single
| | 07:18 | resolution, and it allows you to be a
little bit more creative with how elements
| | 07:22 | interact with each other.
| | Collapse this transcript |
| Building flexible layouts: Lab| 00:00 | Okay, it is lab time.
| | 00:02 | Now, for the flexible layouts lab,
I'm not going to make you go through the
| | 00:06 | whole planning process for the desolve.org site.
| | 00:10 | That would be just cruel.
| | 00:11 | Rather, I am going to give you the
appropriate values for the main sections, and
| | 00:16 | then let you go through the layout to
determine which elements to style, to
| | 00:19 | achieve the desired width and spacing.
| | 00:21 | You might think I am being nice
to you there, but probably not.
| | 00:24 | Now you'll also be determining an
appropriate overall size range for the layout.
| | 00:29 | You are going to be styling some interior
elements and you are going to be on your own there.
| | 00:32 | And then you are going to be fixing
an issue with some of the images on
| | 00:35 | the homepage as well.
| | 00:36 | So to starting working on a lab, go
into the 06_06 directory, and open up
| | 00:42 | index.htm and the main.css file, which is
found in the _css folder of the 06_06. Okay.
| | 00:51 | Now, I just want to go into
the browser really quickly.
| | 00:53 | I am going to preview where you are going to
start versus where you are going to finish.
| | 00:57 | So this is the starting layout.
| | 00:58 | You can see our columns aren't working properly.
| | 01:01 | We don't even have spacing going on there.
| | 01:03 | It does flex, but it's not exactly what we
think of, when we think of a flexible layout.
| | 01:07 | Now this finished version, after you are
done with it, it's going to look like this.
| | 01:10 | We are going to be able flex the layout,
but you need to set a defined range for
| | 01:14 | it, so at a certain point layout is
going to stop flexing and we are also going
| | 01:17 | to have to deal with
these two elements right here.
| | 01:21 | You are going to have to come up with
the appropriate measurements to get them
| | 01:24 | to space properly and still flex, and
then for these images in the sidebar, you
| | 01:28 | are going to have make those flexible
as well, but you want them to be able to
| | 01:32 | display it at a native resolution if they can.
| | 01:35 | So if I go back into the styles, you
can see that the main.css that I have
| | 01:39 | given you all of your labs steps, but right
here some information you are going to need.
| | 01:44 | You have got Left document padding, you
have got the Main column Width for the
| | 01:47 | left column, you got the Right column
Width for the right column and you have
| | 01:51 | the Right document padding on that side.
| | 01:53 | So, here are steps.
| | 01:55 | The first thing you are going to do is go to
your Basic Layout styles at about line 156.
| | 01:59 | You are going to set the body width to
90% and then find an appropriate range
| | 02:05 | for minimum and maximum page width, so
that's going to be left up to your own
| | 02:09 | discretion, and it's going to be based
on number of factors, but remember, you
| | 02:12 | can take some screenshots, you can take
measurements of the screening, and you
| | 02:15 | can kind of figure out where the
layout fails once you get everything set up
| | 02:18 | and help plan you range from there, so,
that's actually something in terms of
| | 02:22 | the minimum and maximum page width,
that you might want to do once everything
| | 02:25 | else is finished, so you can really determine
where you still have problems within the layout.
| | 02:30 | And using the values that we have right
up here, you again, want to go down into
| | 02:34 | the Basic Layout styles, find the
selectors for the article, in the aside
| | 02:39 | selectors, find those and then set the
appropriate width and padding values for
| | 02:45 | both of those elements.
| | 02:47 | After you are done with that, go into
the Content Region styles, which you can
| | 02:50 | find on about line 184.
| | 02:53 | Now you are going to have to go and
find the selectors that control the header,
| | 02:56 | main navigation and banner regions,
and then you are going to determine what
| | 03:01 | property you need to modify and what
value you need to set, so that it's content
| | 03:05 | lines up with the rest of the page content.
| | 03:07 | For the two news selectors which are
on line 347, those are the two that are
| | 03:12 | side by side, you need to determine an
appropriate width padding and margin to
| | 03:17 | get those elements to display side-by-
side within acceptable amount of padding
| | 03:21 | and spacing between the elements.
| | 03:23 | Now there is a lot of judgment
call that's going be going on there.
| | 03:25 | So your values might not match with
my finished values, and that's okay.
| | 03:29 | So as long as you are comfortable
with the spacing of it, that's fine.
| | 03:32 | Now for the contest image selector
which is found on line 635 in the css, you
| | 03:37 | are going to need to add a property
that allows the images to display at
| | 03:40 | their normal size if that's available,
and then still scaling it, if the
| | 03:44 | screen size is reduced.
| | 03:46 | Now, I said, you may, but that's a
big hand that you are going to have to.
| | 03:48 | You are going to have to go in and
modify the image tags directly in the
| | 03:52 | index.htm file as well.
| | 03:54 | So if you go into the code and you
scroll down, you are going to go into the
| | 04:01 | aside and you are going to find those images
right here, so about line 182 and line 77, okay.
| | 04:09 | So I'm betting to that, it's probably
enough to keep you guys busy for a while.
| | 04:13 | Now for this lab, you may need to go
back to some of the previous movies and
| | 04:17 | refresh your memory about a few of the
techniques that we covered. That's fine.
| | 04:20 | You'll also need to make a few
educated guesses and probably employ a little
| | 04:24 | trial and error on a few of the elements.
| | 04:26 | And to be honest, I did that to you on purpose.
| | 04:29 | Now usually when you're working with
fluid layouts, especially really complex
| | 04:32 | ones, your initial
planning works fine up to a point.
| | 04:36 | Then there are always places within the
layout that you are just going to have
| | 04:39 | to test and tweak in order to get the
layout looking the way you wanted to.
| | 04:44 | And don't forget, once you've
finished to watching the solutions movie that
| | 04:47 | follows this one, to compare your code
to mine, and hear my take on how I solved
| | 04:52 | some of these problems.
| | Collapse this transcript |
| Building flexible layouts: Solution| 00:00 | Welcome back! I hope you had fun working on the
flexible version of the desolve.org layout.
| | 00:05 | Now, flexible layouts are difficult,
especially the more complex your pages get,
| | 00:09 | so don't feel bad if a few of the steps
didn't work out the way you wanted them to.
| | 00:12 | Let's go through our finished code
together, and then we can compare the results.
| | 00:16 | So I have the index and
the main.css files open,
| | 00:19 | so index.htm, main.css, and you can
find these in the finished_files directory
| | 00:24 | of 06_06. And of course the CSS one is in its
own little directory there, _css. Okay.
| | 00:31 | So I am just going to start with
the steps and work my way down.
| | 00:33 | I'm first going to scroll down in the
finished_code to about line 167 or so.
| | 00:39 | I gave the body a width of 90%, and then
I gave it a maximum width of 1180 and a
| | 00:44 | minimum width of 860.
| | 00:45 | I am guessing your values
probably differ from mine a little bit.
| | 00:50 | That's one of the things about
setting a minimum- and a maximum-width value.
| | 00:53 | Generally, a lot of times, it just
goes down through personal preference.
| | 00:57 | But I did find that below 860 my layout
broke, for a number of different reasons.
| | 01:02 | I am going to switch over to the
browser here and I notice that once I started
| | 01:06 | getting below this value, the
navigation really started to run into each other.
| | 01:10 | You can see that the centering of the
navigation is still a little off right
| | 01:14 | here, but it got even more
off the further down I went.
| | 01:16 | So at about 860 pixels, I decided to
sort of freeze it at that point. All right!
| | 01:21 | Now going back into the code, I am going
to scroll down a little bit down to the
| | 01:24 | article and the aside.
| | 01:26 | I noticed that the widths are set to
the values that I gave you up in the
| | 01:29 | comments, 70.1 for the width for the
article, 3.9% padding for both of them.
| | 01:35 | The article of course is padding to left,
because it's the left-hand column; and
| | 01:38 | the aside has padding placed on the
right, because it's the right-hand column.
| | 01:41 | Remember, we don't really need to
specify any space between the two of them
| | 01:44 | because we're letting the layout
itself sort of form that space.
| | 01:48 | So that's something that we don't need to do.
| | 01:49 | Now, I also told you to go down and in
the mainNav banner and header elements,
| | 01:54 | go ahead and line up their content
with the content of these columns.
| | 01:58 | And if I scroll down to line 199, you
can see for the header, all I had to do
| | 02:02 | was place padding-left of 3.9%,
because they're all top-level elements.
| | 02:06 | Same thing for mainNav.
About line 237 or so,
| | 02:09 | you can see that has a padding-left
of 3.9%. And then the banner selector,
| | 02:14 | which is a little bit further
down here, around 295 or so, it has a
| | 02:17 | padding-left of 3.9%.
| | 02:19 | So because these were all top-level
elements, meaning they're sitting right
| | 02:22 | inside the body tag, I didn't need to
do any further calculations on them.
| | 02:26 | I could just go ahead and use the
exact same padding values that the columns
| | 02:30 | and cells were using.
| | 02:31 | Had they been nested inside of them, I
would have had to recalculate those values.
| | 02:35 | Now, speaking of that, those two news
items, if I go back into the browser
| | 02:39 | of course, these two news items right here
that are floating side by side each other,
| | 02:43 | you were tasked also to find out the
padding values, the margin values between
| | 02:48 | them, and the width of them, again so
that you can arrive at sort of equal
| | 02:52 | spacing between all of those elements.
| | 02:53 | Now, this is totally a judgment call.
| | 02:55 | You probably did a lot of tweaking, and
your values might not necessarily match
| | 02:59 | mine, and that's okay as long
as you're happy with the results.
| | 03:02 | So if I scroll down, I can find, on
line 360, the news selector for this.
| | 03:07 | Now, you'll notice that for both of
these, I used a width of 44%, and I used a
| | 03:11 | padding on both sides of 2%, on the left-
hand side of 2%, the right-hand side of 2%.
| | 03:16 | Add up to a total width for both
these elements of 48%, which of course is
| | 03:20 | going to leave about 4% space
between the two of them, which is why the
| | 03:22 | margin-right is set to 4%.
| | 03:24 | Now, it doesn't matter that
your values match mine precisely.
| | 03:28 | You could use some decimal points.
| | 03:29 | Maybe you did 45% for the width, or 48%.
| | 03:33 | It doesn't really matter. As long as
you're comfortable with the spacing and you
| | 03:36 | like the way that it looks, that's fine!
| | 03:38 | What's important here, however, is that
all those values add up to 100%, so that
| | 03:43 | you're taking up all the
available space within the column.
| | 03:46 | Now, the contest images, the last task
that I gave you, to make sure those images
| | 03:51 | displayed at their natural size if they
were able to and then scale down if the
| | 03:55 | browser was scaled down,
| | 03:56 | that was a little trickier.
| | 03:58 | I played a little trick on you there.
| | 03:59 | That's a little harder than it seems,
because in the previous exercise where we
| | 04:05 | did that, remember we set
the maximum width to 100%.
| | 04:08 | But the maximum width there, in order
for it to be that size, is not 100%.
| | 04:12 | Let me show you what I mean.
| | 04:14 | If I go down to, all the way down,
let's go down to about line 650 here in our
| | 04:20 | code, I can find content image.
| | 04:22 | Now, here is how I solved it.
| | 04:23 | For these content images, I placed
their maximum width at 82%. All right!
| | 04:30 | How many people got 82%? Show of hands.
A couple of people. Anybody, 82%?
| | 04:33 | So how in the world did I get
82% and I didn't just give it 100%?
| | 04:37 | Well remember, 100% would have made it
fill the entire right-hand column, which
| | 04:41 | is going to scale it up, and it's
not the way I want that to look.
| | 04:44 | So I placed two images side by side just
like I did in the previous fluid images
| | 04:49 | exercise, and I began playing around
with the width until I got a width value
| | 04:54 | that was equal to the 200 pixels of
width that the image actually was, and that
| | 04:58 | turns out to be 82%.
| | 05:00 | So I am saying, okay, you can be your
normal width, but any other time I want
| | 05:04 | you to be 82% of that column, and
that way it's going to maintain that
| | 05:08 | sizing-spacing relationship
with all the other elements.
| | 05:11 | Now, of course I also had to modify
the code, so if I went back to index and
| | 05:15 | took a look at these images, you can
see that I got rid of the height property.
| | 05:18 | Now I left the width property in here.
Some of you probably stripped it out.
| | 05:21 | If you did, that's fine. That's no problem.
| | 05:23 | So essentially, what this is doing
now is it's telling the browser, hey!
| | 05:26 | I need to be 200 pixels wide. And then
the CSS is overwriting that, and saying
| | 05:30 | okay, yeah, 200 pixels is fine as long
as you're not above 82% of the column
| | 05:37 | width. And that's how that's working.
| | 05:38 | So it will appear at 200 pixels wide if it can.
| | 05:42 | It's going to calculate its height
based on the aspect ratio, and that it will
| | 05:45 | never be wider than 82% of the column.
| | 05:47 | So now, when we scale this, the
images display at their natural size until
| | 05:53 | you start scaling it down, and then they
maintain that relationship at 82% the entire time.
| | 06:00 | Okay. Of all the labs I've given
you, I'll be honest with you,
| | 06:03 | this one took the most time
for me to actually put together.
| | 06:07 | To convert the fixed version of the
deslove.org site that I was working with
| | 06:11 | before this to the fluid versions, I
had to make significant changes to the
| | 06:15 | overall layout, and in more than just one area.
| | 06:18 | So if you want to take this lab a
little bit further, if you really want to dig
| | 06:21 | it apart, compare this layout to the
finished layout in our floats lab, which is
| | 06:26 | the previous lab where we used
the fixed version of this layout.
| | 06:29 | See if you can identify all of the
formatting changes from the fixed layout to
| | 06:33 | this one, and there a lot of them, and think
about why they were necessary in order
| | 06:38 | for this fluid layout to work.
| | 06:39 | Now, that should give you some insight
into some of the issues that you'll need
| | 06:42 | to think about as you begin to
create fluid layouts in your own work.
| | Collapse this transcript |
|
|
7. Building Responsive LayoutsResponsive layout overview| 00:00 | If there's one thing you need to
embrace to become a successful web designer
| | 00:04 | it's that the web is a constantly
evolving place, and you're going to need to
| | 00:08 | evolve right along with it.
| | 00:09 | While a few years ago, we were arguing
over the merits of fixed layouts versus
| | 00:13 | flexible layouts, a very odd thing happened.
| | 00:17 | People began using the web in a
way that made this argument moot.
| | 00:20 | Now over the past few years, the
explosion of smartphones and tablets means that
| | 00:25 | your content is now consumed by a wider
array of screen sizes, resolutions, and
| | 00:31 | browser types than ever before.
| | 00:33 | As a designer, that means you have to
decide whether you're going to target one
| | 00:37 | view over any other possible
views, design a flexible layout that has to
| | 00:41 | have the ability to grow from one
extreme to another, or whether you are going
| | 00:44 | to build a layout that is responsive.
| | 00:46 | So what's a responsible layout?
| | 00:48 | Well, responsive layouts do just that;
| | 00:50 | they respond to the
environment in which they're viewed.
| | 00:54 | On desktops, the design could be
enhanced for the larger screen, with increased
| | 00:57 | graphics size and layouts
that target wider aspect ratios.
| | 01:02 | On a tablet, they could change layout
and functionality based on the device type
| | 01:07 | or the orientation of the device.
| | 01:10 | On smartphones, they could again change
layout based on smaller size, hide some
| | 01:15 | elements, and even take advantage of
smartphone features like geolocation and
| | 01:19 | messaging. And if you're wondering, all
three of the layouts that I just showed
| | 01:22 | you are the exact same page,
just viewed at different sizes.
| | 01:27 | Now if it sounds like I'm describing
multiple layouts, you're not too far from the truth.
| | 01:31 | Now responsive layouts typically use
a combination of layout techniques and
| | 01:35 | multiple layout types to serve the
proper layout to the proper screen or device.
| | 01:39 | Now with that in mind, here are few
pros and cons to consider when thinking
| | 01:42 | about using responsible layout.
| | 01:43 | Now the biggest reason to use them of
course is that it allows you to control
| | 01:48 | how users experience your content,
based on the device or screen size.
| | 01:53 | This allows you to create unique
experiences for every device type or screen
| | 01:56 | size that consumes your content.
| | 01:58 | You can also use this as a way of
reorganizing or even eliminating content
| | 02:03 | based on the context.
| | 02:04 | Mobile users can experience a site
that's tailored for the mobile experience,
| | 02:08 | while desktop users can interact with
a site designed around that context.
| | 02:12 | It also means that in many cases you
don't have to create separate sites for
| | 02:16 | mobile devices or redirect
them to mobile-specific pages.
| | 02:20 | Now the downside to responsive layouts
is that they require much more work, in
| | 02:25 | terms of planning and executing the designs.
| | 02:27 | You are essentially designing around
multiple contexts all at the same time, and
| | 02:31 | that requires you to be much more
rigorous about how you build your site.
| | 02:36 | Failure to plan one aspect properly can
cascade into having to rework multiple
| | 02:40 | areas of your site, as they
are all tied into one another.
| | 02:43 | You also have to rely on newer
features. So in the short term you are going
| | 02:46 | to need to expend a great deal of
energy into providing fallback features
| | 02:50 | for browsers or devices that don't have the
support needed for your responsive layout.
| | 02:55 | Also, to take advantage of things like
certain mobile-specific features and to
| | 02:58 | adequately serve alternate content,
you're going to need to go beyond just using
| | 03:02 | CSS into at least moderate
JavaScripting and using JavaScript libraries like
| | 03:07 | modernizer that are designed to
help you create responsive designs.
| | 03:11 | Now my own personal feelings are that
as designers, if we don't design for all
| | 03:15 | the ways that people can consume or
interact with our content, we are failing to
| | 03:19 | address a significant amount of our audience.
| | 03:22 | In terms of smartphones and tablet, I
feel that we've reached a point where
| | 03:26 | those audiences are just
too big to ignore anymore.
| | 03:29 | So even if you want to take things
slowly and not try to master responsive
| | 03:32 | layouts right off the bat, at least
understand the concepts and how the
| | 03:36 | techniques of fixed and fluid
layouts are used to help create more
| | 03:39 | responsive designs.
| | 03:41 | In a few years, my guess is we are
going to be looking at layouts that aren't
| | 03:44 | responsive, and wondering, how in
the world we ever got away with it.
| | Collapse this transcript |
| Using media queries| 00:00 | Media queries allow you to determine
which styles are applied to pages based on
| | 00:04 | specific media properties, such as
screen width, color, or resolution.
| | 00:08 | Now, if you're familiar with using
the media attribute to apply styles for
| | 00:12 | screen devices, print, projection,
that sort of thing, then media queries are
| | 00:15 | going to feel very natural to you,
because they're just an extension of
| | 00:19 | existing media capabilities.
| | 00:21 | So to kind of show you what media
queries are capable of, I have the
| | 00:24 | media-queries.htm file open from the
07_02 folder. And I want to preview this
| | 00:30 | page in the browser real quick, so we
can do a quick rundown of the syntax
| | 00:35 | before we actually start using them.
| | 00:37 | So the basic syntax you can see in the
first block of code here, basically after
| | 00:41 | whatever media declaration you are doing,
you can put before it, you can put two
| | 00:44 | keywords, optional keywords: not or only.
| | 00:46 | Not will negate everything that comes
after it, so it's sort of testing to see
| | 00:50 | what isn't true, and then only is
designed basically just to hide the media
| | 00:55 | query from any older user
agents that don't support them.
| | 00:58 | Then after that, you have the media
type, like you would normally, so
| | 01:01 | screen, projection, print, all of
those that you are probably pretty
| | 01:04 | familiar with using.
| | 01:05 | And then after that, we have an
optional and keyword, which is followed by an
| | 01:09 | expression, and that's where the
real power of media queries comes in.
| | 01:12 | I am going to scroll down just a little bit.
| | 01:14 | You can see, for example, in the
second code block we have a sample media
| | 01:18 | query, and this one is saying, for
only screen devices that have a minimum
| | 01:22 | width of 720 pixels,
| | 01:24 | so 720 pixels and above, go ahead and
apply these styles. So we are basically
| | 01:29 | focusing exactly when and
where our styles are applied.
| | 01:31 | Now, below that I have a listing of
all the different media features that you
| | 01:34 | can test for, things like width,
height, device-width, and device-height,
| | 01:38 | orientation, device-aspect-ratio, color,
so there's a lot of things that we can
| | 01:43 | test for when we're choosing
when to apply our styles or not.
| | 01:48 | Anything that's a length value, like
width or height, you can also expand what
| | 01:52 | you are doing by adding a minimum
and a maximum prefix to it. All right!
| | 01:55 | I am going to go back into our code,
and we are going to experiment with media
| | 01:58 | queries by writing one of our own.
| | 02:00 | So I am going to scroll down. And
because we are using embedded styles and we
| | 02:04 | are not linking out to an external style sheet,
| | 02:06 | we are going to use a different
form of syntax than what you saw there
| | 02:09 | previewed on the page.
| | 02:10 | We are going to use
what's known as a @media block.
| | 02:13 | So I am going to do @media. Then I am
going to open up a curly brace and then have
| | 02:17 | the closing curly brace.
| | 02:18 | Now, essentially, this is a way of
grouping styles within a larger style sheet.
| | 02:23 | So anything that goes inside that
media block is governed by the media query
| | 02:27 | that's going to follow this.
| | 02:28 | So right after @media, I am going
to go ahead and do my media query.
| | 02:31 | I am going to type in only screen, and
then in parentheses max-width, and then
| | 02:40 | a colon, of 920 pixels, so you don't need a
semicolon after that, just the 920 pixels.
| | 02:46 | So this is saying that, hey, for just
screen devices, any screen device that
| | 02:50 | has up to a maximum width of 920 pixels, I
want you to apply these styles that follow.
| | 02:55 | So any styles in those curly braces
that follow that are going to be applied if
| | 02:59 | they meet this criteria.
| | 03:00 | So we are basically saying 920 and
below is when this is going to apply.
| | 03:04 | So we are going to go down into our
@media block, and this is where it might seem
| | 03:08 | a little bit strange if you hadn't
seen the syntax before. Inside this I can
| | 03:11 | just start writing additional rules.
| | 03:13 | So I am going to type in body,
and we will do width of 90%.
| | 03:19 | So I am going to go ahead and save that.
| | 03:20 | Now, I know that looks a little weird
to have a closing curly brace here and a
| | 03:24 | closing curly brace here, but you've
have got to remember that this is a big
| | 03:27 | containing media block. And you want
to be very careful when you're writing
| | 03:31 | these, because you don't
want to leave off a curly brace.
| | 03:33 | That's one of the reasons why,
when I created that media block,
| | 03:36 | I went ahead and created the curly
braces first before I begin authoring any
| | 03:39 | styles inside of it.
| | 03:40 | So I have gone ahead and saved that.
| | 03:42 | I am going to go back out
to my browser and refresh.
| | 03:44 | Now, right off the bat, we don't
notice any difference, because currently my
| | 03:47 | screen is above 920 pixels, but notice
that as I begin to resize it, when I hit
| | 03:51 | that trigger point, you can see when I do it.
| | 03:53 | As soon as I hit that trigger point,
the body width changes and I have a
| | 03:56 | flexible layout below a certain screen
size, so you can see exactly when that
| | 04:01 | trigger is happening.
| | 04:03 | And what's nice about this is as our
screen size gets smaller, the layout is
| | 04:06 | going to respond to it, but of
course it still breaks at a smaller size.
| | 04:09 | That's one of the great
things about media queries.
| | 04:11 | You can have media queries
that target multiple conditions.
| | 04:14 | Let's go back in and modify our
existing media query and then write another one
| | 04:17 | so that we are targeting three
totally different situations.
| | 04:20 | So I am going to go back into my code.
And the existing media query, I am going
| | 04:24 | to add some constraints to this.
| | 04:26 | So essentially, right after the first
and, I am going type in min-width this
| | 04:31 | time. So not max-width, but
you can also do min-width.
| | 04:33 | Now, I am going to do a min-width of 600
pixels, and then between those two I am
| | 04:38 | going to do another and. So you can just chain as
many of these as you would like.
| | 04:42 | So essentially what we are doing
here is we are setting a range.
| | 04:44 | We are saying, hey, anytime that the
screen value is between 600 pixels and 920
| | 04:50 | pixels, make the body width 90%.
| | 04:52 | That means that when this condition isn't
true the default styles will go ahead and apply.
| | 04:57 | So I am just going to do @media, and
I am going to type in only screen and
| | 05:04 | max-width of 599 pixels.
| | 05:10 | And if you look at the media query that
we have above this, it's pretty obvious
| | 05:14 | why I'm doing that, because as soon as
the last condition has been met, which is
| | 05:18 | min-width of 600 pixels, 599 pixels
picks it up from that exact moment.
| | 05:22 | So we are creating a media query
that's going to be active the moment the one
| | 05:26 | above it is not, in terms of screen size.
| | 05:28 | And then inside that I'm going to do a
body selector, and the body selector, I
| | 05:33 | am going to go ahead and set a width on that,
and I am going to do a width of 320 pixels.
| | 05:38 | I also want to do one more selector,
and that's going to be a pre selector. The
| | 05:42 | pre is the element that's
representing our code snippets on our page.
| | 05:45 | And so for that I am going to take the
font-size and I am going to reduce the
| | 05:49 | font-size to .8ems, so I am going
to make it a little bit smaller.
| | 05:51 | I am going to give it some padding, so I
am going to apply a padding of .5ems to it.
| | 05:57 | And then I want to change the
background color, just because we can.
| | 06:00 | And I am going to do rgb(246, 247, 160), and
don't forget your semicolon there. All right!
| | 06:10 | So I am going to save this, go back
out to my browser, and refresh, and now we
| | 06:15 | have three different conditions.
| | 06:17 | When the browser is above 920 pixels,
we see the page in its default state.
| | 06:22 | As we begin to scroll down a
little bit, we get a flexible layout.
| | 06:25 | And then when we hit the last trigger
point, the screen size changes again and
| | 06:29 | fixes again, and then our
preformatted code also changes, in terms of the
| | 06:34 | background color that's being used,
the font-size, the padding, so all those
| | 06:37 | things kind of change.
| | 06:39 | Now, I will honest with you.
| | 06:40 | These really aren't very
well-thought-out media queries.
| | 06:42 | I was being a lot more reactive to
what I was seeing as I was styling rather
| | 06:46 | than really thinking through and
planning my styles the way I should be.
| | 06:50 | Media queries are incredibly
powerful, but if you don't have proper
| | 06:54 | organization, your code can get really
sloppy very quickly, and that makes it
| | 06:59 | hard to maintain, and it's going to
have a lot of unintended side effects when
| | 07:02 | you have conflicts between
media queries and other styles,
| | 07:05 | so you have to be very, very careful about that.
| | 07:07 | Now, to deal with that you are going to
have to carefully plan and organize your
| | 07:10 | styles when using media queries, and
that is something that we are going to
| | 07:13 | discuss in our next movie.
| | Collapse this transcript |
| Organizing styles| 00:00 | Media queries are amazing. The ability
to totally change your layout based on
| | 00:05 | factors like screen size or orientation
really opens up a lot of possibilities
| | 00:10 | for us as designers.
| | 00:11 | However, because of their selective
nature in how they apply styles, media
| | 00:16 | queries can create a huge headache
for you if you don't properly plan and
| | 00:20 | organize your styles.
| | 00:22 | In this movie we will explore organizing
your media queries in a way that allows
| | 00:25 | you to write the most efficient styles
possible and prevents styling conflicts
| | 00:29 | when media queries are triggered.
| | 00:31 | So I have the organizing.htm file
open here, and for all intents and
| | 00:34 | purposes, it's pretty much exactly the same file
that we were working with in our last exercise.
| | 00:40 | However, there have been some slight
changes to the styles. And if I scroll down
| | 00:45 | a little bit into the styles, I can
see that I have a grouping of styles down
| | 00:47 | here now that say "styles that change."
| | 00:50 | So essentially, one of most important
parts of planning media queries is to
| | 00:54 | identify what I call global
styles versus styles that change.
| | 00:58 | Now, global styles--I am going to scroll up
and we have our global styles right up here--
| | 01:02 | these are styles that are consistent
regardless of which media query is being
| | 01:07 | triggered or which
condition is currently present.
| | 01:10 | And by identifying those styles at the
very beginning of your planning process,
| | 01:15 | you can group those styles together,
keep them out of the media queries.
| | 01:19 | This will help prevent conflicts, style
conflicts from one media query to the other.
| | 01:23 | It's also going to make your styles a
little bit more efficient and a little
| | 01:25 | bit more lightweight.
| | 01:26 | So what I am going to do is right above
the opening style tag, I am just going
| | 01:30 | to go ahead and start a comment, and I
am going to type in global styles and
| | 01:34 | then sort of close that comment there.
| | 01:37 | Now, there are two ways of approaching
dealing with styles that change, and we
| | 01:41 | are going to kind of tackle both of them.
| | 01:43 | One would be to split selectors up.
| | 01:45 | You can see here, for example, that
from the body tag, I have pulled out the
| | 01:48 | width value, because the width is going to
change based upon which media query is active.
| | 01:53 | The rest of the properties
for the body tag doesn't change,
| | 01:56 | so I've placed them in the global styles.
| | 01:58 | Now, that's one way of doing it.
| | 02:00 | The downside of organizing your
style this way of course is that you have
| | 02:03 | multiple selecto |
|
|
