Build Your Own Business Website header image

How to Use the CSS Position Property

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is an abbreviated version of a seminar on using the position property for positioning elements using CSS. In this case we take a phone number that is in the natural HTML flow below the header and we position it so that it overlaps the header. In this video we talk about the position property, we look at how to use position:relative and position:absolute. We also use top, bottom, left and right properties for positioning an element.

Video Transcript

Okay well, it looks like that’s pretty much all of the questions. I think I will just talk briefly about the position property. I’m going to go through it more thoroughly sometime in the future but a position property essentially gives you the ability to you know, position elements using CSS and the example that I was going to show you today was an example…oops, let’s see… let’s turn this off. Let’s look at this construction site. This is the site that I have been working on and this is one big graphic image and what this client wants to do is wants to have this phone number inserted rather not as a graphic but as a phone number. And so what we’ll do with this then is rather than doing this as a background image, what we do is we insert the phone number below this and then go absolute positioning to move the phone number up and over. And so for example, I’m just going to walk through how I did that and then next time, I’m going to show you youknow, what that stuff really means. But let’s see, let’s just delete all that table stuff.

So in the custom functions file, right now what we have is we have this image that’s being put in the header and you know, what we’d do is we would create after that image, we’d create another div and give it a name. In this case, I give it OL_headerphone and then put the phone number in and then give it a closing div. So I’m going to… right now, it’s commented out. I’m going to select that code and select the Uncomment button so it’s not commented out now and I’m going to save this and then upload it, make sure we’re at the right spot here. Yeah, here we go. Okay then custom… oh no, not images. That’s crazy. I didn’t mean to go to custom images. Just go to custom functions php and upload that. We come back over here and we refresh this. We should have a phone number that shows up down here below, right? And so what we’re going to do is style this phone number up over here and it’s the right style. So if we go to our custom css, we come over here and we’re going to do this under header.

And so the first thing we have to do is take this custom header and give it a relative position. So we’re going to say position: relative and then we want to take that element… what was it that I called it? OL_headerphone, copy that. Come back over here and that is an id so that’s #ol_headerphone and then oops, wrong kind. And so then OL_headerphone is going to get…we’re going to give it an absolute position…colon absolute and then we are going to give it a top position. Let’s give it a top position of say, 50 and let’s give it a left position called 500. That’s just a guess, we’ll work on it as we go. Let’s make it a font family of Impact, that’s the style of a text. We’re going to give it a font size say of, 18 points or 18 pixels, pardon me and we’ll make it a color black.

Okay so now let’s see how that worked. Save that, upload it, come back over here, refresh it. Okay so you can see now that it has moved the image up, I think I said 50 pixels. No, it’s moved this 50 pixels from the top of its parent thing which is the header so it’s down 50 pixels and then it has made it to the left of 500 pixels. So what we really want to do here then is make everything a little bigger so let’s make the font size…oh, let’s call it 24 pixels. That looks pretty close and then let’s make the left say, 700 pixels. 730 pixels? 700 and what’s that look like? 70 pixels?760 pixels. Wow, look at that right on top of it and then we need a little bit more at the top, let’s say, 55 pixels. Woah, how much better can you get? Okay so we have this text sitting on top of that in pretty much the right spot. Now what we have to do is use the image that we have there without the phone number in place. No, no, no. Well, my mistake… my mistake. Where is that header? Oh yeah, no I have to change it elsewhere. So… okay so let’s just take my custom header, copy it, come back over to CSS and paste it. Let’s save that, come back over to custom functions php and instead of using cropped logo gif, we’re going to use cropped logo 2 which is an image that made for this purpose. Save it and we’ll come back over to Filezilla and upload both of those. Back over here on the site, we’re going to refresh this. There you go and so now what you have is this black text which if you were using your smartphone and looking at this you know, you can just click on it with a mouse and it would dial this phone number.

And you know, I think this black is a little bit too dark so what I would do here is I would take the eye dropper and get that color. Let’s see, again get that color and then let’s see, we’re going to copy this over to custom CSS instead of black, let’s #b…there we got. So it’s no longer black now, it’s you know, closer to this color here. Actually, let’s just pick that color. That’s what I should have done. Yeah, that’s what I should have done. Okay, now that color matches. It doesn’t look like it stands out and you have this thing there. And that’s all about absolute and relative positioning so I’ve demonstrated it here.

Now what I’m going to do next time or at some time when we have the time, is I’m going through this entire process that I have for explaining how absolute and relative positioning work when you can use them for moving stuff around. It’s quite a handy technique.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment