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

Archive for the ‘Web Design’ Category

PHP: Using predefined variables in paths

January 13, 2010

Predefined variables can be used to replace specific parts of the paths of files or images. Predefined variable in a path for an include file It’s important to understand that the path for an include file is relative to the web server and not the web root where the home page is stored. The predefined […]

Web Design: Absolute paths, document relative and root relative paths

January 13, 2010

A path, in effect, is like a postal address. Paths generally lead to a file (e.g. image) or a folder (e.g. directory). Web root vs. document root A web root is the upper most layer of your website in which all files and subdirectories are stored. Generally this is where the home page is stored. […]

PHP: Include file

January 11, 2010

The include function is useful for streamlining  code across your site. Rather than the full code of you header section, for example, you can replace it the one line of code required for the include function. This is also advantageous for future modifications. This does not affect SEO (Search Engine Optimization) since search engines only […]

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 […]

Web Design: Basic mouse-over image swap

January 11, 2010

A common image effect is to swap out an image for another when the end-user places their mouse over it. This techniques is usually used for links but can be used as creatively as you like. Basic mouse-over image swap (JavaScript) You should have two images: a default image and an image that’s to appear on the […]

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 […]