PDA

View Full Version : Question about the AP Div


-fedexer-
08-14-2007, 09:48 PM
Hi ,

I am currently trying to produce a website in dreamweaver, i have very little knowledge with the program but i am learning as i go along. Anyway i have a background image , and then the main layout ontop of that in an AP Div. It is centered etc.

Now i wish to put some text ontop of that layout using more AP Div's but their position in the preview changes on the screen resolution/size(it basicly jumps to the left of where i want it). I was wondering if anyone could assit me/show me what the code for the Div should look like so that when it is laid out in the design view.. it will look like that in the Preview online. I just dont understand why it keeps on changing so all or any help will be greatfully accepted.

(if a better way of doing this can be suggested that would also be good )

HTML code attached:

<!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">
<!--
body {
background-color: #FFFFFF;
background-image: url(template/bg.gif);
text-align : center;
min-width : 770px;
background-repeat: repeat;
margin-left : auto;
margin-right : auto;
margin-top: 0px;
margin-bottom: 0px;
}
#tickertape {
position:absolute;
left:484px;
top:221px;
width:428px;
height:18px;
z-index:auto;
padding-left: 1px;
padding-right: 1px;
visibility: visible;
overflow: hidden;
}
#apDiv1 {
position:absolute;
left:96px;
top:327px;
width:150px;
height:403px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:119px;
top:272px;
width:48px;
height:27px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:74px;
top:255px;
width:149px;
height:28px;
z-index:2;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}
.style3 {color: #FFFFFF}
#apDiv4 {
position:absolute;
left:96px;
top:289px;
width:151px;
height:30px;
z-index:2;
overflow: hidden;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>
<body onload="MM_preloadImages('template/Button-up.gif','template/Button-down.gif')">
<div id="tickertape">
Welcome to The Official Parent Forum Website... The site shall be updated regularly.</div>
<div id="apDiv1">
<table width="150" height="180" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="30"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Home','template/Button-down.gif',1)" onmouseover="MM_nbGroup('over','Home','template/Button-down.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="template/Button-down.gif" alt="Home Button" name="Home" border="0" align="left" id="Home" onload="MM_nbGroup('init','group1','Home','template/Button-up.gif',1)" /></a></td>
</tr>
<tr>
<td height="30"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','btn2','template/Button-down.gif',1)" onmouseover="MM_nbGroup('over','btn2','template/Button-down.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="template/Button-up.gif" alt="" name="btn2" border="0" id="btn2" onload="" /></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','btn3','template/Button-down.gif',1)" onmouseover="MM_nbGroup('over','btn3','template/Button-down.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="template/Button-up.gif" alt="" name="btn3" border="0" id="btn3" onload="" /></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','btn4','template/Button-down.gif',1)" onmouseover="MM_nbGroup('over','btn4','template/Button-down.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="template/Button-up.gif" alt="" name="btn4" border="0" id="btn4" onload="" /></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','btn5','template/Button-down.gif',1)" onmouseover="MM_nbGroup('over','btn5','template/Button-down.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="template/Button-up.gif" alt="" name="btn5" border="0" id="btn5" onload="" /></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','btn6','template/Button-down.gif',1)" onmouseover="MM_nbGroup('over','btn6','template/Button-down.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="template/Button-up.gif" alt="" name="btn6" border="0" id="btn6" onload="" /></a></td>
</tr>
</table>
<div align="center"></div>
</div>
<div id="apDiv4"><img src="template/navtext.gif" width="151" height="30" hspace="0" vspace="0" align="absmiddle" /></div>
<div align="justify"></div>
<div align="center"><img src="template/Layout1.jpg" name="template" width="820" height="900" border="1" id="template" /></div>
</body>
</html>


Thanks alot
-fedexer-

-fedexer-
08-15-2007, 04:20 PM
Anyone got any ideas ? its probably so simple... but i just cant seem to get it.. i mean everything works fine if the layout is on the left... but if it is centred everything else doesnt follow >.<

domedia
08-15-2007, 07:33 PM
ap = absolutely positioned.
Your ap divs stays in the exact place you told them to stay. It's the rest of your website that moves, because you have set it to be center, and as the width of the browser changes, so does the website in order to stay center.

I think your problem is a conceptual one and not a technical one. Do you want your website to be centered in the browser, than don't use APdivs. If you want your website to be aligned left, then dont center it.

-fedexer-
08-16-2007, 10:11 AM
see my problem is i really want it to be in the centre so it looks like :

http://www.timshaw.co.uk/

for example.

I reckon that site was built using tables, but i find that if i am forced to use tables alot of my ideas wont work.

Is there no way to make the AP Div's follow the page ? maybe by centreing them aswell ?

Thanks
-fedexer-

edbr
08-16-2007, 10:22 AM
try to think in terms of divisions . AP is as someone said absolutely positioned.
make a division which is the page wrapper. you can make this as a percentage ie 80% with left and right margins of 10%.
nest other divisions inside that and you can position them relative to that division.

-fedexer-
08-16-2007, 10:29 AM
I gave what you said a try edbr , but it still seems to move. maybe i should just stick with left aligning the page, although its not going to look as good that way.

edbr
08-16-2007, 10:31 AM
what is moving?

edbr
08-16-2007, 10:33 AM
Post your new code

-fedexer-
08-16-2007, 10:36 AM
I tried it on the tickertape Div... and it still moves from its position.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-traditional.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">
<!--
#apDiv4 {
position:absolute;
left:102px;
top:277px;
width:151px;
height:30px;
z-index:auto;
overflow: hidden;
border-bottom-width: 0px;
border-left-width: 0px;
float: none;
font-style: normal;
line-height: normal;
text-decoration: none;
background-attachment: fixed;
background-position: 112px;
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
visibility: visible;
clip: rect(auto,auto,auto,auto);
}
#tickertape {
position:absolute;
left:271px;
top:270px;
width:404px;
height:18px;
z-index:auto;
padding-left: 1px;
padding-right: 1px;
visibility: visible;
overflow: hidden;
float: none;
}
#apDiv1 {
position:absolute;
left:104px;
top:327px;
width:150px;
height:403px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:119px;
top:272px;
width:48px;
height:27px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:74px;
top:255px;
width:149px;
height:28px;
z-index:2;
}
body {
background-image: url(template/bg.gif);
text-align : center;
min-width : 820px;
background-repeat: repeat;
margin-left : 0px;
margin-right : 0px;
margin-top: 0px;
margin-bottom: 0px;
border-left: none;
margin: 0;
visibility: visible;
min-height: 900px;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}
.style3 {color: #FFFFFF}
#apDiv5 {
position:absolute;
left:112px;
top:99px;
width:18px;
height:21px;
z-index:3;
}
#apDiv6 {
position:absolute;
left:0px;
top:0px;
width:70%;
height:902px;
z-index:2;
visibility: visible;
}
#apDiv7 {
position:absolute;
left:688px;
top:0px;
width:30%;
height:901px;
z-index:3;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>
<body onload="MM_preloadImages('template/Button-up.gif','template/Button-down.gif')">
<div id="apDiv1">
<table width="150" height="180" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="30"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Home','template/Button-down.gif',1)" onmouseover="MM_nbGroup('over','Home','template/Button-down.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="template/Button-down.gif" alt="Home Button" name="Home" border="0" align="left" id="Home" onload="MM_nbGroup('init','group1','Home','template/Button-up.gif',1)" /></a></td>
</tr>
<tr>
<td height="30"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','btn2','template/Button-down.gif',1)" onmouseover="MM_nbGroup('over','btn2','template/Button-down.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="template/Button-up.gif" alt="" name="btn2" border="0" id="btn2" onload="" /></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','btn3','template/Button-down.gif',1)" onmouseover="MM_nbGroup('over','btn3','template/Button-down.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="template/Button-up.gif" alt="" name="btn3" border="0" id="btn3" onload="" /></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','btn4','template/Button-down.gif',1)" onmouseover="MM_nbGroup('over','btn4','template/Button-down.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="template/Button-up.gif" alt="" name="btn4" border="0" id="btn4" onload="" /></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','btn5','template/Button-down.gif',1)" onmouseover="MM_nbGroup('over','btn5','template/Button-down.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="template/Button-up.gif" alt="" name="btn5" border="0" id="btn5" onload="" /></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','btn6','template/Button-down.gif',1)" onmouseover="MM_nbGroup('over','btn6','template/Button-down.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="template/Button-up.gif" alt="" name="btn6" border="0" id="btn6" onload="" /></a></td>
</tr>
</table>
<div align="center"></div>
</div>
<div id="apDiv4"><img src="template/navtext.gif" width="151" height="30" hspace="0" vspace="0" align="absmiddle" /></div>
<div id="apDivpositioning"><div id="tickertape">
Welcome to The Official Parent Forum Website... The site shall be updated regularly.</div>
</div>
<div id="apDivpositioning"></div>
<div align="center"><del><img src="template/Layout1.jpg" width="780" height="900" hspace="0" vspace="0" border="1" align="absmiddle" /></del></div>
</body>
</html>

