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

    Help with nav!

    aileenmarie98248

      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:

       

      <html>

      <head>

      <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;

      }

       

       

      h2{

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

                padding:5px;

                text-align:center;

       

      }

       

       

      h1{

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

                font-weight:200;

                padding:10px;

                text-align:center;

      }

       

       

      li{

       

                color:#FFF;

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

                font-size:16px;

                padding:5px;

       

      }

       

       

      #nav{

                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;

      }

       

       

      #container{

       

                width:960px;

      }

       

       

      #content{

                float:left;

                position:absolute;

                padding-right:25px;

       

       

                margin-left:250px;}

       

                .lines{

                          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}

      </style>

      </head>

      <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>

      <ul>

      <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>

      </a>

      </ul>

       

       

      <blockquote>

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

        </p>

      </blockquote>

      </div>

        • 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:

          http://alt-web.com/Articles/Equal-Height-CSS-Columns.shtml

           

          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:

           

          <ul>

          <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>

          </ul>

           

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

           

           

          Nancy O.