Sevencolors studies:
experiments with Javascript, CSS, PHP and web standards

Printer icon

MiniSite

A one page site

The CSS code in the <head> of the page:

<!-- MiniSite CSS //-->
 
<script type="text/css">
#wrapall
{
position:relative;
width:380px;
margin:70px 0px 180px 0px;
}
#first
{
position:absolute;
top:0px;
left:0px;
background-color:red;
height:150px;
width:380px;
margin:0px;
padding:5px;
border:5px ridge red;
}
#first a.tabs
{
position:absolute;
top:-20px;
left:0;
background-color:red;
border:1px solid orange;
}
#first a:hover
{
background-color:orange;
}
#second
{
position:absolute;
top:0px;
left:0px;
background-color:green;
height:150px;
width:370px;
margin:0px;padding:5px;
border:5px ridge lime;
}
#second a.tabs
{
position:absolute;
top:-20px;
left:40px;
background-color:green;
border:orange 1px solid;
}
#second a:hover
{
background-color:lime;
}
#third
{
position:absolute;
top:0px;
left:0px;
background-color:blue;
height:150px;
width:360px;
margin:0px;
padding:5px;
border:5px ridge #6699ff;
}
#third a.tabs
{
position:absolute;
top:-20px;
left:80px;
background-color:blue;
border:orange 1px solid;
}
#third a:hover
{
background-color:gray;
}
#fourth
{
position:absolute;
top:0px;
left:0px;
background-color:#ffcc00;
height:150px;
width:350px;
margin:0px;
padding:5px;
border:5px ridge yellow
}
#fourth a.tabs
{
position:absolute;
top:-20px;
left:130px;
background-color:yellow;
border:orange 1px solid
}
#fourth a:hover
{
background-color:orange;
}
</script>

The Javascript code in the <head> of the page:

<!-- MiniSite Javascript //-->
 
<script language="JavaScript" type="text/javascript">
<!--
function stack(el){
var layer = document.getElementById(el);
var cont = document.getElementById('wrapall');
var stacks = cont.getElementsByTagName('div');
for(i=0;i<stacks.length;i++)
if(stacks[i].id!= el){
stacks[i].style.zIndex = 0;
layer.style.zIndex = 1;
}
}
//-->
</script>

The XHTML code in the <body> of the page:

<!-- The minisite //-->
 
<div id="wrapall">
<div id="first"> <a class="tabs" href="#" onmouseover="stack('first');return true">one</a>
first page - ridge border 5px </div>
<div id="second"> <a class="tabs" href="#" onmouseover="stack('second');return true;">two</a>
second page - ridge border 5px </div>
<div id="third"> <a class="tabs" href="#" onmouseover="stack('third');return true;">three</a>
third page - ridge border 5px<br />
<a class="italic" href="#">a link</a> </div>
<div id="fourth"> <a class="tabs" href="#" onmouseover="stack('fourth');return true;">four</a>
fourth page - ridge border 5px </div>
</div>

Select, copy and paste the code.Change the CSS according to your needs.

Testing the possibilities offered by CSS and Javascript.In combination they are pretty powerful and allow for a lot with few kilobytes.In this case I just change the stacking order ( z-index ) of the different layers with a mouseover. It enables the user to never leave the page, still giving the effect of actually changing page (like in a book or a file holder). The design is obviously very basic and it can be changed in any way. The most interesting fact is that the all thing is completely portable and adaptable.

The mouseovers are inline, since that`s still the most common way but would be easy to take them off (as it`s been done for this site ). If CSS and Javascript are disabled the layers would just appear one after the other in their natural static positions.This is a working example