| View previous topic :: View next topic |
| Author |
Message |
ln724
Joined: 22 Nov 2008
Posts: 3
|
| Posted: Sat Nov 22, 2008 6:53 am nav bar |
|
|
| I copied and pasted CSS code that has a left hand nav bar (light blue) and the body is white. Even though I have the height at 100%, the nav bar (light blue) doesn't continue down the whole page- it stops and the white takes over. How do I make the nav bar continue down the page to match the content in the body??? |
|
|
sticks464
Joined: 31 Dec 2006
Posts: 1283
|
| Posted: Sat Nov 22, 2008 8:52 am |
|
|
| Post your html and css code so we can take a look. From just what you have described you will need to use a faux layout. |
|
|
ln724
Joined: 22 Nov 2008
Posts: 3
|
| Posted: Sat Nov 22, 2008 9:31 am nav bar |
|
|
here is the css code that is in the style sheet i created
Code:
body
{
margin: 0;
padding: 0;
font-family: georgia, times, "times new roman", serif;
color: #000;
background-color: #ddd;
}
#container
{
margin: 1em 5%;
background-color: #FFF;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
border: 1px solid #333;
}
#banner
{
background-color: #FFFF66;
border-bottom: 1px solid #333;
}
#banner h1
{
margin: 0;
padding: .5em;
}
#nav
{
float: left;
width: 160px;
height: 100%;
margin-left: 0px;
background-color: #99CCFF;
padding-top: 1em;
}
#nav p { margin-top: 0; }
#content
{
padding-top: 1em;
margin: 0 2em 0 200px;
}
#content h2 { margin-top: 0; }
#footer
{
clear: both;
background-color: #FFFF66;
padding: 1em;
text-align: right;
border-top: 1px solid #333;
}
|
|
|
sticks464
Joined: 31 Dec 2006
Posts: 1283
|
| Posted: Sat Nov 22, 2008 12:05 pm |
|
|
| That doesn't tell me much without the html |
|
|
ln724
Joined: 22 Nov 2008
Posts: 3
|
| Posted: Sat Nov 22, 2008 12:46 pm nav bar |
|
|
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1">
<title>StudentResources</title>
<link rel="stylesheet" type="text/css"
href="stylesheet.css">
<script language="JavaScript">
<!--
function RightAnswer()
{
alert("Good job, you only need to enter a password when you use these resources at home.");
}
function WrongAnswer()
{
alert("Try Again");
}
-->
<!--
function SayFinished()
{
alert("Did you remember to write down the address and the date for each of the websites you used today?");
}
-->
<!--
function SayHello()
{
alert("Hello, " + document.NameForm.NameBox.value);
}
-->
</script>
</head>
<body>
<br>
<div id="container">
<div id="banner">
<div style="text-align: center;"></div>
<h1 style="text-align: center;">Participate Project</h1>
</div>
<div id="nav">
<p><a href="index.html">Home</a></p>
<p><a href="Goals.Objectives.html">Goals &
Objectives</a></p>
<p><a href="Materials.html">Materials &
Technical Needs</a></p>
<p><a href="Lesson.html">Lesson Plan</a></p>
<p><a href="StudentDirections.html">Student
Resources</a></p>
<p><a href="Contingency.html">Contingency Plans</a></p>
<p><a href="Closure.html">Closure</a></p>
<p><a href="Evaluation.html">Evaluation</a></p>
<p><a href="Marcovitz.html">For Dr. Marcovitz</a></p>
<p><a href="AboutMe.html">About the Author</a></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div id="content">
<h2>Student Resources</h2>
<div style="text-align: center;"><br>
<img style="width: 106px; height: 106px;" alt=""
src="4thjuly.jpg"><img style="width: 97px; height: 97px;"
alt="" src="hanukkah.jpg"><br>
<br>
</div>
<center>
<script language="Javascript"><!--
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
// Get today's current date.
var now = new Date();
// Array list of days.
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
// Array list of months.
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
// Calculate the number of the current day in the week.
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
// Calculate four digit year.
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}
// Join it all together
today = days[now.getDay()] + ", " +
months[now.getMonth()] + " " +
date + ", " +
(fourdigits(now.getYear())) ;
// Print out the data.
document.write("Today\'s date is " +today+ ".");
//--></script></center>
<form name="NameForm">
<p style="text-align: left;">Please type your name:</p>
<div style="text-align: center;"><input name="NameBox"
size="50" type="text">
<br>
<input name="EnterName" value="OK"
onclick="SayHello()" type="button"></div>
</form>
<p>
Use these websites to complete your research note sheet on your
holiday. Make sure you record what sites you take information from.
Don't forget to record today's date as well! </p>
<div style="text-align: center;">
<form>
<select name="menu"
style="font-family: 'Comic Sans MS'; color: black; background-color: rgb(255, 255, 255); font-size: 10pt;">
<option value="#">Choose a Site to Visit . . . </option>
<option
value="http://www2.scholastic.com/browse/article.jsp?id=3211">Scholastic</option>
<option
value="http://www.worldbook.com/wb/Students?content_spotlight/holidays/holidays">Worldbook
Holidays</option>
<option
value="http://www.kidsturncentral.com/holidays/glossary/holidaysgloss.htm">Holidays
Around the World</option>
<option value="http://www.holidays.net/">Holidays on the
Net</option>
<option
value="http://www.topics-mag.com/internatl/holidays/festivals.htm">Holidays
and Celebrations Around the World</option>
</select>
<input
onclick="location=this.form.menu.options[this.form.menu.selectedIndex].value;"
value="GO" type="button">
</form>
</div>
<br>
The following resources are FREE for Howard County students. We have
talked about them in technology before.<br>
<div style="text-align: center;">
<form name="SimpleQuiz">
<p style="text-align: center;">Do you need a
password to access these websites in school?</p>
<input name="Yes" value="Yes" onclick="WrongAnswer()"
type="button">
<input name="No" value="No" onclick="RightAnswer()"
type="button"></form>
</div>
<br>
<a href="http://www.worldbookonline.com/kids/Home">Worldbook
Online Encyclopedia</a>- choose World Religions and then
Festivals & Holidays
<p><a href="http://online.culturegrams.com/">CultureGrams</a></p>
<p></p>
<div style="text-align: center;"><strong><span
style="font-weight: bold;">Finished your holiday research?</span></strong><br>
<strong></strong></div>
<p></p>
<div style="text-align: center;">
<form name="MyFirstForm"><strong><input
name="MyButton" value="Click Here"
onclick="SayFinished()" type="button"></strong></form>
</div>
</div>
<div id="footer">Last Updated: November 22, 2008
Site Maintained by <a
href="mailto:ellen_wilkieathcpss.org">Ellen Wilkie</a>
</div>
</div>
</body>
</html>
|
|
|
sticks464
Joined: 31 Dec 2006
Posts: 1283
|
| Posted: Sat Nov 22, 2008 3:07 pm |
|
|
Here's three steps that will make it work.
1. Create a transparent gif 2000px wide X 10px height. Make the left 160px the color #99ccff and the rest transparent. Save as a transparent gif. The long width is for wide monitors.
2. Put all content inside another div (I called mine outer).
Code: <body>
<br>
<div id="outer">
<div id="container">
...
rest of content
...
</div>/*end cntent*/
</div>/*end container*/
</div>/*end outer*/
</body>
</html>
3.3. Add this style and change the following css styles
add
Code: #outer {
margin: 1em 5%;
background: #fff url(images/background.jpg) repeat-y;
}
change
Code: #container{
background: transparent url(images/new_bg.gif) repeat-y top left;
border: 1px solid #333;
} |
|
|
| |
|
|
|
