Divs not positioning correctly

10/06/2008, 21h24

I started my index page on www.waterfordarfur.com with one of Dreamweaver CS3's
starter pages. The page is a fixed width, centered, one column page. I have
moved the new #container divs off the style sheet to be embeded style in the
HTML because the position of the content will be different on every page in
this site. The problem is the new content divs will not line up properly with
the rest of the page without using absolute position. If you view this page
with a wide wide screen monitor, the divs move stay in their absolute position,
which is now on top of the left sidebar.

I have tried positioning these divs using relative positioning, but they
always move beneath the main content area. Is there a way to put the content
divs in relative position with the rest of the page without placing them within
site style sheet? This site is 20 pages and growing, and I hate to put that
many unique divs in the site's style sheet.

Maybe my overall approach is wrong and I need to be using tables instead. I
would like some input on how to accomplish this. Thanks in advance. this forum
is great. Attached are both my HTML code and the styple sheet.

David Conner

<!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">
<style type="text/css">


</style>
<script type="text/javascript">

</script>
<meta name="Keywords" content="darfur, water, genocide, humanitarian aid,
darfur water, disaster in darfur" />
<meta name="description" content="Thirst No More is an NGO that provides water
in Darfur by drilling and repairing water wells. Confict in Darfur has led to
unbelievable human suffering because not enough water is available." />
<head>
<meta name="verify-v1" content="CjYgINltJth0gtl++J4kdY7rvsD4IsYq6CqNNCqDH Hc="
/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Water For Darfur</title>
<link href="Scripts/darfur_style_sheet2.css" rel="stylesheet" type="text/css"
/>

<style type="text/css">

</style>
</head>

<body class="starterPage"
onload="MM_preloadImages('images/index_page_buttons/conflict/conflict_btn_f2.jpg
','images/index_page_buttons/shortage/shortage_f2.jpg','images/index_page_button
s/repair/repair_f2.jpg','images/index_page_buttons/villages/villages_f2.jpg','im
ages/index_page_buttons/drilling/drilling_f2.jpg','images/index_page_buttons/rep
orts/reports_f2.jpg')">

<div id="container">
<div id="header">

<div align="right">

<img
src="images/headers/index_page_hdr/Right_side_header/Right_side_header.gif"
width="307" height="60" /></div>
</div>

<div class="twoColFixLtHdr" id="navigation">
<div id="PLHFO0Div"
style="width:100%;height:24px

osition:relative;z-index:1000;">
<div
style="width:100%;height:24px;background-color:#efe7d4;text-align:center;"><ul
style="margin:0
auto

adding:2px;width:959px;height:20px;font-family:Verdana,Arial,Helvetica,san
s-serif;font-size:12px;"><li class="PLHFOLink"
style="display:block;float:left;width:80px;height: 20px;text-align:left;backgroun
d-color:#efe7d4;"><a href="index.htm" target="_self"
style="display:block

adding:3px 6px 0px
6px;text-decoration:none;color:#000000;">HOME</a></li><li class="PLHFOLink"
style="display:block;float:left;width:120px;height :20px;margin-left:4px;text-ali
gn:left;background:#efe7d4 url(PluginLab/dd_arrow.gif) no-repeat 109px 50%;"><a
href="#" target="_self" style="display:block

adding:3px 17px 0px
6px;text-decoration:none;color:#000000;">LOCATION</a></li><li class="PLHFOLink"
style="display:block;float:left;width:170px;height :20px;margin-left:4px;text-ali
gn:left;background:#efe7d4 url(PluginLab/dd_arrow.gif) no-repeat 159px 50%;"><a
href="#" style="display:block

adding:3px 17px 0px
6px;text-decoration:none;color:#000000;">WATER IN&nbsp ;DARFUR</a></li><li
class="PLHFOLink"
style="display:block;float:left;width:185px;height :20px;margin-left:4px;text-ali
gn:left;background:#efe7d4 url(PluginLab/dd_arrow.gif) no-repeat 174px 50%;"><a
href="#" style="display:block

