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.