Absolute Positioning Not Absolute?

[Average Joe]

OK… I’m learning, and I believe I’ve come a long way, but I can’t seem to get this layout to work properly.

I’m simply trying to get four images to be positioned in the four corners of the screen, and adjust as needed due to browser size. The background image is fixed. The images are positioned at the very top and bottom of the screen, and they do "float" left and right whenever I resize the screen, however, the two images on the right are NOT being absolutely positioned to the right side of the screen. There is a huge gap to the right of them even though they are set as:

Code:

#img2 { position: absolute; top: 0em; right: -10em; z-index:-1; }
#img4 { position: absolute; bottom: 0em; right: -10em; z-index:-1; }

I simply want them to be pushed to the far corners initially. From there, I can apply some margins to get them positioned near the center of the screen more.

** It would be awesome if I could have them auto positioned from the CENTER of the screen so they wouldn’t roll over the main website name and order link!! Can THAT be done?

For now I’ve set them as z-index -1 to place them BEHIND the main website name (located in the center), and since doing that the Mouse Over functions no longer work. How would I fix that?

Site Reference: http://getjerseys.com/indexT.php

[Brido]

Start off by setting the wrap’s position to relative.

Code:

#page-wrap { position:relative; }

[Average Joe]

Thanks Brido!

I thought having the container embedded directly within the page-wrap would take care of that?

Code:

:
:
——– page displayed content ———–
:
:

Inside the CSS file:

Code:

div#page-wrap { position: relative; width: 750px; margin: 10em auto; }
#container { position: relative; height: 100%; width: 100%; }

I’m still trying to figure out WHY when I reduce my browser window down to simulate a 800 x 600 window, I get my background, and bottom menu adjusting properly BUT… I get a horizontal scroll bar that extends out to the right. I don’t have anything out to the right!

[Average Joe]

@virtual: Please read the OP. I know the website looks like crap right now! I’ve basically removed all the CSS formatting to see if someone can offer a better solution. I’m trying to get the four images positioned in the four corners of the screen, and have them "adjust" or "float" in order to accommodate different screen sizes. I originally had them placed great for a wide screen monitor, only to slide over to a 800×600 monitor and find the images all scattered on the screen.

Just trying to make the front page look clean regardless of the monitor type.

IS IT POSSIBLE?….
Could I somehow center up the text image and then push all of the other four images out from the center of the screen by using margins? Would that be a better approach, than to try to position them at the four corners?

[jinfiesto]

I think you’re actually on to something with this solution

Code:

:
:
——– page displayed content ———–
:
:

Set #container as you have, width 750px etc.. and set #page-wrap as follows.

Code:

#page-wrap{width: 100%; height: 100%; position: relative}

Then position your images inside the #page-wrap but outside the #container.

This should do the trick!

[jinfiesto]

Lol, I read this over again and I think you just have things nested wrong. The 750px width rule needs to go in the #container id instead of the #page-wrap. The rest of my code still applies.

[Average Joe]

@jinfiesto: I tried that, the nesting doesn’t seem to be the problem.

I’ve been messing with this css and html for quite some time now. So, when you look at it, it may not be what I started with at the beginning. So, let me re-explain what I’m trying to achieve. Perhaps someone can post some code from scratch to achieve this?

I’m simply trying to get the logo centered in the middle of the website.
I’d like to have two images up above the logo, on the left and right.
I’d like to have two images down below the logo, on the left and right.
I’m trying to have all five images expand/shrink according to the browser window size.

I originally had this completed on a wide-screen monitor only to check it on a 4:3 monitor and find the images scattered due to the space restrictions. Therefore, the reason behind the expand/shrink request. I’ve tried several different options, I had the images expanding/shrinking for a while, but that isn’t working anymore. i have never been able to get the images properly located on the screen like I want. Seems like the two images at the top are on a row, the logo is on a row, and the two images on the bottom are on a row. However, the logo (row) needs to be slightly overlapping both the top and bottom rows in order for it to appear properly.

Any ideas/suggestions?

[Average Joe]

Hey virtual:
That is a good start! Thanks for the clean approach and fresh start!! I’ve modified that a bit to get the original four pics (and MAIN background) back into the picture. This code has got me to that point:

Code:

Saved this as http://getjerseys.com/indexY.php

Now the only two problems I see are,

1. The screen layout appears to be EXPLODED into all four corners. I wanted the four images into the corners, but now there’s a bunch of empty space from top to bottom. How can I squeeze this (vertically) all together without warping the images, now?

2. The five images are all hot spots that when moused over change to alternate images, and/or provide links to other pages. I don’t appear to have anything in the body of the html, so how to I supply the links?

This is the code i was using to accomplish the links and image swaps:

Code:

Can this somehow be incorporated into the code above?

[Author]

Posts