Skip to: content, navigation

How to use the program

Choosing a positioning mode

List-u-Like supports relative, absolute or fixed positioning, which is specified using the positioning radio control.

Absolute vs Relative

With absolute positioning

The navbar is removed from the document flow. This allows you to order the source code differently from the presentation, or may allow for layouts which are not otherwise possible.

With relative positioning

The navbar is in the document flow, fluid to window and text-size changes which alter its surrounding layout, and displacing other elements in its flow.

A vertical navbar is a block-level object, and creates a line-break after itself.

A horizontal navbar is 100% width and floated, which takes it out of the document flow at the point where it's rendered. To position the next element underneath you should give that element clear:both in CSS, or compensate with margin-top.

You can put a relatively-positioned navbar inside one or more containing elements, and position or float those as you need. You can also have an absolutely-positioned navbar inside a relatively-positioned container, and if you do then it's x,y co-ordinates will be from the origin of the container.

Fixed positioning

Fixed positioning is absolute with respect to the viewport - as the page scrolls, the navbar comes with it.

CSS position:fixed is not supported in any version of Internet Explorer, and is too unstable to apply for Mozilla Gecko browsers earlier than 1.3b (Netscape 7.1); for these browsers it degrades to absolute.

But that being the case, you should avoid putting a fixed navbar inside another positioned container - fixed positioning is not contextual with its parent the way absolute positioning is, so you could end up with a huge cross-browser discrepancy.

How positions are applied

The navbar position isn't actually position in the sense of using top, left or right - it's either margin or padding on the navbar <ul>, depending on the configuration you're using:

With a vertical navbar
An absolutely-positioned navbar uses margin. A relatively-positioned navbar uses padding.
With a horizontal navbar
The top position is margin for an absolutely-positioned navbar, or one which has a visible horizontal continuation strip; it's padding for a relatively-positioned navbar with no continuation strip. The left position is an offset to the first link - the navbar <ul> always has 100% width.

With relative positioning, the navbar offsets are essentially just a tweak - it's where you put it in your HTML that matters. But bear in mind, nonetheless, that applying offsets to a relatively-positioned navbar will both move it and cause displacement, rather than merely moving it, as it would if it were position.

If you want to see what's what, set a bright background-color on the navbar <ul> - padding regions will show up as that color.

This manner of positioning was not, incidentally, a choice - it was unavoidable due to the mire of browser bugs, quirks and differences-of-interpretation that plague us all. To the best of my knowledge there is no single, consistent way of applying the navbar positioning, which works in all supported browsers and is free of other side-effects. But if you know otherwise, please do let me know.