Layering two images using absolute pos (help!) [Archive]

View Full Version : Layering two images using absolute pos (help!)

Tanmccuin

07-18-2006, 12:05 AM

Hi,

I'm in the process of designing a page for a local record store and so far all is good, but recently i've hit a snag. I'm trying to layer a transparent png over the header img - and also making sure the transparent image, remains relativly positioned to the header div, not the body.

As i have it now it works so far, insomuch that the image hovers over the header, but as i resize my window the img (a logo.png) moves relative to the size of the browswer window. i need it to stay aligned w/ my header div, which moves to remained centered as the window resizes.

here is some html:
<body>
<div class="page-container">

<div class="site-name">
<div class="site-slogan">
Home of Underground Prices
</div>
</div>
<div><img class="img-header" src="./img/header1.jpg" alt=""/></div>
<div><img class="floating-img" src="./images/label3.png" alt="Pure Pop logo"/></div>

-------------

and the corosponding CSS:

body {font-size: 62.5%; margin: 0em auto; padding: 0px; font-family: arial, tahoma, verdana, sans-serif; background: url(../img/background.gif) top center repeat-y;}

.floating-img {
position:absolute;
top:-100px;
left: 120px;

.img-header {clear: both; float: left; width: 770px; height: 100px; margin: 0px; padding: 0px;}

--------------------

I'm relatively new to CSS, and while i've been able to figure out most my issues with alot of trial and error, this one is really giving me a hard time. To my understanding what i need to do is make the logo relative not to the body but the header div, that way it stays aligned with the header image - when i do what i think is this, it instead causes the entire body of the page to shift to the left, while the header stays centered on the page, and the logo image, remains absolute to the body (not the header.)

I'm probably not explaining myself well enough.... if you need more info please let me know. This is driving me nuts, and i could really use some help at this point,

Thank you!

Tanner M:eek: :eek: :eek: :eek:

jscheuer1

07-18-2006, 03:06 AM

Generally it is not my policy to work with these type of cases without a link to the page because, there are so many things that can impact presentation that might not seem important to the person having the problem. However, I can see right away that this:

body {font-size: 62.5%; margin: 0em auto; padding: 0px; font-family: arial, tahoma, verdana, sans-serif; background: url(../img/background.gif) top center repeat-y;}

Is a recipe for disaster in IE because IE simply does not like the body element being treated this way and will do unexpected things as a result.

I also prefer my css a little more spread out but, that's just a personal preference for clarity, so your body style would look like so:

body {
font-size: 62.5%;
margin: 0em auto;
padding: 0px;
font-family: arial, tahoma, verdana, sans-serif;
background: url(../img/background.gif) top center repeat-y;
}

The font-size declaration is too small for most high res monitors and the margin's auto component is meaningless without a width being specified. Even with a width specified, IE will behave unexpectedly while in most other modern browsers the effect would be to center the content. It is generally best to leave the body alone except, perhaps to zero out the margins and padding and/or add full page background effect(s), if desired. All the rest of these styles would more properly be applied to a container division that spans the entire page.

That out of the way, a method that you can use to get an absolute element to render relative to another element is to put it inside it and make the container relative, ex:

<div id="top" style="position:relative;">ordinary content
<div style="postion:absolute;>
absolute content relative 'top'
</div>
more ordinary content
</div>

Interesting effects can be achieved using the left, top, width and margin properties of the absolute division but, they will all express as relative to the container with the id of 'top', not to the page.

Tanmccuin

07-19-2006, 05:46 AM

I appreciate your help - i'll be putting a beta of the site up soon and if i can't get it to work using your excellent help i'll post a link. It seems to me your advice should work... time to test it out.

thanks again,

Tanner Moore

Tanmccuin

07-21-2006, 06:36 AM

It worked, Thanks so much!