Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fixed</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- CSS FOR BOTH IE (QUIRKS OR STANDARD) AND NON-IE -->
<style type="text/css">
html,body {height: 100%; overflow:hidden; margin:0; font-family:verdana; font-size:12px;}
/* everything in percentages, to get things right */
.content {position:absolute;top:0%; height:100%; left:0%; width:100%; overflow: auto;}
.inside_content{margin-right:10px;margin-left:20%;margin-top:8em}
.header{position:absolute;background:lightyellow;width:98%;z-index:1;border:1px solid darkred;text-align:center;top:0}
.footer{position:absolute;bottom:0px;background:darkred;color:white;border:1px solid black;padding:0 3px 0px 3px;z-index:1;right:16px;}
.side{position:absolute;left:5px;
background:#dedede; border:1px solid darkred;
width: 15.5em;
top:0;
height:100%;left:0;z-index:2
}
.top{position:absolute;top:0px;left:50%; width:520px; margin:0;margin-left: -260px; padding:8px;background:#dedede;border:1px solid darkred;z-index:1}
/*3 Levels Menu CSS (From http://www.htmldog.com/articles/suckerfish/dropdowns/)*/
#nav {position:absolute;z-index:10;top:45%;left:2%}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}
#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : white;
border : 1px solid black;
padding : 0 0.5em;
}
#nav li a:hover {
color : white;
background-color : black;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<h1>(Vertical)</h1>
<br><br><br><br><br>
<ul id="nav" >
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a>
<ul>
<li><a href="#">Echeneis</a>
<ul>
<li><a href="#">Sharksucker</a></li>
<li><a href="#">Whitefin Sharksucker</a></li>
</ul>
</li>
<li><a href="#">Phtheirichthys</a>
<ul>
<li><a href="#">Slender Suckerfish</a></li>
</ul>
</li>
<li><a href="#">Remora</a>
<ul>
<li><a href="#">Whalesucker</a></li>
<li><a href="#">Spearfish remora</a></li>
<li><a href="#">Marlinsucker</a></li>
<li><a href="#">Remora</a></li>
<li><a href="#">Ceylonese remora</a></li>
</ul>
</li>
<li><a href="#">Remorina</a>
<ul>
<li><a href="#">White suckerfish</a></li>
</ul>
</li>
<li><a href="#">Rhombochirus</a>
<ul>
<li><a href="#">R. osteochir</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tilefishes</a>
<ul>
<li><a href="#">Caulolatilus</a></li>
<li><a href="#">Lopholatilus</a></li>
<li><a href="#">Malacanthus</a></li>
</ul>
</li>
<li><a href="#">Bluefishes</a>
<ul>
<li><a href="#">Pomatomus</a></li>
<li><a href="#">Scombrops</a></li>
<li><a href="#">Sphyraenops</a></li>
</ul>
</li>
<li><a href="#">Tigerfishes</a>
<ul>
<li><a href="#">Amniataba</a></li>
<li><a href="#">Bidyanus</a></li>
<li><a href="#">Hannia</a></li>
<li><a href="#">Hephaestus</a></li>
<li><a href="#">Lagusia</a></li>
<li><a href="#">Leiopotherapon</a></li>
<li><a href="#">Mesopristes</a></li>
<li><a href="#">Pelates</a></li>
<li><a href="#">Pelsartia</a></li>
<li><a href="#">Pingalla</a></li>
<li><a href="#">Rhyncopelates</a></li>
<li><a href="#">Scortum</a></li>
<li><a href="#">Syncomistes</a></li>
<li><a href="#">Terapon</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a>
<ul>
<li><a href="#">Anabas</a></li>
<li><a href="#">Ctenopoma</a></li>
</ul>
</li>
<li><a href="#">Labyrinthfishes</a>
<ul>
<li><a href="#">Belontia</a></li>
<li><a href="#">Betta</a></li>
<li><a href="#">Colisa</a></li>
<li><a href="#">Macropodus</a></li>
<li><a href="#">Malpulutta</a></li>
<li><a href="#">Parosphromenus</a></li>
<li><a href="#">Pseudosphromenus</a></li>
<li><a href="#">Sphaerichthys</a></li>
<li><a href="#">Trichogaster</a></li>
<li><a href="#">Trichopsis</a></li>
</ul>
</li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
<li><a href="#">Gobioidei</a>
<ul>
<li><a href="#">Burrowing gobies</a></li>
<li><a href="#">Dartfishes</a></li>
<li><a href="#">Eellike gobies</a></li>
<li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li>
<li><a href="#">Odontobutidae</a></li>
<li><a href="#">Sandfishes</a></li>
<li><a href="#">Schindleriidae</a></li>
<li><a href="#">Sleepers</a></li>
<li><a href="#">Xenisthmidae</a></li>
</ul>
</li>
</ul>
<div class="footer">footer</div>
<div class="side" ></div>
<div class="header"><br><br><br><br>
yellow header that hides upscrolling text; yellow header that hides upscrolling text;</div>
<div class="top">You could put a topmenu in this div. You could put a topmenu in this div. You could put a topmenu in this div</div>
<div class="content">
<div class="inside_content">
<h3 style="text-align:center;margin-top:0px">© Arie Molendijk:<br>
Fixed position in IE and non-IE with pure CSS; no use of 'position: fixed'.</h3>
See also: http://molendijk.110mb.com/position_fixed_nonquirks/position_fixed_quirks_and_standard_css.html<br><br>
Lansarea comunitatii profesionale www.tetatet.ro Dupa trei luni de functionare in versiune private beta , s-a lansat www.tetatet.ro , comunitatea online a profesionistilor romani de pretutindeni.
Proiectul apartine unei echipe de zece oameni cu specializari distincte si complementare , patru dintre acestia aducand in tetatet experienta acumulata ca asociati cofondatori ai proiectului
Trilulilu , lansat la inceputul lui 2007. Tetatet se adreseaza profesionistilor din orice domeniu de activitate care cauta oportunitati de colaborare sau de cariera , oferindu-le un cadru modular si
scalabil pentru dezvoltare profesionala , comunicare si interconectare. “Tetatet e un concept universal. Nu este al nostru , ci al tuturor profesionistilor care decid sa il foloseasca. Noi
suntem doar zece dintre acestia , care am ales sa ii dam o forma si o directie” spune Dragos Birlea , project manager. Comunitatea este construita pe platforma tehnica HC Engine , dezvoltata de
Rares Dragan , chief technology officer al tetatet. Rares ne avertizeaza ca “site-ul tetatet este inca in versiune beta , asadar eventualele probleme tehnice din urmatoarea perioada sunt
inerente. A durat opt luni sa dezvoltam site-ul pana la acest nivel si va mai dura cateva luni ca sa il aducem la forma dorita. Ne bazam insa pe feedbackul utilizatorilor tetatet si pe implicarea lor
in proiect.” Proiectul functioneaza din octombrie 2008 , insa pana la acest moment a fost tinut de echipa tetatet in versiune private beta , cu un numar limitat de utilizatori , pentru a
stabiliza platforma. Acum www.tetatet.ro este deschis accesului public si isi asteapta profesionistii pentru conectare. “Credem in puterea lui virala asa ca nu vom forta intrarea in piata cu
bugete mari de marketing. Ca si in cazul Trilulilu , ne concentram pe dezvoltarea unui produs pe care oamenii sa si-l doreasca , sub un brand care sa convinga.” afirma Bogdan Colceriu , brand
manager tetatet. Fondatorii tetatet sunt:<br>
Dragos Birlea , project manager<br>
Bogdan Colceriu , brand manager<br>
Rares Dragan , chief technology officer<br>
Andrei Dunca , technical advisor<br>
Adrian Sabau , software engineer<br>
Levi Szekeres , art director<br>
Mihaly Vajda , HR consultant<br>
Emil Crisan , management consultant<br>
Raluca Rus , legal advisor<br>
Vlad Igrisan, consultant<br>
<br>
Fondatorii tetatet sunt:<br>
Dragos Birlea , project manager<br>
Bogdan Colceriu , brand manager<br>
Rares Dragan , chief technology officer<br>
Andrei Dunca , technical advisor<br>
Adrian Sabau , software engineer<br>
Levi Szekeres , art director<br>
Mihaly Vajda , HR consultant<br>
Emil Crisan , management consultant<br>
Raluca Rus , legal advisor<br>
Vlad Igrisan, consultant<br>
<br>
</div>
</div>
</body>
</html>
Arie Molendijk.
Mix CSS Left and Top Frames Layout with a 3 levels dropdown menu.
Reply With Quote
Originally Posted by ylodis
Bookmarks