CSS-based layout with fixed menu

<p>CSS-based web page layouts are more and more substituting table-based layouts, since processing of table-based layouts is more complex (which may prevent screen readers from correctly reading a page), and not easy to style. Pure CSS-based layouts allow complete customization by simply exchanging the style sheet.</p><p>The task of creating a pure CSS menu, which is located at a fixed position, emerges from the need for a menu which will always be available, wherever the user is scrolling. To achieve this goal, Javascript could be used, but this approach may not work on all web browsers, and component manipulations written in Javascript are not as easy to change as pure CSS.</p><p>Thus, a menu has to be created which fulfills these requirements:</p><p>- CSS, but not Javascript</p><p>- Always visible, even when the user resizes window (up to a certain degree)</p><p>- Fixed distance to the page's main content (main content is fixed size and centered in the page)</p><p>- Easy to style and customize</p><p>- Same result in all modern web browsers</p>
1 answer

CSS-based solution for fixed menu

This solution of "CSS-based layout with fixed menu" has already been implemented and tested:

  • The following css style has been created for the menu (id: menu):

    #menu {
    font-family: georgia,palatino, serif;
    display:block; top:300px; left:50%; width:200px; position:fixed; margin-left: 320px;
    background-color: #fff;
    }

  • For Internet Explorer, which does not support the given styling, a workaround is implemented, which unfortunately breaks the fixed position, but is needed to display the menu at all:

    * html #menu {position:absolute;}

Taggings: