10 Quick and Dirty Ways to Lay Out a List of Links

The best way to lay out a list of links — say, like those you would find in a footer — is typically to code them as an HTML list and use CSS for the presentation. However, sometimes this is not practical. Here are some variations on how you can separate a list of links, starting with the old standby, the vertical bar or pipe…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Fixed vs Fluid vs Elastic Layout: What’s The Right One For You?

The problem has boggled the minds of Web designers for years: fixed, fluid, elastic or a hybrid layout design? Each option has its benefits and disadvantages. But the final decision depends so much on usability that it is not one to be made lightly. So, with all the confusion, is there a right decision? By considering a few factors and properly setting up the final design, you can end up with a successful layout design that reaps all the benefits. This article discusses the pros and cons of each type of layout…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Tutorial All About CSS Floats

Float is a CSS positioning property. If you are familiar with print design, you can think of it like an image in a layout where the text wraps around it as necessary.

In web design, an image that is floated remains a part of the flow of a web page. That means that if it changes in size or if the elements around it change, the page will automatically adjust (reflow). This differs from page elements that are absolutely positioned. Absolutely positioned page elements are removed from the flow of a web page. Absolutely positioned page elements will not affect any other page elements, whether they touch each other or not…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Sexy Drop Down Menu with jQuery and CSS

Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. This tutorial shows how to create a sexy drop down menu that can also degrade gracefully…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

24 Essential Submit Button Enhancements

Typically a press on a web page button indicates that a user is making a decision of some kind. Buttons are for that reason very important elements and they need to be well integrated with the overall design, easy to spot and use. Styling of buttons is typically achieved using CSS and graphic elements but there are a few other techniques available as well…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

The Two Ways of Sizing Absolute Elements in CSS

Anyone who has used CSS for a while will know about the merits of absolute and relative positioning. To recap:

position: relative allows an element to be shifted from its original position either horizontally (using left or right) or vertically (using top or bottom).

position: absolute allows an element to be positioned with respect to a containing block using left, right, top or bottom (the containing block is the nearest ancestor node with a position of relative, absolute or fixed)…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)