Build Your Own Business Website header image

Create Overlapping Images in Thesis 2 with Absolute Positioning

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.

In this session we demonstrate how to create overlapping images in Thesis 2 with Absolute positioning using custom CSS to position the images where we want them. We explain what relative and absolute positioning are. We also show how to give the menu a height to position the images and talk about creating a background image for the hover menu item.

Video Transcript

Member: Excellent. Now, so this is the Thesis 2.0 that I’m currently working on, it’s just the own page and actually, I’ve 3 questions. There’s an image that goes right here, I’m going to show it to you in 2 seconds so I have to put an image right here, I have to put a small image underneath these menus here with one menu selected and also one image right here on top of the sidebar so let me show you what it looks like. So this is the image I’m talking about, I’ve uploaded all the image already in Thesis 2.0, in the library and also in Thesis image just in case and this one I haven’t uploaded yet and this one here, yes I did. You know what I’m saying, this one here and at the bottom there. That’s it.

Rick: Okay. What are you using, are you using Thesis Classic?

Member: Yes.

Rick: So, what I would do is in that place where you’ve got your menu right now, is that 2 columns or is that 1 column?

Member: It’s in the header actually, let me just double check here making sure.

Rick: Well, let’s just go look at your HTML.

Member: So it’s right on there.

Rick: So you’ve got a menu box above the header.

Member: Yes.

Rick: So what I would do is I would put that image as a text box in that menu, in that one.

Member: Just create a text box?

Rick: Yes, and I would put it below and then make sure that your menu box has a relative position assigned to it.

Member: Okay now, how do I do that?

Rick: Well, what class did you give menu box?

Member: I just kept the same one, the .menu.

Rick: No. What I would do right there under HTML ID is I would give it menu_box for your ID and now, you can style that and so in your custom CSS, I would say you know, #menu_box {position: relative}.

Member: Okay so, #menu_box and then {position: relative}?

Rick: Yes.

Member: That’s it.

Rick: Well, now it’s menu_box remember?

Member: Yes, it’s true.

Rick: And then, you’re going to need to give your text box a class but let’s save this before you go away.

Member: Oh, no.

Rick: Yes, save that and then give your text box a class or ID, it doesn’t really matter but give it something. That one you’re going to give the position of absolute and then you’ll use top and left as means of pushing the image to the place you want it.

Member: Okay so, .menu_textbox and then {position: absolute}?

Rick: And then you could just start off by saying, well, inside of there you could say you know, top:0 left:0

Member: 0px?

Rick: With zeros, you don’t actually have to say px.

Member: Okay.

Rick: Then semi-colon and then left:0

Member: Excellent.

Rick: Now, you’re going to play with those to get the image to where you want it to be.

Member: And we’re talking about which image now? Are we talking about this small image there yet?

Rick: Yes, the CBPA image, that one.

Member: Oh, gotcha.

Rick: Right now, what we told it to do is take that image and go put it in the upper lefthand corner of that menu box and because we give it an absolute position, it’s taken out of the flow of the HTML and so the other stuff will pop right up and this will just sit over the top of it.

Member: Excellent so if I go into my library, grab that image right here, come back here, put in like text box here.

Rick: Yes, you’re going to have to view it with the real image tag.

Member: Is that right?

Rick: Yes so go back over there and no, it’s okay you just do this around it.

Member: Okay.

Rick: You know, it’s img src= and then single quotes. Well, you need the opening tag though, right?

Member: I’m sorry, <img src=

Rick: <img src= and then

Member: Quotes?

Rick: Yes and then go to the other side and put the double quotes in and space and then back slash and closing bracket, okay.

Member: Okay, and disable p tags or?

Rick: Yes, disable the p tags, absolutely.

Member: So now, I should have the image there and then just play with it?

Rick: Well, let’s just save the template and see what it looks like. It may look exactly the way you want it to look now.

Member: I don’t see the save.

Rick: Well, there you’ve just had it, save template, that was that green thing.

Member: Okay, good.

Rick: Okay so now…

Member: It has to go on to this, right?

Rick: Right. Well I guess I’d start off by giving that menu box a height.

Member: Okay.

Rick: So there at CSS, height: whatever.

Member: Let’s say, 100px?

