Hi, today we're going to be talking about Display and Visibility on Your Webpage.
Now when it comes time to making your page, again and again I'm going to tell
you that laying out where you want things to be is key to a really effective page.
And one of the things you need to remember is that every element we look at is
basically a box.
And the box model is something we're gonna cover in a future lecture.
But before we get to the specifics, I just wanna talk about some details.
Because how the display on your display element works affects all the neighboring
elements on your page.
So before we begin, I just wanna remind you every element on your page is a box.
Just think of it that way.
And display is how you can decide whether the boxes should be next to each other,
underneath each other, and different things like that.
So when we talk about display,
there's some common values that pretty much everyone uses or
they're just a default so you've been using it without even knowing it.
Elements that are inline will sit next to other elements, they take up
just enough width and height and no more, when you're putting them on the page.
So, I kind of think of these as my good children in the minivan elements.
It's fine if I wanna put three kids in the backseat.
They're not gonna elbow each other, they're just fine.
They're going to get along.
The other type of display is block.
And what block does is it forces a line break in between your elements.
So, again, with my example,
I've got one kid who really just can't sit next to anybody else.
I have to put them in their own row.
Even though she's really tiny and she doesn't take up that much space,
she has a whole row all to herself when we're driving in the car.
What's nice about block elements is,
while they take up all of the horizontal width and just enough height,
you can go in and you can set a height and a width on those elements.
So even though it's block, and
you've reserved the whole width of the page, you can say, but
I really only want it to be 40 pixels, or half the page, or something like that.
So with inline, it takes up just enough space, and you're not able to change that.
You don't get to say, I want it to be bigger or smaller.
If it's inline, that's all you get.
With block you have a little bit more flexibility, but
you do have the problem that you're reserving a lot of space.
So of course,
what we came up with is this idea of something that takes the best of both.
And this is inline-block.
Elements that have display inline-block are going to be the same as inline and
that they can be next to each other, but they'll also accept height and width.
So if you have two things that want to be next to each other, but
you wanna give them a lot of room, and right now they're inline.
Well, go ahead, change it to inline-block, and
then you can give it a height and a width.
And if you have something that's block and
you want two of them next to each, again, no problem.
Change them to inline-block and you can set the width and height.
The fourth one which we don't really use as much is the idea of display none.
And what happens here is if you have an element on your page and
you give it display none, it's as if the browser completely ignores that it exists.
It's as if it lifted it up and took it out of the page.
So these four, the inline, the block, the inline-block and
the none are the ones that we're really gonna start playing with at the beginning.
So what I have right here is just a simple file that's going to have
three span elements, three div elements and three paragraph elements.
If you remember, span elements are inline, so
they're only gonna take up as much space as they need.
But the divs and the paragraphs, those are block, so
they're gonna take up more space.
On the side over here, what I've done is I've added a little bit of styling,
which may or may not make sense when we first talk about it, but
I gave each of my spans a height and a width.
Basically, all my elements, a height and width and a different background color.
So, if we're to look at it right now.
You would see that I've made all my spans green, all my divs blue, and
all my paragraphs a kind of pinkish purple color.
And each one lays out exactly by default as how it would go.
The reason the divs are as big as they are and
the paragraphs are as big as they are is, again we put that in our style sheet.
You can see my height and my width.
If I didn't include these by default, these divs and
paragraphs would take up the whole width of the screen, and
they'd be really small because they would only need enough space to have that text.
So let's go ahead and play with this.
Normally, I would go into my style sheet and I would kind of
put different things in, try different displays and different things like that.
But, I'm hoping it'll be a little clearer for
you if instead, I do this at the same time.
So you can follow along with me with what's inspect element, or you
can go ahead and change the code in your file, save it, refresh, save it, refresh.
So I got to inspect element over here by right-clicking, and
what I'm going to do now is I'm going to right-click on one of these span elements.
Inspect Element and it pops it up for me.
Any element on your page,
you can play with, you can either play with just that particular element you're
poking on right there or I can say I wanna play with all the spans.
So let's look down here.
Right now, I have a height and a width for each one of my span elements.
But they're not actually very big.
So how do we change that?
If something's inline, but you wanna give it a height and a width,
we go down to display, and I'm gonna go here.
And I'm gonna try inline-block.
Boom, right away my spans have taken on those properties.
So before when they were inline, they were small.
When they're inline block, I can shape them really nicely.
And if I'm changing them to just block, You can see now they're on
top of each other because block elements don't like to be next to each other.
The final property I'm gonna show you right here is this idea of none.
When you have none, it's as if the spans didn't even exist.
You didn't save any space for them,
it's not as if you would even know looking at the page that they were ever there.
So kind of interesting thing to do and you might use it later if you want things to
appear some times and not others but you don't wanna leave a big white space.
So, go ahead and take a second and
I'm just gonna click on a few of the other things.
So for instance my divs, I can go and I can say, you know what, I wanna make just
this one div, I wanna go ahead and make it inline-block, and let's see what happens.
Well, the odd thing is I changed it and nothing actually happened and
I'm kinda wondering if you know why.
When you have inline-block, you're saying oh, go ahead and
put me next to other people if I fit.
But if your neighbors are also block, it's not going to work.
So now, instead of changing just one, I'm gonna change all the divs.
And you can see that, oh, because they're about 45%,
two of them fit next together but the last one doesn't.
So there's really no good way to feel comfortable with display
until you take this code and start switching things around.
What happens if it's inline?
What happens if it's inline-block?
What happens if it's span?
And pay really close attention to the fact that it's not enough to know what
the display is for the one element you're working on,
you also need to know the display for its neighbors.
But, let's go ahead and talk a little bit more.
When we're talking about display,
it's pretty common to also talk about two other properties as well.
And these are called float and clear.
And what float and clear do is they don't necessarily say where you want the page to
be, the element on your page to be specifically, but
where you generally want to put it.
By default, when the browser is putting things on the page,
it starts in the upper left hand corner.
And it just starts putting them in, so looking at your site, it'd be like first
thing, first thing, oh, the next one is block so I better put it underneath.
And it just keeps adding things in.
So if your browser's really big, you can fit more span elements next to each other,
if it's small, you can fit less.
Well float lets you actually reposition things, and
it says hey I want you to kind of float this anywhere,
and if I say float right, I want you to put it as far to the right as you can.
If I say float left, I want you to put it as far left as you can.
The other elements are basically aware of one another, and when you use float,
they won't overlap but things are gonna look a little bit crazy.
And when you add float again, you're affecting your neighbors
because your neighbors need to know where you're going.
Which is why we have this additional property called clear.
Because sometimes when you're coding, you wanna just make sure that things aren't
floating to your left or your right.
You want really to have that space all to yourself,
in which case you can use clear left, clear right, or clear both.
Clear left to make sure there's nothing floating to you on the left.
Clear right means there's nothing floating to you on the right.
And clear both, well as you can guess,
it means nothing should be floating next to you at all.
So let's go ahead and take another look at one more example where I'm gonna
play with that same code but I'm gonna start using float and clear as well.
So we're going to look at the same exact file we were just looking at
when I was playing with display block, inline, none, etc.
But now, we're gonna throw float and clear into the mix as well.
So here is the code we're looking at, and here's the website.
And so the first thing I'm gonna do is I'm gonna play with the spans up here and
I'm gonna try floating them.
So remember, when you float something, you're basically saying put it as far over
to the side as you can and the other elements are almost going to act as if
they're not there but they're not gonna overlap it.
So I'm gonna go down here, go to my float.
Say float.
Now, the first thing I'm gonna do is I'm just gonna float it to the left,
which means they're not really gonna move too much.
What I want you to look for
is that right now, there's a little bit of space between each one of my spans.
When I change it to left, that space goes away and
the div actually goes underneath it as well, because the spans are on top.
Now when I try changing it and floating it right.
When I float it right, I want you to notice that not only do they not have
space in between them, that they're kind of right next to each other again.
But if you look, the order of the A, B, and C are different.
Because the first elements it's placed on the page is span A and so
it moves it as far to the right as it can.
And then when it's doing span B, it's moving as far to the right as it can, and
span C as well.
So this is kind of something interesting,
and you can see that if they were to the left, the divs would overlap them.
All right, so let's go ahead and do a few more of these things.
And I'm gonna do a change all my divs, so that they are also.
Let's go here, float left.
So by now the page is looking kinda crazy because things are going all over
the place and you really, you probably don't want it to look this way.
Particularly if we wanted all of our paragraphs to really be at the bottom
of the page.
So I'm gonna go up here to my paragraphs.
And I'm gonna go ahead and I'm gonna say, I'm not gonna float these.
Instead, I'm gonna say I'm done with floating,
please stop floating things around me.
And I am gonna clear both sides.
So the paragraphs are now saying, get me away from all this floating craziness.
I just wanna be down here.
Floating, clearing, different things like this.
When we do these kind of really simple code examples in the lecture,
they're not always gonna make as much sense as when you're putting them in as
part of something bigger.
But the problem is I can't show you examples of something bigger because you'd
all fall asleep about three or four minutes into the code.
So go ahead, do what we've always been doing and
just play with these a little bit until you get the idea of what they do.
As time goes on,
you'll start to figure out when you want them to actually do these kind of actions.