Member Avatar for joseavelar91

I created a website and forgot how to center it. I been using dreamweaver cs5.5 I would appreciate if someone could help me.

<!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>Pasco Rentals</title>
<style type="text/css">
<!--
body {
    background-color: #FFF;
    background-image: url(Images/first%20background.png);
}
#apDiv1 {
    position:absolute;
    left:115px;
    top:12px;
    width:1195px;
    height:100px;
    z-index:1;
}
#apDiv2 {   position:absolute;
    left:592px;
    top:424px;
    width:221px;
    height:85px;
    z-index:2;
}
#apDiv3 {
    position:absolute;
    left:88px;
    top:123px;
    width:1288px;
    height:73px;
    z-index:2;
}
#apDiv4 {
    position:absolute;
    left:115px;
    top:198px;
    width:499px;
    height:236px;
    z-index:3;
}
#apDiv5 {
    position:absolute;
    left:1002px;
    top:217px;
    width:197px;
    height:220px;
    z-index:4;
}
#apDiv6 {
    position:absolute;
    left:902px;
    top:295px;
    width:152px;
    height:425px;
    z-index:5;
    font-weight: bold;
    font-size: 24px;
}
#apDiv7 {
    position:absolute;
    left:133px;
    top:214px;
    width:219px;
    height:471px;
    z-index:5;
    text-align: center;
    font-weight: bold;
    font-size: xx-large;
}
#apDiv8 {
    position:absolute;
    left:374px;
    top:214px;
    width:219px;
    height:471px;
    z-index:6;
    font-weight: bold;
    text-align: center;
    font-size: xx-large;
}
#apDiv9 {
    position:absolute;
    left:615px;
    top:214px;
    width:271px;
    height:471px;
    z-index:7;
    font-weight: bold;
    text-align: center;
    font-size: xx-large;
}
#apDiv10 {
    position:absolute;
    left:114px;
    top:563px;
    width:360px;
    height:104px;
    z-index:8;
}
#apDiv12 {
    position:absolute;
    left:1010px;
    top:608px;
    width:254px;
    height:64px;
    z-index:9;
}
#apDiv11 {
    position:absolute;
    left:1137px;
    top:34px;
    width:103px;
    height:51px;
    z-index:10;
}
#apDiv13 {  position:absolute;
    left:615px;
    top:214px;
    width:219px;
    height:471px;
    z-index:7;
    font-weight: bold;
    text-align: center;
    font-size: xx-large;
}
#apDiv14 {  position:absolute;
    left:615px;
    top:214px;
    width:219px;
    height:471px;
    z-index:7;
    font-weight: bold;
    text-align: center;
    font-size: xx-large;
}
#apDiv15 {
    position: absolute;
    left: 134px;
    top: 212px;
    width: 475px;
    height: 94px;
    z-index: 11;
    font-size: 36px;
}
#apDiv16 {
    position: absolute;
    left: 800px;
    top: 342px;
    width: 410px;
    height: 304px;
    z-index: 12;
    font-weight: bold;
    text-align: center;
    font-size: 28px;
}
#apDiv17 {
    position: absolute;
    left: 797px;
    top: 271px;
    width: 417px;
    height: 363px;
    z-index: 13;
    font-weight: bold;
    font-size: 28px;
    text-align: center;
}
#apDiv18 {  position:absolute;
    left:147px;
    top:734px;
    width:433px;
    height:86px;
    z-index:14;
}
#apDiv19 {
    position: absolute;
    left: 825px;
    top: 253px;
    width: 347px;
    height: 68px;
    z-index: 15;
    font-size: 36px;
    text-align: center;
    font-weight: bold;
}
#apDiv15 a {
    text-align: left;
}
#apDiv20 {
    position: absolute;
    left: 670px;
    top: 363px;
    width: 614px;
    height: 178px;
    z-index: 16;
}
#apDiv20 table tr th {
    text-align: center;
}
#apDiv20 table {
    text-align: center;
    font-size: 28px;
}
#apDiv21 {
    position: absolute;
    left: 216px;
    top: 377px;
    width: 397px;
    height: 299px;
    z-index: 17;
}
-->
</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('Images/Home button 2.png','Images/equipment 2.png','Images/concrete button 2.png','Images/Especials button 2.png','Images/propane button 2.png')">
<div id="apDiv1"><img src="Images/new banner.png" alt="" width="1193" height="100" /></div>
<div id="apDiv3"><a href="home.html" target="_top" onclick="MM_nbGroup('down','group1','Homebutton','Images/Home button 2.png',1)" onmouseover="MM_nbGroup('over','Homebutton','Images/Home button 2.png','Images/Home button 2.png',1)" onmouseout="MM_nbGroup('out')"><img src="Images/Home button.png" alt="" name="Homebutton" width="250" height="50" border="0" id="Homebutton" onload="" /></a><a href="Equipment page.html" target="_top" onclick="MM_nbGroup('down','group1','equipmentbutton','Images/equipment 2.png',1)" onmouseover="MM_nbGroup('over','equipmentbutton','Images/equipment 2.png','Images/equipment 2.png',1)" onmouseout="MM_nbGroup('out')"><img src="Images/equipment button.png" alt="" name="equipmentbutton" width="250" height="50" border="0" id="equipmentbutton" onload="" /></a><a href="concrete page.html" target="_top" onclick="MM_nbGroup('down','group1','concretebutton','Images/concrete button 2.png',1)" onmouseover="MM_nbGroup('over','concretebutton','Images/concrete button 2.png','Images/concrete button 2.png',1)" onmouseout="MM_nbGroup('out')"><img src="Images/concrete button.png" alt="" name="concretebutton" width="250" height="50" border="0" id="concretebutton" onload="" /></a><a href="specials page.html" target="_top" onclick="MM_nbGroup('down','group1','Especialsbutton','Images/Especials button 2.png',1)" onmouseover="MM_nbGroup('over','Especialsbutton','Images/Especials button 2.png','Images/Especials button 2.png',1)" onmouseout="MM_nbGroup('out')"><img src="Images/Especials button.png" alt="" name="Especialsbutton" width="250" height="50" border="0" id="Especialsbutton" onload="" /></a><a href="Propane page.html" target="_top" onclick="MM_nbGroup('down','group1','propanebutton','Images/propane button 2.png',1)" onmouseover="MM_nbGroup('over','propanebutton','Images/propane button 2.png','Images/propane button 2.png',1)" onmouseout="MM_nbGroup('out')"><img src="Images/propane button.png" alt="" name="propanebutton" width="250" height="50" border="0" id="propanebutton" onload="" /></a></div>
<div id="apDiv4"><img src="Images/second background.png" width="1193" height="573" /></div>
<div id="apDiv11"><a href="http://www.mapquest.com/maps?city=Pasco&amp;state=WA&amp;address=2604+W+Court+St&amp;zipcode=99301-3944&amp;country=US&amp;latitude=46.24151&amp;longitude=-119.125288&amp;geocode=ADDRESS"><img src="Images/map button.png" width="100" height="50" /></a></div>
<div id="apDiv15"><a href="75-000.html">Back to Saws</a></div>
<div id="apDiv16">
  <p>$11.50 a day</p>
  <p>* Prices subject to change *</p>
  <p>7 1/4&quot; Worm drive </p>
  <p>15 Amp motor </p>
