Sent by Brian Cummiskey on 18 January 2006 21:09
Keith Kaiser wrote:
> I'm redesigning a very long page that requires a lot of scrolling. I'd like
> to replace it with a 100% CSS design that has a banner across the top and a
> menu along the left side. Each item selected simply appears in the space to
> it's right. Does any one know of a good example I could go take a look at,
> something that looks like it was made with frames or tables but is pure CSS?
Using pure css, this may be hard to achieve, especially with IE.
Using MOSTLY css, and a hint of javascript to toggle your divs from
display:none; to display: inline; will make your life so much easier.
But, there are other methods...
try someting like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
#page1, #page2 { display: none; }
#menu { float: left; padding: 25px; }
#content_wrapper { padding-left: 10px;}
</style>
<script type="text/javascript">
function toggle(whichpage) {
if(whichpage == 1)
{
document.getElementById("page1").style.display = "inline";
document.getElementById("page2").style.display = "none";
}
else
{
document.getElementById("page1").style.display = "none";
document.getElementById("page2").style.display = "inline";
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="menu">
<ul>
<li onclick="toggle(1);">page 1</li>
<li onclick="toggle(2);">page 2</li>
</ul>
</div>
<div id="content_wrapper">
<div id="page1">
<p>blah blah page 1</p>
</div>
<div id="page2">
<p>blah blah page 2</p>
</div>
</div>
</div>
<body>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
