No replies
Falcon
Offline
newbie
Last seen: 13 years 1 week ago
Joined: 2009-07-23
Posts: 3
Points: 0

Hey all,

On my site I have a picture that I would like to have its' horizontal position(left and right) remain the same when resizing the browser window.
Currently, when the browser is resized(smaller) it adjusts its position to the left side of the window causing the image to overlap text.

Thanks in advance for any help regarding this problem.

Site:
aionforsaken.com

Source:

html, body {
	background-color:#A1A1A1;
	margin:0;
    padding:0;
    height:100%;
}
 
#container {
	min-height:100%;
    position:relative;
    height:100%;
}
 
#header {
	position:fixed;
	background-image:url(images/temp_scroll_Edge_TOP_860x200.png);
	background-repeat:no-repeat;
	background-position:center;
	top:0px;
	width:860px;
	height:200px;
	z-index:2;
 
	left:50%;
	margin-top:-50px;
	margin-left:-430px; /* half of pictures width */
}
 
#footer{
   position:fixed; /* Locks the div into place, allowing it to move with the image */
   background-image:url(images/temp_scroll_Edge_BOT_860x200.png);
   background-position:bottom;
   background-repeat:no-repeat;
   width:860px;	   /* Width of the temp_scroll_Edge_BOT_860x200.png */
   height:200px;   /* Height of the temp_scroll_Edge_BOT_860x200.png */
   z-index:2;
   bottom:0;
 
   left:50%;
   margin-left:-420px; /* Subtract half the width of temp_scroll_Edge_BOT_860x200.png */
   margin-bottom:-75px;
}
 
#background {
	position:fixed;
	background-image:url(images/background.png);
	background-repeat:no-repeat;
	background-position:center;
	top:0px;
	width:1600px;
	height:1200px;
	z-index:0;
 
	left:50%;
	margin-left:-800px;
}
 
#asmodianhand {
	position:absolute;
	background-image:url(images/Asmodian_Hand.png);
	background-position:left;
	background-repeat:no-repeat;
	top:-200px;
	left:0px;
	width:800px;
	height:1600px;
	z-index:3;
 
	margin-right:1200px;
 
}
 
#body {
	position:absolute;
	background-image:url(images/scroll_BG_withTower_800x1200.png);
	background-repeat:repeat-y;
	top:0px;
	width:800px;
	height:auto;
	z-index:1;
 
	left:50%;
	margin-left:-400px; /* half of pictures width */
}
 
#legalnotice{
	position:relative;
 
	z-index:1;
 
	text-align:center;
	padding-bottom:100px; /* this alots for the fixed scroll bottom, allowing this to be seen*/
}
 
#menu {
	position:absolute;
	text-align:left;
	width:400px;
	z-index:1;
 
	top:0px;	
	left:50%;
 
	margin-left:0px;
	margin-top:200px;
 
}
 
#search {
	position:absolute;
	width:400px;
	height:28px;
	z-index:1;
 
	top:0px;
	left:50%;
 
	text-align:center;
 
	margin-top:225px;
}
 
#news {
	position:relative;
	width:500px;
	height:auto;
	z-index:1;
 
	border:solid;
	border-color:#4F7474;
 
	margin-left:150px;
	margin-top:650px;
}
 
#newsTimeStampId{
	font-family:"Times New Roman", Times, serif;
	font-size:12px;
	color:#000000;
 
	border:thin;
	border-style:solid;
	border-color:#4F7474;
}
 
#newsHeaderId{  
	 font-family:"Times New Roman", Times, serif;
     /*src: local("Faith Collapsing"), url("forum/Themes/forsaken/fonts/Faith Collapsing.ttf") format("opentype");*/
	 font-size:24px;
}
 
#newsBodyId{
	 font-family:"Times New Roman", Times, serif;
	 font-size:16px;
	 color:#000000;
}
 
#newsSignitureId{
	font-family:"Times New Roman", Times, serif;
	font-size:10px;
	color:#000000;
}
 
#newsCommentId{
	font-family:"Times New Roman", Times, serif;
	font-size:12px;
	color:#000000;
	text-align:right;
}
 
/* Text/Links CSS */
a:link {
	text-decoration: none;
	color: #ffffff;
	outline:none;
}
a:visited {
	text-decoration: none;
	color: #ffffff;
	outline:none;
}
a:hover {
	text-decoration: none;
	color: #ffffff;
	outline:none;
}
a:active {
	text-decoration: none;
	color: #ffffff;
	outline:none;
}
.links-style {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
}

<?php require("4sakN.php"); ?>
<!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>Forsaken - Asmodian Legion</title>
	<link rel="stylesheet" type="text/css" href="frontpage.css" />
</head>
 
<body>
 
<div id="container">
 
  	  <!-- scroll top layer -->
	  <div id="header"></div>
      <!-- background layer -->
      <div id="background"> </div>
	  <div id="asmodianhand"> </div> 
 
		<div id="body">
      <div class=".links-style" id="menu">
      	<a href="http://www.aionforsaken.com">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; HOME</a>
        <a>&nbsp; &nbsp; &nbsp; MEMBERS</a>
        <a>&nbsp; &nbsp; &nbsp; GALLERY</a>
        <a href="http://www.aionforsaken.com/forum">&nbsp; &nbsp; &nbsp; FORUM</a>	  
      </div>
 
      <div id="search">
        <?php ssi_quickSearch(); ?>
      </div>
 
      <div id="news">
        <?php _4SakN_boardNews(2, 10, null, null); ?>
      </div> 
 
      <div id="legalnotice">
      	<p>
        © 2009 AionForsaken.com<br />AION: The Tower of Eternity™ logo, game content, and materials are trademarks and copyrights of NCsoft Corporation.<br />All rights reserved.        </p>
	  </div>
      <!-- scroll bottom layer -->
  	  <div id="footer"></div>
  </div>
</div>
 
</body>
</html>