10-30-2012, 06:25 AM
|
PM User |
#4
|
|
New Coder
Join Date: Oct 2012
Posts: 10
Thanks: 2
Thanked 0 Times in 0 Posts
|
Don't worry about it, I understand it now. I need study CSS more 
It's an interesting work around. My system is a little different, but I might be able to use this principle. Thanks a lot.
Quote:
Originally Posted by Excavator
Hello dammyg,
I worked this up a couple years ago. It uses anchors to load the different boxes.
Maybe you can use it?
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS only content switcher</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #fc6;
}
/* HTML5 tags */
header, section, footer, aside, nav, article, figure { display: block; }
#container {
width: 740px;
margin: 30px auto;
padding: 0 30px 300px;
overflow: auto;
background: #999;
}
#switcher {
height: 300px;
width: 650px;
margin: 30px auto;
overflow: hidden;
border: solid 1px #666;
}
#content {
height: 317px;
margin: 0;
padding: 0;
overflow: scroll;
overflow-y: hidden;
list-style: none;
}
#content li {
line-height: 300px;
width: 650px;
background: #ccc;
color: #666;
font-size: 20em;
font-style: italic;
text-align: center;
}
#nav {
margin: 20px 45px 0 0;
float: right;
list-style: none;
}
#nav li {
line-height: 30px;
width: 30px;
margin: 0 0 0 5px;
float: left;
text-align: center;
border: solid 1px #ccc;
font-family: Arial, Helvetica, sans-serif;
}
#nav li a, #nav li a:link,
#nav li a:visited {
height: 30px;
display: block;
text-decoration: none;
color: #666;
}
#nav li a.selected, #nav li a.selected:link,
#nav li a.selected:visited, #nav li a:hover,
#nav li a:focus, #nav li a:active {
background: #666;
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="switcher">
<ul id="content">
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
<li id="four">4</li>
<li id="five">5</li>
</ul>
<!--end switcher--></div>
<ul id="nav">
<li><a href="#one">1</a></li>
<li><a href="#two">2</a></li>
<li><a href="#three">3</a></li>
<li><a href="#four">4</a></li>
<li><a href="#five">5</a></li>
</ul>
<!--end container--></div>
</body>
</html>
|
|
|
|