Hi, i am in the middle of creating my new website, i have just started with the logo/topbar section however i am running into trouble with resolution and positioning. What i want is for all the elements to stay where they are, when the user zooms in and out. However at the moment when i zoom in they all collide in together and overlap rather than creating a horizontal scrollbar.
Here is the html
<!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 href="css/layout.css" rel="stylesheet" type="text/css" />
<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>
</head>
<body onload="MM_preloadImages('images/logoHover.png','images/marketHover.png','images/kingdomHover.png','images/supportHover.png','images/questSelectedHover.png')">
<div id="topBar">
<div id="logo"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/logoHover.png',1)"><img src="images/logo.png" name="Image8" width="168" height="36" border="0" id="Image8" /></a></div>
<div id="right">
<div class ="selectedNav"><img src="images/questsSelected.png" width="53" height="40" /></div>
<div><a href="index.html"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/marketHover.png',1)"><img src="images/market.png" name="Image9" width="58" height="15" border="0" id="Image9" /></a></a></div>
<div><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/kingdomHover.png',1)"><img src="images/kingdom.png" name="Image10" width="66" height="15" border="0" id="Image10" /></a></div>
<div><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/supportHover.png',1)"><img src="images/support.png" name="Image11" width="59" height="15" border="0" id="Image11" /></a></div>
<div class ="lineBreak"></div>
<div class ="mainButtonHome"><img src="images/castleHome.png" width="41" height="32" /></div>
<div class ="mainButton"><img src="images/settings.png" width="38" height="30" /></div>
<div class ="mainButton"><img src="images/logout.png" width="41" height="35" /></div>
</div><!--- end right--->
</div><!--- end topBar--->
<div class="wrapper"></div><!--- end wrapper--->
</body>
</html>And here is the css
/* CSS Document */
@charset "utf-8";
html {
overflow-y: scroll;
overflow-x: auto;
}
body {
margin: 0;
padding: 0;
background-image: url(../images/bg.png);
background-repeat: repeat;
}
#topBar {
background-image: url(../images/topBar.png);
background-repeat: repeat-x;
height: 50px;
width: 100%;
margin:0 auto;
}
.wrapper {
margin:0 auto;
width:1000px;
border: thick dotted #000;
height: 788px;
}
#logo {
float: left;
background-repeat: no-repeat;
height: 50px;
width: 200px;
margin-left: 150px;
padding-top: 10px;
}
#right {
right: 0;
top: 3px;
height: 45px;
vertical-align: top;
margin-right: 120px;
position: absolute;
}
#right > div {
float: left;
font-size: 12px;
color: #82a43d;
text-transform: uppercase;
font-weight: bold;
margin-top: 15px;
margin-right: 0;
margin-bottom: 0;
margin-left: 15px;
}
#right .selectedNav {
margin-top: 1px;
}
.lineBreak {
background-image: url(../images/lineBreak.png);
background-repeat: no-repeat;
margin-right: 20px;
margin-left: 20px;
height: 24px;
width: 3px;
}
#right .mainButton {
margin-top: 5px;
margin-right: 3px;
}
#right .mainButtonHome {
margin-top: 5px;
margin-right: 3px;
margin-left: 70px;
}The objects which collide in together are the right and logo divs. The wrapper on the other hand is working fine and stays in position.
Any ideas?
Thanks for the help.