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
  • 175 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by joseavelar91

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 FakeTales

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

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 <M/>

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

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 FakeTales

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.