Rick: Sure.

Member: That didn’t do anything, did I do it correctly?

Rick: Refresh. h-e-i-g-h-t position: relative height menu_box. Okay, it’s zafamedia?

Member: Yes, zafamedia /cbpa

Rick: okay, I was going to copy it from yours. Okay, why can’t I, for heaven’s sake.

Member: Now, I’m not super super good with CSS yet and when you give a position relative, what are you saying exactly or are you telling CSS actually, to don’t care about anything else, I just want this item right there? Is that what relative is?

Rick: Well no, relative means that you are giving that thing a position and you’re saying its position should be relative to its container.

Member: Gotcha.

Rick: And position absolute then uses its container as its starting point so if its container doesn’t have position relative, then it goes to the next container with position relative and it keeps on going until it gets either to the browser to one that has a position already specified.

Member: Gotcha. So if I go to give tab:0 left:0, maybe that’s what the problem is because when you look at here, it’s tab:0 left:0, right?

Rick: No. See the thing is, is that we give this thing, okay so we’ve got #menu_box {position: relative} height:100px. I don’t think this is the right thing to do but I’m just going to test it anyway, height:100px. No, that’s not the right thing to do. Let’s see, I wonder if this also needs to be positioned absolute.

Member: You want to try?

Rick: I’m going to try it right here.

Member: Okay.

Rick: position: absolute and then right:0 okay, so why it isn’t that completely going outside of the flow of this thing then? Oh, it’s the height definition actually.

Member: Okay.

Rick: I’m sorry, nobody can see my screen or see what I’ve been doing. So, in your situation, I mean where you are right now, look at the code you have for menu box and take out the height.

Member: Right. Done.

Rick: Okay and then let’s create another class and let’s just say, so it’s id #menu-main-menu, not underscore but hyphen.

Member: Okay, #menu-main

Rick: It’s #menu-main-menu

Member: And main menu is together?

Rick: No, it’s another dash.

Member: Dash, okay.

Rick: Yes.

Member: Okay.

Rick: And then give that a position of absolute and right:0

Member: Absolute and then 0?

Rick: right:0

Member: Oh, right:0 sorry, absolute right

Rick: That needs to be a semi-colon after absolute.

Member: My bad, right:0 semi

Rick: Then let’s see, what was the other thing I did? I got rid of the height of menu text box, we made that position: absolute right:0, we got rid of the height of okay so save that and it’s going to be almost there.

Member: Okay, yes it’s getting there, it came closer so this is going to have to go up a little bit more.

Rick: No, I think there still must have a height definition for this then some place or I missed something of what I was telling you. Second, I’m refreshing it on my screen here. Well, the menu box height is still 100 pixels.

Member: The menu box, maybe

Rick: No, I don’t think so. I think, let’s just save the CSS again and let’s refresh that page one more time.

Member: Here we go.

Rick: There it is.

Member: Yes.

Rick: So now what you do is you’d take that thing and you would say you know, left:50px and top:40px or something and it will shove it down.

Member: Yes, excellent.

Rick: Okay.

Member: And now it just go in and okay, good stuff. Perfect, excellent. Do we have time for that little thing underneath there or some other questions are waiting?

Rick: Actually, if you could post that question to me on the forum.

Member: Okay.

Rick: I mean what you need to do is make that a background image of the menu item, hover. That’s what it is, is you take your…

Member: Okay so background of the hover menu item.

Rick: Right.

Member: Okay, that’s good enough for me.

Rick: And all you have to do is give it a position of center bottom and make sure that the menu item is tall enough to have the image show there. So it’s usually you know, additional bottom padding so there’s enough room for that to show.

Member: Okay, additional bottom padding, perfect. Now, what about this here, this is the border, right so it’s just like top border and then I put an image there?

Rick: You wouldn’t do it as a border, what you would do is you could either make the top one the background image of the sidebar and put it at the top and then the bottom one make it the background image of the widget and put it at the bottom.

Member: Okay.

Rick: And so you’d have one at the bottom of every widget then.

Member: Okay, gotcha. Okay, so one background image of sidebar and you said the top?

Rick: So you do the one as the background image of the sidebar and make it at the top and the other one is background image of widget and put it at the bottom.

Member: Perfect.

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