PDA

View Full Version : Center your Site.


kjdenison
Jan 21, 2004, 03:29 PM
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.

jeremy.king
Jan 21, 2004, 03:52 PM
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>&nbsp;</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>&nbsp;</td>

</tr>
</table>

You could also clean this up a bit, but baby steps :)

kjdenison
Jan 21, 2004, 07:30 PM
i didn't do my site in html though, is there any way to fix it at this point?

brianellisrules
Jan 22, 2004, 11:38 AM
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

Rower_CPU
Jan 22, 2004, 12:22 PM
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.

brianellisrules
Jan 22, 2004, 12:53 PM
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???

kjdenison
Jan 22, 2004, 02:18 PM
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.

fortgreen1
Jan 22, 2004, 02:31 PM
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.
----------







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

wordmunger
Jan 22, 2004, 03:27 PM
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.

kjdenison
Jan 22, 2004, 09:56 PM
hey you guys, thank you so much for all the info, your the best. I think i figured it out. www.kurtdenison.com Thanks!

brianellisrules
Jan 22, 2004, 10:06 PM
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.