adding:3px 17px 0px
6px;text-decoration:none;color:#000000;">WELL RESTORAT IONS</a></li><li
class="PLHFOLink"
style="display:block;float:left;width:140px;height :20px;margin-left:4px;text-ali
gn:left;background:#efe7d4 url(PluginLab/dd_arrow.gif) no-repeat 129px 50%;"><a
href="#" style="display:block

adding:3px 17px 0px
6px;text-decoration:none;color:#000000;">NEW WELLS</a></li><li
class="PLHFOLink"
style="display:block;float:left;width:140px;height :20px;margin-left:4px;text-ali
gn:left;background:#efe7d4 url(PluginLab/dd_arrow.gif) no-repeat 129px 50%;"><a
href="#" style="display:block

adding:3px 17px 0px
6px;text-decoration:none;color:#000000;">CONTRIBUTE</a></li><li
class="PLHFOLink"
style="display:block;float:left;width:100px;height :20px;margin-left:4px;text-ali
gn:left;background:#efe7d4 url(PluginLab/dd_arrow.gif) no-repeat 89px 50%;"><a
href="about_us.htm" style="display:block

adding:3px 17px 0px
6px;text-decoration:none;color:#000000;">ABOUT US</a></li></ul></div><scrip
t type="text/javascript">var PLHFO_ID="PLHFO0"</script><script
type="text/javascript" src="PluginLab/Scripts/PLHFO.js">/* PLHFOMenu script
ID:PLHFO0 */</script>
</div>
</div>
<div id="sideBar">
<h3 align="center">News from Darfur</h3>
<h1><a href="drilling_new_wells.htm">DRILLING RIG TO PROVIDE NEW WATER IN
DARFUR</a></h1>
<p>Fresh water will soon flow from the ground bringing relief to people
in Darfur. Plenty of water is available only a few feet below the desert, but
it can only be tapped by heavy equipment. <a
href="drilling_new_wells.htm"><em>More...</em></a>
<hr size="1" />
<h1><a href="sheik_letter.htm">VILLAGE SHEIKS PLEAD FOR REPAIR OF BROKEN
WELLS</a></h1>
<p>While Thirst No More celebrates the repair of over eighty broken
water wells in Darfur, another one hundred villages have sent letters asking
for repairing their broken wells. <a
href="sheik_letter.htm"><em>More...</em></a></p>
<hr size="1" />
<h1><a href="surface_water.htm">SUMMER HEAT UNDERSCORES NEED FOR WATER
</a></h1>
<p>Desert temperatures over one hundred and thirty degrees
heightens the need for water, and watering holes disappear. <a
href="surface_water.htm"><em>More...</em></a></p>
</div>
<div id="mainContent"></div>
<div id="photo1"> <a href="conflict.htm" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('conflict_btn','','image s/index_page_buttons/conflict/
conflict_btn_f2.jpg',1);"><img name="conflict_btn"
src="images/index_page_buttons/conflict/conflict_btn.jpg" width="200"
height="150" border="0" id="conflict_btn" alt="" /></a></div>
<div id="photo2"> <a href="water_crisis.htm"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('shortage','','images/index_

11/06/2008, 01h29

> I have
> moved the new #container divs off the style sheet to be embeded style in
> the
> HTML because the position of the content will be different on every page
> in
> this site.

This is a misconception. Why would it matter where you edit the location
information? It doesn't.

> The problem is the new content divs will not line up properly with
> the rest of the page without using absolute position.

Then you are doing something wrong. It's rarely *necessary* to use absolute
positioning.

> If you view this page
> with a wide wide screen monitor, the divs move stay in their absolute
> position,

Move stay? What you mean is that the page content moves while the absolute
positioned elements stay absolutely positioned, right?

> Is there a way to put the content
> divs in relative position with the rest of the page without placing them
> within
> site style sheet? This site is 20 pages and growing, and I hate to put
> that
> many unique divs in the site's style sheet.

You are really in need of this article -
http://apptools.com/examples/pagelayout101.php

> I need to be using tables instead

Tables would work until you have a better grasp of how and when to use
absolute positioning.

--
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
==================

"DavidConner" <webforumsuser@macromedia.com> wrote in message
news:g2mntd$1e2$1@forums.macromedia.com...
>I started my index page on www.waterfordarfur.com with one of Dreamweaver
>CS3's
> starter pages. The page is a fixed width, centered, one column page. I
> have
> moved the new #container divs off the style sheet to be embeded style in
> the
> HTML because the position of the content will be different on every page
> in
> this site. The problem is the new content divs will not line up properly
> with
> the rest of the page without using absolute position. If you view this
> page
> with a wide wide screen monitor, the divs move stay in their absolute
> position,
> which is now on top of the left sidebar.
>
> I have tried positioning these divs using relative positioning, but they
> always move beneath the main content area. Is there a way to put the
> content
> divs in relative position with the rest of the page without placing them
> within
> site style sheet? This site is 20 pages and growing, and I hate to put
> that
> many unique divs in the site's style sheet.
>
> Maybe my overall approach is wrong and I need to be using tables instead.
> I
> would like some input on how to accomplish this. Thanks in advance. this
> forum
> is great. Attached are both my HTML code and the styple sheet.
>
> David Conner
>

10/06/2008, 21h24	#1
DavidConner Messages: n/a Hébergeur:	Divs not positioning correctly I started my index page on www.waterfordarfur.com with one of Dreamweaver CS3's starter pages. The page is a fixed width, centered, one column page. I have moved the new #container divs off the style sheet to be embeded style in the HTML because the position of the content will be different on every page in this site. The problem is the new content divs will not line up properly with the rest of the page without using absolute position. If you view this page with a wide wide screen monitor, the divs move stay in their absolute position, which is now on top of the left sidebar. I have tried positioning these divs using relative positioning, but they always move beneath the main content area. Is there a way to put the content divs in relative position with the rest of the page without placing them within site style sheet? This site is 20 pages and growing, and I hate to put that many unique divs in the site's style sheet. Maybe my overall approach is wrong and I need to be using tables instead. I would like some input on how to accomplish this. Thanks in advance. this forum is great. Attached are both my HTML code and the styple sheet. David Conner <!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"> <style type="text/css"> <!-- .style1 {color: #FFFFFF} --> </style> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } 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_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <meta name="Keywords" content="darfur, water, genocide, humanitarian aid, darfur water, disaster in darfur" /> <meta name="description" content="Thirst No More is an NGO that provides water in Darfur by drilling and repairing water wells. Confict in Darfur has led to unbelievable human suffering because not enough water is available." /> <head> <meta name="verify-v1" content="CjYgINltJth0gtl++J4kdY7rvsD4IsYq6CqNNCqDH Hc=" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Water For Darfur</title> <link href="Scripts/darfur_style_sheet2.css" rel="stylesheet" type="text/css" /> <!--[if IE 5]> <style type="text/css"> /* place css box model fixes for IE 5* in this conditional comment / .twoColFixLtHdr #sidebar1 { width: 230px; } </style> <![endif]--><!--[if IE]> <style type="text/css"> / place css fixes for all versions of IE in this conditional comment / .twoColFixLtHdr #sidebar1 { padding-top: 30px; } .twoColFixLtHdr #mainContent { zoom: 1; } / the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs / </style> <![endif]--> <style type="text/css"> <!-- .starterPage #container { width: 1005px; / using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar / background: #fff url(images/backgrounds/opening.jpg) no-repeat; margin: 0; / the auto margins (in conjunction with a width) center the page / border: 1px solid #000000; text-align: left; / this overrides the text-align: center on the body element. / height: 700px; z-index: 0; } .starterPage #container #photo1 { position:absolute; visibility:visible; left:348px; top:130px; width:195px; height:150px; z-index:2; } .starterPage #container #photo2 { position:absolute; visibility:visible; left:569px; top:130px; width:195px; height:150px; z-index:3; } .starterPage #container #photo3 { position:absolute; visibility:visible; left:790px; top:130px; width:195px; height:150px; z-index:4; } .starterPage #container #photo4 { position:absolute; visibility:visible; left:348px; top:458px; width:195px; height:150px; z-index:5; } .starterPage #container #photo5 { position:absolute; visibility:visible; left:569px; top:458px; width:195px; height:150px; z-index:5; } .starterPage #container #photo6 { position:absolute; visibility:visible; left:790px; top:458px; width:195px; height:150px; z-index:5; } --> </style> </head> <body class="starterPage" onload="MM_preloadImages('images/index_page_buttons/conflict/conflict_btn_f2.jpg ','images/index_page_buttons/shortage/shortage_f2.jpg','images/index_page_button s/repair/repair_f2.jpg','images/index_page_buttons/villages/villages_f2.jpg','im ages/index_page_buttons/drilling/drilling_f2.jpg','images/index_page_buttons/rep orts/reports_f2.jpg')"> <div id="container"> <div id="header"> <div align="right"> <!-- end #header --> <img src="images/headers/index_page_hdr/Right_side_header/Right_side_header.gif" width="307" height="60" /></div> </div> <div class="twoColFixLtHdr" id="navigation"> <div id="PLHFO0Div" style="width:100%;height:24pxosition:relative;z-index:1000;"> <div style="width:100%;height:24px;background-color:#efe7d4;text-align:center;"><ul style="margin:0 autoadding:2px;width:959px;height:20px;font-family:Verdana,Arial,Helvetica,san s-serif;font-size:12px;"><li class="PLHFOLink" style="display:block;float:left;width:80px;height: 20px;text-align:left;backgroun d-color:#efe7d4;"><a href="index.htm" target="_self" style="display:blockadding:3px 6px 0px 6px;text-decoration:none;color:#000000;">HOME</a></li><li class="PLHFOLink" style="display:block;float:left;width:120px;height :20px;margin-left:4px;text-ali gn:left;background:#efe7d4 url(PluginLab/dd_arrow.gif) no-repeat 109px 50%;"><a href="#" target="_self" style="display:blockadding:3px 17px 0px 6px;text-decoration:none;color:#000000;">LOCATION</a></li><li class="PLHFOLink" style="display:block;float:left;width:170px;height :20px;margin-left:4px;text-ali gn:left;background:#efe7d4 url(PluginLab/dd_arrow.gif) no-repeat 159px 50%;"><a href="#" style="display:blockadding:3px 17px 0px 6px;text-decoration:none;color:#000000;">WATER IN&nbsp ;DARFUR</a></li><li class="PLHFOLink" style="display:block;float:left;width:185px;height :20px;margin-left:4px;text-ali gn:left;background:#efe7d4 url(PluginLab/dd_arrow.gif) no-repeat 174px 50%;"><a href="#" style="display:blockadding:3px 17px 0px 6px;text-decoration:none;color:#000000;">WELL RESTORAT IONS</a></li><li class="PLHFOLink" style="display:block;float:left;width:140px;height :20px;margin-left:4px;text-ali gn:left;background:#efe7d4 url(PluginLab/dd_arrow.gif) no-repeat 129px 50%;"><a href="#" style="display:blockadding:3px 17px 0px 6px;text-decoration:none;color:#000000;">NEW WELLS</a></li><li class="PLHFOLink" style="display:block;float:left;width:140px;height :20px;margin-left:4px;text-ali gn:left;background:#efe7d4 url(PluginLab/dd_arrow.gif) no-repeat 129px 50%;"><a href="#" style="display:blockadding:3px 17px 0px 6px;text-decoration:none;color:#000000;">CONTRIBUTE</a></li><li class="PLHFOLink" style="display:block;float:left;width:100px;height :20px;margin-left:4px;text-ali gn:left;background:#efe7d4 url(PluginLab/dd_arrow.gif) no-repeat 89px 50%;"><a href="about_us.htm" style="display:blockadding:3px 17px 0px 6px;text-decoration:none;color:#000000;">ABOUT US</a></li></ul></div><scrip t type="text/javascript">var PLHFO_ID="PLHFO0"</script><script type="text/javascript" src="PluginLab/Scripts/PLHFO.js">/ PLHFOMenu script ID:PLHFO0 */</script> </div> </div> <div id="sideBar"> <h3 align="center">News from Darfur</h3> <h1><a href="drilling_new_wells.htm">DRILLING RIG TO PROVIDE NEW WATER IN DARFUR</a></h1> <p>Fresh water will soon flow from the ground bringing relief to people in Darfur. Plenty of water is available only a few feet below the desert, but it can only be tapped by heavy equipment. <a href="drilling_new_wells.htm"><em>More...</em></a> <hr size="1" /> <h1><a href="sheik_letter.htm">VILLAGE SHEIKS PLEAD FOR REPAIR OF BROKEN WELLS</a></h1> <p>While Thirst No More celebrates the repair of over eighty broken water wells in Darfur, another one hundred villages have sent letters asking for repairing their broken wells. <a href="sheik_letter.htm"><em>More...</em></a></p> <hr size="1" /> <h1><a href="surface_water.htm">SUMMER HEAT UNDERSCORES NEED FOR WATER </a></h1> <p>Desert temperatures over one hundred and thirty degrees heightens the need for water, and watering holes disappear. <a href="surface_water.htm"><em>More...</em></a></p> <!-- end #sidebar1 --></div> <div id="mainContent"></div> <div id="photo1"> <a href="conflict.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('conflict_btn','','image s/index_page_buttons/conflict/ conflict_btn_f2.jpg',1);"><img name="conflict_btn" src="images/index_page_buttons/conflict/conflict_btn.jpg" width="200" height="150" border="0" id="conflict_btn" alt="" /></a></div> <div id="photo2"> <a href="water_crisis.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('shortage','','images/index_

11/06/2008, 01h29	#2
Murray ACE Messages: n/a Hébergeur:	Re: Divs not positioning correctly > I have > moved the new #container divs off the style sheet to be embeded style in > the > HTML because the position of the content will be different on every page > in > this site. This is a misconception. Why would it matter where you edit the location information? It doesn't. > The problem is the new content divs will not line up properly with > the rest of the page without using absolute position. Then you are doing something wrong. It's rarely necessary to use absolute positioning. > If you view this page > with a wide wide screen monitor, the divs move stay in their absolute > position, Move stay? What you mean is that the page content moves while the absolute positioned elements stay absolutely positioned, right? > Is there a way to put the content > divs in relative position with the rest of the page without placing them > within > site style sheet? This site is 20 pages and growing, and I hate to put > that > many unique divs in the site's style sheet. You are really in need of this article - http://apptools.com/examples/pagelayout101.php > I need to be using tables instead Tables would work until you have a better grasp of how and when to use absolute positioning. -- 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 ================== "DavidConner" <webforumsuser@macromedia.com> wrote in message news:g2mntd$1e2$1@forums.macromedia.com... >I started my index page on www.waterfordarfur.com with one of Dreamweaver >CS3's > starter pages. The page is a fixed width, centered, one column page. I > have > moved the new #container divs off the style sheet to be embeded style in > the > HTML because the position of the content will be different on every page > in > this site. The problem is the new content divs will not line up properly > with > the rest of the page without using absolute position. If you view this > page > with a wide wide screen monitor, the divs move stay in their absolute > position, > which is now on top of the left sidebar. > > I have tried positioning these divs using relative positioning, but they > always move beneath the main content area. Is there a way to put the > content > divs in relative position with the rest of the page without placing them > within > site style sheet? This site is 20 pages and growing, and I hate to put > that > many unique divs in the site's style sheet. > > Maybe my overall approach is wrong and I need to be using tables instead. > I > would like some input on how to accomplish this. Thanks in advance. this > forum > is great. Attached are both my HTML code and the styple sheet. > > David Conner >

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email