Anchoring <div> to a Image

Forum Moderators: open

Message Too Old, No Replies

Anchoring <div> to a Image

How do I anchor a <div> to an image?

Badger

9:18 pm on Feb 9, 2009 (gmt 0)

Hi Everyone,
I have a small problem - I have a large .jpeg image as a background which I have put in a <div id="container"> so that regardless of what browser opens the page it maintains the full 100% of page variance. My problem is I have two <div> containers (one for menu and other for body content overlapping the image - which are filled by Jade based information so I don't need html or CSS or Java for this), and I need to anchor these <div> portions so they resize along with the <div id="container"> because currently if I open the page in another browser the image is 100% but the <div> containers are no longer aligned with the room allowed for them in the image.... How do I do this?
I know its gonna be something really obvious but its Tuesday morning and I just can't get it right today...
Thanks in advance

crisisbleeds

7:44 pm on Feb 10, 2009 (gmt 0)

Is this one of those times where an auto margin would work like setting left and right margins to auto on your divs? Not sure of the real answer but this was the first thing that comes to mind.

tedster

7:49 pm on Feb 10, 2009 (gmt 0)

Welcome to the forums, Badger. I think we'll need to see the basic CSS and HTML to get a precise enough idea to help you with this.

See LINKS and posting CODE [webmasterworld.com] for help and guidlelines.

Badger

9:23 pm on Feb 11, 2009 (gmt 0)

Heres the basics of the coding (without all the stuff in the middle)
I have created a container which incorporates the jpeg image as such:
<head>
<style>
body{margin:0;padding:0}
#container{width:100%;height:auto;margin:0 auto;padding:0; position:relative}
</style>

Then I put in this which allows for specific printing from an area designated on the jpeg

And heres the content. I am writing some print.css so only this part will print btw but more importantly I need to fix this to the jpeg behind it so it moves as the browser changes....
<div style="position:absolute; width: 655px; height: 430px; z-index: 3; left: 400px; top: 265px; id="layer3" class="newStyle1">
<P><FONT style="FONT-SIZE: 13px" face=Verdana color=#000000>Founded in,.....

Heres the div with the menu - one of the parts that moves dependent on the browser and part of what I want to fix/attach to the jpeg:
<div style="position: absolute; width: 155px; height: 450px; z-index: 2; left: 115px; top: 250px" id="layer2">
<ul id="verticalmenu" class="glossymenu">

Can anyone help?
Thanks!

swa66

11:22 pm on Feb 11, 2009 (gmt 0)

From the code fragments it's not entirely clear how this is nested in the html, but ...

Position: absolute positions the element relative to
- the closest parent that "has position"
or
- the viewport if no parent exists which has position.

an element gets position by having either "position: absolute" or "position: relative" itself. (your container has position)

Other troubles you might be struggling with (not sure, use what you need):
- to center a absolutely positioned element you need a trick: set the width with e.g. "width: 200px;", the left side in the middle of the parent with position: "left: 50%" and then a negative margin on the left of half the width of the element: e.g.:"margin-left: -100px;" . There are other ways, but they are far more trouble in legacy browsers like IE < 8.
- to use the full height of the browser's window: "height: 100%" is a tricky thing: it sets the height of the element to the height of the direct parent provided that the height is explicitly set on the parent and is different from "auto". There is an exception: the root element (the parent of html) has the height of the viewport. So to get something to be as tall as the viewport, you need to set height: 100% on html, body, and *all* elements between it and the body (wrappers included),

BTW: I'm seeing a lot of superfluous css in there ... e.g.: height: auto is the default, block elements start with 100% width, left:0 and top:0 are the default for position:relative, ...