CSS - Dynamic Menus

Posted on January 26th, 2006 by gernot.
Categories: CSS.

Forget javaScripts or other ’stuff’ for making dynamic Menus, its easier and better with CSS.

NOTE: For IE usage download IE Hover Hack here: csshover.htc
Here you can see a preview of dynamic menu: goTo dynamic css menu

CSS Dynamic Menu Code

/*You need to set behavior in body so IE Hack can Work*/
body {
    font-size: 62.5%;
    font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
    text-align: center;     
/*IE Hover Hack*/
    behavior:url(”csshover.htc”);
}

a:hover {
    background: yellow;
}

ul {
    margin: 0;
    padding: 0;
    display: inline;
}

ul li {
    list-style-type: none;
    position: relative;
    margin: 0;
    padding: 0;
    background: #FFE;
    width:10em;
    border: 1px solid #000;
    /*First list items float left*/
    float: left;
}

ul li a {
    display: block;
    padding: 5px 7px;
    text-decoration: none;
    background: #FFF;
}

ul li ul li {
    /*Stop floating left*/
    clear: both;
}

/*Here the hovering starts*/
ul li:hover ul {
    width: 10em;
    top: 2.3em;
    left: -0.1em;
}

ul ul, li:hover ul ul {
    display:none;
    width: 10em;
}

li:hover ul {
    display:block;
    position: absolute;
    left: 100%;
}

li:hover li:hover ul {
    display:block;
    position: absolute;
    top: -0.1em;
    left: 100%;
}

0 comments.

CSS - fluid vs. fixed Design

Posted on January 25th, 2006 by gernot.
Categories: CSS.
Tags: , ,

Everyone knows the problem: Webpages which have too much text on too small space or vica versa. The solution is either make the page fluid or fixed, and with the help of css this is pretty simple:

fixed

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
}
#page {
    margin: 0 auto;
    padding: 0;
    width: 760px;
    background: #fff;
}

click here for example Here the page never changes its size.
Try and change the size of the browser window.

fluid

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
}
#page {
    margin: auto;
    padding: 0;
    width: 90%;
    background: #fff;
}

click here for example Here the page always changes its size to fit to the resolution or browser window
Try and change the size of the browser window.

2 comments.

CSS - Kategorie, was soll das?

Posted on January 25th, 2006 by gernot.
Categories: CSS.

Nachdem ich mich seit längerer Zeit ein wenig mit CSS (CascadingStyleSheets) Webseitengestaltung auseinandersetzte und selbst immer alle möglichen Dinge vergesse möchte ich in dieser Rubrik eine kleine Sammlung an nützlichen css Snippets hervortun.

0 comments.