Jump to content

How do I center my website???


jabulani

Recommended Posts

Hi, I designed my first website using Dreamweaver CS3 and centered it using guides. When I preview it in Firefox on my PC it looks roughly centered. However, when I view my site using internet explorer or on older computers the site is all to the left hand side. How can I ensure that the site is centered on all computers and on all browsers?n

Link to comment
Share on other sites

Typically, you would have a div wrapped around the entire code and give it margin: auto to align it to the middle or center.

 

div#wrap { margin: 0 auto;}

 

Of course there are other possible issues if this doesn't work in which we will then need to look at the site itself.

Link to comment
Share on other sites

No offence but you might to post the url because what you may have might have some serious issues where the code I provided will not work. However, to answer you question, basically add this div#wrap { margin: 0 auto;} to the css file and then in the HTML you would add the following at the beginning and the end of the body code:

 

 

all other html code between here

 

Link to comment
Share on other sites

Typically, you would have a div wrapped around the entire code and give it margin: auto to align it to the middle or center.

 

div#wrap { margin: 0 auto;}

 

Of course there are other possible issues if this doesn't work in which we will then need to look at the site itself.

Why div#wrap and not just #wrap ?

Also, how is this different from .wrap ?

 

Many thanks!

Link to comment
Share on other sites

Why div#wrap and not just #wrap?
The first is more specific than the second, but in execution, it won't make a difference.
Also, how is this different from .wrap?
The '#' is for ID and the '.' is for class. You'd use .wrap if the html was
- and you use IDs for things that only appear ONCE per page, classes for things that appear more than once.
Link to comment
Share on other sites

I did what Newseed said in his first post, and a bit more.

 

To be honest, the code is a mess, too many divs and lots of position: absolute and lots of left positions which stop it from centering.

 

I added a wrap div

just after the

.........

.............

 

and the

closing div just before the tag:-

............

 

and revised all the styles like this:-

 

