Navbar Help

mkenz125 · 01-16-2013, 11:01 PM

Hi,

I am a newb coder and have built a site but am having issues with different browsers and window sizes. Whenever I resize the browser windows I am no longer able to click the links on the nav bar. Is there some way to lock the links to the nav bar even when I resize? Here is the link and the code:

http://www.thepioneers.tv

Thanks in advance!

Code:

<link href="Pioneers.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>
<link href="favicon.ico" rel="Shortcut Icon" />
</head>

<body onload="MM_preloadImages('Media/buttons/treatmentdown.png','Media/buttons/teaserdown.png','Media/buttons/episodesdown.png','Media/buttons/charactersdown.png','Media/buttons/contactdown.png')">
<div id="title"></div>
<div class="box1">
		<a id="box-link" href="index.html"></a>
		</div></div>
<div id="navbar">
<a href="treatment.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('treatment','','Media/buttons/treatmentdown.png',1)"><img src="Media/buttons/treatmentup.png" name="treatment" width="150" height="60" border="0" id="treatment" /></a>
<a href="teaser.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('teaser','','Media/buttons/teaserdown.png',1)"><img src="Media/buttons/teaserup.png" name="teaser" width="110" height="60" border="0" id="teaser" /></a>
<a href="episode.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('episode','','Media/buttons/episodesdown.png',1)"><img src="Media/buttons/episodesup.png" name="episode" width="150" height="60" border="0" id="episode" /></a>
<a href="character.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('character','','Media/buttons/charactersdown.png',1)"><img src="Media/buttons/charactersup.png" name="character" width="160" height="60" border="0" id="character" /></a>
<a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','Media/buttons/contactdown.png',1)"><img src="Media/buttons/contactup.png" name="contact" width="150" height="60" border="0" id="contact" /></a></div>

mkenz125 · 01-17-2013, 12:25 AM

I also think I fudged the other pages because whenever I resize the window (say for ipad size) the images that are anchored to the bottom stay the same size while the window shrinks.

L0adOpt1c · 01-17-2013, 03:16 PM

First: I would suggest an external JavaScript sheet.
Second: Have you validated?
Third: I tested it in Chrome and it works fine, resizing and all. What issue specifically is it? Is it a certain browser that is acting up? Or a platform?