hi there guys i am trying to design this site that will retain its position ie when you expand the browser window the site will remain centred. The issue i am experiencing at the moment is that the page seems to move right if i expand it, i was wondering if there is a javascript or css fix to keep my site centred, so that if you have it on full screen or custom its stays in the same place.
site :
Html code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="top">
<img src="http://www.sitepoint.com/forums/images/mfoam_logo.png" width="312" height="96" alt="mfoam logo" />
</div>
<div id="left_content">
test text
</div>
<div id="right_content">
test right text
</div>
<div id="left__bottom_content">
left bottom content!
flresent Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.).
Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below).
</div>
<div id="center_content">
<p>At p</p>
<p>flresent Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.).
Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below).
Update:Recent Firefox nightly versions support border-radius without the -moz- prefix.
Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle border-radius).
Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward (without prefix). </p>
</div>
<br />
<div id="footer">
text for footer
</div>
</body>
</html>
Css code:
@charset "UTF-8";
/* CSS Document */
body,td,th {
font-family: Eurostile;
font-size: 12px;
}
body {
background-image: url(images/FR_Web_Background.jpg);
}
#top {
padding: 10px 10px 3px 10px;
width: 600 px;
margin:20px auto;
background: #fff;
-moz-border-radius: 1em 1em 1em 1em;
border-radius: 1em 1em 1em 1em;
}
#left_content {
padding: 100px 30px 3px 30px;
position:absolute;
top: 130px;
left: 0;
width: 200px;
margin: 10px;
background: #fff;
-moz-border-radius: 1em 1em 1em 1em;
border-radius: 1em 1em 1em 1em;
}
#left__bottom_content {
padding: 100px 30px 30px 30px;
position:absolute;
top: 247px;
left: 0px;
width: 200px;
margin: 10px;
background: #fff;
-moz-border-radius: 1em 1em 1em 1em;
border-radius: 1em 1em 1em 1em;
}
#center_content {
padding: 50px 30px 30px 30px;
position:absolute;
top: 257px;
right: 10px;
width: 858px;
height: 200px;
float: right;
margin: auto;
background: #fff;
-moz-border-radius: 1em 1em 1em 1em;
border-radius: 1em 1em 1em 1em;
z-index: auto;
}
#right_content {
padding: 100px 30px 3px 30px;
position:absolute;
top: 130px;
right: 0;
width: 860px;
margin: 10px;
background: #fff;
-moz-border-radius: 1em 1em 1em 1em;
border-radius: 1em 1em 1em 1em;
}
#footer {
padding: 30px 30px 3px 30px;
position:absolute;
top: 60fetch0px;
left: 0;
width: 1155px;
margin: 10px;
background: #fff;
-moz-border-radius: 1em 1em 1em 1em;
border-radius: 1em 1em 1em 1em;
}