Skip navigation
Currently Being Moderated

Help with nav!

Apr 29, 2013 11:08 AM

Tags: #help #website #html #dreamweaver #scroll #code #height #nav #sidebar

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:


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>




  • Currently Being Moderated
    Apr 29, 2013 11:29 AM   in reply to aileenmarie98248

    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.


    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.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points