Obvious In Hindsight
Archive of tips, tricks and solutions for designers and programmers!

Archive for the ‘CSS’ Category

CSS: Horizontal row of images in a div

January 11, 2010

Often, images are arranged horizontally for the purposes of a navigation menu using images rather than standard text link. What in theory should be a relativly simple task can in practice become a nightmare if you overthink the process, are unaware of the idiosyncracities of the various popular browsers and the relevant workarounds. The simple […]

CSS: Horizontal ul (unordered list)

January 11, 2010

An unordered list is a list that uses bullet points rather than incrementing numbers (1, 2, 3, 4 etc.). By default a browser will render the list vertically. The following styling will remove the bullets, the default bullet indent (margin), the list padding and will arrange the list horizontally rather than vertically. This technique is commonly used […]

CSS: Links

January 10, 2010

Links can styled by ID or class (an ID can only called on once whereas a class can be called on many times). The styling is generally used to present a sense of interactivity to the end-user. Links have four states: link (unvisited) visited hover (mouse over) active (selected) The unvisited and visited links are self-explanatory. […]

CSS: ID vs. Class

January 10, 2010

IDs and classes are used as part of a HTML element to trigger (call on)  the styling in your CSS documents. What’s the difference? An ID can only be called on once and is used for a unique element of your web page such as a banner, navigation menu or footer. The following example demonstrates […]

CSS: Inline, Internal, External

January 10, 2010

You can add CSS (Cascading Style Sheets) to web pages in three different ways. External CSS is considered best practice since you can effectivly change the styling of an entire website by editing one CSS document. The inline and internal options would require you to edit each document individually which might prove to be unnecessary repetition. Inline […]