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.