<br /><!--<br />body {<br />    background-color: #FDE442;<br />}<br />#apDiv1 {<br />    position:absolute; <br />    /*left:300px;*/<br />    top:-4px;<br />    width:800px;<br />    height:1257px;<br />    z-index:1;<br />    background-color: #FFFFFF;<br />}<br />#apDiv2 {<br />    position:absolute; <br />    /*left:279px;*/<br />    top:1px;<br />    width:800px;<br />    height:71px;<br />    z-index:2;<br />}<br />#apDiv3 {<br />    position:absolute;<br />    /*left:300px;*/<br />    top:73px;<br />    width:800px;<br />    height:179px;<br />    z-index:3;<br />}<br />#apDiv4 {<br />    position:absolute; <br />    /*left:300px;*/<br />    top:248px;<br />    width:800px;<br />    height:22px;<br />    z-index:4;<br />    background-color: #233C77;<br />}<br />#apDiv5 {<br />    position:absolute;<br />    left:201px;/*501px;*/<br />    top:402px;<br />    width:400px;<br />    height:732px;<br />    z-index:5;<br />}<br />#apDiv6 {<br />    position:absolute;<br />    left:234px;/*534px;*/<br />    top:1148px;<br />    width:335px;<br />    height:40px;<br />    z-index:6;<br />}<br />.style1 {<br />    font-family: Arial, Helvetica, sans-serif;<br />    font-size: 12pt;<br />}<br />.style2 {font-size: 10pt}<br />--><br />
<br /><!--<br />function MM_preloadImages() { //v3.0<br />  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();<br />    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; <br /><br />i<a.length; i++)<br />    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}<br />}<br /><br />function MM_findObj(n, d) { //v4.01<br />  var p,i,x;  if(!d) d=document; <br /><br />if((p=n.indexOf("?"))>0&&parent.frames.length) {<br />    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}<br />  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) <br /><br />x=d.forms[i][n];<br />  for(i=0;!x&&d.layers&&i<d.layers.length;i++) <br /><br />x=MM_findObj(n,d.layers[i].document);<br />  if(!x && d.getElementById) x=d.getElementById(n); return x;<br />}<br /><br />function MM_nbGroup(event, grpName) { //v6.0<br />  var i,img,nbArr,args=MM_nbGroup.arguments;<br />  if (event == "init" && args.length > 2) {<br />    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {<br />      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;<br />      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] <br /><br />= new Array();<br />      nbArr[nbArr.length] = img;<br />      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) <br /><br />{<br />        if (!img.MM_up) img.MM_up = img.src;<br />        img.src = img.MM_dn = args[i+1];<br />        nbArr[nbArr.length] = img;<br />    } }<br />  } else if (event == "over") {<br />    document.MM_nbOver = nbArr = new Array();<br />    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {<br />      if (!img.MM_up) img.MM_up = img.src;<br />      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? <br /><br />args[i+1] : img.MM_up);<br />      nbArr[nbArr.length] = img;<br />    }<br />  } else if (event == "out" ) {<br />    for (i=0; i < document.MM_nbOver.length; i++) {<br />      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn <br /><br />: img.MM_up; }<br />  } else if (event == "down") {<br />    nbArr = document[grpName];<br />    if (nbArr)<br />      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; <br /><br />img.MM_dn = 0; }<br />    document[grpName] = nbArr = new Array();<br />    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {<br />      if (!img.MM_up) img.MM_up = img.src;<br />      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;<br />      nbArr[nbArr.length] = img;<br />  } }<br />}<br />//--><br />

<br /><!--<br />#apDiv7 {<br />    position:absolute;<br />    left:169px;/*469px;*/<br />    top:301px;<br />    width:402px;<br />    height:72px;<br />    z-index:7;<br />}<br />#apDiv8 {<br />    position:absolute;<br />    left:548px;/*848px;*/<br />    top:402px;<br />    width:160px;<br />    height:600px;<br />    z-index:8;<br />}<br />#apDiv9 {<br />    position:absolute;<br />    left:548px;/*848px;*/<br />    top:402px;<br />    width:160px;<br />    height:600px;<br />    z-index:8;<br />}<br />#apDiv10 {<br />    position:absolute;<br />    left:145px;/*445px;*/<br />    top:1230px;<br />    width:468px;<br />    height:60px;<br />    z-index:8;<br />}<br />#apDiv11 {<br />    position:absolute;<br />    left:305px;/*605px;*/<br />    top:1205px;<br />    width:150px;<br />    height:22px;<br />    z-index:9;<br />}<br />#apDiv12 {<br />    position:absolute; <br />    /*left:300px;*/<br />    top:-2px;<br />    width:751px;<br />    height:64px;<br />    z-index:8;<br />}<br />#apDiv13 {<br />    position:absolute; <br />    /*left:300px;*/<br />    top:0px;<br />    width:801px;<br />    height:72px;<br />    z-index:9;<br />}<br />#wrap { width: 801px; margin: auto; position: relative; }<br />.style6 {font-size: 10px}<br />.style7 {font-family: Arial, Helvetica, sans-serif}<br />.style8 {<br />    font-size: 16px;<br />    font-weight: bold;<br />    font-family: Georgia, "Times New Roman", Times, serif;<br />    font-style: italic;<br />}<br />.style9 {font-size: 14px; color: #233C77; font-family: Arial, Helvetica, <br /><br />sans-serif;}<br />.style10 {font-size: 14px; color: #233C77; font-family: Georgia, "Times <br /><br />New Roman", Times, serif;}<br />#apDiv14 {<br />    position:absolute;     /*left:300px;*/<br />    top:1266px;<br />    width:801px;<br />    height:14px;<br />    z-index:10;<br />}<br />.style11 {font-size: 12px}<br />--><br />

 

I deleted all left: 300px; and reduced all left sizes that were over 300px by 300px but you will probably still have to revise these edits, but it now centers in IE7 and Firefox.

Edited by Wickham
Link to comment
Share on other sites

  • 2 weeks later...

Hi- I aslo have a question in regards to this.

 

I have been working on a website and have been testing it- and I have a double window frame:

 

www.uoregon.edu/~tpurkers

 

and I am tying to figure out how to center the table (which is divided into two in the middle.)- but it seems only the right side wants to adjust.

 

was curious as how to go about this. I tried to follow the post above me, but kept running into walls.

 

Thanks,

Edited by whatpapertiger
Link to comment
Share on other sites

First, create a container box, to put all of your content into (all the other divs.... nav, sidebar, main, footer etc):

 




 

Then create the css:

 

#container {
   width: 976px;
   margin:0px auto;
   text-align:left;
   padding:15px;
   border:1px dashed #333;
   background-color:#eee;
}

 

the main thing is that after you've given the container a width, then the "margin:0px auto;" and "text-align:left;" bits are what makes the site auto-center. the padding, border, color are not needed to auto-center, but help you see where the container box is.

Link to comment
Share on other sites

the main thing is that after you've given the container a width, then the "margin:0px auto;" and "text-align:left;" bits are what makes the site auto-center.
Not quite accurate - the text-align: left has nothing to do with centering. It's a left-over from the old ways of centering things for older IE versions, where you'd text-align center the body and then left-align the container to get things back to left-align.
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...