fixed images, website resolution resize

Question

PRYMA 0 Newbie Poster

15 Years Ago

Hello there guys. Have a bit of a dilema here. have been working on this website for about a week now. I have came to what i want up to this point but ran into some problems.

If you go to you will see taht the website itself is fine but the fixed images that are on the side.. the soldiers and the links are not aligned to the website evenly on each side.

I have it to where the the website scrolls but the fixed images stay in place. problem is that when others view it in different resolutions the fixed images are not even as well.

How can i make it so that the fixed images are resized together with the website and stay evenly on each side and remain consistent even when the resolution is changed due to viewers?

Hope you guys can help me with this issue. I have searched for ever for this issue since i have had other times i could not fix it and gave up.

thanks in advance. Here is my css and my index.

this is the css code

html, body {
 margin:0;
 padding:0; 
 text-align:center;
 min-width : 770px ;
 background-color:#222222;
 background-image:url('images/mainbg.jpg');
 font-family:arial;
 border:0px;
  }
*{
margin:0px;
padding:0px;
}
img {
 border:0px;
  }
 a:link {color: #66880d; text-decoration:none;  border:0px; }
 a:active {color: #66880d; text-decoration: none;  border:0px; }
 a:visited {color: #66880d; text-decoration: none;  border:0px; }
 a:hover {color: #8cb423; text-decoration: underline;  border:0px; }
 
div.wrapper {
width : 770px ;
text-align : left ;
margin-left : auto ;
margin-right : auto ;
position : relative ;
}
 
/* scroll text settings begins */
p.s1{
 color:red;
}
p.s2{
 color:black;
}
#bl{
 color:black;
}
#b{
 color:blue;
}
#r{
 color:red;
}
#y{
 color:yellow;
 font-weight:normal;
 font-style:italic;
 font-size:15px;
}
#g{
 color:green;
}
#w{
 color:white;
}
 
/* fixed images on sides begin */
#twitter {
 width:50px;
 height:50px;
 left:80px;
 right:50px;
 top:2px;
 background-image:url('images/twitter.jpg');
 position: fixed;
}
#steam {
 width:50px;
 height:50px;
 left:150px;
 top:2px;
 background-image:url('images/steam.jpg');
 position: fixed;
}
#game {
 width:50px;
 height:50px;
 left:1377px;
 top:2px;
 background-image:url('images/gametracker.jpg');
 position: fixed;
}
#facebook {
  width:50px;
  height:50px;
  left:1450px;
  top:2px;
  background-image:url('images/facebook.jpg');
  position: fixed;
}
#fixedimageleft {
 width:300px;
 height:588px;
 left:-2px;
 right:0px;
 top:70px;
 background-image:url('images/soldier.png');
 position: fixed;
}
#fixedimageright {
 width:300px;
 height:588px;
 left:1280px;
 right:0px;
 top:70px;
 background-image:url('images/soldier2.png');
 position: fixed;
}
/* top 3 blocks begin */
#latestmatch {
 width:308px;
 height:270px;
 float:left;
 margin-left:1px;
 background-image:url('images/thebg.jpg');
 margin-top:2px;
 margin-bottom:2px;
 padding-left:2px;
  }
#meettheteam {
 width:309px;
 height:270px;
 float:left;
 margin-left:1px;
 background-image:url('images/thebg.jpg');
 margin-top:2px;
 margin-bottom:2px;
 padding-left:1px;
  }
#forumposts {
 width:308px;
 height:270px;
 float:left;
 margin-left:1px;
 background-image:url('images/thebg.jpg');
 margin-top:2px;
 margin-bottom:2px;
 margin-left:1px;
 padding-left:2px;
  }
#rosterData {
 padding-top:0px;
 padding-left:10px;
 color:#77a401;
 font-variant:bold;
  }
#rosterbg img {
 border:1px solid #858585;
  }
#rosterbg img:hover {
 border:1px solid #77a401;
  }
#rosterimg {
 padding-top:12px;
 padding-left:40px;
 float:left;
  }
#rosterimg2 {
 padding-top:12px;
 padding-right:40px;
 float:right;
  }
#latestmatchhead {
 width:301px;
 height:27px;
 background-image:url('images/latestmatches.jpg');
 margin-left:4px;
 margin-top:7px;
 background-repeat:no-repeat;
  }
#forumshead {
 width:301px;
 height:27px;
 background-image:url('images/recentposts.jpg');
 background-repeat:no-repeat;
 margin-top:7px;
 margin-left:4px;
  }
