Michael T Ganschow Green: Alright cool.
Michael T Ganschow Green: Oh, welcome to another G RC 175 session we're going to continue going over the box model and playing around with our little div tags and our container a bit today i'm going to talk about overflows and i'm going to talk about.
Michael T Ganschow Green: placements and we're going to go in a little more in detail in with.
Michael T Ganschow Green: height and width and how content stretches things and how how content alters the container boxes and then we're going to.
Michael T Ganschow Green: finish off with stacking them on their sides and playing with different kinds of messing with the vertical html stack.
Michael T Ganschow Green: Alright, so before I get started, just a couple of class housekeeping things um I assume everybody saw all of the due date changes I put that up.
Michael T Ganschow Green: two nights ago after last class to make sure that you guys.
Michael T Ganschow Green: could see, I decided to reshuffle out of the due dates around.
Michael T Ganschow Green: To make sure.
Michael T Ganschow Green: That you guys had enough time to work on them and make sure that you guys would know the right things, by the time they were do.
Michael T Ganschow Green: Oh, we have a question already question so for those who don't have a chat log or watching this later Australia is asking for project three what is due on march 9 so on march 9.
Michael T Ganschow Green: You have to between now and then go online and find three bad websites, as per the project sheet and email me the three bad websites um I would send them to me in order of preference on and then.
Michael T Ganschow Green: Once you send them to me, I will go through them, and I will approve one of those assuming they're assuming one of them is bad enough if you're if it's your first choice i'll pretty much just do that.
Michael T Ganschow Green: But I may pick another one out of your batch.
Michael T Ganschow Green: don't worry if you know someone else's picked a website, you would like to redesign I don't mind having several people.
Michael T Ganschow Green: Working on the same website, because I like seeing different solutions to it so don't worry if you know somebody else has it if you want to work on it send it to me so.
Michael T Ganschow Green: march 9 or by March 9 a few of you have already sent in ugly websites got the website you finding the website you finding our hauntingly bad, let me tell you.
Michael T Ganschow Green: So this is good, this is good, this is good i'm curious to see a curious to see how you can salvage the situation, but a bunch of you are already sent me.
Michael T Ganschow Green: Your three websites I I need them by March night, so I can approve them, so you have some time to do the preliminary work necessary for the project.
Michael T Ganschow Green: that's that's a that's a good one right there okay cool so um let's see what else in my class thing I everybody got to do to the revised due dates also don't forget.
Michael T Ganschow Green: To leave your two cents for your fellow students on project way to forum you go to close the forum, oh no i'm don't forget to leave you two cents for all of your fellow students who submitted their final projects here, I see a bunch of you already are there's like eight 910 11.
Michael T Ganschow Green: comments on those threads, which is good, I would like to see everybody leave feedback on everybody else's and you have until 11:59pm tomorrow night Friday night.
Michael T Ganschow Green: To turn in your critiques seven days from when the original was do so pleased to be going in and giving everybody a piece of your mind.
Michael T Ganschow Green: So, aside from that.
Michael T Ganschow Green: Before we dive in and start messing around with our dibs a little more do we have any other questions.
Michael T Ganschow Green: cool alright, ladies and gentlemen, let us.
Michael T Ganschow Green: jump back into.
Michael T Ganschow Green: madness, yes, share the main screen okay guys around there's there's our website with a nice eggshell background for a screen.
Michael T Ganschow Green: A bright magenta and the lime green and then I think all the other colors are represented in the terrible borders on this guy here, so these are two div tags that we messed with.
Michael T Ganschow Green: Last class so they basically what we did, for those who did not attend last class what we did was we made a nice new basic little html which is available for download at the class files link on the website.
Michael T Ganschow Green: That you basically just has a main.
Michael T Ganschow Green: tag to contain our various crazy content and then I inserted in a couple of dibs.
Michael T Ganschow Green: I created a CSS file which i've annotated, by the way, for those who have questions on how things are done.
Michael T Ganschow Green: i've got it we got our body which has a lovely eggshell color zeroed out the margin and padding to take out any of the any of the browser defaults and margin and padding.
Michael T Ganschow Green: Well, I mean it's got a nice kind of forest green background Emerald green I believe was the requested color nice Emerald green background I put 20 pixels of padding around it to demonstrate.
Michael T Ganschow Green: This principle distance from the edges and how padding works we're gonna play the padding a little more in a bit um.
Michael T Ganschow Green: I made a general div style.
Michael T Ganschow Green: With this beautiful future.
Michael T Ganschow Green: background color so that you can see it.
Michael T Ganschow Green: We played around with solid width and height I added 24 pixels margin that is distance from the box to other objects around it, both the edges of your mind here the edges of the edges of the.
Michael T Ganschow Green: Of the container as well as between it and other objects around it, so all of our deals have a margin of 24 pixels and then I threw a nice solid colored border around it.
Michael T Ganschow Green: Just to kind of show the edges and show how borders work.
Michael T Ganschow Green: Later on, I added a class style actually to class styles to this thing.
Michael T Ganschow Green: That that enable or that will enable us to change the background color to lime green.
Michael T Ganschow Green: and add in a wacky series of borders, basically modifying each border edge so that it's a different border and it creates a terribly mute and looking thing.
Michael T Ganschow Green: By doing that I also added a second class style to my div called two dash hundred and two dash hundred has a fixed width and fixed height of 200 hundred pixels basically shrinking the boss, so we did that to demonstrate that.
Michael T Ganschow Green: Class styles will override tag styles because class styles are meant to style specific portions of the document that you call out through and attribute yeah.
Michael T Ganschow Green: Now I got two emails asking me how many class styles, can you add to a particular tag because we have two of them right here.
Michael T Ganschow Green: separated by a space, and you can add as many as you want separated by a space as far as i'm aware, there is no upper limits.
Michael T Ganschow Green: I have seen tags that have five and six class styles applied to them, so if you're using your class styles, for example on something really generic like a 200 pixel class style here, you might apply that all over your document to anything that is 200 pixels.
Michael T Ganschow Green: And so that might be one class it's applied, and then there might be more specific classes like we did with to hear.
Michael T Ganschow Green: That do things like change background colors and that borders and dropping images and things like that you know we could put a background into, I might add, not yet not yet.
Michael T Ganschow Green: i'm not gonna i'm not gonna blow you guys as much so before I get started, do we have do you have and layout questions.
Michael T Ganschow Green: From last class I got plenty emails messages about it so that was good in between all of the terrible websites you guys are haunting my dreams with.
Michael T Ganschow Green: alrighty then cool so.
Michael T Ganschow Green: I think i'm going to add in a couple of more dims so that we can have fun playing with stacks both horizontal and vertical and so you can see how our main continues to stretch as we add more content, then we're going to hide the type we hid last class that is inside each of these dibs.
Michael T Ganschow Green: And we're going to play around with margin inside each of the dibs good times not margin, and I say margin padding padding inside each of the dibs.
Michael T Ganschow Green: Okay, so i'm going to add in a couple of extra dibs here as well, with no content in them, but just to stretch our.
Michael T Ganschow Green: main open a little bit.
Michael T Ganschow Green: answer that we have more to stack sideways when we start really futzing around little layouts So if I pop this open in the preview here you'll see now the forest green extends pretty much all the way to the bottom, because it's being stretched out by these four big dibs okay.
Michael T Ganschow Green: And you know what what the hey i'm going to throw a background image in on my third div here so i'm going to make a.
Michael T Ganschow Green: Class style just to review how class styles work and i'll throw a background image in because I got I got I got poked in the brain a little bit by putting the background image in so.
Michael T Ganschow Green: i'm going to make another class style now last class, I made the class attribute first and then made the styles to fill it this time i'm going to do it backwards.
Michael T Ganschow Green: hey now here we go so i'm gonna change the size, with this thing I think we're going to make a we're gonna make a class style called three for our third div.
Michael T Ganschow Green: And in here.
Michael T Ganschow Green: we're going to.
Michael T Ganschow Green: let's add in change the width and height slightly so for my width Oh, you know what i'm not zoomed in you guys i'm way out here, and nobody said anything hang on let's zoom in here advanced portion of screen yes do that.
Michael T Ganschow Green: Share hey there we go now we're zoomed in okay good that down a little bit alright so for three i'm going to add in a whim, that in a slightly different with, since this is the theme is three will do this as 333 pixels for width and height.
Michael T Ganschow Green: Of 333 pixels.
semi colon.
Michael T Ganschow Green: And let's stick just for fun just for fun we're gonna go background.
Michael T Ganschow Green: image.
Michael T Ganschow Green: URL.
Michael T Ganschow Green: Technology all like a dream Weaver getting us to browse isn't that great so we're going to browse into my images folder and put an evil Doc in there, because you know why not.
Michael T Ganschow Green: And then, at the end of my background image right there i'm going to put a little semi colon now I could do all of the stuff that we did here if I open up the.
Michael T Ganschow Green: index file that I did here on the index files body, where we have our background image and I could set that repeat to know repeat.
Michael T Ganschow Green: And I could Center Center him and I could size him to cover the whole area I could set fixed well let's see what he looks like first, before I start getting a little frisky like that so let's see here let's go.
Michael T Ganschow Green: And let's see what this guy looks like so we're going to save the style sheet that we're going to do a file save all and then we're going to see.
Michael T Ganschow Green: minimized it areas let's see here oh we're not showing the dechy something's broken let's see what's broken alright we're going to see here.
Michael T Ganschow Green: it's pointed at duck is evil twin Oh, I know why you know why it's broken, I think you guys can figure out why it's broken.
Michael T Ganschow Green: So i'm like wait a minute why isn't that applying well look what kind of style, it is it's a class style, and all this class again after great start what did Michael not do yet.
Michael T Ganschow Green: So good yeah no you're right I forgot to actually apply the class style I built the class style I didn't put it in my document I popped it open here and i'm like.
Michael T Ganschow Green: Why don't I show you on that one well, maybe Michael maybe just maybe because you've got to jump into the code come down to your third div right here now that's the closing give 30 PM right here and add a class.
Michael T Ganschow Green: equals quotation marks three Aaron is now if I go save IRA is like an action let's see what he looks like no boy no sometimes I.
Michael T Ganschow Green: yep areas look at that look like a social media portrait like it's I guess is like like some kind of tinder photo or something i'm a duck and evil duck Oh, all I ask, in return, is your soul so.
Michael T Ganschow Green: Now he's they are noticed, by the way, a few other things have happened it's slightly larger it's 330 pixels compared to our 300 pixels stock raspberry pi rhubarb.
Michael T Ganschow Green: dmc or that we've made and it's got a duck in it, congratulations, so now, I can start messing around with these guys a little bit more so that's just a quick DEMO on how class styles work.
Michael T Ganschow Green: Such a quick DEMO that I forgot how class that's work and apparently just previewed it so um you can either make them by first putting in classes in here so class attributes class equals quotation marks whatever you want to name the class or you can.
Michael T Ganschow Green: Or you can make the class first in your CSS period, whatever you want to name the class curlicue brackets properties and values and then come in and apply that here.
Michael T Ganschow Green: In fact, because it has a duck in it and because you guys might be concerned because all of my class names or numbers i'm gonna change this name from three.
Michael T Ganschow Green: To quack.
Michael T Ganschow Green: so that you can see that you can name your classes anything you want they don't have to be numbers.
Michael T Ganschow Green: And if I come back crack is applied the duck's back all this good with the world questions on classes very handy handy dandy and such.
Michael T Ganschow Green: were too scared you're tired move here we go.
Michael T Ganschow Green: I ski so let's mess around a little bit further i'm gonna turn the type back on inside my other two dibs now I plopped in a bit of text that I took from.
Michael T Ganschow Green: bacon Epsom last class again for those that weren't there.
Michael T Ganschow Green: But I did not wrap them in paragraph tags or anything else, it would apply formatting paragraph tags will apply formatting.
Michael T Ganschow Green: Particularly top and bottom margin automatically unless you zero that out with a paragraph tag reset basically a a P tag style that zeros out all the margin patting him.
Michael T Ganschow Green: I didn't particularly feel like it, so I just threw some text in.
Michael T Ganschow Green: and
Michael T Ganschow Green: Look at that there's text in there, oh snap dog, so what i'm going to do is i'm going to modify this text and we're going to play around a little bit with.
Michael T Ganschow Green: With.
Michael T Ganschow Green: padding on our guy here.
Michael T Ganschow Green: So what so in order to show kind of what padding does a little bit.
Michael T Ganschow Green: I am going to wonder what i'll do i'll add padding first as a class style so i'm going to do a couple of things here.
Michael T Ganschow Green: don't be alarmed but i'm going to set a couple of things here real quick don't worry, we will fix them again i'm going to take the smaller sizing off of this div tag so that you guys can see.
Michael T Ganschow Green: The difference in size of these guys when I pad so don't mind me i'm just going to delete the 200 off of two here we go, so now he's the same size as.
Michael T Ganschow Green: The other guy here all you may notice the eagle eyed among you may notice, as were previewing this in the browser here as a preview of these to stretch this open a little bit hey I want to resize you.
Michael T Ganschow Green: As we're previewing these two in the browser here, you may notice.
Michael T Ganschow Green: That this second one is a little bit different sized than the first one now, if we look into CSS.
Michael T Ganschow Green: If you look, if we look in the CSS here, there is nothing resizing to now that I deleted 200 beyond this width and height of 300 that we established.
Michael T Ganschow Green: For our main dibs so Michael You might ask why is this second guy down here this Green one this to slightly wider than the standard div well.
Michael T Ganschow Green: you've just discovered, one of the major sizing issues of the box model.
Michael T Ganschow Green: So whatever you put for the width and the height of something that's your specifying the width and height for.
Michael T Ganschow Green: That does not take into account other width and height effecting factors, so why is this guy slightly wider because we've got a fixed like a three or five pixel let's see the dotted margin we've got a five pixel dotted margin.
Michael T Ganschow Green: over here on the left, and so what that's doing is that is expanding the width of it a little bit past here it's expanding it out by five pixels and then we have another one over here that I think is for.
Michael T Ganschow Green: I don't remember the sizes, I used, yes, it is for so we're so this thing is nine pixels wider, even though it's told to be.
Michael T Ganschow Green: 300 pixels by our CSS because it's got five pixels a border on one side and four pixels a border on the other, it's actually a little bit wider it's 309 pixels wide instead of 300 pixels wide.
Michael T Ganschow Green: And you can see that happening right here, right here on the edge, you can see, this edges here and then edges here.
Michael T Ganschow Green: that's nine four pixels out, so what you're getting there is a slight shim and resize based on the borders now you're gonna want to keep that in mind as you're laying stuff out that as you add borders, as well as margin which we will see in a second.
Michael T Ganschow Green: They it will actually expand the size of objects that you're applying it, too, so your math might work out if you have everything spect up and whitson heights.
Michael T Ganschow Green: And everything works out but as soon as you start adding borders or patterns think swell up a little bit like what would be.
Michael T Ganschow Green: The swell up like an old floorboard and start splitting all over the place, and your design explodes and then it comes to Michael and you like Michael Why is my html broken and Michael will look at you and say.
Michael T Ganschow Green: So, what are your wits here, because this is clearly bouncing this down and when we go through your wits I bet you dollars to doughnuts when they had this happen it's because there's a straight padding or a stray border in here john.
Michael T Ganschow Green: That you did not take into account when you sized everybody.
Michael T Ganschow Green: Okay, Michael then, how do I take that into account.
Michael T Ganschow Green: Pretty easily um what you want to do is if you're doing in exact measurements like pixels or inches or pikas or whatever, all you have to do is subtract whatever you're patting is and, whatever your border is from the width and height.
Michael T Ganschow Green: or whichever dimension it goes we've got top padding you subtract it from the height.
Michael T Ganschow Green: left to right padding is subtracted from the width so you just subtract it from whatever dimension you're punching in that gets a little more complicated when you've got say a to pixel border on a 30% wide a box when you start dealing in liquid that is flexible.
Michael T Ganschow Green: With like percentages it gets a little more complex typically I just eyeball it and i'll dial off a percent or two if i've got a.
Michael T Ganschow Green: If i've got a.
Michael T Ganschow Green: Border or margin and i'll just dial and dial until it until it works just eyeballing it I don't have any quick and easy math for you guys to convert pixels to percentages i'm positive it exists out there, but I just eyeball it change a few things and go.
Michael T Ganschow Green: So, adding in.
Michael T Ganschow Green: Adding in padding and adding in border will cause your shapes to distort along whichever access you add it so let's add some So you can see it happening on the screen one.
Michael T Ganschow Green: So i'm gonna come back to to hear a lovely experimental to with our border and everything and i'm going to add some padding to him.
Michael T Ganschow Green: Now I could add all different dimensions of padding as we discussed last class where I just start putting in numbers and start adding spaces and and, as you can see, by the handy dandy little chart dreamweaver provides.
Michael T Ganschow Green: It changes different size of padding but, in my case i'm just going to put.
Michael T Ganschow Green: 40 pixels of padding all the way around okay now what does this do.
Michael T Ganschow Green: Well, in terms of the size this says 300 pixels but this right here adds 80 pixels to the width and 80 pixels to the height.
Michael T Ganschow Green: Which means that this thing is now 380 pixels how did I get 80 pixels 40 pixels a top 40 pixels a bottom 40 pixels left 40 pixels and right boom.
Michael T Ganschow Green: So i'm gonna hit save and when I open this thing up in a browser, you will notice how much bigger, it is then our stock give up here, then our lovely.
Michael T Ganschow Green: magenta div up here, and indeed this continues on, no matter what size of margin, I put in, so if I die on the margin back to like a little reasonable 10 pixels rather than a massive 40.
Michael T Ganschow Green: You can still you can still see it is noticeably larger here than it is in the.
Michael T Ganschow Green: In the than it is on the Stockton noticeably larger.
Michael T Ganschow Green: 10s not quite enough, I think i'm going to do 15 pixels get us a nice little room to breathe.
That looks good.
Michael T Ganschow Green: i'm a few of you have questions on my last html that I built on why I put.
Michael T Ganschow Green: A lot of font i'm information up here in my body tags, so if we go to the other one.
Michael T Ganschow Green: Come on, come on zoom chrome can either way, thank you, if I go up here to my other one will notice ID I put in.
Michael T Ganschow Green: My text color my font family, and I can add in other type things up here in my body tag Why would I do it there, as opposed to doing it.
Michael T Ganschow Green: At the tag point, and so what what what I mean by doing that and I don't think I sufficiently explained it in class at the time, why I set a fun on my body tag typically.
Michael T Ganschow Green: Is that that sort of establishes its overall font for the document and I don't really have to think about setting fonts.
Michael T Ganschow Green: Otherwise until I need to for hierarchical purposes either changing this type face or to making boulder or changing the size or whatever, and I can get on I can have kind of the a lot of the the the the document font.
Michael T Ganschow Green: stuff all sort of preset in my body so let's say I want to do some nice and Sarah type, so I can come up to my body, and I can go font family.
Michael T Ganschow Green: And we'll just grab a gotham for now, Nice and Sarah type and we'll give it a color okay Oh, here we go here we go guys Okay, so now I tend to pull the class I used all of your colors last class time to pull the class what color should I make the overall try color for the document here.
Michael T Ganschow Green: i'm curious to see what terrible suggestions you people are going to come up with four colors.
Michael T Ganschow Green: navy blue all right, you got it navy blue it is let's see I think i've got you got a navy in here in the talking colors and the word colors that CSS has look at that there it is right there navy blue everything to look like links there we go so there's a nice navy.
Michael T Ganschow Green: And you know what i'm going to justify my paragraphs too so we've done font family and color before but we haven't really gotten much deeper than that so.
Michael T Ganschow Green: justification is.
Michael T Ganschow Green: see your justification is controlled hey what are you doing what are you doing dreamweaver you're being funny with me, I know so we're gonna go text align.
Michael T Ganschow Green: Go text align justified now there are a number of different texts lines you can use, there is the usual left.
Michael T Ganschow Green: Center.
Michael T Ganschow Green: And right that you're familiar with from word processing software's and others, but you can also justify your type as well.
Michael T Ganschow Green: There are a few others will get to as well as time goes on, so we got our font family.
Michael T Ganschow Green: Just a nice sancerre of gotham i've got a color of navy and i've got a text align them justify so I can hit save on this guy and.
Michael T Ganschow Green: then look at that justified type with all the gaps on it so.
Michael T Ganschow Green: You might notice these gaps, right here, for those of you that have had the page layout course, you know that this is kind of the bane of your existence we're going to mess around with the.
Michael T Ganschow Green: width and things like that to fill in some of the gaps on your justified tights that's a little harder to do.
Michael T Ganschow Green: With websites, unfortunately, because, again, you can't control the display size that showing them so that's that's a big problem I mentioned earlier, so typically just slightly narrowing the text area like I did here with a margin will help that out quite a bit.
Michael T Ganschow Green: I think i'm actually going to take the justification off this is kind of there and take it back and i'm gonna leave it at the default of left align everything everything defaults to left aligned in an html document, by the way.
Michael T Ganschow Green: yeah looks better it's not great, but that looks better.
Michael T Ganschow Green: ma you know now i'm looking at me look at me look at my indecision i'm gonna have to justification back in because we're going to add some padding to that other Devon a bit so text align.
Michael T Ganschow Green: justify.
Michael T Ganschow Green: semi colon that will add some padding into that other gifts and he's cool alright.
Michael T Ganschow Green: So.
Michael T Ganschow Green: notice, though, again we got a slightly larger deal here so in order to let's shrink this a little bit let's take that margin that I put on this Green one and just put it on them all, so that they have good compression on their type here so let's go.
Michael T Ganschow Green: Go.
Michael T Ganschow Green: And then let's go grab a grab my margin.
Michael T Ganschow Green: Excuse me not my margin my padding grab my padding and take it off of two.
Michael T Ganschow Green: And i'm going to put it right here, under my desk just a regular old pattern now what does this do this adds that padding to all oh hang on.
Michael T Ganschow Green: Pardon me while it throws a weird little errors remembers having fun save all save it in the browser refresh their code okay little code code rendering air in the sky so as you can see.
Michael T Ganschow Green: We have our nice 300 and 30 by 330 pixel squares now and notice again tightening up the type a little bit filled in a lot of the weird reading that we were getting on that guy so.
Michael T Ganschow Green: there's a it reads a lot better it's got room to breathe all around the edges just just good stuff all the way around.
Michael T Ganschow Green: So pardon me for one second.
Michael T Ganschow Green: sorry about that had to blow my nose and I did not want to subject your ears I didn't want it to definite my class Michael hearing damage me with his foghorn so um so we set the padding and to give us a nice little nice little extra diff area here i'm.
Michael T Ganschow Green: willing to do anything I got a 200 back to the little guy i'm a shrink this little dude back Mr two to 200.
Michael T Ganschow Green: there's 200 so again much smaller but the text is still looking halfway decent got a little bit of a gap here, though, but not much we can do about that unless we played around with his.
Michael T Ganschow Green: With his margin, a little bit, we could add extra margin to him if we wanted to, so I could, for example, come to two.
Michael T Ganschow Green: and on March and I keep saying margin it's padding sorry definitely guys again padding 20 pixels to push that in SAVE and then we go boop.
Michael T Ganschow Green: yeah again it's it's.
Michael T Ganschow Green: that's, this is the big problem with justify type is you don't have quite the fine control over type with CSS as you do.
Michael T Ganschow Green: With graphics software's, for example, and so, sometimes you wind up with some type that look a little odd from time to time.
Michael T Ganschow Green: there's some things we can do and we'll play with that a little later on, but but for now that's it that's The thing that that that happens notice, as well the thicker padding i've added in here, because my.
Michael T Ganschow Green: My my.
Michael T Ganschow Green: My Square.
Michael T Ganschow Green: or my class style adds extra padding to it, it overrides the padding we have for our main does alright so.
Michael T Ganschow Green: i'm actually going to shrink this guy down a little bit to the text spills out of him, so you can see what happens.
Michael T Ganschow Green: When you have a defined size container and you've got more content than the container can hold so i'm going to make a class style called 100 zero ne 103 guesses what the sizing is going to be on this thing with.
Michael T Ganschow Green: We go with the height of 100 pixels and i'm going to add instead of 200 we're going to call this 100 saves will be a super tiny box now super tiny box so look at this all of my text is now.
Michael T Ganschow Green: being squeezed out the bottom Okay, this is called overflow in web design parlance and basically What it means is that there is too much content for the space that fills it can.
Michael T Ganschow Green: I want to insert an image oh inserting an image on CSS yes, yes, let me show you real quick, so that is a.
Michael T Ganschow Green: That is a background image background image property, so you go background image, now that now we've, this is the first time we've actually kind of hand coded one of these I hand coded one but.
Michael T Ganschow Green: In front of you guys we use the dreamweaver CSS menu before, but the property is called background dash image colon and then you do a space.
Michael T Ganschow Green: And then you do a URL with a set of parentheses, and in the parentheses you put quotation marks and then a direct link to the image that you want to add in.
Michael T Ganschow Green: Now, when you're when you're putting it in don't forget if you if you don't have something like dreamweaver that will auto browse through your root folder.
Michael T Ganschow Green: And you can find an image, you have to write it as a dot dot slash then wherever your images located ideally in an image folder.
Michael T Ganschow Green: A dot dot slash image slash whatever the file name is images pardon me and images slash whatever the file name is but, again, if you got something like dreamweaver it will it will insert it for you.
Michael T Ganschow Green: You basically just go you click browse and it'll insert the image, but if you're writing it yourself background dash image colon URL, in fact, let me put this in the chat so you can copy paste it if you want to mess around with one in yours there's the there's the rule.
Michael T Ganschow Green: So you basically the background image space URL then no spaces after URL put a set of parentheses inside those parentheses put instead of quotation marks and then the link you're going to want to do is a dot dot slash.
Michael T Ganschow Green: Images because hopefully your images in your images folder if it's not well you got bigger problems, and then the file name and the file extension and and that will insert that image nicely, as we can see here.
Michael T Ganschow Green: In our DEMO with text spilling over the top of them.
Michael T Ganschow Green: hey good good good good good excellent excellent yeah it's it's relatively straightforward, but the thing that trips people up is this dot dot slash because the dot dot slash I don't know if you were.
Michael T Ganschow Green: Angela I don't know if you were here for the lecture when I was going over.
Michael T Ganschow Green: How links work and CSS but basically because the CSS folder lives in its own folder it's sitting in the CSS folder we actually have to essentially back the hypertext out of this folder to the overall folder and then point it into.
Michael T Ganschow Green: This images folder and so that's what the dot dot slash is doing and saying jump out jump back one.
Michael T Ganschow Green: From where the where the CSS folder is to look in our main directory then hunt for folder name images and go inside that it's basically you know kind of.
Michael T Ganschow Green: kind of like terrible old mapquest directions that would lead you off the end of a boat dock but, nevertheless, if you do it right you two might be able to have a duck in one of your div tags oh snap or on your body tag even worse.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: So what do we do with a drunken sailor know what do we do with this.
Michael T Ganschow Green: With this overflow type well we're overflow content this kind of to any piece of content, by the way, that's in a piece of foreground content it's not being fed in by the CSS itself.
Michael T Ganschow Green: it's kind of an anytime so.
Michael T Ganschow Green: here's your solutions here's your solutions okay.
Michael T Ganschow Green: The nice thing is that CSS is way ahead of you, and has provided a lovely little property called overflow.
Michael T Ganschow Green: and
Michael T Ganschow Green: Basically what overflow lets you do.
Michael T Ganschow Green: Is you can specify what you want the.
Michael T Ganschow Green: The access content to do Okay, so the default if you specify no overflow is overflow visible like so yeah and all that does is that lets it just spill out.
Michael T Ganschow Green: Get squeezed out of whatever side or top or bottom it's being squeezed out of it usually comes out the bottom, but sometimes if it's long enough, it can come out the side to or it'll come out the side if it's longer than it is tall on all incredibly fun options, let me tell you.
Michael T Ganschow Green: So the default is overflow visible visible just sort of makes it sit and hang out there and flop out there that's the default overflow state, but there are a couple of others.
Michael T Ganschow Green: overflow auto well basically for the for our purposes doesn't change much of anything right oh yeah that's right they changed how that works in the new spec ooh nevermind.
Michael T Ganschow Green: Pardon me so what overflow auto does is it defaults to whatever a browser automatically does with overflow if it has if it has.
Michael T Ganschow Green: If it's got specification for it, so, in our case we're in chrome here, you said it for overflow auto chrome's automatic setting if if if it's got one is to clip it off.
Michael T Ganschow Green: Now if it doesn't see any second for it, it actually won't apply that automatic it will apply the html one, so I don't know why it's technically in the automatic setting chrome if it doesn't do it.
Michael T Ganschow Green: When you don't have any setting but don't ask me I didn't write the html spec and I showed you acted and right the.
Michael T Ganschow Green: The chrome specs so you can take it up to the chromium developers why it works weirdly like that, but if you send it on oh and chrome and TRIMs it off some other browsers let it spill out some go wherever.
Michael T Ganschow Green: So, although, although, at least in chrome anyway TRIMs it out some others might do other things.
Michael T Ganschow Green: If you set overflow hidden overflow hidden is basically the force methodology to clip it off, so, in whatever browser that it exists on that content when it hits the edge clipped right off yeah.
Michael T Ganschow Green: Do but sometimes you use overflow hidden I use it actually pretty frequently for picture trimming and for some other thing for if i'm getting some weird like one pixel shifts that's getting me multiple sets of scroll bars.
Michael T Ganschow Green: Oh hide overflows on things like that, but the most common overflow you're actually going to use is overflow scroll.
Michael T Ganschow Green: Okay overflows scroll now what does overflow scroll whatever flows scroll does is it POPs scroll bar know Michael was hitting this button, if you.
Michael T Ganschow Green: What it does chaka chaka I know are we having to all we're having a moment we're having a moment was scroll bars hang on a minute.
Michael T Ganschow Green: hang on I thought I said I thought that's what I was hitting but apparently didn't like it alright, so now.
Michael T Ganschow Green: here's what scroll does it'll put a little scroll bar in whichever direction it overflows and.
Michael T Ganschow Green: will basically let you scroll through type so anytime you see a scrolling box of type on a website that is a container of some sort usually a div tag.
Michael T Ganschow Green: or a structure tag of some sort, although may also if you're on a particular primitive website, be a table cell.
Michael T Ganschow Green: That has an overflow of scroll set on it and, basically, they just set to type up so that it so that it it POPs out the bottom like we have here, and then it just applies a little scroll bar to it okay.
Michael T Ganschow Green: Very cool very cool Okay, so now we've got I think I might even leave the scroll bar in after I show you this, I don't know you know what.
Michael T Ganschow Green: You know what i'm gonna do i'm gonna make a class style for four and i'm going to have so you have two different ones that have these different methodologies Okay, so this guy's got a scroll bar on him.
Michael T Ganschow Green: i'm going to make a for Class style for our fourth guy here copy paste this text in, and we will have him.
Michael T Ganschow Green: pop out the bottom and do an entirely different thing, so one moment i'm calling an audible right now i'm changing the way I teach this here we go here we go Be careful everybody so i'm gonna come down here to my fourth year and i'm going to put a class on your class of.
Michael T Ganschow Green: Oh, I know what i'll call this class.
Michael T Ganschow Green: stretch Armstrong.
Michael T Ganschow Green: Safe all right so.
Michael T Ganschow Green: i'm gonna make one for my stretch Armstrong here will change the background color so we can see them, obviously.
Michael T Ganschow Green: Now notice when I immediately put the dot i've already got them written into my code dreamweaver goes looking at it says, would you like to name it stretch Armstrong you better believe I would alright so i'm going to do a couple of things we're going to give it a background color.
Michael T Ganschow Green: Of a nice aquamarine, why not that's a good color and then we are going to, then we are going to I don't think i'll size it I think i'll leave the stock padding on I think i'm mostly going to.
Michael T Ganschow Green: just put aquamarine on it and then along the stretch Armstrong i'm going to put a 100.
Michael T Ganschow Green: style on that and then i'm going to copy all of the type that lives in 100 and come down here to stretch Armstrong hi we're going to insert text into you I hope you're happy there we go save now what does this give me this gives me oh Michael.
Michael T Ganschow Green: This gives me.
Michael T Ganschow Green: Another tiny box, that is spilling all over the place, look at this mess, I have made what am I going to do.
Michael T Ganschow Green: Well, one thing I can do is I could put a different overflow stayed on this guy could trim off that extra type I could.
Michael T Ganschow Green: I could.
Michael T Ganschow Green: I could set it for auto I could throw scroll bars on it, I could make I could comment out the type I could delete the type there's a lot of things that can do, but in this one, and this one i'm going to do something a little different okay.
Michael T Ganschow Green: here's what i'm gonna do.
Michael T Ganschow Green: i'm gonna take 100 off of this.
Michael T Ganschow Green: Come back into stretch Armstrong here.
Michael T Ganschow Green: And i'm going to do a width.
100.
Michael T Ganschow Green: And height of 100.
Michael T Ganschow Green: Now this is give us the same looking thing here yeah tiny box typing at the bottom yeah.
Michael T Ganschow Green: There it is we'll leave it scroll like that.
Michael T Ganschow Green: So.
Michael T Ganschow Green: I could go in and use my overflow property.
Michael T Ganschow Green: To do all kinds of things with it said if Rato cliff it off, but scroll bars whatever, but instead i'm not okay stand i'm not.
Michael T Ganschow Green: Okay i'm going to come down here to my stretch Armstrong and i'm going to change my height on it Okay, instead of being a height of 100 pixels i'm going to make this a Min height of 100 pixels okay So what does a Min height do.
Michael T Ganschow Green: Well, first of all, a Min height.
Michael T Ganschow Green: let's our up and still needs a little further, I guess, look at that.
Michael T Ganschow Green: A Min height will let it stretch I guess it's running into a limit somewhere that's interesting it should actually stretch to fill the whole thing not sure why it is.
Michael T Ganschow Green: Because when I was playing with this earlier it stretched, of course, of course, would break during the during the class DEMO but basically What it does is, in theory, in a why no why.
Michael T Ganschow Green: Okay, so hang on one second.
Michael T Ganschow Green: All right, so what a Min height should do and why this one's getting canceled.
Michael T Ganschow Green: Is a Min height will let an object get know smaller than a particular height, there was also a Min width, which means it will get no smaller than a particular with.
Michael T Ganschow Green: So if you want an object to show but habits, a stretch to fill content or to fit content, this is.
Michael T Ganschow Green: This is the way to do it, so an object will show it a certain size and then, if you put content in it that stretches it out, it will vertically or horizontally stretch.
Michael T Ganschow Green: without regard to the previous size, the previous size just established as a minimum, well i've tripped myself up, I have made myself my own bed here okay so ah.
Michael T Ganschow Green: OK, so what happens is when you combine men directions and regular directions.
Michael T Ganschow Green: The minimum direction becomes the smallest it can go and the regular direction becomes the largest it can go so what's happening is this 100 pixel Dave is being stretched out until it hits the 300 pixel height, then I have for my master dibs up here okay.
Michael T Ganschow Green: So.
Michael T Ganschow Green: i'm gonna see if I can override that real quick by throwing on a height.
Michael T Ganschow Green: want to do auto or inherit let's find out here talking through each of these if they work.
Michael T Ganschow Green: There we go Okay, so what I put on here to counteract the Min hide from getting capped at 300 pixels by our Dev guy here and don't worry, I will.
Michael T Ganschow Green: All input this in the notes is this height auto.
Michael T Ganschow Green: overrides this height up here in our div tag so it overrides this height here.
Michael T Ganschow Green: And it says, make the height automatically associated with whatever content is in it so essentially this height auto breaks that 300 pixels and lets the guy stretch so that now that huge big old chunk of text.
Michael T Ganschow Green: doesn't get clipped off instead just stretches for as long as whatever text we put in if I put in more it will continue to stretch okay so Min height is very much like what I did.
Michael T Ganschow Green: With my main here with no height, if you have no height, what will happen is the thing will shrink down to zero if it has no content in it, but it will freely stretch if I add content to it Okay, so, in our case here.
Michael T Ganschow Green: That Min height basically just wedges it open enough that it's visible and then it will freely stretch if there is.
Michael T Ganschow Green: Content now in my case I got a little tripped up here by the fact that I already have a spec tight.
Michael T Ganschow Green: On my div tags have 300 pixels so what was happening was the guy was stretching out until you hit 300 pixels tall, and then the stuff squirted out the bottom again.
Michael T Ganschow Green: So all I had to do was overall that height, by putting a height auto which basically over wrote this 300 pixels right here and meant that it could continue on lot of ED its merry way stretching all the way out.
Michael T Ganschow Green: Now that was a lot Okay, that was a lot so i'm going to pause right now and ask do you have any questions on overflows.
Michael T Ganschow Green: or questions on me and heights you'll be playing around a lot with these as you're building your containers.
Michael T Ganschow Green: In fact, a lot of times you're probably not going to be using height.
Michael T Ganschow Green: And all for things you just going to be letting the content stretch them like we did with our main, but when you're using heights I always recommend using Mennonites rather than fixed heights.
Michael T Ganschow Green: Because that will, by and large accepted edge cases like we just encountered here in class that will, by and large.
Michael T Ganschow Green: give you kind of the best of both worlds.
Michael T Ganschow Green: So questions on overflow questions on height or questions on any of the previous bits of how padding and border will stretch.
Michael T Ganschow Green: Or will enlarge a an object.
Michael T Ganschow Green: That turned into a lot sorry.
Michael T Ganschow Green: i've got to pause to ask the question.
Michael T Ganschow Green: I think everybody's to scare too tired to move or they all left.
Michael T Ganschow Green: I heard a bunch of people leaving earlier scared them off with all of this talk stretching and code building oh noes.
Michael T Ganschow Green: Alright cool well everybody seems to scare too tired to move so i'm going to continue on.
Michael T Ganschow Green: So there was what to do with access content when it flows over the edge of something.
Michael T Ganschow Green: That works for tax that works for images any foreground piece of content that is any piece of content, you are entering with the html.
Michael T Ganschow Green: Rather than with the CSS this will happen to it'll spill out all over the place, if you're not careful yeah so.
Michael T Ganschow Green: That is the that is one way to handle it what two ways to handle it either with an overflow or with a midnight images get a third way, but I will show you that a little later on when we get more thorough into responsive design yeah.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: So I think.
Michael T Ganschow Green: we've got a lovely little stack of devops here.
Michael T Ganschow Green: You can come on it's kind of scroll bar look at that beautiful scroll just scroll barring up the joint got a duck.
Michael T Ganschow Green: This reject a bad magazine article about this duck it's like a hit piece on the duck man i'm gonna look at him he deserves a magazine hippies alright so.
Michael T Ganschow Green: ton of mess around time to mess around so for this whole time the last umpteen million clients as we've been talking about html and CSS.
Michael T Ganschow Green: we've been dealing with the fact that html is vertically stacked Okay, and the entire html programming language works from top to bottom, so.
Michael T Ganschow Green: you're pretty restricted, with just html and some of the basic appearance stuff in CSS.
Michael T Ganschow Green: To pretty much building vertical types websites now, this is no problem if you're working mobile first because, by and large, mobile first designs are.
Michael T Ganschow Green: Pretty vertical with very minimal horizontal, however, for your computer versions of your website you're almost certainly going to be working horizontally, because computer monitors are sideways rectangles yo so you're going to be working in the horizontal.
Michael T Ganschow Green: html natively does not particularly work well in the horizontal so we have to mess around a little bit with how html relates to objects okay.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: Note the order that these guys are in vertically we've got a pink one up top here we've got a green one with a scroll bar underneath we got a duck and then we got a little boy blue here is being just completely stretched out by his containing paragraph okay okay so look at this order.
Michael T Ganschow Green: Now what we're gonna do is we're going to come to our main tag and i'm going to use for starters one middle property one little property that's going to completely turn our code on its head okay.
Michael T Ganschow Green: And that property.
That do come up here to me.
Michael T Ganschow Green: That property is called display.
Michael T Ganschow Green: display is one of the most powerful individual properties in CSS I will look just make heart eyes, all the time for the display property, you can add the box model to tags that do not have the box level, you can subtract by the box model from tags that do have it.
Michael T Ganschow Green: or things that you've applied your class styles to you can make objects invisible and you can make them visible with the display tag you can change how your how your entire web page shows with this thing literally the entire page if you throw this thing on your body tag okay so.
Michael T Ganschow Green: Here we go.
Michael T Ganschow Green: There are so many values for this tag we're going to be just playing with at least four maybe more and all of them are tremendously powerful alright.
Michael T Ganschow Green: So today we're going to be playing with FLEX.
Michael T Ganschow Green: display flax.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: What Michael is display FLEX.
Michael T Ganschow Green: well.
Michael T Ganschow Green: display flax when it's used literally turns.
Michael T Ganschow Green: Your html on its side remember how we have the pink one the green one the Doc in the blue one well I added a property on my main that's my Green tag here of display FLEX.
Michael T Ganschow Green: And it instantly turned them on its side Okay, so when you're doing any horizontal piece of layout in html.
Michael T Ganschow Green: Okay, you want to have a container some tag that contains all the elements that are going to go horizontal Okay, and like we do with our main tag here, then all you have to do is apply a display.
Michael T Ganschow Green: colon FLEX to that container okay that's yet all you have to do is apply that display colon FLEX bang, and what that will do is that will turn your entire html on its side OK back to your let me, let me change the screen share.
Michael T Ganschow Green: So you guys can really see this at work so see now here is all of our all of ours.
Michael T Ganschow Green: sitting here notice that Nice margin between them and the Nice padding within them how nice and pretty they are although that's a lot of padding right there boys and girls, this is this is.
Michael T Ganschow Green: Probably just a little more than this would be just fine but that's not adding these guys are looking good anyway so.
Michael T Ganschow Green: What this has done is this has taken our entire structure wow everything inside our main tag and turned it on its side.
Michael T Ganschow Green: Now you have to be really careful with display FLEX because if you apply it on the wrong tag it can take your.
Michael T Ganschow Green: Your whole web design and flip it on its side, so you want to make sure you're using this in like subordinate containers.
Michael T Ganschow Green: In your site to get things on their side, but once you do, then you have pretty much full power to do what you like.
Michael T Ganschow Green: Okay, look at this, I mean there it is that's a vertical html stack that we just went.
Michael T Ganschow Green: He and rotated it he counter-clockwise he don't worry it doesn't it doesn't work if you don't make the sound i'm gonna go eat when you put that FLEX in.
Michael T Ganschow Green: Otherwise it's not going to work, so what we've done is we just took that whole thing and flipped it on its side counterclockwise 1234 see if I take my FLEX off let's comment out FLEX yeah we were really flexing you.
Michael T Ganschow Green: would go and do coming out the FLEX saverino.
Michael T Ganschow Green: me back to a stack 1234 and then, when I am FLEX back in I flax when you back in oh save.
Michael T Ganschow Green: preview review that refresh it's showing card again 1234 turn them on their sides questions on display FLEX.
Michael T Ganschow Green: very powerful.
Michael T Ganschow Green: Still still being mysteriously silent no chance, no.
Michael T Ganschow Green: Okay well hang on let's go back let's mess around with our FLEX a little bit.
Michael T Ganschow Green: So what if I wanted instead of turning counterclockwise What if I wanted it to turn clockwise well Fortunately enough the developers of CSS three they got your fam so we're going to put in a new share and magnify window back to the magnified view alright so.
Michael T Ganschow Green: There is a property that works with FLEX called FLEX direction flax.
Michael T Ganschow Green: direction.
Michael T Ganschow Green: And there are a number of different directions, you can go with flexes so technically, you can force a FLEX to be a column i'm assuming that's for some kind of for.
Michael T Ganschow Green: When you get so so FLEX direction column is for when it crunches down small enough to need the mobile layout so you basically turn off your FLEX with FLEX direction column.
Michael T Ganschow Green: And what that does is that just rotates them back into a column, which they naturally are an html.
Michael T Ganschow Green: You can also do FLEX direction row which is probably if you're building mobile first and everything is a stack that you would add that, as it expands out to either tablet or mobile size.
Michael T Ganschow Green: But we're not going to use any of those great now have hiccups in the middle of the lecture here we go so as i'm as i'm going to pick up my way through this lecture.
Michael T Ganschow Green: we're going to go to row reverse here like that now, what does row reverse to row reverse instead of the default methodology of flexing is to flip it.
Michael T Ganschow Green: counter clockwise a will reverse flips it clockwise, allow me to demonstrate.
Michael T Ganschow Green: notice that our get the chat out of the way, let me get you guys's talking heads out of the way there we go okay notice it's backwards now our bottom our blue stretchy guy is, first, then our deck then our Green thingamabob with the with the scroll bar and then our.
Michael T Ganschow Green: And then, our.
Michael T Ganschow Green: bright magenta one over here and notice also there's pinned to the right side as well, rather than the Left it's a complete 180 flip reversal of the way they were so if you need to flip these guys in FLEX row reverse works.
Michael T Ganschow Green: Just as good.
Michael T Ganschow Green: All right, but i'm gonna take that role reverse off actually i'm just going to come in and out.
Michael T Ganschow Green: Why am I doing that, why are you doing there Michael well, you see.
Michael T Ganschow Green: One leave it in so you guys can grab it yeah.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: Ah.
Michael T Ganschow Green: OK.
Michael T Ganschow Green: So let's go back to our browser real quick, so you notice, everything is sitting on its side right.
Michael T Ganschow Green: it's just just happy as a clam just kind of cruising along they're sitting on its side due to do but notice, they are pinned.
Michael T Ganschow Green: To the left side of the browser, that is, the html default to pin everything to the left side actually technically to the top left side.
Michael T Ganschow Green: For mining again here jeez look at this everybody yeah so everything to the top left side of your browser window so.
Michael T Ganschow Green: What does that do well, what does that mean well everything sort of comes out of the top left corner, if you want to send her something you have to start getting a little creative.
Michael T Ganschow Green: So um there are many ways to send a thing so i'm going to show you other ways that are that are useful for different situations, but if you've already got a FLEX going on you're already rotating things in a container here's how you sent to them.
Michael T Ganschow Green: It is fucking easy, by the way, the reason why i'm hitting coding today is because dream weavers.
Michael T Ganschow Green: dream weavers CSS palette does not support FLEX even though it's standardized FLEX is not experimental or anything it's fully standardized but dreamweaver doesn't support it yet so you got to hand code.
Michael T Ganschow Green: So FLEX has another property that will help us to Center everything see here i'm going to put in the row reverse in the chat real quick, so you guys have record of role reversal so here's the one that here's what controls centering okay FLEX has a property called justify.
Michael T Ganschow Green: content.
Michael T Ganschow Green: justify content and there are.
Michael T Ganschow Green: Many justify content things Okay, so you can justify content Center, which is what we're going to use for.
Michael T Ganschow Green: You can justify content to the FLEX end with basically pins it to the right side of the whatever's containing it, you can do FLEX start which pins it to the left side that's the default and then you can do space around so so.
Michael T Ganschow Green: So what space around does is space around.
Michael T Ganschow Green: Essentially.
Michael T Ganschow Green: If you don't want to control your own margins, like you, don't care what the what your margin sizing is justify content space around will fill in all.
Michael T Ganschow Green: areas around into the sides and in between objects within a flexed area with an equal amount of space that will essentially stagger them out equally.
Michael T Ganschow Green: Regardless of the size of the display kind of handy actually if you don't especially care about the the the width of the margins, you can just do just about content space around and everything will.
Michael T Ganschow Green: will fill in just fun to play with that in a second actually and then there's justify content space between which all it does is it takes a look at the edges that face other objects in your container.
Michael T Ganschow Green: and add to that in will play with that in a minute, but right now, I want to do a justify content Center.
Michael T Ganschow Green: Why do I want to do a justify content Center because I would like to Center all of my content saved in their browser window and indeed adjusted by content Center does that too sweet look at that guy diggity boo there is it's all Nice and centered Bam Bam just like that.
Michael T Ganschow Green: So let me copy paste this into the chat because this is very powerful.
Michael T Ganschow Green: Just by content Center.
Michael T Ganschow Green: Will chat.
Michael T Ganschow Green: there's another tag for you.
Michael T Ganschow Green: questions on display FLEX on FLEX direction and to justify content.
Michael T Ganschow Green: We cool stuff.
Michael T Ganschow Green: Well, good cool cool alright just mess around with justify content, a little bit i'm gonna go and i'm going to do a little commenting out here okay now now now we got to be brave here okay so.
Michael T Ganschow Green: i'm going to come up here to my main and i'm going to take out all of the padding on my main simply by commenting and out oh snap.
Michael T Ganschow Green: Oh, oh no taken all the padding out, yes, we have, and you can tell, because when I open this thing up.
Michael T Ganschow Green: Fresh right now notice they're much tighter to the edges that's because the only thing that's holding this thing open is their height and their margins oh opus ghettos well now we're going to.
Michael T Ganschow Green: Think, we only have margin on the main D and not on any of these other bad boys so i'm just going to come here and i'm going to say you know what we don't need any that stinking margin around here save.
Michael T Ganschow Green: And now suddenly oh they're all mesh together a jar and they're still sitting in the Center because we got to justify content Center on it, but now.
Michael T Ganschow Green: they're mashed together at their own edges and their manners together or the mash to the edge of the browser window and to the bottom edge of our main tag.
Michael T Ganschow Green: On darn well, we got to fix that a little bit so let's play around with some hot justify content action now.
Michael T Ganschow Green: there's occasionally are hilarious rendering issues of space around that space between browsers are getting better with them, but let's see if we're getting hilarious rendering issues hi ah so let's go space around, and this should sort of stagger them all out equally in our main area.
Michael T Ganschow Green: let's see if it does and Sure enough, it does look at that.
Michael T Ganschow Green: Between after the lines all right now, then we're going to go, I thought it would add extra bits to the edges rendering errs gotta love them and we'll go space between.
Michael T Ganschow Green: Save.
Michael T Ganschow Green: hey another i'll start, I see how it does Okay, so I thought i'll because the owl because every time I use it, I have a panic nevermind you guys i'm a little confused, so the reason so.
Michael T Ganschow Green: works in two dimensions hang on a minute, so if I go space around see i'd forgotten it does not actually play with the top or bottom.
Michael T Ganschow Green: It only does the space around so does like the outsides and the insides between objects like this if However, instead, like my dream Weaver If, however, instead, I put space between.
Michael T Ganschow Green: Then it basically just filled them out to the edges and Anthony equal amount of space in between them and, by the way, recalculates that on the fly, let me show you.
Michael T Ganschow Green: i'm.
Michael T Ganschow Green: done work if you don't make the sound it's recalculating the space in between now that's actually really cool if you want to evenly stagger things and you don't need a margin between them.
Michael T Ganschow Green: Closely bloody html there it is alright so let's go so that's actually pretty handy that's actually pretty handy, we could say just put the padding back on main so that we have.
Michael T Ganschow Green: You know, some edges around, and then we could just say leave it like this with everybody kind of free floating with some big gaps in between them, or I could go space around.
Michael T Ganschow Green: At least floating like that, with some tighter gaps in between them again great if you don't care what the distance in between your guys, yes, I do so for mine i'm simply going to convert my justify content back to Center.
Michael T Ganschow Green: And I am going to add margin back into my day is.
Michael T Ganschow Green: safe.
Michael T Ganschow Green: And that way.
Michael T Ganschow Green: it'll just be nice and Center where did my Green go where did my Green go there, it is thank you uh it'll just be nice and centered with our own controlled margins and patterns in between them so nice and Nice and cool Nice and cool.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: i'm back to levels you guys know okay.
Michael T Ganschow Green: Part of the reason that I am the way I am is because.
Michael T Ganschow Green: No two browsers agree on what a web design should look like so building websites is a constant kluge of various.
Michael T Ganschow Green: ways to get things to work.
Michael T Ganschow Green: And one of the most difficult things to do in web design period period is vertically centering things okay vertically centering things is.
Michael T Ganschow Green: shockingly difficult guys because browsers render horizontal sizing and placement much more accurately than they render vertical sizing and placement okay so.
Michael T Ganschow Green: Any of the various centering techniques that i'm going to show you throughout the Semester and there will be a couple, this is the first one.
Michael T Ganschow Green: don't necessarily work vertically.
Michael T Ganschow Green: There is only one vertical measurement.
Michael T Ganschow Green: property that is universally used and displayed correctly by browsers.
Michael T Ganschow Green: That is flexes vertical centering property.
Michael T Ganschow Green: So i'm gonna make my main quite a bit taller here okay quite a bit taller we should was a little bit taller where she was a ball she had a rabbit in it Okay, so what i'm gonna do is i'm going to come down to my main and i'm going to add a little Min height 200 pixels.
Michael T Ganschow Green: And enough it's cool hey he alright cool so we're going to add a little bit of that action alright so.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: back that off to us a little bit jet jet just a little bit.
Michael T Ganschow Green: Just wanted a little taller in the browser window to DEMO some things yeah there we go and i'm actually going to change up the height on stretch Armstrong.
Michael T Ganschow Green: auto to inherit doesn't own a stretch, I just wanted to inherit it from the content let's grab that save.
There we go.
Michael T Ganschow Green: Oh cool no not you not you know stop DAB it.
You.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: So.
Michael T Ganschow Green: let's play around here.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: So i've got a nice height and i'm gonna make it a little taller even i'm gonna go 675.
Michael T Ganschow Green: All right.
Please that height one second here see if I needed to stop just stretching.
Michael T Ganschow Green: One moment so what's happening is the height auto is causing this box over here to stretch a little bit stretch with the height of fee shape around it so i'm trying to other height.
Okay, I guess.
Michael T Ganschow Green: All the new spec took it away demon.
Michael T Ganschow Green: So i'm actually going to get a little cheesy here second and i'm going to.
Michael T Ganschow Green: Put a MAC side I haven't talked about MAC sites here, but this will be, this will be good, a good lesson of Max height so Max height is the opposite of me and height.
Michael T Ganschow Green: midnight, is it will start off at a certain size and expand, but it will never crunch any smaller than that particular size Max height means that it will freely expand to a certain size, but it will never expand taller than that size so i'm going to have the Max height be 500 pixels.
Michael T Ganschow Green: So i'm just messing with the blue one here, so I can better DEMO the vertical centering for you guys, you know what you know what we'll just add a little height to it.
Michael T Ganschow Green: One of the problems when you have another external height messing with them.
Michael T Ganschow Green: Will taller than that.
Michael T Ganschow Green: we'll just have a quick DEMO purposes will just add a little height to it that way it's Nice and sticky sighs there it is alright so i've got these guys and they are trending toward the top notice my Green Box, here comes down to about here.
Michael T Ganschow Green: And these this my line of objects is up toward the top if I want to vertically Center them so that there's the same amount of space.
Michael T Ganschow Green: from the top down, is there is from the bottom up on these guys that's really difficult to do in web design that is really difficult to do they're very, very few.
Michael T Ganschow Green: Vertical measurements in any way that really work all that well one of them at, however, is involved with FLEX that's why we love FLEX because browsers actually listened to flex.
Michael T Ganschow Green: So if I want to vertically Center my guy here and i've got my there's my display FLEX my FLEX direction and my justify content.
Michael T Ganschow Green: I can do that all I have to do is put on another rule called a line items Okay, a line items.
Michael T Ganschow Green: Basically, you can set the alignment to a whole variety of things Okay, you can align your items to the.
Michael T Ganschow Green: left side with a FLEX start the right side via a FLEX end have their height stretch to fit the height area with a stretch or you can send it to the baseline or sorry baseline it kicks it to the bottom baseline.
Michael T Ganschow Green: kick him to the bottom.
Michael T Ganschow Green: snap test tech down on the bottom or instead of doing that you can do a line items Center yeah.
Michael T Ganschow Green: In fact, I think I may turn this Min height well we'll see if I need to turn this Min height into a brainiac a good note there we go, so if I do that, so if I set a line items Center.
Michael T Ganschow Green: Then what I get is all my objects vertically centered and that's not.
Michael T Ganschow Green: pleasant and such.
Michael T Ganschow Green: And i'm gonna strip this Min height off it's making me uncomfortable.
Michael T Ganschow Green: and change my height back auto all is right, with the world would go.
Michael T Ganschow Green: hey hey everything's Nice and vertically and horizontally Center and even if I change my browser sighs need an eternity.
Michael T Ganschow Green: Everything shifts landed ED to fit nicely.
Michael T Ganschow Green: There we go doesn't work we don't make this out.
Michael T Ganschow Green: All right, let's see how badly do on a break you guys today let's see.
oops.
Oh you're thinking oh I don't know that we want you to think.
Michael T Ganschow Green: Okay, so this, you will see.
Michael T Ganschow Green: This technique, where you mix a you mix a year you mix a justify content Center and in line item Center in a number of tutorials described as perfect centering, and indeed this is the only real.
Michael T Ganschow Green: Flexible measurement way of doing perfect centering that will work in every browser okay so.
Michael T Ganschow Green: it's.
Michael T Ganschow Green: Every one of the other ways to do it, you either have to make a fixed sized container and push the object around in the container or you have to.
Michael T Ganschow Green: play with percentage width percentage heights and a lot of browsers get weird with percentage heights but every one of them now will render percentage wits well in fact damn near perfectly across all of them or percentage heights still elude them a little bit.
Michael T Ganschow Green: All right, questions.
Michael T Ganschow Green: So if you guys here, let me give you something real quick give you something.
Michael T Ganschow Green: hang on a SEC chat here we go.
Michael T Ganschow Green: i'm going to put two articles in the chat here and i'm going to put them up on the class announcements next Sunday, but these guys are.
Michael T Ganschow Green: Great articles and all the different things that FLEX can do I love FLEX I use FLEX box all the bloody to no no stop it, I use FLEX box all the bloody time on my websites that's not the big one, this is the big one.
Michael T Ganschow Green: there's flexing.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: So FLEX is really powerful it's great for laying things out great for messing with the html stack.
Michael T Ganschow Green: But it and the html stack are not perfectly controlled okay they're largely dependent on the browser window okay.
Michael T Ganschow Green: Two more.
Michael T Ganschow Green: Perfectly positioned things rather than flexibly positioning things we actually have to manually position them ourselves.
Michael T Ganschow Green: So it's it's only 730 we could do a bunch of positioning I was just going to do a little taste of positioning and then have it be next class this thing Oh, we can train you guys fill up positioning now sweet okay so um positioning.
Michael T Ganschow Green: positioning is actually a.
Michael T Ganschow Green: A property in CSS that you can use to basically to 100% put all of your stuff wherever you want it either on a percent based on a pixel based wherever.
Michael T Ganschow Green: So oh hang on a minute, let me find the section in my notes, here we go we're going to go find the section in michaels notes.
Michael T Ganschow Green: And ago, so I can so I know that I am not I knew that i'm messing with you guys alright so.
Michael T Ganschow Green: OK.
Michael T Ganschow Green: let's play with positioning i'm going to add, in a few more games to idea of stack here Okay, a little my little diff stack right here i'm going to add in a couple of more dibs.
Michael T Ganschow Green: i'll probably changed there.
Michael T Ganschow Green: With a little I think I might do another role like another for dibs and we're going to mess around with them a little bit okay we're going to mess around with these dibs and play positioning games which is always always always a good time so let's do that.
Michael T Ganschow Green: let's positions.
Michael T Ganschow Green: So previously what we've been doing is either working with the html stack which we've done a little bit your verticals.
Michael T Ganschow Green: And or playing with the horizontal with our FLEX box Okay, but there it's just moving around the html stock stack either playing with its native vertical or taking it and tipping it on one side or another.
Michael T Ganschow Green: But with positioning we actually remove an object from the html stack and then we can move it around it's containment area.
Michael T Ganschow Green: at will.
Michael T Ganschow Green: Alright, so let me do a couple of things two main here, we have to mess with our main a little bit more, this will be fun.
Michael T Ganschow Green: we're gonna we're going to shrink our main down a little bit so that it has a little bit of distance from the top and a little bit of distance from the sides that way we can play around with positioning and get.
Michael T Ganschow Green: All right, let's get nuts.
Michael T Ganschow Green: Okay, so mess with our lovely little mean here hi me i'm actually going to add something to my main i'm going to add my first position property to my main okay.
Michael T Ganschow Green: position.
Michael T Ganschow Green: Relative now.
Michael T Ganschow Green: What am I done well.
Michael T Ganschow Green: position relative means position this object relative to the objects around it it's the default positioning you get if you don't enter the position.
Michael T Ganschow Green: property.
Michael T Ganschow Green: So everything kind of positions to each other, either in the vertical stack or if you put FLEX box on them in the horizontal okay.
Michael T Ganschow Green: So so so.
Michael T Ganschow Green: Why would I apply this to my main well.
Michael T Ganschow Green: I intend to use other position tags tags.
Michael T Ganschow Green: Like position properties on other objects that i'm going to have with tss that will the entity is positioning to move them around my main.
Michael T Ganschow Green: Regardless of what's going on with anything else okay.
Michael T Ganschow Green: And so.
Michael T Ganschow Green: What I.
Michael T Ganschow Green: What I need to do what I need to do to enable them to move around our main is I need to apply a position to the main so this position relative basically establishes the main as a sandbox.
Michael T Ganschow Green: If I don't put this position relative on a tag that's going to be containing position items, it will use.
Michael T Ganschow Green: What the CSS spec calls the viewport what you and I would call the browser window, so instead of being positioned relatively to the inside of this main tag it's going to be positioned relatively to our entire browser window and our design is going to explode okay so.
Michael T Ganschow Green: let's move some things around here, shall we i'm going to add a few more dibs like I said that i'm going to use to that i'm going to use positioning on to.
Michael T Ganschow Green: Remember messed around with them to blow them to smithereens okay.
Michael T Ganschow Green: So i'm going to add in a couple of more gives no content in these guys, these are just be boxes.
Michael T Ganschow Green: i'm going to call this guy give.
Michael T Ganschow Green: You what i'm gonna add a class style to already so i'm going to call this guy div class equals.
Michael T Ganschow Green: position.
Michael T Ganschow Green: Oh snap.
Michael T Ganschow Green: I wonder, I wonder what he's going to name the other three.
position to.
Michael T Ganschow Green: or this this is classified information you guys have no idea what i'm doing in.
Positions room.
In position for.
Michael T Ganschow Green: position for here we go.
Show me the browser when.
Michael T Ganschow Green: Things are happening all the credit Oh, I see.
Michael T Ganschow Green: Okay, I will actually.
Michael T Ganschow Green: momentarily have to undo the FLEX.
Michael T Ganschow Green: Because this is a.
Michael T Ganschow Green: This happens sometimes this happens with flexed objects, where the FLEX will actually crunch them to make them fit, that is.
Michael T Ganschow Green: That is a problem with FLEX actually hang on one, second, let me show you how to overcome this I completely forgotten to DEMO this to you guys so i'm glad that this is happening actually self.
Michael T Ganschow Green: So if you have a flux, that you set.
Michael T Ganschow Green: And you don't tell it to ramp.
Michael T Ganschow Green: It will crunch all them your things to make them fit in a line look at it crunching all of the things here, so what I need to do real quick is I need to tell my FLEX, no, no, no boy no down boy down, we need we need you to.
Michael T Ganschow Green: We need we need you to rap because it's it's it's not rapping so hang on a second let's let's uh let's add another real quick.
Michael T Ganschow Green: let's add another real quick.
Michael T Ganschow Green: Property here to tell the FLEX not to smoosh all of my things into one line, this is not a good look here i'm going to save some things hang on so let's add a FLEX it's called FLEX wrap.
Michael T Ganschow Green: And then you tell it please ramp.
Michael T Ganschow Green: No, not roof wr at Thank you wrap there goes now that's better that's better now everything's wrapping and his back to its regular size look at that man, sometimes I kill me yeah so that's a yeah that's somebody's got to remember that your instructor didn't realize.
Michael T Ganschow Green: Is that if you have multiple things that are starting to stretch the area that they're filling with a FLEX if you don't tell it to wrap them down to the next line, it will just mash everything together with what with or heights or whatever you set for it was awesome.
Michael T Ganschow Green: good times good times good times good times alright so.
Michael T Ganschow Green: Now we're bringing it back to your regularly scheduled position DEMO but.
Michael T Ganschow Green: don't forget to flex rap rap unlike Michael and get all of your stuff mashed together that was fascinating well just put it that way.
Michael T Ganschow Green: Okay, and where did my notes go here did my notes go to.
Michael T Ganschow Green: position here we go all right.
Michael T Ganschow Green: let's mess around a little bit.
Michael T Ganschow Green: I i'm going to change the color.
Michael T Ganschow Green: of each of my.
Michael T Ganschow Green: Little.
Michael T Ganschow Green: Little details here i'm going to change their colors.
Michael T Ganschow Green: What I think I will leave them at the same size, I could shrink them a little bit, but I think i'll leave them with this nice big size, because they're going to make dramatic boxes when we start stacking on top of each other and and doing all kinds of terrible things.
Michael T Ganschow Green: So let's do that so First things first, before I recover them is i'm going to shrink and add a little bit of margin to my main we're going to size, our main a little bit here guys.
Michael T Ganschow Green: sorry about this, but I want to do this, so that I can demonstrate some other bits of positioning as time goes on, so i'm going to add a little bit of width.
Michael T Ganschow Green: To my.
Michael T Ganschow Green: main will try and 85% with to start it off.
Michael T Ganschow Green: Oh cool Oh, can you give me straight the other kind of centering oh cool cool cool cool OK OK cool very cool cool beans alright, so I now have my main.
Michael T Ganschow Green: At 80% notice everything rewrap as I crunch it that's cool.
Michael T Ganschow Green: But I got a DEMO something do you guys a toe tap to DEMO something to you guys, so I was going to go over this another day but guess what.
Michael T Ganschow Green: we're here we're now we need this technique now, and I still I think it's time to see if you can find an unfilled to sell in your brain to add another little bit of knowledge okay alright.
Michael T Ganschow Green: So I was talking about about FLEX box display FLEX and how you know, it was a it was a fantastic way to.
Michael T Ganschow Green: Both vertically and horizontally Center that there were a couple of other ways to burn it to horizontally Center but this one was was the best.
Michael T Ganschow Green: Well i'm going to show you in the oldest technique of horizontal centering.
Michael T Ganschow Green: One that still works, but the reason why it's falling a little bit out of favor is because the it doesn't vertically centered this exact same way, whereas.
Michael T Ganschow Green: FLEX box vertically and horizontally centers, however, when you want to horizontally some Center something, and you don't either want or need or can't use a FLEX box, this is how you Center it oh i'm so excited.
Michael T Ganschow Green: So notice, my main is 80% of the width of my browser window pinned to the left edge, by the way, as in all things.
Michael T Ganschow Green: html so we're pinned to the deck technically the top left so.
Michael T Ganschow Green: The old way we used to do this, we used to do this margin.
Michael T Ganschow Green: Is a CSS hack okay what i'm going to show you is a flaw in the CSS code yeah.
Michael T Ganschow Green: it's a it's a flaw that designers discovered very early on in the CSS one spec and started using us, so the CSS developers being good little developers when you know what this isn't a flaw into feature.
Michael T Ganschow Green: So this little hack that we're going to use is not the way CSS is supposed to work.
Michael T Ganschow Green: But it's been in use for so long it's been canonized into the features of CSS even though it's a code breakage okay.
Michael T Ganschow Green: So here we go here is how we used to have to Center everything before we started using FLEX box and, indeed, we still do Center a lot of main things this way Okay, we use margin to Center things Okay, let me.
Michael T Ganschow Green: Let me show you this centering.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: If I come in here.
Michael T Ganschow Green: And I type in margin.
Michael T Ganschow Green: Zero Pex.
Michael T Ganschow Green: auto.
Michael T Ganschow Green: This will Center this will Center.
Michael T Ganschow Green: This will Center my main tag I promise you guys.
Michael T Ganschow Green: Look it's centered with margin, so let me explain the hack This is just high comedy okay so here's my margin, the Center everything right.
Michael T Ganschow Green: So.
Michael T Ganschow Green: In theory, when you apply a margin of auto.
Michael T Ganschow Green: is supposed to push an automated distance.
Michael T Ganschow Green: from one side to the other side of the browser window Okay, so a margin left auto in theory should push back, let me do it.
Michael T Ganschow Green: A margin left auto, as you can see here pushes everything to the right of the browser it's basically pushing.
Michael T Ganschow Green: A a browser windows distance however far that is pushing the object over to the left side if I do the same with a margin right.
Michael T Ganschow Green: boom it's being shoved the other way okay.
Michael T Ganschow Green: However, however, if using our margin here remember our margin looks like padding right So if I put one number that's the top and the bottom.
Michael T Ganschow Green: And if I put one number that's all the sides by put two numbers, the first number is the top and the bottom zero pixels and the second number is the right and so here's what happens.
Michael T Ganschow Green: Both my left and right side versus both my left and right side are applying equal force to my main tag and they balance each other out there shoveling horse it it's the it's the unstoppable force meets the immovable object.
Michael T Ganschow Green: they're shoving on each other right and then forces meet right about the middle of her window and so.
Michael T Ganschow Green: we're shoving each other to make sure that this thing stays in the middle of the browser window it's a complete code failure it's a complete code failure that designers discovered very early on in the CSS spec.
Michael T Ganschow Green: I took advantage of so the CSS developers went feature, not a bug.
Michael T Ganschow Green: So that used to be, we have to Center everything nowadays it's mostly large scale centering for big things on your website, otherwise the rest of the time we're mostly dealing with containers, so you just throw a FLEX on the container and Center everything inside it but.
Michael T Ganschow Green: In this case, in this case we're using an auto auto on this this guy right here.
Michael T Ganschow Green: And this Auto auto is pushing everything all over the place now i'm aside from FLEX box The other reason why we don't do use this is that, logically, it would suggest that if you put a margin top auto and a margin bottom auto together.
Michael T Ganschow Green: It would forcibly Center it vertically in the browser window it doesn't do that top auto always wins and shoves the thing all the way off your browser window down the bottom, so you can unfortunately do margin auto all the way around, because that will just shove, the thing.
Michael T Ganschow Green: So so unfortunately can't do it that way, but does work horizontally it's like percentages percentages can be made them work vertically in html we'll go over that later on, but it takes a lot of careful preparation it's sort of like.
Michael T Ganschow Green: How, you have to carefully prepare for a colonoscopy it's that same kind of careful preparation, but once you get it all prepared sure you can do verticals in percentages, but but you're never guaranteed to work 100% correctly, even if you've done the preparation.
Michael T Ganschow Green: The the.
Michael T Ganschow Green: The.
Michael T Ganschow Green: i'll show you how to do vertical vertical line vertical.
Michael T Ganschow Green: With by the vertical heights Center and percentages, by the way, however, all browsers handle percentage widths just fine so everybody scratching their heads about that heights of all has been a fraud topic in web design so.
Michael T Ganschow Green: We now have a.
Michael T Ganschow Green: nice little auto centered main tag that's 80% of the browser window.
Michael T Ganschow Green: i'm feeling saucy though so i'm going to come in here and instead of having to be zero pixel auto i'm going to have to be 10 pixel on a why so that I can add just a little bit of distance from the top anymore, I asked you more.
Michael T Ganschow Green: Like a 20 pixel auto so i've just a little bit of distance from the top, so that I can stick things off these edges.
Michael T Ganschow Green: Oh, not you, I wanted to see the other come on.
Michael T Ganschow Green: Okay, so questions on this other type of centering you actually use margin to do it now you don't necessarily have to do margin colon some number and auto you can do margin dash left auto.
Michael T Ganschow Green: And margin dash right auto as separate properties to Center align the sky it's just quicker to do margin colon couple of digits so questions.
Michael T Ganschow Green: On anything we've gone over.
Michael T Ganschow Green: Alright cool.
Michael T Ganschow Green: ones passed out of their computer now.
Michael T Ganschow Green: Brain bleeds alright so.
Michael T Ganschow Green: let's mess around with positioning a little bit First things first is i'm going to change the color of my for dibs here oh he's coming on.
Michael T Ganschow Green: Alright, so played in blah two years so First things first i'm gonna change the colors of each of my position gives here, so I can identify them when we start playing around layer stacking and things like that So here we go.
position.
Michael T Ganschow Green: No Oh, I need a.in front of that dots dots for days.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: I think I might select the background colors this time oh snap I know you should I saw some from you guys but, but I think i'm going to select these background color.
Michael T Ganschow Green: get some talking colors.
Michael T Ganschow Green: we're gonna make one of these guys like a dark slate blue and we go.
Michael T Ganschow Green: And then we're going to go.
Michael T Ganschow Green: position to.
Michael T Ganschow Green: semi colon background.
color.
Michael T Ganschow Green: laptops to talking cover.
Michael T Ganschow Green: let's go on let's go ready use Turquoise tomato.
Michael T Ganschow Green: And position three.
Michael T Ganschow Green: let's go cadet blue there we go and position for.
oops.
Michael T Ganschow Green: Periods Michael periods mean class styles, remember that Michael.
Michael T Ganschow Green: background.
Michael T Ganschow Green: dash color.
Michael T Ganschow Green: One more talking color.
Michael T Ganschow Green: So, like the space, do you find that the space later.
Michael T Ganschow Green: dark side.
Michael T Ganschow Green: All right now i'm going to do one other thing you guys, I want to take the border off these Dudes see right now they're nicely colored.
Michael T Ganschow Green: Fresh so it doesn't show the code and we go now these guys are nicely colored I want to take the borders off them.
Michael T Ganschow Green: How do I do that, how do I override.
Michael T Ganschow Green: A border that's being applied to them right here on my div tag style well what I do is on each of these clients styles because remember a class style will override a.
Michael T Ganschow Green: A tag style assuming that the class style is inside of the text which these guys aren't.
Michael T Ganschow Green: Then i'm simply going to do border.
Michael T Ganschow Green: nine.
Michael T Ganschow Green: No border no border for you.
Michael T Ganschow Green: And Sure enough, the borders gone.
Michael T Ganschow Green: Yes, border none.
Michael T Ganschow Green: Border none border nine border none, and now suddenly they are at you know what I think the chat deserves border none to a chat border none so now what we've done is we stripped the borders off of these Dudes.
Michael T Ganschow Green: strip the borders clean off of them.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: play around a little bit with positioning and then we'll call it a day I say so before I get into positioning do we have any questions.
Heather Amistani: I think I did something wrong.
Oh.
Heather Amistani: Oh wait, maybe.
Heather Amistani: That was.
Michael T Ganschow Green: It otherwise you can share your screen here and we can see what's up.
Michael T Ganschow Green: Anyway, yeah you fixed it awesome so he was it was my presence, all you need is just the threat of me, looking at your computer it's like I used to do with the lab computers, why would just fix them by staring at them intently and they would work and the student would be like what.
Michael T Ganschow Green: I tried that like 50 times and it didn't work well, yes, but I wasn't there to stare hard at the computer and cause it to reevaluate its life choices your computer knew about that, because they talk.
Michael T Ganschow Green: Alright, so other questions.
Michael T Ganschow Green: T alright let's play in positioning so I want to move these guys around, I want to forcibly move these guys around my my main here.
Michael T Ganschow Green: Just just forcibly move them around right now they're being they're being positioned relatively because that's the standard way html position all tax position and all the way to all other went.
Michael T Ganschow Green: um so.
Michael T Ganschow Green: let's add some positioning to these guys now remember.
Michael T Ganschow Green: When you are using positioning if you want it to not position to the browser window or the body tag depending on what positioning you're setting up.
Michael T Ganschow Green: You will have to make sure that your container has a position relative on it so whatever you're using to contain these Dudes has to have a position relative on it.
Michael T Ganschow Green: Otherwise, otherwise it's not it's not not going to work it's going to position itself in the body tag or directly to the html and you're going to start crying and I don't want you guys to cry over this, I want you guys to cry over other more pressing concerns so.
Michael T Ganschow Green: let's add some positioning in here so we'll start off with position one here we're going to position this dude absolutely yeah.
Michael T Ganschow Green: So.
Michael T Ganschow Green: The position property, of course, is called position.
Michael T Ganschow Green: And there are.
Michael T Ganschow Green: 123456 properties here that are positions here that we can use the ones that we will be playing with today.
Michael T Ganschow Green: Our don't want to give you guys.
Michael T Ganschow Green: Only today.
Michael T Ganschow Green: going to play with.
Michael T Ganschow Green: Absolute and fixed the others will come up from time to time if we need to.
Michael T Ganschow Green: Make play, we will likely play later on in the Semester with static and sticky as well, but.
Michael T Ganschow Green: But for now i'm going to do, absolute and fixed we've already done relative relative is just the opposition to each other.
Michael T Ganschow Green: i'm not going to use static will will may play a static later, but and i'm not going to use sticky today so today we'll be playing with absolute and fixed, so let me show you a position absolute first of all, so now position, one has been absolutely position, so if I go save.
Michael T Ganschow Green: and open this thing up in the browser fresh notice it's kind of stuck in the Center here OK.
Michael T Ganschow Green: Now, the reason why is because we have all this FLEX box stuff going on that auto centers everything okay.
Michael T Ganschow Green: So, so this thing's basically been pulled out of the html stack notice the.
Michael T Ganschow Green: Others are now snapping up into a row, and set directly on whatever the default positioning in its container is, in this case because of our lovely FLEX boxing it is being automatically centered okay.
Michael T Ganschow Green: If you don't have a FLEX box on the container that's containing your.
Michael T Ganschow Green: positioning it will pin itself to the upper left corner okay now we'll move it around in a minute here, but I want to demonstrate the other types of positioning as well, so we have absolute and then we have position fixed.
Michael T Ganschow Green: So position absolute position itself absolutely basically wherever you spec it to within a particular container within whatever is containing it in this case, our main tag which we threw a position of a.
Michael T Ganschow Green: Relative on if your container does not have a position to it absolute will position itself to the body tag okay so position fixed is the little different.
Michael T Ganschow Green: position fixed refresh position fixed oh actually we don't have enough scrolling here to show it hang on one second i'm going to crunch my browser window, so you guys can see.
Michael T Ganschow Green: OK now let's see if it'll scroll okay well this isn't fixed allegedly apparently it's it's not behaving for my lecture, of course, it wouldn't I think it's the I think it's the.
Michael T Ganschow Green: it's the.
Michael T Ganschow Green: it's the FLEX box doing it, but.
Michael T Ganschow Green: position fixed actually positions to the.
Michael T Ganschow Green: To the.
Michael T Ganschow Green: html tag actually not even an html tag it technically fixes itself to the.
Michael T Ganschow Green: browser window so we're going to split the browser window does it's there right now it's being controlled because it's within a FLEX box and FLEX box can mess with positioning as well.
Michael T Ganschow Green: it's the point where I mean next class redo the positioning DEMO so that it is in its own container but right now fixed basically doesn't care what container it's in other than some things like FLEX box modifying it in this case it.
Michael T Ganschow Green: It sticks itself to the html tag mess with that a little bit later I think next class will will really dig into these but we're kind of messing with them a little bit right now fixed.
Michael T Ganschow Green: Absolute done relative will do will do sticky and we will do static later let's just see what static what the FLEX box does to static.
Michael T Ganschow Green: Okay yeah see the FLEX box just override static alright cool so that's interesting, I did not realize that FLEX box was disposition override is interesting.
Michael T Ganschow Green: Good to learn alright so i'm gonna do a position absolute on my position one, so this defaults to sticking them directly in the middle here.
Michael T Ganschow Green: Now, if I didn't have the FLEX box on it a position into the upper left corner, if I would like to position into the upper left corner, there are a series of directional properties that CSS includes Okay, they are.
Michael T Ganschow Green: Top.
Michael T Ganschow Green: left.
Michael T Ganschow Green: Right.
Michael T Ganschow Green: and bottom.
Michael T Ganschow Green: What these do is these measure distances from that edge okay so top is distance from the top left is distance from the left, right is distance from the right bottom is distance from the bottom.
Michael T Ganschow Green: So you can use these guys to move your object around So if I go top zero Pex let's see if it pins itself to the top, it should actually not zero P zero save.
Michael T Ganschow Green: Fred oh interesting isn't who I got to do a little research you guys I gotta do a little more research and see if we go cool alright, so there it goes so now it's I just had to I didn't delete pixel all the way, so if I do a top of zero and a left of zero.
Michael T Ganschow Green: Then this thing is now positioned itself in the top left of my document now notice it's on top of everything to of course that's because it's been pulled out of the html stack so it's basically sitting on top of the html stack and notice, as I move this thing around.
Michael T Ganschow Green: It sticks there.
Michael T Ganschow Green: Now, if I change its position to fixed Now I want to want to save you let's say the other one.
Michael T Ganschow Green: If I change this position to or position my changes positioning from absolute to fixed.
Michael T Ganschow Green: Now it's stuck in the corner of the browser window.
Michael T Ganschow Green: So, no matter what happens fresh there will be stuck in the corner of the browser window.
Michael T Ganschow Green: Now notice, of course, everything that we done to our Dev still applies here, though, otherwise known as the margin is still in place on my dear that.
Michael T Ganschow Green: By the exact 15 or 20 pixel mar 24 pixel I think margin that I have on my dad's notice the margin is still in place on this guy Okay, so if I do absolute.
Michael T Ganschow Green: it's back in the box.
Michael T Ganschow Green: notice again it moves around with the box does not sit over the top okay that's the difference between absolute and fixed absolute will mess around will will only work or will work within.
Michael T Ganschow Green: Any container that has a position of relative on it, if not a kicks out to the body tag position fixed doesn't care about any stink of tags it positions itself by the browser window so questions on these guys.
Michael T Ganschow Green: Alright cool so that's a little taste of positioning I think i'm gonna I think i'm done cramming you guys fall, both because my brain appears to be becoming tapioca I suspect yours are as well, so i'm going to pause the positioning lecture will come back to positioning.
Michael T Ganschow Green: Next class we're going to mess a lot around with positioning with rotation with Simone all kinds of shape effects, maybe we'll put some drop shadows and some transparencies.
Michael T Ganschow Green: we're definitely gonna mess, with the index we're going to break these shapes pretty pretty good next class.
Michael T Ganschow Green: But I am going to give you guys the remaining half an hour here as an open lab or a Q amp a session Okay, if you would like to Q amp a i'll be here if you're if you would like to get an early start on things.
Michael T Ganschow Green: please feel free to you can you can you can run away but otherwise I believe that concludes our broadcast day, aside from answering questions.
Michael T Ganschow Green: So i'm going to pause the recording later recording people I will see you next class or I may turn the recording back on if somebody asks a particularly good question.