0

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
22
Views
5 Years
Discussion Span
Last Post by joseavelar91
Featured Replies
  • 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 … Read More

0

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

0

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;}

0

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

0

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

1

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.

0

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 FakeTales

0

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

0

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.

0

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

0

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.

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.