#shoutout {
 width:301px;
 height:27px;
 background-image:url('images/shout.jpg');
 margin-left:4px;
 margin-top:7px;
  }
#rosterhead {
 width:301px;
 height:27px;
 background-image:url('images/meettheteam.jpg');
 margin-left:4px;
 margin-top:7px;
  }
#thebg {
 width:287px;
 height:38px;
 background-image:url('images/lmbg.jpg');
 margin-left:4px;
 padding-left:10px;
 color:#545455;
 font-size:9pt;
  }
#loss {
 width:287px;
 height:38px;
 background-image:url('images/loss.jpg');
 margin-left:4px;
 padding-left:10px;
 color:#545455;
 font-size:9pt;
  }
#tie {
 width:287px;
 height:38px;
 background-image:url('images/tie.jpg');
 margin-left:4px;
 padding-left:10px;
 color:#545455;
 font-size:9pt;
  }
#win {
 width:287px;
 height:38px;
 background-image:url('images/win.jpg');
 margin-left:4px;
 padding-left:10px;
 color:#545455;
 font-size:9pt;
  }
 
#open {
 width:287px;
 height:38px;
 background-image:url('images/open.jpg');
 margin-left:4px;
 padding-left:10px;
 color:#545455;
 font-size:9pt;
  }
.lmclass {
color:#78a501;
text-decoration:underline;
}
#lmimg {
 float:left;
 margin-right:20px;
 margin-top:7px;
  }
#lmtext {
 padding-top:12px;
 float:left;
 color:#858684;
  }
#lmscore {
 float:right;
 margin-right:0px;
 padding-top:0px;
 height:37px;
 padding-top:1px;
  }
#lmimg {
 float:left;
 margin-right:10px;
 margin-top:7px;
  }
#lmtext {
 padding-top:12px;
 float:left;
 color:#858684;
 font-size:9pt;
  }
 
#lmtext a:link {color: #78a501; text-decoration: underline;  }
#lmtext a:active {color: #66880d; text-decoration: none; }
#lmtext a:visited {color: #66880d; text-decoration: none; }
#lmtext a:hover {color: #9dcf18; text-decoration: underline; }
#lmscore {
 float:right;
 margin-right:0px;
 padding-top:0px;
 height:37px;
 padding-top:1px;
  }
#rptext {
 padding-top:6px;
 float:left;
 color:#858684;
 font-size:8pt;
  }
#rptext a:link {color: #78a501; text-decoration: underline;  }
#rptext a:active {color: #66880d; text-decoration: none; }
#rptext a:visited {color: #66880d; text-decoration: none; }
#rptext a:hover {color: #9dcf18; text-decoration: underline; }
 
#thebgbot {
 width:288px;
 height:36px;
 background-image:url('images/lmbg.jpg');
 margin-left:4px;
 padding-left:10px;
 color:#545455;
 font-size:9pt;
 border-right:2px solid #515151;
 border-left:1px solid #515151;
 border-bottom:2px solid #515151;
  }
#rosterbg {
 margin-left:4px;
 width:298px;
 height:228px;
 color:#545455;
 background-image:url('images/bg3.jpg');
 padding-left:3px;
  }
#pagewidth { 
 width:936px; 
 text-align:left;  
 margin-left:auto; 
 margin-right:auto;  
 background-image:url('images/bg.jpg');
  } 
/*Border dont change this*/ 
#bg {
 width:1024px;
 margin-left:auto;
 margin-right:auto;
 background-image:url('images/bg.jpg');
  }
/*Navigation*/ 
#headtop {
 position:relative; 
 height:48px; 
 background-image:url('images/headtop.jpg');
 width:100%;
  } 
#nav {
 background-image:url('images/navbg.jpg');
 height:43px;
 width:890px;
 padding-right:23px;
 padding-left:23px;
  }
 
#navfooter {
 background-image:url('images/navbg.jpg');
 height:43px;
 width:890px;
 padding-right:23px;
 padding-left:23px;
  }
#headleft {
 width:374px; 
 float:left; 
 position:relative; 
 font-variant:small-caps;
 padding-top:8px;
 padding-left:19px;
 color:#fff;
 font-size:10pt;
  }
