Shadowsong
Game Developer & Graphic Designer
- Joined
- Feb 23, 2010
- Messages
- 3,446
- Solutions
- 21
- Reaction score
- 3,001
- Location
- Bosnia & Herzegovina
- YouTube
- ShivaShadowsong
Hi! I've recently been re-designing the layout for my server's website and we're also using an entrance index page (before you get to the actual website content). However, I encountered a problem here. The page consists of 4 buttons aligned over a background which look completely fine in 1024x768 and lower resolutions. However, on bigger resolutions, the background shrinks in (which is fine), while the buttons don't - they actually stray to the left, thus becoming misplaced in comparison to their original position.
1024x768: see picture
Bigger: see picture
Even more bigger: see picture
Now, I searched google and stuff already, read about it a little, and it turns out that you have to define the positions in <div>'s or css styled elements in which you insert those buttons to make their position become the one you defined, however I've never before worked with such stuff and it would take me some time to learn how to do it which I don't have right now, and that's why I'm asking on OTLand - is there anyone who can help me or at least give direct explanation how to solve this problem?
If you want to see the site for yourself, see necronia.com, and the index.html is here:
1024x768: see picture
Bigger: see picture
Even more bigger: see picture
Now, I searched google and stuff already, read about it a little, and it turns out that you have to define the positions in <div>'s or css styled elements in which you insert those buttons to make their position become the one you defined, however I've never before worked with such stuff and it would take me some time to learn how to do it which I don't have right now, and that's why I'm asking on OTLand - is there anyone who can help me or at least give direct explanation how to solve this problem?
If you want to see the site for yourself, see necronia.com, and the index.html is here:
HTML:
<html>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<body>
<title>Necronia NW</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="yes">
<style type="text/css">
html {height:100%;}
body {width:100%; margin:0; padding:0; text-align:center; background:#000 url('backgroundpage.png') no-repeat center;}
#bg {position:fixed; top:5; left:3; width:100%; height:95%;}
</style>
<a href="http://necronia.freeforums.org" target="_blank" onMouseDown="MM_swapImage('ForumButton','','ForumButton_Pressed.png',1)" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ForumButton','','ForumButton_onRollOver.png',1)">
<img src="ForumButton.png" alt="NNW Forum" width="201" height="55" id="ForumButton"
style="position: absolute; left: 40.5%; top: 18%" /></a>
<a href="http://www.facebook.com/necronia" target="_blank" onMouseDown="MM_swapImage('FaceButton','','FaceButton_Pressed.png',1)" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('FaceButton','','FaceButton_OnRollOver.png',1)">
<img src="FaceButton.png" alt="Necronia's Facebook Page" width="201" height="55" id="FaceButton"
style="position: fixed; left: 15.05%; top: 18%" /></a>
<a href="http://www.youtube.com/user/NecroniaNW/videos" target="_blank" onMouseDown="MM_swapImage('YTButton','','YTButton_Pressed.png',1)" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('YTButton','','YTButton_OnRollOver.png',1)">
<img src="YTButton.png" alt="Necronia's Videos" width="201" height="55" id="YTButton"
style="position: fixed; left: 65.25%; top: 18%" /></a>
<a href="index2.php" target="_blank" onMouseDown="MM_swapImage('EW','','EW_pressed.png',1)" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('EW','','EW_roll.png',1)">
<img src="EW.png" alt="Enter World" width="450" height="95" id="EW"
style="position: absolute; left: 27.50%; top: 73%" /></a>
</body>
</html>
Last edited:
