Text* Snippets: css code

Collapsable Navigation Menu

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script type="text/javascript">

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}

var menu={

collapseMenu:function(node)
{
if (!document.getElementById) return false;
if (!document.getElementById("menu")) return false;
if (!node) node = document.getElementById("menu");

if (node.childNodes.length > 0)
{
for (var i=0; i<node.childNodes.length; i++)
{
var child = node.childNodes[i];
if (child.nodeName == "UL")
{
child.style.display = "none";
}
menu.collapseMenu(child);
}
}
},

prepareMenu:function()
{
if (!document.getElementById || !document.getElementsByTagName) return false;
if (!document.getElementById("menu")) return false;

var links = document.getElementById("menu").getElementsByTagName("a");
for (var i=0; i<links.length; i++)
{
links[i].onclick = function()
{
menu.toggleMenu(this.parentNode.getElementsByTagName("UL")[0], this.href);
return false;
}
}
},

toggleMenu:function(node, link)
{
if (!document.getElementById) return false;
if (!link) return false;
if (!node) location.href = link.href;

if (node.style.display == "")
{
node.style.display = "none";
} else {
node.style.display = "";
}
}

//end menu
}

addLoadEvent(menu.collapseMenu);
addLoadEvent(menu.prepareMenu);

</script>

<title>Example 2</title>

</head>

<body>

<ul id="menu">
<li>Fruit
<ul>
<li>Apple
<ul>
<li>Granny Smith</li>

</ul>
</li>
<li>Orange</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables

<ul>
<li>Carrot</li>
<li>Onion</li>
<li>Peas</li>
</ul>
</li>
</ul>

</body>
</html>

to css html javascript by brentg on Apr 17, 2006

Toggle Show/Hide

to css javascript by brentg on Apr 17, 2006

Centering a Div With CSS

You need to wrap in another div, and center via that one.

e.g.

body {
text-align: center;
}

.outer_div {
text-align: left;
width: 750px;
height: 500px;
background: white;
padding: 5px;
margin: 0 auto;
}

to css div by vanweerd on Oct 03, 2005

CSS IE hack

p a {
     background-color:blue
}

p > a{
     background-color:red
}

In IE we will see a blue red link.

to css by soul on Aug 20, 2005

A "interesant" layout

div.container{
background:#fff;
border:1px solid #8E221B;
margin:0 auto;
width:60%;
height:100%;
 
}
html > body div.container{
min-height:100%;
}

This css code explands de "container" div. It simulates old table layouts with 100% height.

to css by soul on Aug 20, 2005

Reset margins to help with layout

Throw this at the top of your first CSS rules, and you should have a few less headaches with layouts.

*
{
margin: 0;
padding: 0;
}

Note: You have to then add margins/padding to *every* element that needs it (p, dl, ul, etc), otherwise things will look a little odd.

to css by iyoti on Aug 18, 2005

Master CSS file for smart hack management

Using various hack management techniques publicized by Doug Bowman and Molly Holzschlag, this is the default stylesheet I <link /> to in the head of my markup:

/*
        [CLIENT] screen master
*/
@import url("core.css");

/* Import WinIEx-only bugs - hide from Mac IE5 \*/
@import url("hacks.win.iex.css");
/* END hide from Mac IE5 */

/*       Import Win IE5x hacks
        ---------------------
*/

@media tty {
        i{content:"\";/*" "*/}} @import 'hacks.win.ie5.css'; /*";}
}/* */

/*       Import Mac IE5 hacks
        --------------------
*/

/*\*//*/
@import url("hacks.mac.ie5.css");
/**/

The core.css file contains my pure, "hack free" CSS. The other files referenced above contain any and all browser-specific hackery required to make <del>IE</del>lesser browsers behave properly.

to css import browser-hacks hack-management by sidesh0w on Jun 08, 2005 2 Comments

Feed different CSS rules to IE5.0, 5.5 and 6.0

Sometimes you just have to resort to the hacks; this bit of code will let you feed three separate values for the same property to each of the three common flavors of IE on Windows:

* html whatevertherestofyourselectorwouldbe {
property/**/: value;
property: /**/ value;
p\roperty: value;
}

The first value will be applied by IE5.5, the second by IE5.0 and the third by IE6.0. The order is important; mix them up and it won't work. The "* html" on the selector ensures that only IE on Windows will see any of the values (since it mistakenly thinks there's a higher root element above html).

This was constructed from the table of CSS hacks at dithered.

to css by ubernostrum on May 28, 2005 1 Comments

Related Tags

Never been to TextSnippets before?