PDA

View Full Version : fixed position image in a onecolfix div


rxl123
12-29-2009, 03:14 PM
Hi guys - i have read around this and spent more hours on this than i will admit :confused: but i am stuck.

Problem: I am trying to build a onecolfixctr in DW. There's an overall bgimage from photoshop 800px by 900px. This is more of a template. What i'd like to do is to create areas at various places across this bgground that i can add / change pics, put text. How should i do this?

I tried in tables (old skool i think) but ohmigod it got complicated.
I tried in AP Divs in DW, and it gave just the right thing as i cld drop a div just about anywhere (not leaning on the previous one). Yay! i thought, but then when i resized the browser window it all went to rats.
I tried floating divs, but actually was worse than tables as had to 'lean' all the divs against the previous.

Any (polite) suggestions on how i do this? Help gratefully and greatly appreciated!

Tks

rxl123
12-29-2009, 03:42 PM
and..... if you want to visualise what i'm trying to do, www.ativerbridge.com (http://www.ativerbridge.com) is the site. This is the pure flat photoshop piece. You can see where i want to make it into links, and replace pic elements with text elements.

Hope this helps. G

edbr
12-30-2009, 02:57 AM
you mean like this? i used background colours not images but its the same idea
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#wrapper {
position: relative;
width:800px;
height:900px;
background-color:#FF0;
border:#666 1px solid;
margin-left:auto;
margin-right:auto;

}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
background-color:#F00;
left:0;
top:50px;
}
#apDiv2 {
position:absolute;
width:200px;
height:115px;
z-index:1;
background-color: #00F;
left:230px;
top:20px;
}


-->
</style>
</head>

<body>
<div id="wrapper">

<div id="apDiv1"></div>
<div id="apDiv2"></div>

</div>
</body>
</html>

rxl123
12-30-2009, 06:30 AM
Edbr, can't thank you enough. Tried it - works perfectly. Not only have i spent days on this getting knowhere, i've been working around this for nearly a year - so fabulous to have this now.

Thanks for taking the time - really appreciated. :lol:

G

rxl123
12-30-2009, 07:48 AM
edbr, your code works great - one niggle is that the wrapper isn't flush against top of the browser window. I have forced it by putting a -8px margin-top setting on it. Is this an ok way to do it? Not sure why it is defaulting to this. is this normal and cross browser ok?

Ta very much!

edbr
12-30-2009, 07:56 AM
body{margin:0:} should do it

rxl123
12-30-2009, 08:10 AM
edbr, thats it. perfect now. many thanks for your help!

G