PDA

View Full Version : Mix CSS Left and Top Frames Layout with a 3 levels dropdown menu.



ylodis
03-02-2009, 06:35 PM
Hello,

Congratulations for your site, one of the better ones I had seen about CSS

I am trying to mix an emulating frames layout from : http://www.dynamicdrive.com/style/layouts/item/css-left-and-top-frames-layout/

and a 3 levels dropdown menu from : http://www.htmldog.com/articles/suckerfish/dropdowns/

The problem is the visibility of the menu in the content area (it is not visible out of the left seudoframe).

Thanks from now if you can help me.

The example with code is in my Web Site Address : http://www.portaltarot.com/ApruebaMenu.htm

molendijk
03-02-2009, 09:29 PM
I don't like that DD-script, very much, since it only works in IE quirks mode.
Below you find a way to do what you want, completely with the suckerfish menu.
Change the styles to your liking (but don't make mistakes).


<!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. &ldquo;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&rdquo; 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 &ldquo;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.&rdquo; 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. &ldquo;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.&rdquo; 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.

ylodis
03-02-2009, 10:26 PM
Thank you very much.
I have tryed it and it works, but I still have a problem. You use % in the width, and I need a top frame height of 57px and a left frame width of 170px.

How can I modify your code to do it ?

molendijk
03-03-2009, 12:21 AM
You use % in the width, and I need a top frame height of 57px and a left frame width of 170px.
Just give .top and .side the values in pixels that you want.
===
Arie.

ylodis
03-03-2009, 09:25 AM
Ok thanks. Now I have what I wanted.

I give the final code in case someone need a seudoframe code with fixed measure in pixels and a 3 level dropdown menu :

[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:57px; 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:100%;height:57px;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: 170px;
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>




<div class="footer">footer</div>
<div class="side" >
<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>
</ul>
</li>

</ul>
</div><!--Fin Lateral Izdo -->
<div class="header"><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.</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. &ldquo;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&rdquo; 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 &ldquo;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.&rdquo; 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. &ldquo;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.&rdquo; 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>CODE]