How to absolutely position text in Dreamweaver

Hey, my name is Dan. In this video we're going to look at Absolute Positioning. Absolute Positioning is a little trick we can use to force a div-tag or some sort of object here, or an image, to go exactly where we want it to do it. At the moment everything is relative to each other. What it means is, it's going to allow me to do some tricks with this. I want to build this, I'm in Photoshop at the moment, I want to rebuild this in Dreamweaver. Now, what I could do is, I could make my-- I've already got my Container made in Dreamweaver. I could put in images, a background image, and then push the text over the top which wouldn't be hard. The only problem with that is that these images would then become part of the css, and not be read out to the user. The problem with that is that they're actually quite useful, important part of the website. They're actually a thing on there, and I want Google to be able to see it. And I want Screen Readers to be able to see it.

So what I'm going to have to do is stick it in as a regular image, and then I'm going to put text over the top of it. But without using Absolute Positioning text, will not go over the top of an image that's in the HTML. Either over the background of the css, but not on the HTML. Let me show you the finished thing to show you why it wouldn't work without Absolute Positioning. This is one that I've finished earlier. And here is my text box. This one in here, I've got a Text Portfolio. If I disable the Absolute Positioning, I've done, can you see, without it, the text will not go over the top of the image. There's the image, so it can be read by a Screen Reader. It's in the HTML, which is great. And this text here will not go over the top of it unless I make this text box absolutely positioned. So let's go and do that.

First of all, I want to get inside this column that I've made, and I want to insert my image. Nothing special about that. I've selected my 'Column', I'm going to go 'Insert', 'Image'. I'm going to 'nest' it inside. I'm going to go off and find, on my 'Desktop', under 'Dreamweaver Exercise Files', 'Images', there's one in here called 'portfolio-1'. I'm going to set him to-- I'm going to click on this, and say 'Make Image Responsive'. So that's inside that box, and it gets bigger and smaller depending on the size.

Next what I want to is, I'm going to put in the box that's going to contain my text. So what I want to do is, I'm going to go to 'Insert', 'Div'. Where is it going to stay? I'm going to say it's just going to be 'After'. There's my 'div-tag' here. It's got no name at the moment, I'm going to create a 'Class' for it. Over here, in my 'main.css'. If you can't click on it, it's because I've switched to 'Current'. I might have lost mine while doing something else. To make sure, if you're finding it hard to use, switch to 'All'. Make sure you're in 'main.css', I'm going to create a 'Selector'. This one here is going to be called '.text-portfolio'. I'm going to turn 'Show Set' off, so I can see everything. And what I want to do is, I want to do a couple of things.

I'm going to make the background of this 'div' black so we can see where it is. Click on 'Color', 'Black'. Now nothing's happening over here, why, because I haven't applied my Class yet. So I've got my 'div' selected, I'm going to add a 'class'. This one's going to be called '.text-portfolio'. So it's doing the bit where it's relative to the image above it. So he sits underneath. What I'd like to do is change it to the Absolute. And what that will do is that it will then ignore the image. It will go to the outside Container, which is this thing called 'col-lg 3'. And here he is, he's sitting underneath the image.

What I want to do is pull him up, and move him around over the top of this image using Absolute Positioning. So we're going to select this 'text portfolio' here. I'm going to scroll up to the top and scroll down till I find, under 'position', it's a bit obscure, where it says 'static', which it is by default, we're going to go to 'Absolute'. It does nothing really, other than the Container div which was this 'col-lg 3'. Forgets it exists. It doesn't see it, so it's collapsed down, it's still there, that's fine, but the Housing Container doesn't say it. What I can do now is, when I go to 'Position' I can say, on the left here, I want to change it so it is maybe '35 pixels' from the left. I could use 'top', and put a really big margin in, so I could put 'top', 'pixels', and I can make it '200', and try and push it down to the bottom here. I'm going to click it, maybe make it '180' and get it down the bottom, or I can bin there and use the 'bottom'.

It's just easy to start from that direction. I'm going to click on 'bottom', go to 'pixels'. And I'm going to set this one to maybe '15'. So it sits up there, from the bottom there. '15 pixels' from the bottom, '35' from the side, and that's one of the uses for Absolute Positioning.

There's lots of other ways you can use Absolute Positioning. It will pop up in Web Design over and over. This is not a complete kind of overview of what it does, but it's just kind of a sample of some of the things you can do with Absolute Positioning.

Before we go let's finish off Styling it because I want it to look a lot like this in Photoshop. A bit of a transparent background, and some padding around there. So what we're going to do is, 'text-portfolio', I'm going to do some padding, so 'padding', '2 pixels' to the top. '2 pixels' to the bottom. Maybe '5' on left side, '5' on the right side. You can see the padding appearing around this 'div-tag' here. Why don't we make it even a bit more? So I'm going to increase it up to maybe '10'. And '10'. That feels about right.

To change the text inside here, I'm going to click until it gets launched. And this one was a company called Acme Ink. What I also want to do is change the background color to be a little bit transparent so we can play with the alpha. Becomes a little see through. I also want to change the font. Now what I could do is I could go through and make a separate Class for the font and apply it to it, because at the moment there's nothing applied to it, but what I can do is, I can actually wake up this Parent div-tag here, called 'text-portfolio'. We can control everything inside of this even though we've done background colors and stuff, we can control the font as well.

So inside of here, you my friend now are the right font, but you're going to be the right size now. So I'm going to the right size, and let's just check what I did in Photoshop. So it is-- gets up to about '14'. So in here, I forgot, 'Client', and it's going to be 'Acme Ink'. And 'font size', maybe make it even a bit bigger. So I'm going to make it up to '16'. Maybe '18', '17'. '16'. And maybe the 'font-weight', I'm going to push the 'font-weight' down to the 'lighter' one. So down to '300', say '400'. Lovely.

So we learned a little bit about Absolute Positioning, and we've Styled off text. Let's look at the next video, and we'll go through and reproduce this for all four boxes.