Build Your Own Business Website header image

How to Align Images Using Absolute Positioning

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Whoops, you've found some protected content!

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

In this session we show how to align images using absolute positioning by customizing the image sizes and giving the container a relative position. We also discuss why you shouldn’t use margins and padding when using absolute positioning.

Video Transcript

Rick: So then in terms of lining up the other things, how did you craete those little elements?

Member: This one?

Rick: Yeah.

Member: So what I’m doing… I’m using your plugin for the feature box and this is of course, the… this using the slider image and this… using widgets. I’m using widgets and this is an image, the banner and the background is an image. And these ones are all images inside that widget. I could probably show you the back end right here. So this is the first image that I have, the banner and then there’s all these other images that are just floating.

Rick: Do you have a definition for float right 1, float right… I see, you do. Okay.

Member: Yeah.

Rick: And you’re using absolute positioning so did you make the container… did you give the container a relative position?

Member: No, I didn’t.

Rick: Okay, you ned to do that. You need to give the container a relative position.

Member: Give me a second. Container…okay.

Rick: And then so for example, show me your container. Show me what your container is there. I mean, just on your site?

Member: On my site? You know, I don’t think I put a container in here.

Rick: No, no there is a container there so go ahead and expand your content area there below.

Member: Let me see… is it okay maybe… you could show me on your screen?

Rick: Yeah, that’s what I’ll do. I’ll change the presenter to me.

Member: Thanks Rick.

Rick: Yup, show my screen. We’ll go to my site. Okay so that’s what it looks like in Chrome. And so if we inspect that element, your container in this case is… well it could be byob feature box row 1 column 2. And so what you would do here, let’s go over to Firefox.

Member: Okay.

Rick: There’s no way to do this with my plugin specifically, right? You’re just going to have to write some custom CSS for this. But let’s wait for Firefox to come up. Okay in custom css though, come down here and say… what are we looking at? We’re looking at id… no. Our id is feature box row 1 column 2 and then position relative. Okay so that’s position relative and then what you’re going to do is image float right. You know, I would not use float or clear or margin or display, right? Because this is just an image, right?

Member: Yeah, it’s just an image.

Rick: I wouldn’t use any of these things then. I would just use position at that point.

Member: Okay.

Rick: So we get rid of all those.

Member: So float margin and display…

Rick: Yeah because all of those other things are also methodds for positioning and since you’re using absolute positioning, you don’t need to use the rest of this stuff. Okay and so then what you’re going to say is position top… I wouldn’t use percentages. I would use position top 0, okay maybe 10 px and then left say, 10 px. Okay well, not 10 px but maybe 30 px. Okay, maybe 20. Okay and then the next one is sa, 40 px from the top and again the left is still 20 pixels. Okay, let’s call it 60 pixels. Now, obviously these images aren’t all the same width so evidently, it left… 20 pixels isn’t enough room.

Member: No. I think I had them all the way to… like the left that way. They were like that but…

Rick: Okay. Yeah, I mean you need to make your little thing a little bit bigger probably.

Member: Okay.

Rick: But then your top here could be 120 pixels and then your left again would be 0 pixels. And then top is 180 and 0… let’s see, what did I do wrong? Oh, 180 px. So I’m missing one up here. Oh, I see. So this one… this top would actually be 10 and 0 and this one would be 60, 120, 180, 240. Top 10 pixels, not percent and then you know, you just adjust those a little bit to make them go where you want them to go. But the tirck here is if you are using absolute positioning which is perfect, there’s no reason why you shouldn’t use absolute positioning then you should use… you shouldn’t use amrgin and padding because it takes the place of margin and padding, right?

Member: Yeah.

Rick: So does that make sense?

Member: It makes total sense and you did under like a few minutes which… this is awesome. Okay so…

Rick: So you might look at my seminar on absolute and relative positioning.

Member: Okay.

Rick: I do have a seminar on that. You know, talking about the relationship of absolute and relative positioning and how to position elements that way. So you may go over and look at the miscellaneous seminars. It’s all the way at the bottom of my seminars section. But absolute and relative positioning is… can be a very useful way for organizing things like this.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one