Welcome to the String Weaver tutorial. My name is Daniel Walter Scott, and I'm a trainer here at  Bring Your Own Laptop. Now in this tutorial we're gonna look at moving our content  that we created, um,  in early tutorials down the bottom here. Okay? So the images and text,  and we're gonna move it up into our Diviv tag site. There's a few things we need to do to our div tags.

We need to, um, clear off some of the heights  that we've used and we're gonna have  to remove the background colors as well. So let's look at that now. So the first thing we're gonna do is remove the heights  off this heading. Okay? And we'll remove it off the nav  and the text box as well. Um, now I used heights when we were building this tutorial  just so that our website had some, um, structure to it.

Um, because, um, the widths definitely need to be there  'cause we need to tell this text box  that it occupies this width and the image only this part. But the heights need to be a bit more flexible in terms of  what content goes in them. So this heading, um, box here, um, needs  to be whatever the size of the content goes into it. So at the moment it's forced at 200 pixels. You can see it down here, okay? It's been forced at a height of 200 pixels.

I'd like to remove that height and leave it at zero. And what will happen is the content that goes inside of  that Diviv will give it its height. And in this case it's that image below. So the first thing I'm gonna do is click  inside my heading div. I know I'm inside my heading div by looking down here. You can see in my breadcrumbs, I'm inside heading Div.

If you can't find it, okay,  what you can do is just click on main CSS  and have a look through your list here of selectors. Okay? I'm gonna the selectors one  until you find heading and click on it. Either way, you'll get to the same part. Now, in terms of height, I'm gonna go through  and use this, um, uh, trash can at the end here  to remove CSS property and click that. And you'll notice that my text box, um,  the dib tag is really, really thin.

Now, that's why very often when I'm designing a website,  I'll add heights only to remove them later on  because it's very hard to work on a website that has really  thin, um, uh, really thin height. So what we're gonna do is copy  and paste the image here inside of it. So I'm gonna select it, okay? And go to, uh, edit, cut, edit and go to cut. I'm gonna move up to here and try  and get my cursor inside the heading diviv. Now it can be really hard to get your cursor in flashing  inside the, um, heading div now.

So, um, switch over to code View. It's a lot easier to get your cursor in the right place. So I'm gonna go to Code View,  get my cursor flashing in the right spot. Okay? You can see in there it's flashing in between the, um,  opening of the diviv ID heading,  and then there's the close of it there. So I want my cursor flashing just in between.

Okay? So I'm gonna zoom out, go to design. I know it's in the right place. I'm gonna go to Paste. You can see he's appeared inside there inside the diff. And next thing we're gonna look at is, um, we're gonna put,  uh, the navigation in and we'll remove the height.

So let's do it the other way around  'cause it's a little easier. Let's grab this stuff, okay? And I'm gonna cut it. Now when I'm cutting, um, some tags, watch this. If I go to edit, cut, okay, we use my shortcut,  which is command X on a Mac or control X on a pc. Um, you'll notice it's left one of these uh, bullet points  behind, which is um,  you might remember from an earlier tutorial called  an unordered list.

Okay? So that's the tag that defines these bullet points. Now the problem is it's left that behind. Okay? So I get this kind of residual stuff,  so I didn't actually cut at all. So I'm gonna go to edit undo, okay?

To make sure you grabbed everything when you wanna select it  is you can use these  breadcrumbs along the top, the bottom here. So you can see I've selected all of this,  but watch when I go to covy, I've actually missed a bit. I've left, I've selected the word contact us  and the word home, which is kind of  what I've seen in the design view. But I've left all this other stuff behind. I've left, um, this list item,  which explains where the link goes. It's left this ur ul, okay, it's list, uh,  left all of this stuff.

I want the whole thing. So I want this whole bit  that goes from the opening of the ul, okay? Which is the unordered list, which is the bullet point  and to the closing of it and everything in between. So you have to flick between design view  and co view quite a bit just to double check. You've got everything. Um, if you're in design view,  I wanna do the same thing is click inside any  of these parts and watch this.

If I, you can see I'm inside this a,  which is an active link, okay? Um, inside the list item, okay? Which is the different bullet points  inside this unordered list. So I click the ul, okay, I'll do the same thing. Watching code view, I've actually got the whole part. So quite often I continue in design view  and just make sure I grab the UL  and then go to edit cut, okay?

Or control X on a PC or command X on a Mac. Then come up to navigation  and I'm gonna delete this text here. Now this text gets put in by dream of  by default when you're adding a diviv,  it doesn't do anything. It just uh, just a bit of a bit of a visual queue that  that is the name of the div. Okay? So you end up deleting those um, right out.

Okay? So it can be quite hard sometimes to click  and design view into my div tag. Now that there's no content inside of it, it tries  to jump all over the place but won't go inside this nav. Okay? You see I keep clicking here  and it clicks grabbing the image along the top. Okay?

So to make sure I'm pasting this text in the right  part, I've gotta go to co view  and I'm gonna click inside this nav here. So you can see there's the diviv ID nav,  that's the opening and there's a closing. I've gotta make sure that the curse is flashing in  between those two. So I know inside this div go back to design view  and then use edit paste. Okay? It goes inside.

It is too big, okay? So it's quite a tall little list. So my navigation,  unfortunately the yellow part isn't big enough to contain it  so it spills out the edges. So what we're gonna do now is do what we did  for this top diviv and remove the height of this nav. So the easiest way click nav down here in your breadcrumbs. Okay, there he is.

Um, so I've selected him  and I'm gonna go over here. You can see he selected nav in my selectors  and the height here I'm going to hit the um,  remove CSS property. I hit the little trash can next to that. And you can see now that the div will expand the contract  depending on the height of the diviv. You watch this. If I delete this, contact us.

Can you see the div got smaller to fillet? Okay. So I'm gonna undo that and put them back in. So there are some divs that you want  to have specific heights on there. The navigation might be one of them. Okay?

What we're gonna do in a later tutorials, we'll show you how  to do a proper nav with dropdown menus  and CSS and good stuff like that. But for the moment we're gonna let it expand your contract. Now the next one we're gonna look at is putting the text  inside this part here. So I've got all of this. I want to make sure I grab vintage all the way down to here. And if I cut this, watch this.

If I go a code view, I'm missing the beginning tag of H one  and the ending closing of this P tag here. So when you're covering  and pasting, make sure you're kind of checking in code view  that you've got everything which is,  I've actually got this body tag down here by accident. So I'm gonna grab all of this. So I've got hitting one all the way down  to this closing P tag. So I'm in code view, I can cut and paste in code view. There's nothing wrong with that.

So if I go to edit cut now edit cut, I've cut in code view,  go to design and I'm gonna paste it inside  and replace this text here. So I'm gonna select it all  and paste over the top by going to edit paste. But what will happens if we cut  and paste from code view,  it's it quite literally from code view into this part. So when you cut from code, you need to paste back into code. When you cut and paste from design view, they need  to go back into design view. So I'm gonna go to undo and what I'm gonna do is delete  that text, go into code view, okay?

Have my cursor and between text and diviv and hit paste. What I like to do when I'm working is I like  to put a few returns in. Okay? Now the returns you can see are blank here  and they do nothing to the code. They just allow me, I'm quite visual. So I like to see gaps between the, the opening of the text  and closing of the text div.

And I'm gonna paste in between these two, okay? There may be a few too many retainers in there,  but know that these spaces, okay  and returns don't do anything. It just allows me very clearly to see that. Um, that is my text div. Okay? You can see here if I select at ones, it goes gray  and there's the closing diviv for it.

All of this is inside. So hopefully back in design view, voila, we've got all  of this text inside. Okay? Now the text is too big for the green box. So let's remove the height from it. So I'm inside this text box, I've clicked text  down here in my breadcrumbs, okay?

