1 00:00:08,362 --> 00:00:13,108 Hi, today we're going to be talking about Display and Visibility on Your Webpage. 2 00:00:13,108 --> 00:00:17,816 Now when it comes time to making your page, again and again I'm going to tell 3 00:00:17,816 --> 00:00:22,760 you that laying out where you want things to be is key to a really effective page. 4 00:00:22,760 --> 00:00:27,207 And one of the things you need to remember is that every element we look at is 5 00:00:27,207 --> 00:00:28,303 basically a box. 6 00:00:28,303 --> 00:00:32,360 And the box model is something we're gonna cover in a future lecture. 7 00:00:32,360 --> 00:00:36,220 But before we get to the specifics, I just wanna talk about some details. 8 00:00:36,220 --> 00:00:39,981 Because how the display on your display element works affects all the neighboring 9 00:00:39,981 --> 00:00:41,079 elements on your page. 10 00:00:41,079 --> 00:00:45,396 So before we begin, I just wanna remind you every element on your page is a box. 11 00:00:45,396 --> 00:00:47,325 Just think of it that way. 12 00:00:47,325 --> 00:00:51,295 And display is how you can decide whether the boxes should be next to each other, 13 00:00:51,295 --> 00:00:53,355 underneath each other, and different things like that. 14 00:00:54,610 --> 00:00:56,140 So when we talk about display, 15 00:00:56,140 --> 00:00:59,080 there's some common values that pretty much everyone uses or 16 00:00:59,080 --> 00:01:02,440 they're just a default so you've been using it without even knowing it. 17 00:01:02,440 --> 00:01:06,020 Elements that are inline will sit next to other elements, they take up 18 00:01:06,020 --> 00:01:10,440 just enough width and height and no more, when you're putting them on the page. 19 00:01:10,440 --> 00:01:13,380 So, I kind of think of these as my good children in the minivan elements. 20 00:01:13,380 --> 00:01:16,411 It's fine if I wanna put three kids in the backseat. 21 00:01:16,411 --> 00:01:18,756 They're not gonna elbow each other, they're just fine. 22 00:01:18,756 --> 00:01:20,370 They're going to get along. 23 00:01:21,530 --> 00:01:23,760 The other type of display is block. 24 00:01:23,760 --> 00:01:28,100 And what block does is it forces a line break in between your elements. 25 00:01:28,100 --> 00:01:29,500 So, again, with my example, 26 00:01:29,500 --> 00:01:32,540 I've got one kid who really just can't sit next to anybody else. 27 00:01:32,540 --> 00:01:34,310 I have to put them in their own row. 28 00:01:34,310 --> 00:01:37,130 Even though she's really tiny and she doesn't take up that much space, 29 00:01:37,130 --> 00:01:41,220 she has a whole row all to herself when we're driving in the car. 30 00:01:41,220 --> 00:01:43,810 What's nice about block elements is, 31 00:01:43,810 --> 00:01:47,690 while they take up all of the horizontal width and just enough height, 32 00:01:47,690 --> 00:01:53,330 you can go in and you can set a height and a width on those elements. 33 00:01:53,330 --> 00:01:54,751 So even though it's block, and 34 00:01:54,751 --> 00:01:57,990 you've reserved the whole width of the page, you can say, but 35 00:01:57,990 --> 00:02:02,730 I really only want it to be 40 pixels, or half the page, or something like that. 36 00:02:02,730 --> 00:02:07,460 So with inline, it takes up just enough space, and you're not able to change that. 37 00:02:07,460 --> 00:02:10,190 You don't get to say, I want it to be bigger or smaller. 38 00:02:10,190 --> 00:02:12,140 If it's inline, that's all you get. 39 00:02:12,140 --> 00:02:15,300 With block you have a little bit more flexibility, but 40 00:02:15,300 --> 00:02:18,430 you do have the problem that you're reserving a lot of space. 41 00:02:18,430 --> 00:02:19,290 So of course, 42 00:02:19,290 --> 00:02:22,705 what we came up with is this idea of something that takes the best of both. 43 00:02:23,965 --> 00:02:26,155 And this is inline-block. 44 00:02:26,155 --> 00:02:31,185 Elements that have display inline-block are going to be the same as inline and 45 00:02:31,185 --> 00:02:35,565 that they can be next to each other, but they'll also accept height and width. 46 00:02:35,565 --> 00:02:39,025 So if you have two things that want to be next to each other, but 47 00:02:39,025 --> 00:02:42,355 you wanna give them a lot of room, and right now they're inline. 48 00:02:42,355 --> 00:02:44,895 Well, go ahead, change it to inline-block, and 49 00:02:44,895 --> 00:02:46,500 then you can give it a height and a width. 50 00:02:46,500 --> 00:02:48,560 And if you have something that's block and 51 00:02:48,560 --> 00:02:51,870 you want two of them next to each, again, no problem. 52 00:02:51,870 --> 00:02:54,550 Change them to inline-block and you can set the width and height. 53 00:02:55,710 --> 00:03:00,265 The fourth one which we don't really use as much is the idea of display none. 54 00:03:00,265 --> 00:03:03,720 And what happens here is if you have an element on your page and 55 00:03:03,720 --> 00:03:08,030 you give it display none, it's as if the browser completely ignores that it exists. 56 00:03:08,030 --> 00:03:10,950 It's as if it lifted it up and took it out of the page. 57 00:03:10,950 --> 00:03:14,600 So these four, the inline, the block, the inline-block and 58 00:03:14,600 --> 00:03:18,810 the none are the ones that we're really gonna start playing with at the beginning. 59 00:03:18,810 --> 00:03:22,720 So what I have right here is just a simple file that's going to have 60 00:03:22,720 --> 00:03:27,700 three span elements, three div elements and three paragraph elements. 61 00:03:27,700 --> 00:03:30,860 If you remember, span elements are inline, so 62 00:03:30,860 --> 00:03:33,150 they're only gonna take up as much space as they need. 63 00:03:33,150 --> 00:03:35,580 But the divs and the paragraphs, those are block, so 64 00:03:35,580 --> 00:03:37,510 they're gonna take up more space. 65 00:03:37,510 --> 00:03:40,990 On the side over here, what I've done is I've added a little bit of styling, 66 00:03:40,990 --> 00:03:44,320 which may or may not make sense when we first talk about it, but 67 00:03:44,320 --> 00:03:47,050 I gave each of my spans a height and a width. 68 00:03:47,050 --> 00:03:49,184 Basically, all my elements, a height and width and a different background color. 69 00:03:49,184 --> 00:03:51,087 So, if we're to look at it right now. 70 00:03:53,584 --> 00:03:57,448 You would see that I've made all my spans green, all my divs blue, and 71 00:03:57,448 --> 00:04:00,770 all my paragraphs a kind of pinkish purple color. 72 00:04:00,770 --> 00:04:04,870 And each one lays out exactly by default as how it would go. 73 00:04:04,870 --> 00:04:07,180 The reason the divs are as big as they are and 74 00:04:07,180 --> 00:04:11,690 the paragraphs are as big as they are is, again we put that in our style sheet. 75 00:04:11,690 --> 00:04:13,820 You can see my height and my width. 76 00:04:13,820 --> 00:04:16,940 If I didn't include these by default, these divs and 77 00:04:16,940 --> 00:04:19,520 paragraphs would take up the whole width of the screen, and 78 00:04:19,520 --> 00:04:23,650 they'd be really small because they would only need enough space to have that text. 79 00:04:23,650 --> 00:04:26,270 So let's go ahead and play with this. 80 00:04:26,270 --> 00:04:28,870 Normally, I would go into my style sheet and I would kind of 81 00:04:28,870 --> 00:04:32,350 put different things in, try different displays and different things like that. 82 00:04:32,350 --> 00:04:34,290 But, I'm hoping it'll be a little clearer for 83 00:04:34,290 --> 00:04:37,180 you if instead, I do this at the same time. 84 00:04:37,180 --> 00:04:41,270 So you can follow along with me with what's inspect element, or you 85 00:04:41,270 --> 00:04:46,860 can go ahead and change the code in your file, save it, refresh, save it, refresh. 86 00:04:46,860 --> 00:04:50,090 So I got to inspect element over here by right-clicking, and 87 00:04:50,090 --> 00:04:54,788 what I'm going to do now is I'm going to right-click on one of these span elements. 88 00:04:54,788 --> 00:04:58,230 Inspect Element and it pops it up for me. 89 00:04:58,230 --> 00:04:59,590 Any element on your page, 90 00:04:59,590 --> 00:05:03,890 you can play with, you can either play with just that particular element you're 91 00:05:03,890 --> 00:05:09,520 poking on right there or I can say I wanna play with all the spans. 92 00:05:09,520 --> 00:05:10,660 So let's look down here. 93 00:05:10,660 --> 00:05:14,620 Right now, I have a height and a width for each one of my span elements. 94 00:05:14,620 --> 00:05:15,649 But they're not actually very big. 95 00:05:15,649 --> 00:05:17,459 So how do we change that? 96 00:05:17,459 --> 00:05:22,264 If something's inline, but you wanna give it a height and a width, 97 00:05:22,264 --> 00:05:25,563 we go down to display, and I'm gonna go here. 98 00:05:29,311 --> 00:05:31,551 And I'm gonna try inline-block. 99 00:05:31,551 --> 00:05:36,690 Boom, right away my spans have taken on those properties. 100 00:05:36,690 --> 00:05:38,970 So before when they were inline, they were small. 101 00:05:38,970 --> 00:05:41,132 When they're inline block, I can shape them really nicely. 102 00:05:41,132 --> 00:05:47,078 And if I'm changing them to just block, You can see now they're on 103 00:05:47,078 --> 00:05:49,987 top of each other because block elements don't like to be next to each other. 104 00:05:49,987 --> 00:05:54,096 The final property I'm gonna show you right here is this idea of none. 105 00:05:58,124 --> 00:06:01,073 When you have none, it's as if the spans didn't even exist. 106 00:06:01,073 --> 00:06:02,500 You didn't save any space for them, 107 00:06:02,500 --> 00:06:05,597 it's not as if you would even know looking at the page that they were ever there. 108 00:06:05,597 --> 00:06:09,322 So kind of interesting thing to do and you might use it later if you want things to 109 00:06:09,322 --> 00:06:12,999 appear some times and not others but you don't wanna leave a big white space. 110 00:06:12,999 --> 00:06:14,514 So, go ahead and take a second and 111 00:06:14,514 --> 00:06:16,801 I'm just gonna click on a few of the other things. 112 00:06:16,801 --> 00:06:21,305 So for instance my divs, I can go and I can say, you know what, I wanna make just 113 00:06:21,305 --> 00:06:26,388 this one div, I wanna go ahead and make it inline-block, and let's see what happens. 114 00:06:31,917 --> 00:06:35,295 Well, the odd thing is I changed it and nothing actually happened and 115 00:06:35,295 --> 00:06:37,170 I'm kinda wondering if you know why. 116 00:06:38,230 --> 00:06:40,360 When you have inline-block, you're saying oh, go ahead and 117 00:06:40,360 --> 00:06:42,630 put me next to other people if I fit. 118 00:06:42,630 --> 00:06:45,105 But if your neighbors are also block, it's not going to work. 119 00:06:45,105 --> 00:06:48,483 So now, instead of changing just one, I'm gonna change all the divs. 120 00:06:55,153 --> 00:06:58,286 And you can see that, oh, because they're about 45%, 121 00:06:58,286 --> 00:07:01,850 two of them fit next together but the last one doesn't. 122 00:07:01,850 --> 00:07:05,760 So there's really no good way to feel comfortable with display 123 00:07:05,760 --> 00:07:08,780 until you take this code and start switching things around. 124 00:07:08,780 --> 00:07:10,600 What happens if it's inline? 125 00:07:10,600 --> 00:07:11,448 What happens if it's inline-block? 126 00:07:11,448 --> 00:07:12,922 What happens if it's span? 127 00:07:12,922 --> 00:07:16,687 And pay really close attention to the fact that it's not enough to know what 128 00:07:16,687 --> 00:07:19,436 the display is for the one element you're working on, 129 00:07:19,436 --> 00:07:22,095 you also need to know the display for its neighbors. 130 00:07:22,095 --> 00:07:24,417 But, let's go ahead and talk a little bit more. 131 00:07:27,028 --> 00:07:28,768 When we're talking about display, 132 00:07:28,768 --> 00:07:32,450 it's pretty common to also talk about two other properties as well. 133 00:07:32,450 --> 00:07:35,000 And these are called float and clear. 134 00:07:35,000 --> 00:07:38,678 And what float and clear do is they don't necessarily say where you want the page to 135 00:07:38,678 --> 00:07:41,073 be, the element on your page to be specifically, but 136 00:07:41,073 --> 00:07:42,691 where you generally want to put it. 137 00:07:42,691 --> 00:07:45,573 By default, when the browser is putting things on the page, 138 00:07:45,573 --> 00:07:47,504 it starts in the upper left hand corner. 139 00:07:47,504 --> 00:07:51,605 And it just starts putting them in, so looking at your site, it'd be like first 140 00:07:51,605 --> 00:07:55,970 thing, first thing, oh, the next one is block so I better put it underneath. 141 00:07:55,970 --> 00:07:57,850 And it just keeps adding things in. 142 00:07:57,850 --> 00:08:01,850 So if your browser's really big, you can fit more span elements next to each other, 143 00:08:01,850 --> 00:08:04,440 if it's small, you can fit less. 144 00:08:04,440 --> 00:08:07,280 Well float lets you actually reposition things, and 145 00:08:07,280 --> 00:08:10,330 it says hey I want you to kind of float this anywhere, 146 00:08:10,330 --> 00:08:14,840 and if I say float right, I want you to put it as far to the right as you can. 147 00:08:14,840 --> 00:08:18,920 If I say float left, I want you to put it as far left as you can. 148 00:08:18,920 --> 00:08:22,550 The other elements are basically aware of one another, and when you use float, 149 00:08:22,550 --> 00:08:26,960 they won't overlap but things are gonna look a little bit crazy. 150 00:08:26,960 --> 00:08:30,100 And when you add float again, you're affecting your neighbors 151 00:08:30,100 --> 00:08:32,880 because your neighbors need to know where you're going. 152 00:08:32,880 --> 00:08:34,809 Which is why we have this additional property called clear. 153 00:08:34,809 --> 00:08:38,539 Because sometimes when you're coding, you wanna just make sure that things aren't 154 00:08:38,539 --> 00:08:40,158 floating to your left or your right. 155 00:08:40,158 --> 00:08:43,103 You want really to have that space all to yourself, 156 00:08:43,103 --> 00:08:46,950 in which case you can use clear left, clear right, or clear both. 157 00:08:46,950 --> 00:08:50,328 Clear left to make sure there's nothing floating to you on the left. 158 00:08:50,328 --> 00:08:53,032 Clear right means there's nothing floating to you on the right. 159 00:08:53,032 --> 00:08:55,035 And clear both, well as you can guess, 160 00:08:55,035 --> 00:08:57,850 it means nothing should be floating next to you at all. 161 00:08:59,780 --> 00:09:03,120 So let's go ahead and take another look at one more example where I'm gonna 162 00:09:03,120 --> 00:09:07,210 play with that same code but I'm gonna start using float and clear as well. 163 00:09:09,040 --> 00:09:11,970 So we're going to look at the same exact file we were just looking at 164 00:09:11,970 --> 00:09:15,490 when I was playing with display block, inline, none, etc. 165 00:09:15,490 --> 00:09:19,070 But now, we're gonna throw float and clear into the mix as well. 166 00:09:19,070 --> 00:09:23,230 So here is the code we're looking at, and here's the website. 167 00:09:23,230 --> 00:09:26,592 And so the first thing I'm gonna do is I'm gonna play with the spans up here and 168 00:09:26,592 --> 00:09:28,330 I'm gonna try floating them. 169 00:09:28,330 --> 00:09:32,551 So remember, when you float something, you're basically saying put it as far over 170 00:09:32,551 --> 00:09:36,057 to the side as you can and the other elements are almost going to act as if 171 00:09:36,057 --> 00:09:38,808 they're not there but they're not gonna overlap it. 172 00:09:38,808 --> 00:09:41,129 So I'm gonna go down here, go to my float. 173 00:09:43,522 --> 00:09:45,380 Say float. 174 00:09:45,380 --> 00:09:47,990 Now, the first thing I'm gonna do is I'm just gonna float it to the left, 175 00:09:47,990 --> 00:09:50,680 which means they're not really gonna move too much. 176 00:09:50,680 --> 00:09:51,762 What I want you to look for 177 00:09:51,762 --> 00:09:55,181 is that right now, there's a little bit of space between each one of my spans. 178 00:09:55,181 --> 00:09:59,433 When I change it to left, that space goes away and 179 00:09:59,433 --> 00:10:05,983 the div actually goes underneath it as well, because the spans are on top. 180 00:10:05,983 --> 00:10:09,290 Now when I try changing it and floating it right. 181 00:10:10,760 --> 00:10:14,740 When I float it right, I want you to notice that not only do they not have 182 00:10:14,740 --> 00:10:17,970 space in between them, that they're kind of right next to each other again. 183 00:10:17,970 --> 00:10:20,905 But if you look, the order of the A, B, and C are different. 184 00:10:20,905 --> 00:10:24,678 Because the first elements it's placed on the page is span A and so 185 00:10:24,678 --> 00:10:26,954 it moves it as far to the right as it can. 186 00:10:26,954 --> 00:10:31,404 And then when it's doing span B, it's moving as far to the right as it can, and 187 00:10:31,404 --> 00:10:32,290 span C as well. 188 00:10:32,290 --> 00:10:34,082 So this is kind of something interesting, 189 00:10:34,082 --> 00:10:37,185 and you can see that if they were to the left, the divs would overlap them. 190 00:10:37,185 --> 00:10:40,587 All right, so let's go ahead and do a few more of these things. 191 00:10:40,587 --> 00:10:45,996 And I'm gonna do a change all my divs, so that they are also. 192 00:10:48,132 --> 00:10:51,034 Let's go here, float left. 193 00:10:51,034 --> 00:10:54,920 So by now the page is looking kinda crazy because things are going all over 194 00:10:54,920 --> 00:10:58,754 the place and you really, you probably don't want it to look this way. 195 00:10:58,754 --> 00:11:02,850 Particularly if we wanted all of our paragraphs to really be at the bottom 196 00:11:02,850 --> 00:11:04,140 of the page. 197 00:11:04,140 --> 00:11:05,860 So I'm gonna go up here to my paragraphs. 198 00:11:07,870 --> 00:11:11,100 And I'm gonna go ahead and I'm gonna say, I'm not gonna float these. 199 00:11:11,100 --> 00:11:13,080 Instead, I'm gonna say I'm done with floating, 200 00:11:13,080 --> 00:11:14,820 please stop floating things around me. 201 00:11:14,820 --> 00:11:17,700 And I am gonna clear both sides. 202 00:11:17,700 --> 00:11:21,110 So the paragraphs are now saying, get me away from all this floating craziness. 203 00:11:21,110 --> 00:11:22,189 I just wanna be down here. 204 00:11:23,420 --> 00:11:26,340 Floating, clearing, different things like this. 205 00:11:26,340 --> 00:11:29,277 When we do these kind of really simple code examples in the lecture, 206 00:11:29,277 --> 00:11:32,627 they're not always gonna make as much sense as when you're putting them in as 207 00:11:32,627 --> 00:11:33,831 part of something bigger. 208 00:11:33,831 --> 00:11:37,144 But the problem is I can't show you examples of something bigger because you'd 209 00:11:37,144 --> 00:11:39,578 all fall asleep about three or four minutes into the code. 210 00:11:39,578 --> 00:11:42,534 So go ahead, do what we've always been doing and 211 00:11:42,534 --> 00:11:47,210 just play with these a little bit until you get the idea of what they do. 212 00:11:47,210 --> 00:11:47,960 As time goes on, 213 00:11:47,960 --> 00:11:52,650 you'll start to figure out when you want them to actually do these kind of actions.