PDA

View Full Version : Centering in HTML pages


wrongun
03-20-2006, 11:32 AM
I know that centering has been covered quit a bit, and I have read the CSS centering tutorial. However, I am working purely in HTML pages at the moment due to my inexperience, messing around with code seems a little daunting at the moment. I would however like to get my pages to center, is this possible in HTML? Here is my code so far..

code tags added (dj)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>:::: Tim Priestley :::: House &amp; Electro DJ//Producer//Remixer ::::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

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_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_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 bgcolor="#F0F0F0" onLoad="MM_preloadImages('Images/images/Navigation-Bar_01-over.gif','Images/images/Navigation-Bar_02-over.gif','Images/images/Navigation-Bar_03-over.gif','Images/images/Navigation-Bar_04-over.gif','Images/images/Navigation-Bar_05-over.gif','Images/images/Navigation-Bar_06-over.gif','Images/images/Navigation-Bar_07-over.gif','Images/images/Navigation-Bar_08-over.gif')">

<div id="Layer1" style="position:absolute; left:0px; top:0px; width:956px; height:30px; z-index:1">
<TABLE WIDTH=955 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_01', 'images/Navigation-Bar_01-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_01', 'images/Navigation-Bar_01.gif'); return true;">
</A>Images/images/Navigation-Bar_01.gif (Index.htm)Images/images/Navigation-Bar_02.gif (Profile.htm)Images/images/Navigation-Bar_03.gif (Mixes.htm)Images/images/Navigation-Bar_04.gif (DJCharts.htm)Images/images/Navigation-Bar_05.gif (Gigs.htm)Images/images/Navigation-Bar_06.gif (Gallery.htm)Images/images/Navigation-Bar_07.gif (Links.htm)Images/images/Navigation-Bar_08.gif (Contact.htm)Images/images/Navigation-Bar_09.gif</TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_02', 'images/Navigation-Bar_02-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_02', 'images/Navigation-Bar_02.gif'); return true;">
</A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_03', 'images/Navigation-Bar_03-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_03', 'images/Navigation-Bar_03.gif'); return true;">
</A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_04', 'images/Navigation-Bar_04-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_04', 'images/Navigation-Bar_04.gif'); return true;">
</A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_05', 'images/Navigation-Bar_05-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_05', 'images/Navigation-Bar_05.gif'); return true;">
</A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_06', 'images/Navigation-Bar_06-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_06', 'images/Navigation-Bar_06.gif'); return true;">
</A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_07', 'images/Navigation-Bar_07-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_07', 'images/Navigation-Bar_07.gif'); return true;">
</A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_08', 'images/Navigation-Bar_08-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_08', 'images/Navigation-Bar_08.gif'); return true;">
</A></TD>
<TD> </TD>
</TR>
</TABLE>

</div>
<div id="Layer2" style="position:absolute; left:0px; top:32px; width:630px; height:550px; z-index:2"></div>
</body>
</html>

Jim_Shady
03-20-2006, 12:09 PM
Have you published this page yet? Can we have a look at it on the web? The answer is most definetly yes - but would be useful to see it published if possible....

Shady

Jim_Shady
03-20-2006, 12:12 PM
I'd also be tempted to give this a go if I was you.

http://www.bluerobot.com/web/css/center1.html

Should only take you 5 mins. Link the HTML page to a CSS - and the put all of your content inside a DIV which you call 'Content' .

Shady

wrongun
03-20-2006, 12:34 PM
Hi Jim,

No I've not published it yet as its not finished, will give your suggestion a go and get back to you. Apologies for my complete noobness, but how do you link a HTML page to a CSS and add the code as you are suggesting?

Cheers!

Jim_Shady
03-20-2006, 12:56 PM
You have to put a link to it in the HEAD of the html page. Like this:

<link href="MGF.css" rel="stylesheet" type="text/css">

Put the CSS sheet in the same directory as the page that you are working with, and then change MGF in the above sentance to whatever you call your CSS file.

It's worth learning at least some basic CSS mate and how to do it - you'll be well impressed how useful and effective it looks on the page. Have a go with this and let me know if you're stuggling and I'll try and talk you through it.

Shady

wrongun
03-20-2006, 01:11 PM
Hey Jim, BIG thanks for your help here.

