1. Welcome to the new MacRumors forums. See our announcement and read our FAQ

Center your Site.

Discussion in 'Web Design and Development (archive)' started by kjdenison, Jan 21, 2004.

  1. macrumors 6502

    #1
    In dreamweaver how do you enable your site to automatically center itself, or how do i center it i guess is the question. It is centered on one resolution and the rest it is a bit off center. my site is www.kurtdenison.com so you can see what i mean. Help! thanks guys.
     
  2. macrumors 603

    jeremy.king

    #2
    You have a 3 column layout but you aren't using the first or third column. Heres an html based way to center your site and I took out the two unnecessary columns.

    <table width="689" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
    <td> </td>

    </tr>
    <tr>

    <td valign="top"><img src="/indextopheader.gif" width="689" height="19"></td>

    </tr>
    <tr>

    <td valign="top"><a href="home.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','/indeximage3.jpg',1)"><img src="/indeximage2.jpg" name="Image2" width="689" height="401" border="0"></a></td>

    </tr>
    <tr>

    <td valign="top"><img src="/bottomheader.gif" width="689" height="19"></td>

    </tr>
    <tr>

    <td valign="top"><div align="center">
    <p><img src="/indexdescription.gif" width="689" height="87"></p>
    </div></td>

    </tr>
    <tr>

    <td> </td>

    </tr>
    </table>

    You could also clean this up a bit, but baby steps :)
     
  3. macrumors 6502

    #3
    i didn't do my site in html though, is there any way to fix it at this point?
     
  4. macrumors regular

    #4
    Are you using any css? If so, maybe something like...

    body {text-align: center;}

    ??

    Maybe not. I'm a total n00b at web-stuff, so a lot of what I do is trial and error.


    edit: I just looked at your code and noticed you used tables. Rower's not gonna like that.... *runs for cover* :D
     
  5. Moderator emeritus

    Rower_CPU

    #5
    Heh...baby steps, Brian, baby steps. ;)

    Have you tried using the properties panel and clicking on the table border to select the whole thing and then clicking on the center alignment button?

    You really should learn some HTML, though, because adding the code to center a table is pretty trivial.
     
  6. macrumors regular

    #6
    Yeah, I was... uh... just... uh... kidding about that. Yeah, I was just joking around - you know me.

    *tugs at collar*

    Is it warm in here???
     
  7. macrumors 6502

    #7
    center?

    how do i select the entire site? If you could kinda walk me through that it would be great. Sorry if i sound stupid! Thanks.
     
  8. macrumors newbie

    #8
    simple Dreamweaver trick.

    In Dreamweaver, go to HTML source,
    copy and paste teh code below,
    Then you can still edit in "Layout" mode.



    BASIC IDEA OF THE CENTERING CONTENT: (if you were to do this from scratch)

    1 CREATE MOTHER TABLE
    In Dreamweaver, create table with 100% width and 100% Height with a cell that has also 100% width and height, but with align center and valign center.Sometimes you can't assign height of the table so go to code and paste
    height="100%"
    right next to
    width="100%"

    2
    Inside of that cell you insert another table that is purely your content. in this case the blue header to the blur footer but not all the grey area around it. don't forget the DOCTYPE stuff on top of the page (for Safari Browser especially) 100% woudl not work vertically if you forget.

    good luck.
    ----------






    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Kurt Denison</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    body {
    	background-color: #E5E5E5;
    }
    -->
    </style>
    <script language="JavaScript" 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_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_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>
    </head>
    
    <body onLoad="MM_preloadImages('illustratorbutton2.gif','/indeximage3.jpg')">
    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
    	<tr>
    		<td valign="middle" align="center" height="100%" width="100%">
    			<table border="0" cellpadding="0" cellspacing="0">
    			  <!--DWLayoutDefaultTable-->
    			 
    			  <tr>
    				<td valign="top"><img src="/indextopheader.gif" width="689" height="19"></td>
    			  </tr>
    			  <tr>
    				<td valign="top"><a href="home.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','/indeximage3.jpg',1)"><img src="/indeximage2.jpg" name="Image2" width="689" height="401" border="0"></a></td>
    			  </tr>
    			  <tr>
    				<td valign="top"><img src="/bottomheader.gif" width="689" height="19"></td>
    			  </tr>
    			  <tr>
    				<td valign="top"><img src="/indexdescription.gif" width="689" height="87"></td>
    			  </tr>
    			  
    			</table>
    		</td>
    	</tr>
    </table>
    </body>
    </html>
    
     
  9. macrumors 603

    wordmunger

    #9
    You can't select the entire site. You'll have to fix it one page at a time. Use Edit--Select All to select an entire page.

    It looks like your design skills are WAY ahead of your basic HTML skills. You should probably bone up on basic HTML. Maybe get a basic book like HTML For Dummies. Once you have a better understanding of HTML, you'll have an easier time getting Dreamweaver to do what you want.
     
  10. macrumors 6502

    #10
    THANKS!

    hey you guys, thank you so much for all the info, your the best. I think i figured it out. www.kurtdenison.com Thanks!
     
  11. macrumors regular

    #11
    it works, sort of. if I make it wider, it stays centered. if I shrink it down, then it keeps the left margin, but cuts off the right side.
     

Share This Page