I have really gotten into using the list properties and have seen how efficient they are. I have a page that has links running down the left side of it, which are in the[list] tag (which is all inside of a <div> so I can place them). The problem that I have run into is that once I ended that <div> to the "navigation" side of my page, nothing after that point can be linked. I have tried to rearrange the order of the .html page but then I ran into the problem of the page not being layed out the way I wanted. The chapter in the book is Chapter 12. Below is a sample of the .html and the .css file I am using.
.css
<style="css/text" media="all">
body {
background: url('nav.jpg') repeat-y;
}
/**
*Any text that is not labeled or defined
**
*/
* {
font-family: serif;
font-size: 12px;
color: black;
text-decoration: none;
}
/**
*What goes on inside of the p tag
**
*/
p {
font-family: serif;
font-size: 14px;
color: black;
text-decoration: none;
}
/**
*Links
**
*/
ul {
list-style: none;
}
li {
border: 1.5px outset black;
width: 180px;
height: 20px;
padding: 5px;
background-color: silver;
-moz-border-radius: 10%;
font-size: 16px;
text-align: center;
margin-top: 4px;
}
li a {
padding: 2px;
text-decoration: none;
}
li a:link {
color: black;
}
li a:visited {
color: black;
background-color: silver;
}
li a:hover {
color: black;
background-color: silver;
text-decoration: underline;
}
li a:active {
color: black;
background-color: white;
}
/**
*Navigation Buttons
**
*/
div#navigation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('nav.jpg');
background-repeat: repeat-y;
height: 1200px;
}
/**
*Top border and div
**
*/
div.top {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('top.jpg');
background-repeat: repeat-x;
height: 225px;
}
/**
*Title in top div
**
*/
div.toptitle {
padding: 30px;
font-size: 60px;
color: silver;
text-decoration: oblique;
font-weight: bold;
text-align: center;
text-indent: 230px;
}
/**
*Alignment of the panoramic
**
*/
div.panoramic {
left: 260px;
}
/**
*Address, Phone Number, and Fax Number
**
*/
div#contact {
font-size: 18px;
color: black;
font-family: cursive;
text-decoration: italic;
text-align: center;
left: 260px;
}
p#space {
word-spacing: 10px;
}
div#numbers {
font-size: 16px;
color: black;
font-family: cursive;
text-decoration: italic;
text-align: center;
left: 260px;
}
div.wcboemsde {
padding-left: 225px;
width: 900px;
padding-top: -500px;
}
p#wcboemsde {
width: 900px;
font-size: 20px;
text-align: center;
padding-top: 10px;
}
div.scrollingevents {
padding-left: 850px;
width: 200px;
}
a {
color: blue;
text-decoration: none;
}
a:link {
color: blue;
}
a:visited {
color: lighblue
}
a:hover, a:active {
color: blue;
background: silver;
text-decoration: underline;
font-weight: bold;
}
</style>
.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.02 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>title</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<style type="text/css">
#memoryticker{
background-color: lightyellow;
width: 450px;
font: bold 12px Verdana;
/*Tip: add in height attribute here for multiple line scroller*/
border: 1px solid black;
padding: 3px;
/*Change 0.7 below to a different number if desired (0.7=0.7 seconds)*/
/*Remove below line to remove transitional effect in IE. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.GradientWipe(Gra dientSize=1.0 Duration=0.7)
}
</style>
<body Onload="scrollnews(0)">
<div class='top'>
<div class='toptitle'>
title
<br>
<div id='panoramic'>
<img src=".gif" float:'right'>
</div>
<div id='contact'>
address
</div>
<div id='numbers'>
Phone #
</div>
<div id='numbers'>
Fax #
</div>
<div class='scrollingevents'>
<script type="text/javascript">
/***********************************************
* Memory Ticker script- © Dynamic Drive DHTML code library (
www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at
http://www.dynamicdrive.com/ for full source code
***********************************************/
//configure tickercontents[] to set the messges you wish be displayed (HTML codes accepted)
//Backslash any apostrophes within your text (ie: I\'m the king of the world!)
var tickercontents=new Array()
tickercontents[0]='1) <a href="http://www.javascriptkit.com">JavaScriptKit.com</a>- JavaScript tutorials and scripts.</a>'
tickercontents[1]='2) <a href="http://www.codingforums.com">Coding Forums</a>- Web coding and development forums.</a>'
tickercontents[2]='3) <a href="http://www.dynamicdrive.com">DynamicDrive.com</a>- Award winning, original DHTML scripts.</a>'
tickercontents[3]='4) <a href="http://www.freewarejava.com">FreewareJava</a>- Free Java applets, tutorials, and resources.</a>'
var persistlastviewedmsg=1 //should messages' order persist after users navigate away (1=yes, 0=no)?
var persistmsgbehavior="onload" //set to "onload" or "onclick".
//configure the below variable to determine the delay between ticking of messages (in miliseconds):
var tickdelay=3000
////Do not edit pass this line////////////////
var divonclick=(persistlastviewedmsg && persistmsgbehavior=="onclick")? 'onClick="savelastmsg()" ' : ''
var currentmessage=0
function changetickercontent(){
if (crosstick.filters && crosstick.filters.length>0)
crosstick.filters[0].Apply()
crosstick.innerHTML=tickercontents[currentmessage]
if (crosstick.filters && crosstick.filters.length>0)
crosstick.filters[0].Play()
currentmessage=(currentmessage==tickercontents.len gth-1)? currentmessage=0 : currentmessage+1
var filterduration=(crosstick.filters&&crosstick.filte rs.length>0)? crosstick.filters[0].duration*1000 : 0
setTimeout("changetickercontent()",tickdelay+filte rduration)
}
function beginticker(){
if (persistlastviewedmsg && get_cookie("lastmsgnum")!="")
revivelastmsg()
crosstick=document.getElementById? document.getElementById("memoryticker") : document.all.memoryticker
changetickercontent()
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(off set, end))
}
}
return returnvalue;
}
function savelastmsg(){
document.cookie="lastmsgnum="+currentmessage
}
function revivelastmsg(){
currentmessage=parseInt(get_cookie("lastmsgnum"))
currentmessage=(currentmessage==0)? tickercontents.length-1 : currentmessage-1
}
if (persistlastviewedmsg && persistmsgbehavior=="onload")
window.onunload=savelastmsg
if (document.all||document.getElementById)
document.write('<div id="memoryticker" '+divonclick+'></div>')
if (window.addEventListener)
window.addEventListener("load", beginticker, false)
else if (window.attachEvent)
window.attachEvent("onload", beginticker)
else if (document.all || document.getElementById)
window.onload=beginticker
</script>
</div>
</div>
<div id='navigation'>
<img src="topleft.jpg">
[list]
<li><a href="index.html">Homepage</a><Br><br></li>
<li><a href="guidance.html">Guidance</a><br><br></li>
<li><a href="facilities.html">Facilities</a><br><br></li>
<li><a href="academiclass.html">Academic Classes</a><br><br></li>
<li><a href="alumni.html">Alumni</a><br><br></li>
<li><a href="arts.html">Arts</a><br><br></li>
<li><a href="sporthome.html">Sports</a><br><br></li>
<li><a href="afg.html">Accreditation for Growth</a><br><br></li>
<li><a href="afterschool.html">After School</a><br><br></li>
<li><a href="media.html">Media Center</a><br><br></li>
<li><a href="technology.html">Technology</a><br><br></li>
<li><a href="news-front.html">Newspaper</a><br><br></li>
<li><a href="calendar.html">School Calendar</a><br><br></li>
<li><a href="newsletter.pdf">Newsletter</a><br><br></li>
<li><a href="parents.html">Parents</a><br><br></li>
<li><a href="testing.html">Testing</a><br><br></li>
</ul>
</div>
<div class='wcboemsde'>
<center>
<p id='wcboemsde'>
<a href='http://www..com/' target='_blank'><img src='msde.gif'><br>State Department of Education</a><br><br><a href='http://www.w' target='_blank'><img src='wcboe.jpg'><br>Board of Ed</a>
</p>
</center>
</div>
</div>
</body>
</html>
Links after the <ul> tag