domedia
08-16-2007, 02:38 PM
1. Make a centered DIV, not a table. This DIV should be centered so don't try to make it a APDiv.
2. On this main DIV, set CSS position to 'relative'.
3. INSIDE this DIV you can place APDivs, which will always stay in the same place relative to the top left corner of the parent element, which is the DIV we made in step 1.

-fedexer-
08-16-2007, 03:03 PM
I did as instructed, made the Div, made it relative... and then i added the layout pic and centred that. I added the text AP Div's to the main Div and yet the same problem still happens...

God i feel useless >.<

Well if you wouldnt mind maybe constructing the html ? to have the layout1 centred, witht he file bg, being the page background repeating.

and then just put 1 AP Div in the middle with some random text so that i can see what its ment to finally look like?

http://www.ggl.nationvoice.com/site/Layout1.jpg
http://www.ggl.nationvoice.com/site/bg.gif

I would really appreciate it if you did it, as after seeing how its done i should learn better.

-fedexer-

domedia
08-16-2007, 04:08 PM
No, I'm not going to write it for you.
Can you post the code you had after following my instructions?

-fedexer-
08-16-2007, 04:59 PM
This is what i had, it keeps the AP Divs in the right place... but the page isnt centred, therefore it looks really weird.


<!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">
<!--
body {
background-image: url(../bg.gif);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-repeat: repeat;
}
mainDIV {
position:relative;
height:900px;
width:700px;
}
#apDiv4 {
position:fixed;
left:149px;
top:0px;
width:639px;
height:339px;
z-index:1;
margin-left : auto ;
margin-right : auto ;
}
#apDiv1 {
position:absolute;
left:520px;
top:218px;
width:318px;
height:20px;
z-index:1;
}
-->
</style></head>
<body>
<div id="apDiv4">
<div align="center"><img src="../Layout1.jpg" width="780" height="900" border="1" /></div>
</div>
<div id="MainDiv">
<div id="apDiv1">The text ap !! </div>
</div>
</body>
</html>