#headleft a:link {color: #66880d; text-decoration:none;  border:0px; }
#headleft a:active {color: #66880d; text-decoration: none;  border:0px; }
#headleft a:visited {color: #66880d; text-decoration: none;  border:0px; }
#headleft a:hover {color: #8cb423; text-decoration: underline;  border:0px; }
ul{
    margin: 0 auto;
    padding: 0;
}
ul.horizontal_list li{
    text-align: left;
    float: left;
    list-style: none
}
 
#home
{ display: block;
  width: 107px;
  height: 23px;
  background: url('images/nav/home.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px; }
#home:hover
{ background: url('images/nav/homero.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px;}
#home span { display: none; border:0px; }
 
#members
{ display: block;
  width: 107px;
  height: 23px;
  background: url('images/nav/teammembers.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px; }
#members:hover
{ background: url('images/nav/teammembersro.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px;}
#members span { display: none; border:0px; }
#latest
{ display: block;
  width: 107px;
  height: 23px;
  background: url('images/nav/latestmatches.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px; }
#latest:hover
{ background: url('images/nav/latestmatchesro.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px;}
#latest span { display: none; border:0px; }
#joinus
{ display: block;
  width: 107px;
  height: 23px;
  background: url('images/nav/joinus.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px; }
#joinus:hover
{ background: url('images/nav/joinusro.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px;}
#joinus span { display: none; border:0px; }
 
#downloads
{ display: block;
  width: 107px;
  height: 23px;
  background: url('images/nav/downloads.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px; }
#downloads:hover
{ background: url('images/nav/downloadsro.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px;}
#downloads span { display: none; border:0px; }
#forums
{ display: block;
  width: 107px;
  height: 23px;
  background: url('images/nav/forums.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px; }
#forums:hover
{ background: url('images/nav/forumsro.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px;}
#forums span { display: none; border:0px; }
#contactus
{ display: block;
  width: 107px;
  height: 23px;
  background: url('images/nav/contactus.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px; }
#contactus:hover
{ background: url('images/nav/contactusro.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px;}
#contactus span { display: none; border:0px; }
#about
{ display: block;
  width: 107px;
  height: 23px;
  background: url('images/nav/about.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px; }
#about:hover{ 
  background: url('images/nav/aboutro.jpg') no-repeat 0 0;
  width:111px;
  height:42px;
  border:0px;}
#about span{ 
 display: none; 
 border:0px; 
  }
/*NAV END*/ 
/*Forms*/ 
#headright{
 float: right; 
 display:inline; 
 position: relative; 
 width:533px;
 padding-top:10px; 
  }
input {
 float:top;
  }
.uname { 
 font-size: 9pt; 
 background-image:url('images/uname.jpg');
 background-repeat:no-repeat;
 width:137px;
 height:19px;
 border:0px;
 padding-left:35px;
 padding-top:3px;
 float:left;
  }
.login { 
 font-size: 9pt; 
 background-image:url('images/login.jpg');
 background-repeat:no-repeat;
 width:57px;
 height:20px;
 border:0px;
 float:left;
 margin-left:11px;
  }
.pass { 
 font-size: 9pt; 
 background-image:url('images/pword.jpg');
 background-repeat:no-repeat;
 width:137px;
 height:19px;
 border:0px;
 padding-left:35px;
 padding-top:3px;
 float:left;
 margin-left:15px;
  }
.pass { 
 font-size: 10px; 
 background-color: #CCCCCC; 
 border: 1px solid #666666; 
  }
/*Header*/ 
#header{
 position:relative; 
 height:160px; 
 background-image:url('images/headimage.gif');
 width:100%;
  } 
/*Left Column*/ 
#leftcol{
 width:185px;
 float:left;
 position:inline;
  }
#leftcol1{
 width:185px;
 height:300px;
 float:left;
 background-image:url('images/ts2block.jpg');
 padding-top:50px;
 padding-left:15px;
 margin-bottom:2px;
 margin-left:3px;
  }
#leftcol2{
 width:185px;
 height:300px;
 float:left;
 background-image:url('images/ts3block.jpg');
 padding-top:50px;
 padding-left:15px;
 margin-bottom:2px;
 margin-left:3px;
  }
 
#leftcol3{
 width:185px;
 height:88px;
 float:left;
 background-image:url('images/time.jpg');
 padding-top:50px;
 padding-left:15px;
 margin-bottom:2px;
 margin-left:3px;
  }
 
 #leftcol4{
 width:185px;
 height:181px;
 float:left;
 background-image:url('images/nocheat.jpg');
 padding-top:40px;
 padding-left:15px;
 margin-bottom:2px;
 margin-left:3px;
  }
 
 #leftcol5{
 width:185px;
 height:211px;
 float:left;
 background-image:url('images/linkus.jpg');
 padding-top:40px;
 padding-left:15px;
 margin-bottom:2px;
 margin-left:3px;
  }
/*Main Column/News*/
#maincol{
 float: right;
 display:inline; 
 position: relative;
 width:730px;
 margin-right:-2px;
  } 
#newstop {
 width:725px;
 height:6px;
 background-image:url('images/newstop.jpg');
 background-repeat:no-repeat;
  }
#newsbot {
 width:725px;
 height:7px;
 background-image:url('images/newsbot.jpg');
 background-repeat:no-repeat;
 margin-bottom:2px;
  }
#news {
 width:718px;
 padding-left:7px;
 padding-top:1px;
 padding-right:0px;
 background-image:url('images/abg.jpg');
 font-weight: bold; 
  }
#newstext {
 width:500px;
 padding-left:100px;
 padding-top:20px;
 color:#858684;
 font-size:9pt;
 font-weight: bold;
 text-align:center;
  }
#hitmap {
 width:597px;
 padding-left:220px;
 padding-top:20px;
 margin:10px;
 color:#858684;
 font-size:9pt;
 font-weight: bold; 
  }
 
 #gametracker {
 width:597px;
 padding-left:200px;
 padding-top:20px;
 color:#858684;
 font-size:9pt;
 font-weight: bold;
  }
 
#flagcounter {
 width:597px;
 padding-left:80px;
 padding-top:20px;
 color:#858684;
 font-size:9pt;
 font-weight: bold; 
  }
#conhead{
 width:710px;
 background-image:url('images/conhead.jpg');
 color:#ffffff;
 height:22px;
 text-align:center;
 font-size:9pt;
 font-weight: bold; 
 padding-top:7px;
  }
#confoot{
 width:699px;
 background-image:url('images/confoot.jpg');
 color:#858684;
 height:20px;
 color:#9a9a9a;
 font-size:10pt;
 margin-left:1px;
 padding-top:9px;
 font-weight: bold; 
 font-size: 9pt;
 margin-top:5px;
 padding-left:5px;
 padding-right:5px;
  }
#confoot a:link {color: #66880d; text-decoration:none;  border:0px; }
#confoot a:active {color: #66880d; text-decoration: none;  border:0px; }
#confoot a:visited {color: #66880d; text-decoration: none;  border:0px; }
#confoot a:hover {color: #8cb423; text-decoration: underline;  border:0px; }
 
/*Footer*/ 
#footer{
 height:29px; 
 background-image:url('images/footer.jpg');
 clear:both;
 text-align:center;
 font-weight:bold;
 font-size:8pt;
 color:#fff;
 padding-top:17px;
 padding-left:9px;
  }
 
#footertop{
 height:8px;
 background-image:url('images/footertop.jpg');
 clear:both;
 /*font-weight:bold;
 font-size:9pt;
 color:#fff;
 padding-top:17px;
 padding-left:9px;*/
  }
.clearfix:after {
 content: "."; 
 display: block; 
 height: 0;
 clear: both; 
 visibility: hidden;
  }
 
.clearfix{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  
 
 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}

this is the html code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head> 
<title>[AA]BlackOps Clan</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" > 
 
 <script type="text/javascript" src="lib/roster.js"></script>
 <script type="text/javascript" src="lib/roster2.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" > 

 <!--[if IE 6]>
 <link rel="stylesheet" type="text/css" href="ie6.css" />
 <![endif]-->
 



</head> 
<body>



<div id="bg" >
<div id="pagewidth" > 

 <!-- Sitename/Description -->
   <div id="headtop" > 
    <div id="headleft" > 
    welcome to <A HREF="">1staarifles.com</a>
   <br><span style="font-size:10pt;color:#545455;">
    where clanning takes a whole new perspective!
        </span>
   </div>
 <!-- Login Form -->
   <div id="headright" >
 <form action="form_action.asp" method="get">
    <input type="text" name="name" class="uname">
    <input type="password" name="pass" class="pass" >
   <input type="submit" value=" " class="login" >
   <a href="#"><img src="images/register.jpg" alt="Register" style="margin-left:12px;" ></a>
 </form> 
   </div>
   </div>

 <!-- Header -->

   <div id="header" >
    </div> 
   <div id="wrapper" style="background-color:#222222;" >
   
<!--fixed images while scroll-->



<a href="http://twitter.com/#!/AACLAN" target="_blank"> <div id="twitter"> </div></a>
<a href="http://steamcommunity.com/groups/www1staariflescom" target="_blank"> <div id="steam"> </div></a>
<a href="http://www.gametracker.com/clan/1staariflesclan" target="_blank"> <div id="game"> </div></a>
<a href="http://www.facebook.com/pages/1stAA-Clan-Community/144231125632392?v=wall" target="_blank"> <div id="facebook"> </div></a>

<div id="fixedimageleft"> </div>
<div id="fixedimageright"> </div>

<!--fixed images end-->   




  <div id="nav">

 <!-- Navigation links -->

   <ul class="horizontal_list">
  <li><a href="index.html" ><span id="home"></span></a></li>
  <li><a  href="roster.html" ><span id="members"></span></a></li>
  <li><a  href="matches.html" ><span id="latest"></span></a></li>
  <li><a  href="join.html" ><span id="joinus"></span></a></li>
  <li><a  href="downloads.html" ><span id="downloads"></span></a></li>
  <li><a  href="forums.html" ><span id="forums"></span></a></li>
  <li><a  href="contact.html" ><span id="contactus"></span></a></li>
  <li><a  href="about.html" ><span id="about"></span></a></li>
   </ul>
 </div>
 
 <hr>


        <!-- SCROLL DOES NOT TAKE MORE THAN 219 CHARACTERS AND CANNOT BE MORE THAT 17PX 15 IS DEFAULT -->

        <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();"><div id="y">Thank you for visiting 1ST[AA] Clan Website = HOSTING: BlackOps [AA]MIXED/TDM/HC IP: 173.199.80.6:3074 = COD4 [AA]RIFLES MIXED/TDM/HC IP: 180.92.199.98:29079 = 1ST[AA] IS NOW RECRUITING MEMBERS AND ADMINS, APPLY TODAY! </div></marquee>



        <hr>

 <!-- Latest Matches -->

 <div id="latestmatch" >
  <div id="latestmatchhead"></div>
   <div id="win">
 <!-- Win/Loss/Tie- Change the div to win/loss/tie for whichever you desire  -->
  <div id="lmimg"><img src="images/cod4.jpg" alt=""> </div>
   <div id="lmtext"> 
 <!-- Your team/who you vs -->
    <a href="#">1stAA</a> vs <a href="#">SG</a></div>
 </div>

   <div id="loss">
 <!-- Win/Loss/Tie- Change the div to win/loss/tie for whichever you desire  -->
  <div id="lmimg"><img src="images/cod4.jpg" alt=""> </div>
   <div id="lmtext">
 <!-- Your team/who you vs -->
    <a href="#">1stAA</a> vs <a href="#">SG</a></div>
 </div>
   <div id="tie">
 <!-- Win/Loss/Tie- Change the div to win/loss/tie for whichever you desire  -->
  <div id="lmimg"><img src="images/bops.jpg" alt=""> </div>
   <div id="lmtext"> 
 <!-- Your team/who you vs -->
    <a href="#">1stAA</a> vs <a href="#">SG</a></div>
 </div>
   <div id="open">
 <!-- Win/Loss/Tie- Change the div to win/loss/tie for whichever you desire  -->
  <div id="lmimg"><img src="images/Generator.jpg" alt=""> </div>
   <div id="lmtext"> 
 <!-- Your team/who you vs -->
    <a href="#">1stAA</a> vs <a href="#">OPEN</a></div>
 </div>
   <div id="open">
 <!-- Win/Loss/Tie- Change the div to win/loss/tie for whichever you desire  -->
  <div id="lmimg"><img src="images/Generator.jpg" alt=""> </div>
   <div id="lmtext"> 
 <!-- Your team/who you vs -->
    <a href="#">1stAA</a> vs <a href="#">OPEN</a></div>
 </div>
   <div id="open" style="border-bottom:2px solid #1c1c1c;">
 <!-- Win/Loss/Tie- Change the div to win/loss/tie for whichever you desire  -->
  <div id="lmimg"><img src="images/Generator.jpg" alt=""> </div>
   <div id="lmtext"> 
 <!-- Your team/who you vs -->
    <a href="#">1stAA</a> vs <a href="#">OPEN</a></div>
 </div>
 </div>

 <!-- Forum Posts -->
  <div id="meettheteam" >
   <div id="shoutout"></div>
    <div id="rosterbg" >
     <div style="height:196px;">
  <div id="rosterimg">
 
 
 <!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="aashout" src="" width="200" height="200" frameborder="0" scrolling="auto">

</iframe>
<!-- End ShoutMix -->



                  </div>
   </div>
               </div>
 <!-- Don't change this unless you know what your doing (edit the javascript) -->


  </div>
  <div id="meettheteam" >
   <div id="rosterhead"></div>
    <div id="rosterbg" >
     <div style="height:196px;">
  <div id="rosterimg">
 
 
 <style>
.messagestyle{
 font-family:Arial;
 font-size:11px;
 color:white;
 background-color:black;
 text-align:center;
 position:absolute;
 bottom:0px;
 vertical-align:middle;
 margin:0px;
 line-height:15px;
 height:17px;
}

</style>
<script>

var pictures = [
    { src : 'images/stone.gif',
      msg : '1ST{AA}STONEWALL',
      url : ''
    },
    { src : 'images/swifty.gif',
        msg : '1ST{AA}SWIFTY',
        url : ''
    },
    { src : 'images/goo.jpg',
        msg : '1ST{AA}GOO',
        url : ''
    },
    { src : 'images/spinkta.jpg',
        msg : '1ST{AA}SPINKTA',
        url : ''
    },
    { src : 'images/anth.jpg',
        msg : '1ST{AA}ANTH',
        url : ''
    }
];

// target of the picture-links ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame")
var target_url="_blank"

// number of lamellas.
var x_slices=10

// width of slideshow
var slideshow_width=222

// height of slideshow
var slideshow_height=160

// height of messagebox
var message_height=17

// pause beween the pictures (seconds)
var pause=.5
// - End of JavaScript - -->


</script>


<script src="js/slideshow-lamellar.js"></script>



</div>
   </div>
 <!-- Don't change this unless you know what your doing (edit the javascript) -->
     <div id="rosterData">Hover over a player to see profile</div>
 </div>
  </div>

 <!-- Main Content -->
   <div id="maincol" > 
  <div id="newstop">
    </div>
  <div id="news">
   <div id="conhead">
 <!-- Your Header Text -->
                Welcome to the 1st Airborne Assault Rifles clan website

   </div>
  <div id="newstext">
 <!-- Your Body Content -->




<P>

Please make yourself familiar with the rules and conduct expected from players on 1st{AA}Rifles servers. It is your responsibility to know the rules, failure to do so may get you kicked or banned from the server/s.


Cursing on the server will be tolerated as long as it not excessive and does not the involve the verbal abuse of other players or admins. In light of this, it would be preferred if you could keep the language as clean as possilbe. Bullying and racial or sexual slurs will not be tolerated. 

We expect the rules to be observed in order to keep the servers free from offensive matter. Admins are present who will enforce the rules by various means. Complete disregard for the rules or direspect toward the server or its admins will eventuate in a Permanent BAN. 

We have ZERO tolerance for Hackers. Hacks are for losers who have no skill or just like to spoil fun for others, that is not exceptable, so leave them OFF!  

Hackers will be BANNED without warning.

If you get banned and feel that the admin has made a mistake, please go to Banned Players forum and post your case. Your case will be reviewed asap. 

Enjoy your time on the servers and treat others as you would have them treat you.



</P>
<P>

</P><BR >


 <!-- Your Body Content - END -->
  </div>

    <div id="confoot">
 <!-- Posted By -->

  Posted by: <a href="#">Swifty</a> on 12-13-10

  <div style="float:right;">
 <!-- Comments -->

  <!-- (<a href="#"> </a>) -->

  </div>
  </div>
  </div>
  
  
  <div id="newsbot">
   </div>
  <div id="newstop">
    </div>
  <div id="news">
   <div id="conhead">
 <!-- Your Header Text -->

               [AA] Game/Server tracker

   </div>
  <div id="gametracker">
 <!-- Your Body Content -->
 
 
 <a href="http://www.gametracker.com/server_info/173.199.80.6:3074/" target="_blank"><img src="http://cache.www.gametracker.com/server_info/173.199.80.6:3074/b_160_400_0_56E60F_020A00_56E60F_273611_1_1_0.png" border="0" width="160" height="364"  alt="" /></a>


        <a href="http://www.gametracker.com/server_info/180.92.199.98:29079/" target="_blank"><img src="http://cache.www.gametracker.com/server_info/180.92.199.98:29079/b_160_400_2_ffffff_c5c5c5_ff9900_000000_1_1_0.png" border="0" width="160" height="364"  alt="" /></a>



<P>

</P>
<P>

</P><BR >



 <!-- Your Body Content - END -->
  </div>

    <div id="confoot">
 <!-- Posted By -->

  Posted by: <a href="#">Swifty</a> on 12-13-10

  <div style="float:right;">
 <!-- Comments -->

  <!-- (<a href="#"> </a>) -->

  </div>
  </div>
  </div>
  
  




 <div id="newsbot">
   </div>
  <div id="newstop">
    </div>
  <div id="news">
   <div id="conhead">
 <!-- Your Header Text -->

               [AA] HitMap Counter

   </div>
  <div id="hitmap">
 <!-- Your Body Content -->


 <a href="http://www.hit2map.com/myspace_map/lymye6q0"><br />
<img border="0" src="http://www.hit2map.com/maps/lymye6q0.jpg" alt="" /> </a><br />
 <a href=""></a>


<P>

</P>
<P>

</P><BR >



 <!-- Your Body Content - END -->
  </div>

    <div id="confoot">
 <!-- Posted By -->

  Posted by: <a href="#">Swifty</a> on 12-13-10

  <div style="float:right;">
 <!-- Comments -->

  <!-- (<a href="#"> </a>) -->

  </div>
  </div>
  </div>
  
  
  <div id="newsbot">
   </div>
  <div id="newstop">
    </div>
  <div id="news">
   <div id="conhead">
 <!-- Your Header Text -->

               [AA] HitMap Counter

   </div>
  <div id="flagcounter">
 <!-- Your Body Content -->
 
 
 <a href=""><img alt="free counters" border="0" src="http://s03.flagcounter.com/count/X18/bg=330000/txt=EEEEEE/border=330000/columns=6/maxflags=64/viewers=1st+Airborne+Assault+Rifles+Clan+Flag+Counter/labels=1/pageviews=1/" /></a>


<P>

</P>
<P>

</P><BR >



 <!-- Your Body Content - END -->
  </div>

    <div id="confoot">
 <!-- Posted By -->

  Posted by: <a href="#">Swifty</a> on 12-13-10

  <div style="float:right;">
 <!-- Comments -->

  <!-- (<a href="#"> </a>) -->

  </div>
  </div>
  </div>



 <div id="newsbot">
   </div>
 </DIV>

 <!-- Left Columns -->
   <div id="leftcol" >
  <div id="leftcol1">
 <!-- teamspeak 2 -->


        <a href="" target="_blank"><img src="http://www.tsviewer.com/promotion/dynamic_sig/sig.php/clan160x283_codbo/942690.png" alt="[AA] - PUB TS2 TeamSpeak Viewer" title="[AA] - PUB TS2 TeamSpeak Viewer" border="0" /></a>

  </div>

 <!-- teamspeak 3 -->
   <div id="leftcol2">


        <a href="" target="_blank"><img src="http://www.tsviewer.com/promotion/dynamic_sig/sig.php/clan160x283_codbo/942737.png" alt="[AA] - PUB TS3 TeamSpeak Viewer" title="[AA] - PUB TS3 TeamSpeak Viewer" border="0" /></a>
   </div>
   
   <!-- no cheat logo -->
   <div id="leftcol4">
                      <div style="text-align: center;">


        <img src="images/cheat.gif" alt="[AA] IS A NO CHEATING CLAN" title="[AA] rebukes hackers and cheaters. Know someone who cheats? REPORT THEM to us know in our forums!" border="0" /></a>
   </div>
   </div>

   <!-- Time of day -->
   <div id="leftcol3">
         <div style="text-align: center;">


         <script src=""></script><script type="text/javascript" language="JavaScript">obj=new Object;obj.clockfile="5012-black.swf";obj.TimeZone="GMT1000";obj.width=151;obj.height=50;obj.wmode="transparent";showClock(obj);</script>   </div>

            </div>
 </div>
 
 <!-- link to us -->
   <div id="leftcol5">
                      <div style="text-align: center;">


<div style="width: 144px; padding: 8px; margin: 16px 0 0 0; background-color:#3e4433; text-align: center; border: 2px solid #7c7b69;">
 <p><b>LINK TO US</b></p>
 <br/>

                   <img title="[AA] Clan" alt="[AA] Clan" src="images/linkus.gif"/>

 <br/><br/>
 <textarea style="font-size: 11px;" cols="11" rows="4">
 &lt;a href="" target="_blank"&gt;&lt;img title="[AA] Clan" alt="[AA] Clan" border="0" src="images/linkus.gif"/&gt;&lt;/a&gt;
 </textarea>
</div>
   </div>
   </div>

 <!-- Footer -->
     <div id="footertop" ></div>
 


         <!-- Navigation links -->
         
              <div id="navfooter">

   <ul class="horizontal_list">
  <li><a href="index.html" ><span id="home"></span></a></li>
  <li><a  href="roster.html" ><span id="members"></span></a></li>
  <li><a  href="matches.html" ><span id="latest"></span></a></li>
  <li><a  href="join.html" ><span id="joinus"></span></a></li>
  <li><a  href="downloads.html" ><span id="downloads"></span></a></li>
  <li><a  href="forums.html" ><span id="forums"></span></a></li>
  <li><a  href="contact.html" ><span id="contactus"></span></a></li>
  <li><a  href="about.html" ><span id="about"></span></a></li>
   </ul>
 </div>


  <div id="footer" >
Copyright 2011 (C) 1stAArifles.com, All Rights Reserved. Designed by <a href="http://zachflynn.com/" target="_blank" >Zach Flynn</a>. Customization, edits and additions by Swifty and Goo of <a href="" target="_blank" >1stAArifles.com</a>
  </div> 

 </div>
 </div></div></div></div></div>


</body> 
</html>

html-css user-interface web-design

Edited 15 Years Ago by PRYMA because: n/a

3 Contributors
3 Replies
198 Views
4 Days Discussion Span
Latest Post 15 Years Ago Latest Post by teedoff

Dani AI

Generated 7 Months Ago

Short diagnosis — the side graphics are fixed to the viewport using hard pixel offsets, so they don't track the centered page when viewers use different resolutions. As noted, a fixed coordinate (for example “500px from the top”) stays 500px from the viewport edge regardless of where the centered content sits. A practical, robust pattern is to keep a small fixed container centered on the viewport (matching the site’s content width) and position the decorative images absolutely inside that container so they move with the layout while still remaining fixed during scrolling.

Example (keep IDs/classes different from the original code and place these elements at the top-level of the body):

<div class="fixed-side-root">
  <a class="social side-left"  href="#" aria-label="Left decoration"></a>
  <a class="social side-right" href="#" aria-label="Right decoration"></a>
</div>

.fixed-side-root{
  position:fixed;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:770px;        /* match centered content width */
  height:100%;
  pointer-events:none;/* allow clicks through the outer area */
  z-index:50;
}
.social{
  position:absolute;
  top:70px;
  width:300px;
  height:588px;
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:auto; /* make the anchors clickable */
}
.side-left  { left:-320px;  background-image:url('path/to/left-soldier.png');  }
.side-right { right:-320px; background-image:url('path/to/right-soldier.png'); }
@media (max-width:1100px){ .fixed-side-root{ display:none; } }

Notes and quick tips: ’s absolute-position approach can work for a fixed layout, but it either stops being fixed while scrolling (if placed in the document flow) or still needs large pixel offsets. The fixed‑container pattern keeps the visual alignment tied to the centered content and is easier to scale: switch the container’s width to a percent/max-width for a responsive layout, use background-size or max-width:100% on <img> so the artwork scales, and add media queries to hide or reduce the side art on narrow screens. Also avoid wrapping block <div>s in anchors under an HTML4 Strict doctype — make the anchor itself the block (or update to HTML5) so markup stays valid.

All 3 Replies

Arkinder 93 Posting Pro in Training

15 Years Ago

They're moving because 500px from the top is 500px from the top. Try a fluid style of positioning them.

Regards, Arkinder

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

PRYMA 0 Newbie Poster · Answer 1 · 2011-01-12T11:34:28+00:00

PRYMA 0 Newbie Poster

15 Years Ago

? not sure if i follow what your saying?

teedoff 3 Posting Pro · Answer 2 · 2011-01-12T22:52:08+00:00

This seems to work for your fixedimageright div.

#fixedimageright {
         background-image: url("images/soldier2.png");
         float: right;
         height: 588px;
         width: 300px;
         margin-left: 900px;
         position: absolute;
         top: 125px;
}

Only tested in FF.

fixed images, website resolution resize

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers