Skip navigation
aileenmarie98248
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: 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>

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

    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.

     
    |
    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