pastebin.parentNode.org » Viewing Paste

Pasted

by nvictor

on 2007-07-12 09:43

as HTML

Create New

http://pastebin.parentnode.org/

Links this one

http://pastebin.parentnode.org/18241

Comment

<!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=iso-8859-1" />
<title>Yahoo Tabs</title>
<script type="text/javascript" src="lib/animatedcollapse.js"></script>

function init() {
	var tab1 = document.getElementById('tab1');
	tab1.onclick = doslidedown("content1");
	
	function doslidedown(divId)
	{
		var collapse = new animatedcollapse(divId, 1000, false);
		collapse.slidedown();
	}
}

</script>

body, div, h1, h2, h3, p, a, li, ul
{ margin: 0; padding:0; }

a:link, a:visited, a:hover, a:link, a:active
{ 
	color: #0000c0;
	text-decoration: none;
}

p
{ padding-top: 10px; }

#previewtabs
{
	width: 30%;
	border: 1px solid #808080;	
	margin: 5px;
	padding: 5px 0 5px 5px;
}

#tabs
{

}

#tabs ul
{
    list-style: none;
    margin: 10px 0 0 0;
}

#tabs ul li
{
	float: left;
	width: 33.3%;
	text-align: center;
}

#tabs ul li.selected a
{
	border-bottom: 1px solid #fff;
}

#tabs ul li a
{
	display: block;
	font-size: 1.3em;
	margin-right: 5px;
	border: 1px solid #ccc;
	z-index: 20;
}

#tabs ul li a:hover
{
	text-decoration: underline;
}

#previewscontent
{
	margin-top: -1px;
	margin-right: 5px;
	border-top: 1px solid #ccc;
}

/* hacks */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
 
</style>
</head>
<body onload="javascript:init()">
<div id="previewtabs">
	<div id="tabs" class="clearfix">
		<ul>
			<li id="tab1" class="selected"><a href="#">link 1</a></li>
			<li id="tab2"><a href="#">link 2</a></li>
			<li id="tab3"><a href="#">link 3</a></li>
		</ul>
	</div>
	<div id="previewscontent">
		<div id="content1">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet est. Vivamus placerat sapien luctus felis elementum interdum. Maecenas congue ultrices ligula. Integer sollicitudin dolor.</p>
		</div>
		
	</div>
</div>
</body>
</html>