PDA

View Full Version : fixed images, website resolution resize


pryma
01-08-2011, 06:53 AM
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 http://1staarifles.clanservers.com 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.

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;}
}



INDEX.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="http://www.hit2map.com/myspace_map/lymye6q0"><br (http://www.1staarifles.com) />
<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="http://www.clocklink.com/embed.js"></script><script (http://s03.flagcounter.com/more/X18) 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="http://www.1staarifles.com" 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="http://www.1staarifles.com" target="_blank" >1stAArifles.com</a>
</div>
</div>
</div></div></div></div></div>

</body>
</html>

pryma
01-08-2011, 05:25 PM
bump anyone?

gentleone
01-08-2011, 06:02 PM
the fixed images that are on the side.. the soldiers and the links are not aligned to the website evenly on each side.
I see only on the left a soldier, but if you use position:fixed for what you want it's darn hard to align it with the rest of your site... especially with the different screen-resolutions out there like you've noticed yourself.
You have to rethink your layout, because like you have it now with fixed divs it's not possible.

pryma
01-08-2011, 06:12 PM
i have tried to use the absolute value and they see to stay inthe same place but it will still mve withthe resizing.

gentleone
01-08-2011, 06:24 PM
i have tried to use the absolute value and they see to stay inthe same place but it will still mve withthe resizing.
No, that won't work either.

If you have set an image as a background to a div in your CSS, you can't control the proportion of the image to the different screen resolutions, so basically what you want to achieve is not possible with HTML4 and CSS. It could possibly be done with Flash or HTML5 (canvas tag), but then those soldiers should be vector (svg) graphics.

pryma
01-08-2011, 06:58 PM
I dont mind workign hard to fix this dilemma i just need to be pnted in the right direction on where to start. How would i go about starting this in flash or html5? cant it be dont with some javascripts and php?

pryma
01-08-2011, 07:13 PM
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 http://1staarifles.clanservers.com (http://1staarifles.clanservers.com/) 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.


get the CSS and HTML files here http://1staarifles.clanservers.com


theones i posted are wrong get these please

pryma
01-08-2011, 07:28 PM
[quote=pryma;188394]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 http://1staarifles.clanservers.com 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.