CSS Centering of entire Body
How do I center this entire page so it floats with the width of the page please? Created in Photoshop, using Dreamweaver. No external Style sheet.
<!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>
<title>indexmain</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Preload Script (indexmain.psd) -->
<script type="text/javascript">
<!--
userAgent = window.navigator.userAgent;
browserVers = parseInt(userAgent.charAt(userAgent.indexOf("/")+1),10);
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function findElement(n,ly) {
if (browserVers < 4) return document[n];
var curDoc = ly ? ly.document : document;
var elem = curDoc[n];
if (!elem) {
for (var i=0;i<curDoc.layers.length;i++) {
elem = findElement(n,curDoc.layers[i]);
if (elem) return elem;
}
}
return elem;
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
var img;
for (var i=0; i<changeImages.arguments.length; i+=2) {
img = null;
if (document.layers) {
img = findElement(changeImages.arguments[i],0);
}
else {
img = document.images[changeImages.arguments[i]];
}
if (img) {
img.src = changeImages.arguments[i+1];
}
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
indexmain_03_over = newImage("images/indexmain_03-over.gif");
indexmain_05_over = newImage("images/indexmain_05-over.gif");
indexmain_06_over = newImage("images/indexmain_06-over.gif");
indexmain_07_over = newImage("images/indexmain_07-over.jpg");
preloadFlag = true;
}
}
// -->
</script>
<!-- End Preload Script -->
<!-- ImageReady Styles (indexmain.psd) -->
<style type="text/css">
<!--
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:933px;
}
#entirebody {
position: relative;
}
#indexmaintop_ {
position:absolute;
left:0px;
top:0px;
width:800px;
height:150px;
}
#indexmainleftstrip_ {
position:absolute;
left:0px;
top:150px;
width:25px;
height:783px;
}
#indexmain-03_ {
position:absolute;
left:25px;
top:150px;
width:130px;
height:27px;
}
#indexmainbody_ {
position:absolute;
left:155px;
top:150px;
width:645px;
height:783px;
}
#indexmain-05_ {
position:absolute;
left:25px;
top:177px;
width:130px;
height:27px;
}
#indexmain-06_ {
position:absolute;
left:25px;
top:204px;
width:130px;
height:26px;
}
#indexmain-07_ {
position:absolute;
left:25px;
top:230px;
width:130px;
height:30px;
}
#indexmainleft_ {
position:absolute;
left:25px;
top:260px;
width:130px;
height:673px;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body onload="preloadImages();" style="background-color:#FFFFFF;">
<!-- ImageReady Slices (indexmain.psd) -->
<div id="entirebody">
<div id="Table_01">
<div id="indexmaintop_">
<a href="index.php">
<img id="indexmaintop" src="images/indexmaintop.gif" width="800" height="150" border="0" alt="" /></a>
</div>
<div id="indexmainleftstrip_">
<img id="indexmainleftstrip" src="images/indexmainleftstrip.gif" width="25" height="783" alt="" />
</div>
<div id="indexmain-03_">
<a href="index.php"
onmouseover="window.status='Return to Home Page'; changeImages('indexmain_03', 'images/indexmain_03-over.gif'); return true;"
onmouseout="window.status=''; changeImages('indexmain_03', 'images/indexmain_03.gif'); return true;"
onmousedown="changeImages('indexmain_03', 'images/indexmain_03-over.gif'); return true;"
onmouseup="changeImages('indexmain_03', 'images/indexmain_03-over.gif'); return true;">
<img name="indexmain_03" id="indexmain_03" src="images/indexmain_03.gif" width="130" height="27" border="0" alt="" /></a>
</div>
<div id="indexmainbody_">
<img id="indexmainbody" src="images/indexmainbody.gif" width="645" height="783" alt="" />
</div>
<div id="indexmain-05_">
<a href="library.php"
onmouseover="window.status='Search the Song Library'; changeImages('indexmain_05', 'images/indexmain_05-over.gif'); return true;"
onmouseout="window.status=''; changeImages('indexmain_05', 'images/indexmain_05.gif'); return true;"
onmousedown="changeImages('indexmain_05', 'images/indexmain_05-over.gif'); return true;"
onmouseup="changeImages('indexmain_05', 'images/indexmain_05-over.gif'); return true;">
<img name="indexmain_05" id="indexmain_05" src="images/indexmain_05.gif" width="130" height="27" border="0" alt="" /></a>
</div>
<div id="indexmain-06_">
<a href="songwriters.php"
onmouseover="window.status='Songwriters'; changeImages('indexmain_06', 'images/indexmain_06-over.gif'); return true;"
onmouseout="window.status=''; changeImages('indexmain_06', 'images/indexmain_06.gif'); return true;"
onmousedown="changeImages('indexmain_06', 'images/indexmain_06-over.gif'); return true;"
onmouseup="changeImages('indexmain_06', 'images/indexmain_06-over.gif'); return true;">
<img name="indexmain_06" id="indexmain_06" src="images/indexmain_06.gif" width="130" height="26" border="0" alt="" /></a>
</div>
<div id="indexmain-07_">
<a href="songseekers.php"
onmouseover="window.status='Seeking Music?'; changeImages('indexmain_07', 'images/indexmain_07-over.jpg'); return true;"
onmouseout="window.status=''; changeImages('indexmain_07', 'images/indexmain_07.jpg'); return true;"
onmousedown="changeImages('indexmain_07', 'images/indexmain_07-over.jpg'); return true;"
onmouseup="changeImages('indexmain_07', 'images/indexmain_07-over.jpg'); return true;">
<img name="indexmain_07" id="indexmain_07" src="images/indexmain_07.jpg" width="130" height="30" border="0" alt="" /></a>
</div>
<div id="indexmainleft_">
<img id="indexmainleft" src="images/indexmainleft.gif" width="130" height="673" alt="" />
</div>
</div>
<!-- End ImageReady Slices --></div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
To give a relative width, you can use a percentage instead of pixel value. But yes, you need to redesign as absolute positioning is absolute :)
try this
<!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>
<title>indexmain</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Preload Script (indexmain.psd) -->
<script type="text/javascript">
<!--
userAgent = window.navigator.userAgent;
browserVers = parseInt(userAgent.charAt(userAgent.indexOf("/")+1),10);
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function findElement(n,ly) {
if (browserVers < 4) return document[n];
var curDoc = ly ? ly.document : document;
var elem = curDoc[n];
if (!elem) {
for (var i=0;i<curDoc.layers.length;i++) {
elem = findElement(n,curDoc.layers[i]);
if (elem) return elem;
}
}
return elem;
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
var img;
for (var i=0; i<changeImages.arguments.length; i+=2) {
img = null;
if (document.layers) {
img = findElement(changeImages.arguments[i],0);
}
else {
img = document.images[changeImages.arguments[i]];
}
if (img) {
img.src = changeImages.arguments[i+1];
}
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
indexmain_03_over = newImage("images/indexmain_03-over.gif");
indexmain_05_over = newImage("images/indexmain_05-over.gif");
indexmain_06_over = newImage("images/indexmain_06-over.gif");
indexmain_07_over = newImage("images/indexmain_07-over.jpg");
preloadFlag = true;
}
}
// -->
</script>
<!-- End Preload Script -->
<!-- ImageReady Styles (indexmain.psd) -->
<style type="text/css">
<!--
#Table_01 {
left:0px;
top:0px;
width:800px;
height:933px;
}
#entirebody {
position: relative;
}
#indexmaintop_ {
position:absolute;
left:0px;
top:0px;
width:800px;
height:150px;
}
#indexmainleftstrip_ {
position:absolute;
left:0px;
top:150px;
width:25px;
height:783px;
}
#indexmain-03_ {
position:absolute;
left:25px;
top:150px;
width:130px;
height:27px;
}
#indexmainbody_ {
position:absolute;
left:155px;
top:150px;
width:645px;
height:783px;
}
#indexmain-05_ {
position:absolute;
left:25px;
top:177px;
width:130px;
height:27px;
}
#indexmain-06_ {
position:absolute;
left:25px;
top:204px;
width:130px;
height:26px;
}
#indexmain-07_ {
position:absolute;
left:25px;
top:230px;
width:130px;
height:30px;
}
#indexmainleft_ {
position:absolute;
left:25px;
top:260px;
width:130px;
height:673px;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body onload="preloadImages();" style="background-color:#FFFFFF;height:100%;text-align:center; width:100% ">
<!-- ImageReady Slices (indexmain.psd) -->
<div id="entirebody">
<div id="Table_01">
<div id="indexmaintop_">
<a href="index.php">
<img id="indexmaintop" src="images/indexmaintop.gif" width="800" height="150" border="0" alt="" /></a>
</div>
<div id="indexmainleftstrip_">
<img id="indexmainleftstrip" src="images/indexmainleftstrip.gif" width="25" height="783" alt="" />
</div>
<div id="indexmain-03_">
<a href="index.php"
onmouseover="window.status='Return to Home Page'; changeImages('indexmain_03', 'images/indexmain_03-over.gif'); return true;"
onmouseout="window.status=''; changeImages('indexmain_03', 'images/indexmain_03.gif'); return true;"
onmousedown="changeImages('indexmain_03', 'images/indexmain_03-over.gif'); return true;"
onmouseup="changeImages('indexmain_03', 'images/indexmain_03-over.gif'); return true;">
<img name="indexmain_03" id="indexmain_03" src="images/indexmain_03.gif" width="130" height="27" border="0" alt="" /></a>
</div>
<div id="indexmainbody_">
<img id="indexmainbody" src="images/indexmainbody.gif" width="645" height="783" alt="" />
</div>
<div id="indexmain-05_">
<a href="library.php"
onmouseover="window.status='Search the Song Library'; changeImages('indexmain_05', 'images/indexmain_05-over.gif'); return true;"
onmouseout="window.status=''; changeImages('indexmain_05', 'images/indexmain_05.gif'); return true;"
onmousedown="changeImages('indexmain_05', 'images/indexmain_05-over.gif'); return true;"
onmouseup="changeImages('indexmain_05', 'images/indexmain_05-over.gif'); return true;">
<img name="indexmain_05" id="indexmain_05" src="images/indexmain_05.gif" width="130" height="27" border="0" alt="" /></a>
</div>
<div id="indexmain-06_">
<a href="songwriters.php"
onmouseover="window.status='Songwriters'; changeImages('indexmain_06', 'images/indexmain_06-over.gif'); return true;"
onmouseout="window.status=''; changeImages('indexmain_06', 'images/indexmain_06.gif'); return true;"
onmousedown="changeImages('indexmain_06', 'images/indexmain_06-over.gif'); return true;"
onmouseup="changeImages('indexmain_06', 'images/indexmain_06-over.gif'); return true;">
<img name="indexmain_06" id="indexmain_06" src="images/indexmain_06.gif" width="130" height="26" border="0" alt="" /></a>
</div>
<div id="indexmain-07_">
<a href="songseekers.php"
onmouseover="window.status='Seeking Music?'; changeImages('indexmain_07', 'images/indexmain_07-over.jpg'); return true;"
onmouseout="window.status=''; changeImages('indexmain_07', 'images/indexmain_07.jpg'); return true;"
onmousedown="changeImages('indexmain_07', 'images/indexmain_07-over.jpg'); return true;"
onmouseup="changeImages('indexmain_07', 'images/indexmain_07-over.jpg'); return true;">
<img name="indexmain_07" id="indexmain_07" src="images/indexmain_07.jpg" width="130" height="30" border="0" alt="" /></a>
</div>
<div id="indexmainleft_">
<img id="indexmainleft" src="images/indexmainleft.gif" width="130" height="673" alt="" />
</div>
</div>
<!-- End ImageReady Slices --></div>
</body>
</html>SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you. Again the answer you both gave looked so simple but was perfect. You did what a couple said couldn't be done! Made it look easy too.
You need to redesign it.