Mammut lorem ipsum dolor sit amet, consec tetur adipiscing elit. Vivamus non mollis ante. Morbi hendrerit iaculis tem? Aenean nec felis arcu, id consequat dolor. Duis sit amet magna justo, nec ultricies tortor. Aliquam ultric cur justo, id scelerisque neque lacinia sed. In nec turpis odio, quis lobortis felis. Nullam eget ante ac dui tempor ornare at ut lacus. Lorem ipsum dolor sit amet, consec etur adipiscing elit. Pellen tesque habitant morbi tristique senectus et netus et male suada fames ac turpis egestas. Ut eget elit porta tellus vestibulum mattis. Etiam semper egestas laoreet. elis elementum venenatis.

 

Jeff-kun lorem ipsum dolor sit amet, consec tetur adipiscing elit. Vivamus non mollis ante. Morbi hendrerit iaculis tem? Aenean nec felis arcu, id consequat dolor. Duis sit amet magna justo, nec ultricies tortor. Aliquam ultric cur justo, id scelerisque neque lacinia sed. In nec turpis odio, quis lobortis felis. Nullam eget ante ac dui tempor ornare at ut lacus. Lorem ipsum dolor sit amet, consec etur adipiscing elit. Pellen tesque habitant morbi tristique senectus et netus et male suada fames ac turpis egestas. Ut eget elit porta tellus vestibulum mattis. Etiam semper egestas laoreet. elis elementum venenatis.

 

Home • Los Alamos • Apple • Microsoft • Google

This page is the same as Percent.html except that it has been tweaked with margins at the top of the right and left divs so that their background color doesn't extend above the flag stripe (since I couldn't decide which way I liked better).

This page uses percentage widths for a fluid layout. There is a background image (1x4 pixels, tiled) that provides some visual interest to the body. The div#outer division has a width of 100% of the browser window and overlays the red, white, and green stripe pattern of the Hungarian flag over the body background. The div#wrapper division has a width of 90% of the browser window to let some background show through on both sides, and has side margins set to auto so it is centered. It also has min-width and max-width values set to keep that content part of the page from getting to narrow or too wide. The three divisions inside div#wrapper (they are div#leftdv, div#centerdv, and div#rightdv) use percentages to specify their widths and their side margins and padding so that they adjust with screen width. The side divisions are floated left and right, and the center division has wide margins to provide space for them. The side divs have width 16% and padding of 1% on both sides (those percentages are relative to the div#wrapper in this case, since it is their container). The center div has left and right margins of 18% and left and right padding of 1%, with no width specified. These percentages are also relative to the width of the parent div#wrapper.

The wrapper div has the background color you see behind this text, and has the Hungarian flag strip background image. The left and right divs also have stripe background images, and they have a darker background color. The main division has the Mammut and Jeff image as a background, and no background color (so that the background color and and background image of the wrapper can show through). All of the stripes in these divisions line up.

The text menu has a rollover effect. The Home item in the text menu is also a link (which would normally be a link to this page, if it were named index.html), but it has the class style .current applied to it that makes it look different than th other links to indicate that this is the current page. It also has no rollover effect, and it even keeps the mouse pointer from changing shape so that it does not appear to be a link even when you point at it.

To get consistent behavior between Internet Explorer and other browsers, I use a style to make sure that the first item in a div has no top margin, since IE differs from other browsers about whether these items should have a top margin by default. The style is div *:first-child { margin-top: 0; } and it would work for any first-child element (since the * is a wildcard for any element).