</div>
<div id="apDiv19">Skill Saw</div>
<div id="apDiv21"><img src="rental equipment information/75-883.jpg" width="500" height="269" /></div>
</body>
</html>
  • 6 Contributors
  • 21 Replies
  • 190 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by joseavelar91

Dani AI

Generated

Quick diagnosis and where earlier suggestions fit together: the page uses Dreamweaver’s absolutely positioned AP divs for almost every visual block, so a simple margin-based centering trick won’t affect them. and were right to suggest a container; correctly flagged that the absolute positioning is the blocker; and and gave useful practical tips (external CSS, use devtools). Two realistic paths follow — a fast patch that avoids rewiring dozens of left/top offsets, and a longer-term rebuild to a flow-based, responsive layout.

A fast, non‑destructive patch (minimal changes)
Wrap all page content in a single container element and make that container the positioned context. Move the whole group to the horizontal center with a translate trick so the existing absolute coordinates inside the container stay meaningful:

/* temporary, minimal-change centering — preserves current absolute offsets */
#site {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1400px; /* set to the layout width you measure with devtools */
}

This is the quickest way to visually center the whole design without editing dozens of AP div left/top values.

A better long-term approach
Replace layout-level absolute positioning with a simple semantic structure (header / nav / main / aside / footer) and use CSS Grid or Flexbox for columns and nav. That makes the site responsive and easier to maintain. Example skeleton (adjust sizes to fit the design):

