CSS elements

Creating Menus with CSS

admin — Thu, 09 Jul 2009 21:59:17 +0000

The second round of modifications to the menu_style.css style sheet in this example involves making each list of navigation links into drop-down menus. First a display: none; declaration is supplied to the ul.menu selector to hide all the menus. The display: none; declaration prevents the browser from rendering the menu

div#nav > div > ul > li:hover > ul.menu,
ul.menu:hover {
display: block;
}

The first selector in this example works using the same direct child relationship that you’ve observed before. Essentially what you are stating here is the following: If the nav

element has a child

element, and that child

element has a

element that the user’s mouse is hovering over, and that
element has a

Layers in CSS

admin — Sat, 04 Jul 2009 15:12:10 +0000

You modify the menu_system.css style sheet in two key areas. The first modification involved controlling the layering of the JT’s logo, so that the JT’s logo is always on top. To do this, you apply a z-index: 1; declaration to the rule for the JT’s logo. This demonstrates that an integer provided to the z-index property, which specifies layering by providing a number, takes precedence over the auto z-index. This means that the auto z-index is determined first, and then elements with a numbered z-index appear above those with an auto z-index. In this scenario, this eliminates the need to explicitly specify a z-index for any of the other elements.

Background Formatting with CSS

admin — Wed, 01 Jul 2009 11:38:13 +0000

The first

in the sequence of four is given a light yellow background and some basic dimensions and properties that also apply to the other

elements. Then, by using the adjacent sibling selector, I select the subsequent

elements and provide those with different backgrounds and a decrementing z-index value. This results in the

with a light yellow background being displayed on top, followed by the

with the light blue background, followed by the

with the light green background, and finally the

with a pink background is shown at the back of the stack. This example demonstrates that the highest z-index value appears highest on the z-axis, or if you envision an invisible line perpendicular to the computer screen, the highest z-index appears furthest toward the user on that invisible line. If I omit the z-index property from the example shown in the previous post, the value of the z-index property becomes auto, and the stack along the z-axis is determined by the document flow.

For instance, the first element with positioning applied appears on the bottom of the stack, and each subsequent element appears one higher. The last element in the document with positioning receives the highest z-index value. Omitting the z-index value is demonstrated in the next post.