1 Reply Latest reply: Apr 29, 2013 11:29 AM by Nancy O. RSS

    Help with nav!


      I'm the first one to admit that I have no business in dreamweaver. I'm building a webpage for a class assignment (an international affairs class, not a web class).


      I have a sidebar thing on the left, and I really want it to be at 100% height, but putting in height: 100%; doesn't seem to be working, so I just set it at a fixed height which doesn't work when you view it in different sized screens. I also would love it if the text links would scroll with the page.


      Any help would be amazing!!


      The website is: http://eagle1.american.edu/%7Eaa6807a/tana.html


      Here's my code:




      <TITLE>Inventory of Conflict and Environment (ICE), Template</TITLE>

      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

      <style type="text/css">

      body {

                background-color: #FFF;





                color:#FFFFFF; size:+2; font-family:Arial, Helvetica, sans-serif;








                color:#FFFFFF; font-size:16px; font-family:Arial, Helvetica, sans-serif;










                font-family:Arial, Helvetica, sans-serif;








                background-color: #006699;

                box-shadow: 0 0 5px #888888;

                float: left;

                height: 10300px;

                margin-right: 10px;

                width: 200px;

                -moz-box-shadow: 0 0 5px #888;

                -webkit-box-shadow: 0 0 5px#888;

                box-shadow: 0 0 5px #888;

                page-break-before: auto;

                page-break-after: auto;

                padding: 5px;



















                          border-bottom:#0CF solid 7px;


      #content p {

                font-family: Arial, Helvetica, sans-serif;


      #content {

                font-family: Arial, Helvetica, sans-serif;




      a:link {

                color: #000033;


      a:visited {

                color: #999999;


      body,td,th {

                color: #000000;

                font-family: Arial, Helvetica, sans-serif;


      #content p font {

                font-family: Arial, Helvetica, sans-serif;


      .style1 {font-family: Arial, Helvetica, sans-serif}

      .style4 {color: #000000}

      .style6 {

                font-family: Arial, Helvetica, sans-serif;

                font-size: x-large;


      .style7 {color: #003E5B}



      <body alink="#CCCCCC" leftmargin="5" topmargin="5" marginwidth="5" marginheight="5">

      <div id="container">

      <div id="nav">



      <h2>ICE Case Studies </h2>

      <h1> Number 274, April, 2013</h1>


      <a href="#r1"><li> I. Case Background</li></a>

      <a href="#r2"><li> II. Environment Aspect</li></a>

      <a href="#r3"><li> III. Conflict Aspect</li></a>



      <a href="#r4"><li> IV. Env. - Conflict Overlap </li></a>

      <a href="#r5"><li> V. Related Information </li>






        <p><a href="#r5"><font face="Verdana, Arial, Helvetica, sans-serif"><a href="tana2.html"><span class="style6">Resources</span></a><br>




        • 1. Re: Help with nav!
          Nancy O. MVP

          Remove the height property.  It's the wrong thing to do.


          For Equal Height CSS Columns, See option #2 Faux Columns (the simplest) or Option #5 PVII's JavaScript below:



          To create a sticky menu, you would need to use position:fixed.

          Example:  http://alt-web.com/TEMPLATES/FixedLayout.shtml

          View source in browser to see the code.


          More importantly, your menu HTML code is invalid.  Change what you have now to this:



          <li><a href="#r1">I. Case Background</a></li>

          <li><a href="#r2">II. Environment Aspect</a></li>

          <li><a href="#r3">III. Conflict Aspect</a></li>

          <li><a href="#r4">IV. Env. - Conflict Overlap</a></li>

          <li><a href="#r5">V. Related Information</a></li>



          Your menu CSS code is going to need some more work, too.  But let's tackle one thing at a time.



          Nancy O.