It hasnt changed but I'm sure I've missed something somewhere. I've created a CSS page in the same folder as my index.htm, called it index.css and pasted the code from http://www.bluerobot.com/web/css/center1.html into it.

Here is my HTML code after I've placed the CSS link in the header. At least I think its the header, I just put it in the first line. Is that what you meant?

<link href="index.css" rel="stylesheet" type="text/css">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>:::: Tim Priestley :::: House &amp; Electro DJ//Producer//Remixer ::::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

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_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_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 bgcolor="#F0F0F0" onLoad="MM_preloadImages('Images/images/Navigation-Bar_01-over.gif','Images/images/Navigation-Bar_02-over.gif','Images/images/Navigation-Bar_03-over.gif','Images/images/Navigation-Bar_04-over.gif','Images/images/Navigation-Bar_05-over.gif','Images/images/Navigation-Bar_06-over.gif','Images/images/Navigation-Bar_07-over.gif','Images/images/Navigation-Bar_08-over.gif')">

<div id="Layer1" style="position:absolute; left:0px; top:0px; width:956px; height:30px; z-index:1">
<TABLE WIDTH=955 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_01', 'images/Navigation-Bar_01-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_01', 'images/Navigation-Bar_01.gif'); return true;">
</A>Images/images/Navigation-Bar_01.gif (Index.htm)Images/images/Navigation-Bar_02.gif (Profile.htm)Images/images/Navigation-Bar_03.gif (Mixes.htm)Images/images/Navigation-Bar_04.gif (DJCharts.htm)Images/images/Navigation-Bar_05.gif (Gigs.htm)Images/images/Navigation-Bar_06.gif (Gallery.htm)Images/images/Navigation-Bar_07.gif (Links.htm)Images/images/Navigation-Bar_08.gif (Contact.htm)Images/images/Navigation-Bar_09.gif</TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_02', 'images/Navigation-Bar_02-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_02', 'images/Navigation-Bar_02.gif'); return true;">
</A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_03', 'images/Navigation-Bar_03-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_03', 'images/Navigation-Bar_03.gif'); return true;">
</A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_04', 'images/Navigation-Bar_04-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_04', 'images/Navigation-Bar_04.gif'); return true;">
</A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_05', 'images/Navigation-Bar_05-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_05', 'images/Navigation-Bar_05.gif'); return true;">
</A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_06', 'images/Navigation-Bar_06-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_06', 'images/Navigation-Bar_06.gif'); return true;">
</A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_07', 'images/Navigation-Bar_07-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_07', 'images/Navigation-Bar_07.gif'); return true;">
</A></TD>
<TD> <A HREF="#"
ONMOUSEOVER="changeImages('Navigation_Bar_08', 'images/Navigation-Bar_08-over.gif'); return true;"
ONMOUSEOUT="changeImages('Navigation_Bar_08', 'images/Navigation-Bar_08.gif'); return true;">
</A></TD>
<TD> </TD>
</TR>
</TABLE>

</div>
<div id="Layer2" style="position:absolute; left:0px; top:32px; width:630px; height:550px; z-index:2"></div>
</body>
</html>



And here is the CSS Code

body {
margin:50px 0px; padding:0px;
text-align:center;
}

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

Jim_Shady
03-20-2006, 01:57 PM
The CSS link needs to go inbetween the two HEAD tags... so the next line after <HEAD> and before <TITLE> wil do fine. Dreamweaver does this automatically for you but it's clearly quite easy to do yourself..! I think it's TOOLS> then ATTACH STYLESHEET or something like that.

Next, on the line after the HEAD section closes </HEAD>, put <Div id="Content">

Then just after the </BODY> tag closes at the end of your page, end the DIV that you have opened with </Div> .

Hope that makes sense?! Give it a go....

Shady

domedia
03-20-2006, 02:04 PM
validating the document at would have caught most of these as well

dthomsen8
03-20-2006, 03:11 PM
Hi Jim,

No I've not published it yet as its not finished, will give your suggestion a go and get back to you. Apologies for my complete noobness, but how do you link a HTML page to a CSS and add the code as you are suggesting?

Cheers!

If you have a place to publish, go ahead. Many of us publish while developing, and just use something like test7.htm rather than index.htm as the file name, so the casual user can't wander into the test.