Help with nav!
i'm first 1 admit have no business in dreamweaver. i'm building webpage class assignment (an international affairs class, not web class).
i have sidebar thing on left, , want @ 100% height, putting in height: 100%; doesn't seem working, set @ fixed height doesn't work when view in different sized screens. love if text links scroll page.
any amazing!!
the website is: http://eagle1.american.edu/%7eaa6807a/tana.html
here's code:
<html>
<head>
<title>inventory of conflict , 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>
remove height property. it's wrong thing 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 sticky menu, need use position:fixed.
example: http://alt-web.com/templates/fixedlayout.shtml
view source in browser see code.
more importantly, menu html code invalid. change have 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 going need more work, too. let's tackle 1 thing @ time.
nancy o.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment