Absolute Positioning

Archive for 'Menus, navigation bars, and navigation elements' Category

Menus, navigation bars, and navigation elements

Navigation is not an issue in printed media. The index is sufficient to appraise the readers about the contents of the book and the location of the content. The thickness of the book or the page numbers will give them visual clues about the length of the book. This is not the case with the [...]

Understanding the need for navigation elements

When the first web pages were introduced, designers were still caught up in the metaphor of the book. It appeared logical to stitch together the pages using next and previous links. The full potential of the navigation in this new media was as yet unrealized. As users and designers got more and more sophisticated and [...]

Basic navigation conventions

1)      Home links need to be provided on the upper-left corner of every page. 2)      A consistent look and feel should be the feature of every website, so that the users are not hard put to learn new navigation techniques for every new page they access. 3)      All similar items of a web page should [...]

Types of navigation and menu modules

1)      Menus are core modules that are used for providing something similar to the Table of Contents in a book. These menus can be one level or mult-level menus. Common types of menus are cascading menus and tree menus. These menus are usually placed on the left column of the body of the web page. [...]

Absolute and relative positions

The first step in creating menus or navigation elements is to decide on the location and to create the skeletal structure of the menu or navigation bar. Menu and navigation elements are defined in a div tag. The div tag is absolutely or relatively positioned later according to the need of the web page. Elements [...]

Example of an absolutely positioned vertical menu construction

Begin by defining the menu div as below: #menu {width: 12em; background: #eee} The use of em tags will take care of the width of the menu to the container div. This also resolves IE’s box-model problems. All the block elements inside this div will fill the containers width by default. The em widths will [...]