17 replies [Last post]
James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 12 years 36 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Hi all,

I'm having trouble trying to position an image down the bottom and behind all other divs in my layout. Maybe I'm missing something and there is a very easy way of doing this but I've tried lots of different methods and still no joy. I'm a little reluctant in going down the route of positioning all the other divs' z-index's but maybe this is the only solution?

The image is the hanger in the bottom right corner of this page:

http://www.peekabooagencies.com/test/testies.html

Any help would be great!!

Thanks

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 12 years 36 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Here's another version with

Here's another version with the img in its own div and positioned absolutely with a lower z-index of all the other main divs. It still doesn't seem to be appearing in the correct place or behind the tiled background.

http://www.peekabooagencies.com/test/testies2.html

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 11 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

You keep changing the coding

You keep changing the coding on the pages as I'm trying to edit them with Firebug! Wink

I do have an idea however! First things first.. where exactly is the image supposed to locate? The bottom right corner of the entire screen? Or the bottom right corner of the black part?

My idea is to create a second wrapper type div, and set the background image as your hanger, with a position of "right bottom" .. there is more to play with, but as I said, the base code of the page keeps changing lol.

Does that sound like a viable idea to you?

Where exactly is the hanger image supposed to be located? I'll keep playing around too.

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 12 years 36 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Thanks for the reply

Thanks for the reply Titan!

The image is supposed to be bottom right corner of the entire page. Damn I think you might have hit the nail on the head there with the second wrapper type div... how'd I miss that!! I'll give it a go too. Fingers crossed this works!

Thanks again!

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 11 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Hey, no problem at all..

Hey, no problem at all.. glad to toss some ideas around!

The issue that I was coming across however, was that the image was placing correctly (right bottom), but it was placing at the right bottom edge of the browser window.

If there were horizontal scrollbars, the image would just float where it loaded initially. I was still in the process of working through that.. watch out for that issue, and let me know if you get it working.

Or post again with some current code, and I'll try to help come up with ideas to position it correctly if need be!

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 12 years 36 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Hmm yeah the bottom right of

Hmm yeah the bottom right of the window was where I wanted to place it but I do see what you mean RE the horizontal scroll issue. It does appear to jump back in to place if the window is maximised but it's still not an ideal solution.

I've tried here to add an extra div around all the content and position the hanger bottom right but it doesn't seem to be working.

http://peekabooagencies.com/test/testies4.html

Maybe I'm doing something wrong?! :? *

Oh yeah the height and size of div have been specified...

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 12 years 36 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Cool, so that worked!! I

Cool, so that worked!! I wonder is there anyway of getting it to be right at the bottom of the window and not just the body of the page?!

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 11 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Just took a look at your

Just took a look at your updated link there.. that's pretty much the point I had gotten it to. Although, I did manage to get it down to the bottom edge of the window.. I'll play around with it, and figure out what I did lol.

In the time I was playing with it yesterday, I didn't manage to get it to always set to the far right though (even when scrolling).. which isn't ideal for sure. I wish you could set 2 body background images on top of eachother!

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 11 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I actually got this to

I actually got this to work.. I don't understand how exactly, as the values that I was punching in didn't do what I thought they would do lol..

The general idea was the same, but I had to fudge some numbers by trial and error.. try these changes though and let me know if it works.

IMPORTANT: I did this with Firebug.. I have no idea if it works in IE, or any other browser. Please check that out for me!

CSS:

#hanger {
background:transparent url(../images/hanger-img.png) no-repeat right;
height:169px;
margin-top:-153px;
min-width:966px;
width: 100%;        /* This line doesn't seem to be needed as far as I can tell */
}

HTML:
Remove #hanger from wrapping around the entire page. We are no longer using it as a wrapper div.

Place it below the very last div on your page. Place it after your #site-info div. Like this:

<div id="site-info">
     Content here.. blah blah blah..
</div>
 
<div id="hanger"></div>

My idea was to use a negative top margin to bring this div up (kind of like a sticky footer method).. so that it isn't below the final div. This worked, but the top margin had to be different than the height of the div for some reason. Otherwise, it was causing that gap under the hanger picture.

Same thing for the width.. I set a min-width of your page width, but that wasn't working.. I had to modify it by a few pixels to get it to line up if there were horizontal scrollbars.

Again, please check this is other browsers, and let me know!

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 12 years 36 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Good work Titan!! That's

Good work Titan!! :thumbsup:

That's got it appearing in the right place alright. I've checked it out in IE and it seems fine. The only remaining problem is the image is still above the site-wrapper tiled bg!?

I wonder is this a problem, having one background below another background which comes before it?

hmm

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 11 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Oh, you need the hanger

Oh, you need the hanger image below the black background as well?

Hmm.. have to play around with it more I guess lol..

EDIT: The other issue with this is that the hanger scrolls back and forth due to the min-wdith if horizontal scrollbars are on the page. Is that an issue?

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 12 years 36 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Yeah just above the tiled

Yeah just above the tiled wood background would be perfect. When we put it in the hanger div that wrapped all the other divs it appeared at the right level. But that wasn't a working option.

No the scrolling of the hanger due to min-width ain't a problem at all.

Thanks for all the help!

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 12 years 36 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Don't suppose you had any

Don't suppose you had any luck with this Titan?

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 11 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I was playing around with

I was playing around with this quite a bit last week.. to the point that I started ripping my own hair out lol.

I got it behind the black background.. I think by setting it's z-index to -1 (negative one). That worked.. but various parts of the image became invisible, and if the page got maximized, the entire thing would disappear lol.

I honestly can't think of any other ideas for this.. I hadn't worked on it at all this weekend, but I did spend several days trying to come up with something.. with no luck. Sad

In my opinion, you've got a great looking site there.. with or without the hanger lol. I'd probably just leave it out for now.. I'm not sure if it's worth all the trouble trying to get it in there!

Oddly enough, I might have thought of one other thing to try.. so let me do that (might not be able to today), and I'll get back to you!

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 12 years 36 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Thanks for all the work

Thanks for all the work Titan!

Maybe you're right and it is time to stop trying to get the hanger in there. Might be the best option before we both go bald!

Let me know if your other thought works out, take your time!!

:thumbsup:

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 11 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Yea, I will probably throw

Yea, I will probably throw in the towel before I go bald because of that hanger.. that's for sure!

I've been messing with my idea, and it's very frustrating.. I get things to work, but they don't work completely. When I change something to fix the issue I end up with, that works, but something else breaks lol.

To give you an idea of my new idea.. I was playing with the position: fixed; attribute.. thinking that we could lose the hanger div completely, and just have an image set with a position that never changes. This positions the hanger fine, but I can't get the other divs to show on top of it (it doesn't go behind the black background). The odd part is that if you shrink the height of the window, it IS under the shadow you have up top.

It's very frustrating when something that "should" be so simple (in theory), is so hard to do!

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 12 years 36 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

I hear you. You would think

I hear you. You would think that this would be very easy to do. I had a look at using multiple background images on the body AND html tag but still couldn't get it working :curse:

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 12 years 36 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Finally got round to putting

Finally got round to putting this site online minus the troublesome hanger. I'm having problems trying to figure out why IE6 will not display my h1 image above the other images as it does in Firefox :curse:

http://www.peekabooagencies.com/