Hi,
I'm trying to get my website to be centered. Right now it is only centered when the monitor/window is a specific size (ex:1280 X 1024 resolution). When I attempt to view my website on a smaller monitor or make the browser window smaller, the page is not centered and I have to scroll to the right. I am not a programmer or familiar with HTML or CSS. I simply used a drag and drop method with Dreamweaver 8 and have used many layers in my design.
I've already tried changing the position of all layers to "relative" as opposed to "absolute", but that simply made things worse. Now the page was not even centered on a 1280 X 1024 monitor. Please help me with this. Thank you. To view the code either visit, www.kylequesnoy.net or see below:
<!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"><!-- InstanceBegin template="/Templates/Template2.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>The Official Website of Kyle Quesnoy</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body {
background-image: url(file:///C|/Documents and Settings/Jason Kyle Quesnoy/Desktop/Web Site Files/backdrop3 1280x1024.jpg);
background-repeat: no-repeat;
background-image: url(backdrop3%201280x1024.jpg);
margin-left: 150px;
margin-right: 150px;
background-position: center;
}
#Layer1 {
position:absolute;
width:687px;
height:115px;
z-index:1;
left: 259px;
top: 41px;
}
#Layer2 {
position:absolute;
width:622px;
height:633px;
z-index:2;
left: 290px;
top: 245px;
}
#Layer3 {
position:absolute;
width:106px;
height:22px;
z-index:3;
left: 184px;
top: 372px;
}
#Layer4 {
position:absolute;
width:200px;
height:641px;
z-index:4;
left: 721px;
top: 243px;
}
#Layer5 {
position:absolute;
width:104px;
height:22px;
z-index:5;
left: 184px;
top: 395px;
}
#Layer6 {
position:absolute;
width:104px;
height:22px;
z-index:6;
left: 184px;
top: 418px;
}
#Layer7 {
position:absolute;
width:104px;
height:22px;
z-index:7;
left: 184px;
top: 441px;
}
#Layer8 {
position:absolute;
width:104px;
height:21px;
z-index:8;
left: 184px;
top: 464px;
}
#Layer9 {
position:absolute;
width:105px;
height:21px;
z-index:9;
left: 184px;
top: 349px;
}
#Layer10 {
position:absolute;
width:690px;
height:22px;
z-index:10;
left: 259px;
top: 855px;
}
.style2 {font-family: Symbol}
#Layer11 {
position:absolute;
width:687px;
height:23px;
z-index:10;
left: 259px;
top: 880px;
}
-->
</style>
<!-- InstanceBeginEditable name="head" --><style type="text/css">
<!--
body {
background-image: url(backdrop3 1280x1024.jpg);
background-image: url(backdrop3%201280x1024.jpg);
}
#Layer12 {
position:absolute;
width:200px;
height:115px;
z-index:11;
left: 11px;
}
#Layer13 {
position:absolute;
width:87px;
height:31px;
z-index:1;
left: 259px;
top: 405px;
}
.style3 {
font-size: 24px;
color: #3333FF;
}
-->
</style><!-- InstanceEndEditable -->
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="Layer11">
<div align="center">Copyright 2006, 2007, 2008 www.kylequesnoy.net. All rights reserved. </div>
</div>
<div id="Layer1"><img src="cooltext21511048-left-side.gif" alt="title left side" width="223" height="159" /><img src="cooltext21511048%20middle%20copy.jpg" alt="title middle" width="238" height="159" /><img src="cooltext21511048-right-side.gif" alt="title right side" width="223" height="159" /></div>
<div id="Layer2"><!-- InstanceBeginEditable name="EditRegion1" -->
<div id="Layer12"><a href="first page.html"><img src="Kyle's Theatrical Headshot for index page.jpg" width="600" height="400" border="0" /></a>
<div id="Layer13"><em><strong><span class="style3"><a href="first page.html">ENTER</a></span></strong></em></div>
</div>
<!-- InstanceEndEditable --></div>
</body>
<!-- InstanceEnd --></html>