Navigation not working HTML5 CSS3

nomadrw · July 18, 2013

Greetings everyone:

I'm new to HTML5 and CSS3 and I can not figure out why my Navigation is not working.

Note I have a link for Motelakura (H1 tag) and when you place the cursor over it the Hand does not shop up unless you have it on the top part of the wording. Did that make any sense.

If you need all the css coding please let me know.

Any help would be great. Thanks in advance.



<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />


<script language="JavaScript" 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('buttons/home_over.jpg','buttons/about_us_over.jpg','buttons/directions_over.jpg','buttons/contact_us_over.jpg','buttons/things_to_over.jpg')">


<!-- header-wrap -->

<div id="header-wrap">

    <header>


        <hgroup>

            <h1><a href="index.html">Motelakura</a></h1>

            <h3>Hours: 24 hours a day, seven days a week

          </h3>

        </hgroup>


        <nav>

            <ul>

              <li><img src="buttons/ends.jpg" width="60" height="36" /></li>

              <li><a href="index.html"><img src="buttons/home.jpg" alt="Home Page" name="home" width="126" height="36" border="0" id="home" onMouseOver="MM_swapImage('home','','buttons/home_over.jpg',1);MM_swapImgRestore()" /></a></li>

              <li><a href="about_us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about_us','','buttons/about_us_over.jpg',1)"><img src="buttons/about_us.jpg" alt="About Us" name="about_us" width="126" height="36" border="0" id="about_us" /></a></li>

              <li><a href="directions.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('directions','','buttons/directions_over.jpg',1)"><img src="buttons/directions.jpg" alt="Directions to" name="directions" width="126" height="36" border="0" id="directions" /></a></li>  

              <li><a href="contact_us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact us','','buttons/contact_us_over.jpg',1)"><img src="buttons/contact_us.jpg" alt="Contact Us" name="contact us" width="126" height="36" border="0" id="contact us" /></a></li> 

              <li><a href="attractions.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Things_to_do','','buttons/things_to_over.jpg',1)"><img src="buttons/things_to.jpg" alt="Thing to do in LA county" name="Things_to_do" width="126" height="36" border="0" id="Things_to_do" /></a></li>        

              <li><img src="buttons/ends.jpg" width="60" height="36" /></li>

            </ul>

</nav>  

</header></div>

here is the css3



/* ------------------------------------------------------

    STRUCTURE

--------------------------------------------------------- */

#header-wrap {

    width: 100%;

    height: 70px;

    z-index: 99999;

   /* position: fixed;*/

    top: 0;

    left: 0;

}

header {

    position: relative;

    width: 900px;

    height: 70px;

    margin: 0 auto;

}



/* -------------------------------------------

    Header

-------------------------------------------- */


/* Logo */

header hgroup {

	position: absolute;

	background: url(../images/header.jpg) no-repeat;

	height: 142px;

	width: 307px;

	display: block;

	top: 18px;

	left: 2px;

}

header hgroup h1 a {

    margin-top: 40px;

				margin-left: 5px;

				margin-bttom: 15px;

				/*text-indent: -9999em;*/

    display: block;

    height: 45px;

    width: 300px;

}


header hgroup h3  {

	   margin-top: 25px;

   /* text-indent: -9999em;*/


    height: 14px;

				font-size: 12px;

}


/* Main Navigation */

header nav  {

    float: left;

    margin-top: 155px;


}

header nav ul  {

   	width: 900px;

    padding: 0;

    list-style: none;


}

header nav ul li {

    float: left;


}

Sign In

Navigation not working HTML5 CSS3

Recommended Posts

nomadrw

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information