And I'm going to remove the height gone. Okay? Now the Diviv tag, it's big enough to fit all  of my stuff in here, which is great. And let's look at the same thing for this image over here. Um, we're gonna use this image, I'm gonna cut it  and I'm just going to select over here  and I'm gonna paste it. Images are easy to paste than text  and I'm gonna remove that part.

Great. So I've got,  what I'll do is also over here is remove the height  of this image box, okay? Because we don't need it to be that full um,  height there that we've got a 400. So I'm gonna delete it off there as well. Okay? You see that div tag expands to fit that space.

My last bit is the footer, okay? Which I've ended up getting up here. So I'm gonna select all of that check  in co that I've got everything. I don't. So I want all of that. Gonna go to cut and I could go back to design view now,  but I can see there's my footer dev tag there.

Okay? And you can see that's the junk  that gets stuck in my dream that we don't need content  for ID footer goes here, I'm gonna delete that,  put in a couple of returns just 'cause I like to  and I'm gonna paste it inside. Okay? Go back to design view. And there he is inside the footer. I'm gonna do the same thing.

Remove  the height of this footer. So I'm gonna click on footer down the div tag  and over here select the footer, which is perfect height. I'm gonna remove the height and let the footer itself, um,  so the content inside the div tag, um,  um, decide on the height. Okay? Um, last thing we'll do  before we leave this tutorial is we will look at  removing the colored backgrounds. 'cause the colored backgrounds are just there to help you  as a visual cue to know  where the header is and where the head is.

And it just makes it easy for training. But for actual website, I'll leave them normally just white. Okay? 'cause um, so let's remove the colors. So click inside your header. I know I've clicked on Diviv header.

Can see it down the breadcrumbs here. Okay? And I'm gonna scroll down until I find background color. Now an easier way to do this is you can  keep scrolling till you find it. You can see I found it there. Um, there's a couple of ways is there's these little icons  along the top and this will let you jump down this list.

Okay? So I'm gonna click on this fourth one along  and it jumps down to background color. Um, even easier is see this button here that says show set. Okay, I use this quite a bit. If I click on it, it's just gonna show me the properties  that I've set for this heading Diviv tag. Okay?

Everything else gets, um, chopped off. Okay? So it just shows me this and I can go through here  and hit the trash can to get rid of the background color. Okay? Now remember to turn show set, um, back off again. So it shows you all these grayed out ones  that if you might want to use.

Okay? But shows set just the ones that are active that with  that off, it shows you the hold set. Okay? So I'm gonna zoom back out  so you can see the purple's gone. Okay, I've got a container diiv,  that's the gray thing in the background there. So let's grab, grab the container dev.

Okay, so I clicked on container,  I've clicked anywhere in my document,  I've clicked on container and I'm gonna click show set  and it should show me, there it is my background color  and I'm gonna turn that off. Um, I'm gonna keep working my way through. So the navigation I've clicked inside, I'm gonna,  there's nav and down the breadcrumbs  and I'm gonna say goodbye yellow. Click inside the text box, click on the text div  and I'm gonna say goodbye green. And click inside the image div,  click on the image div down here just to be sure. And then remove the background color.

And the last but not least is the footer. So I click inside footer, click on footer, down the div tag,  uh, down the breadcrumbs  and under the background color, close it down. Okay, we removed all our background colors  and now we've got some diviv tags that have heights  that will expand and contract. So watch this in my type, um, in my um, text here. If I add another, um, return  and I start typing, okay,  and I add some more returns, can you see the diviv tag  expands and the footer pushes down. So that's how you want most of your pages heights to be.

Um, that kind of fluid where they kind of, uh,  'cause every page is gonna be slightly different  content and different links. So you don't want a fixed height. The heights you might want to keep are your heading. Okay, because that's probably  gonna be the same on every page. Your navigation,  which probably gonna be the same on every page  and your footer in this case we've removed them and,  but if you want to have fixed heights, you can do that. Alright, that's the end of the story.

I'll send you the next one.