domedia
08-16-2007, 05:52 PM
You need to start with one container div that is centered. I couldn't tell which one you intended for that, because they were not nested. You have to put all other div's inside this one.

also it needs to read #mainDIV to be a valid CSS rule.

Actually, it looks like you should read some CSS tutorials, I think the problem is that you're lacking a base understanding of how CSS works, am I right?
Try some of these: http://www.adobe.com/devnet/dreamweaver/css.html

Once you get a hang of it, CSS will become second nature 8)

Kostaben
08-16-2007, 07:20 PM
I had the same question and i havent manage to do it yet. Lets say that we have only one div in the page. How do we make this div to be centered, whatever the browser width, like an autostreched cell.

-fedexer-
08-16-2007, 09:15 PM
You wont believe it domedia ... its 10:31 pm here... i just gave it a shot, read through everything you last posted , and thats when it smacked me in the face, i had a few typo's meaning the Div's and the CSS rules didn't have the same name.

(your currently offline right now, but please know you have my greatest thanks.)

I have finally got it working now that i have renamed some of the rules etc.

I know it was probably a real pain trying to explain that to me, i should read up more on CSS aswell but now i have atleast got it centered im happy.

Thanks again,
-fedexer-

Kostaben
08-16-2007, 10:02 PM
fedexer can you explain me how you did it.
Lets say we have only 2 divs the main one with the background image and the nested one.
What i cant find is how to center the main one

designingdani
08-17-2007, 03:10 AM
yes, please do share. i'm in the same boat.

Kostaben
08-17-2007, 06:45 AM
I have post in in a new thread Designindani so as to, other users be able to see it.I hope we will get an answer there.

domedia
08-17-2007, 02:11 PM
Centering one div is pretty easy. Look at this:
http://www.dreamweaverclub.com/css-center-content.php
I had the same question and i havent manage to do it yet. Lets say that we have only one div in the page. How do we make this div to be centered, whatever the browser width, like an autostreched cell.