homepage Welcome to WebmasterWorld Guest from 184.72.91.94
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Accredited PayPal World Seller

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library : Charter : Moderator: open

CSS Forum

    
DIV overlay staying static when I need it to move
terrybarnes




msg:3799933		 1:33 pm on Dec 4, 2008 (gmt 0)

I'm just developing a site where I have a single column of content that is always centred on screen (so if I resize my browser it'll move and stay centered.

The problem is I have an image, in a DIV, that I need to overlay on top of the page. The problem I'm having is that when I resize the browser window - that image stays in the same place and does not move with the rest of the site. I've tried positioning that div within other divs and changing the position from absolute to relative etc but it still seems to remain static on the page.

Here's the DIV code for the overlaying image:

#image-overlay
{
position: absolute;
top: 34px;
left: 434px;
width: 547px;
height: 58px;
}

I'm sure it's something very, very simply but I'm just not sure what?! Any help would be very much appreciated.

 

varya




msg:3799948		 2:12 pm on Dec 4, 2008 (gmt 0)

It's not moving because you've set it in a specific spot with absolute positioning.

It doesn't matter how much you resize the browser window, the image is going to stay right here.

top: 34px;
left: 434px;

terrybarnes




msg:3799952		 2:21 pm on Dec 4, 2008 (gmt 0)

That's sort of what I thought but how do I do it so it moves correct to it's position within the containing DIV?
swa66




msg:3800125		 6:11 pm on Dec 4, 2008 (gmt 0)

Using absolute positioning to center: 

#image-overlay {
  top: 50%;
  margin-top: -29px; /* half of the height */
  left: 50%
  margin-left: -274px; /* half of the width */
}

Basically it first move e.g. the left side to the middle (left: 50%;) and then moves it back for half of the width of the element (negative margin).

If you want to center it relative to a parent, make sure the parent has position. Position can be given by e.g. "position: relative;" without needing to "nudge" it itself using left/top/right/bottom.

terrybarnes




msg:3800699		 10:42 am on Dec 5, 2008 (gmt 0)

Okay, what I've ended up doing is adding "relative" positioning to the containing DIV - this then results in the image_overlay to stay perfectly positioned within that containing DIV.
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved