This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
-----------------------
This does several things -
1. It 'removes' the element from the flow of the code on the page so that
it can no longer influence the size or position of any other page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from the position of
its closest PARENT *positioned* element - in the absence of any explicitly
positioned parent, this will default to the <body> tag, which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the layer's code
appears (between <body> and </body>), its location on the screen will not
change (this assumes that you have not positioned the A/P element within
a table or another A/P element, of course). Furthermore, the space in
which
this element would have appeared were it not positioned is not preserved
on the screen. In other words, absolutely positioned elements don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
----------------------
In contrast to absolute positioning, a relatively positioned page element is
*not* removed from the flow of the code on the page, so it will use the
spot
where it would have appeared based on its position in the code as its
zero point reference. If you then supply top, right, bottom, or left
positions
to the style for this element, those values will be used as offsets from
its
zero point.
This means that it DOES matter where in the code the relatively positioned
element appears (, as it will be positioned in that location (factoring in
the offsets) on the screen (this is true for any placement in the code).
Furthermore, the space where this element would have appeared is
preserved in the display, and can therefore affect the placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
-------------------
As with relative position, static positions also "go with the flow". An
element with a static position cannot have values for offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless explicitly
positioned, all div elements default to static positioning.
Position:fixed
------------------
A page element with this style will not scroll as the page content scrolls.
Support for this in elements other than page backgrounds is quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables, images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that if it is not
positioned or explicitly styled otherwise, a) it will always begin on a new
line on the screen, and b) it will always force content to a new line below
it, and c) it will always take up the entire width of its container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of other
elements
on the page. For example, a 'layer' placed over a hyperlink will mask that
hyperlink.
You can see a good example of the essential difference between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================
Post by TC2112Hello,
Yes, stay out of Layout Mode. Just Insert>Table in standard mode. Resize
it if needed in the Property Inspector.
AP Divs can cause trouble as well, as shown in the links posted.
To answer your question, you can wrap everything in a relatively
positioned "wrapper" or container div.
If you give the wrapper a width, and set the left and right margin to
"auto" it will center it on the page.
Any AP div within will take it's position from the relatively positioned
wrapper div, so they will "stay with" the wrapper as it centers.
Just paste this code into a blank page to see how it works.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
text-align:center;
background-color:#0033FF;
}
#wrapper {
width: 700px;
position: relative;
margin: 0px auto;
text-align:left;
background-color:#FFFFCC;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
background-color: #FFCC00;
left: 20px;
top: 20px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="apDiv1">
<p>AP Div</p>
<p> dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, </p>
</div>
<table width="700" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><p>Table</p>
<p> </p>
<p> </p>
<p> </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum
diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id,
molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque
ornare risus quis ligula. Phasellus tristique purus a augue condimentum
adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique
in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy.
Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius
eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut
nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi,
eleifend sollicitudin, molestie id, varius et, nibh. Donec nec
libero.</p></td>
</tr>
</table>
</div>
</body>
</html>
Take care,
Tim
Post by R-d0gSo the both of you are suggesting staying out of layout mode and figuring out
table sizes on your own? How about AP Div's
So to go back to my question and sorry you maybe have answered it but I didn't
understand.... Is there a way to make a table base site and add some AP Divs
and lock them so that they stay centered within the centered layout after
previewing on the internet? When I move my window larger and smaller the site
moves, centering itself but the AP Divs stay where I placed them as if they
were fixed.
Thanks