/* rebuild skeleton — responsive and maintainable */
.site {
  max-width: var(--layout-width, 1200px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 20px;
}

Troubleshooting and practical tips
Use the browser inspector (F12): add temporary outlines to find oversized elements, toggle position live, and measure the layout width. A helpful temporary rule:

/* debug helper — remove when done */
*[id^="apDiv"] { outline: 1px dashed #f06; }

Move CSS into an external file (as suggested) and remove WYSIWYG clutter gradually. If a full rebuild is chosen, start small: lay out header and nav first, then place content areas. The transform trick above buys time while refactoring.

Recommended Answers

All 21 Replies

Member Avatar for designershiv

Hey joseavelar91,

Wrap overall div inside the body tag with common div like wrapAll and give with to that and make it margin auto

sample code :

.wrapAll {     
        width : 1000px;
        margin : 0 auto;
        }

I hope your prblem will be solved & let me know once done

Member Avatar for JorgeM

An easy way to center content on a page is to add a div element, assign it a width, then apply a left and right margin. So with regard to the example that designershiv provided, add a div element after line 268 in the code you provided.

<div id="wrapper">

Then after line 281, add the ending tag:

</div>

in your CSS, target this div.

#wrapper {width:##px;margin:0 auto;}

Member Avatar for joseavelar91

Thank you guys! I'll give it try and let u guuys know. really do appreciate it. : )

Member Avatar for joseavelar91

Sorry it took me for ever to reply. I wasn't able to get either ideas to work. Am I doing something wrong.

Member Avatar for GliderPilot

All your DIV's have absolute positioning so that overrides the margin: o auto; you can use the Jorge's example but you'll need to change a few things.

First you'll need to add relative positioning to your wrapper:

#wrapper {width:##px;margin:0 auto;position:relative;}

Than you're going to have to play with the left / right positioning of all your DIV's. Because you used a WYSIWYG editor there is a lot of uneeded code and fill that could really be done away with to make this much easier and efficient.

Member Avatar for joseavelar91

Thank you! I'll give it a try.

Member Avatar for Member #936213

if i was you i would include your css in a seperate file for example copy it all and paste it into a file called style.css , makes the webpage easier to read when looking at the sorce code , i would do the same with the javascript as well.

i managed to get everything central by adding this to the css file

#wrapper{
margin: 0 auto;
width: 1200px;
}

also remove all

  position: absolute;

from all your divs

then in the html place it after the body

<body onload="MM_preloadImages('Images/Home button 2.png','Images/equipment 2.png',
'Images/concrete button 2.png','Images/Especials button 2.png','Images/propane button 2.png')">
<div id="wrapper">

then close the div after the

<div id="apDiv21">
Edited by Member #936213
Member Avatar for joseavelar91

Thank you! I'll give it a try.

Member Avatar for <M/>

Do you still need help?

Member Avatar for joseavelar91

I'm free today, so I'm going to input the code. Been real busy with some other things. Thank you

Member Avatar for <M/>

Are you going to mark this solved?

Member Avatar for Member #936213

have you been able to sort your problem out yet? if so can you mark this post as solved.

Member Avatar for joseavelar91

I wasn't able to get it to work. I'm going to have to rebuilt the site from scratch. I was hoping that I wasn't going to do that. Thank you all for the input. I appreciate the time you all took.

Member Avatar for <M/>

why not use your browser's tools to identify the problem.....? Maybe use firebug?

Member Avatar for joseavelar91

ok I'll try.

Member Avatar for <M/>

how about you provide us a link to your site and we will identify you problems?

Member Avatar for joseavelar91

here is the link to the site as requested. Thank you! : )

Member Avatar for <M/>

Okay, what i noticed is that you don't have a site container, try putting in a div tag that contains all the div tags, then you can center it.

Here is some advice, try naming your divs, it'll get confusing remembering (as an example) what ApDiv272 is right? Remember, what seperates a great developer and a amateur developer is their organization!

Try applying a container, and tell me what happens.

Member Avatar for Member #936213

i did mention a container/wrapper in my post above , from taking your code you posted and by me listing what i said above i was able to get your webpage centered.

Member Avatar for joseavelar91

Im trying it all right now.

Member Avatar for joseavelar91

Somehow I keep doing it wrong.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.