Hi,
I am sure this is simple, but I am breaking my head.
I need 1 page with at the top a range of dates, 2002, 2003, 2004 etc
If you select 2002 it will show the content of 1 div, if you select 2002 the content of another div.
this is for showing announcements on a site, right now there are 10 html files, each showing the announcement of that year, I simple like to move that all to 1 page, dates at top... and voila..
Help?
First off, I think this is a decent reference site for HTML and CSS:
CSS Tutorial
Secondly, I only dabble with HTML and CSS here and there, so there might be better ways of doing this, but the example below does something similar to what you've asked about. I think it will get you started. I tested it with Opera (12.0/beta) and Chrome. It seemed to behave in both.
The key points are that there is a class for division defined which sets display to 'none' -- all of the divisions that are hidden initially are defined with this class. Each date at the top is a link which invokes a small javascript function when clicked. The javascript changes the property of the associated division to allow it to be shown while hiding the most recently shown division (should avoid any issues with needing to fiddle the z-height).
Have fun!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
<!--
body {
background: #000000;
color: #00cc90;
margin: 10px;
padding: 0;
font-style: normal;
font-size: 100%;
font-family: sans-serif;
}
a:link { color: yellow }
a:visited { underline: false; color: yellow }
a:hover { color: orange }
a:selected { color: red }
div.hidden {
position: relative; top: 0px; left: 10px;
border: solid 1px #c0c0c0;
margin-left: 10px;
width: 95%;
background: #c000c0; color: white; font: normal 14pt sans-serif;
display: none
}
-->
</style>
<script type="text/javascript" >
//<![CDATA[
showing = null;
function showdiv( id )
{
if( showing != null )
{
var d = document.getElementById( showing );
d.style.display = "none";
}
var d = document.getElementById( id );
d.style.display = "block";
showing = id;
}
// the following line closes the opending CDATA
//]]>
</script>
<title>Test Page</title></head>
<body onload="javascript:showdiv('2010')" >
<div>
<table width=95% border=0 style="margin-left:20px" > <tr>
<td> <a href="javascript:showdiv('2008')">2008 </a> </td>
<td> <a href="javascript:showdiv('2009')">2009 </a> </td>
<td> <a href="javascript:showdiv('2010')">2010 </a> </td>
<td> <a href="javascript:showdiv('2011')">2011 </a> </td>
<td> <a href="javascript:showdiv('2012')">2012 </a> </td></tr>
</table>
</div>
<!-- container division for relative placement of hidden ones -->
<div>
<div id="2008" class="hidden">
2008: This is some text in the division
</div>
<div id="2009" class="hidden">
2009: This is different text for another division.
<br />
more text in this division.
</div>
<div id="2010" class="hidden" >
2010: This division should be shown as the default. see the body tag.
</div>
<div id="2011" class="hidden">
2011: More prose that goes on just to fill things up a bit.
</div>
<div id="2012" class="hidden">
2011: The final year with some breaks to extend the length.
a few more lines of text <br />
here in the last <br />
division <br />
a few more lines of text <br />
here in the last <br />
division
</div>
</div>
<div>
Some footer text that will always be visible; maybe date, time, revision.
</div>
</body></html>