PDA

View Full Version : Please help! apDiv moves when browser is resized


StevenGerome
05-20-2013, 03:47 AM
Hi everyone,

I'm very new to Dreamweaver and really hope someone can please help me with a problem I'm having on my site. I have an AP Div that moves whenever I resize my browser and despite spending hours trying to fix the problem am unable to do so.

Here is the page: http://www.djjohngibbons.com/news.html

The problem is with the images to the left of each news item. They are contained within apDiv4.

I didn't design the page and have little or know knowledge of what I should do at this point. Any help is greatly appreciated.

Many thanks.

Steve

edbr
05-20-2013, 04:10 AM
app divs or absolute positioning takes its position from the browser edge, so yes the will move. Use relative positioning or put absolute dives in a containing div so the will reference that div edges in stead of the browser, but bettr to stay away from app divs for layout generally

StevenGerome
05-20-2013, 04:20 AM
Thanks for replying edbr. Unfortunately when I change to 'relative' positioning my text disappears.

How would I put my apDiv in a containing div?

(Please excuse my extreme novice ability).

edbr
05-20-2013, 05:36 AM
no problem. look at this sxample. if you change the value of the margin of reldiv you will see the apdive stay in position relatively.
best if you work with split view

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">

#relDiv1 {
position: relative
width:400px;
height:500px;
border:#000 solid 1px;
margin-left:30px;

}

#apDiv1 {
position:absolute;
width:200px;
left:100px;
height:115px;
border:#000 solid 1px;
z-index:1;
}
</style>
</head>

StevenGerome
05-20-2013, 11:01 AM
Thank you.

So in the case of my page with apDiv4 being the problematic area for me, what might help?

}
#apDiv3 {
position:absolute;
width:50px;
height:50px;
z-index:1;
left: 600px;
overflow: hidden;
top: 525px;
}


#apDiv4 {
position:absolute;
width:55px;
height:2579px;
z-index:1;
overflow: visible;
top: 526px;
left: 350px;
float: none;
visibility: visible;

}
.container #columns .col.span-2.last div div p .style2 .style3 {
text-align: right;
}
.container #columns .col.span-2.last div div p .style2 .style3 {
text-align: center;
}
#apDiv5 {
position:absolute;
width:50;
height:50;
z-index:2;
overflow: hidden;
top: 597px;
left: 461px;