
Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
During the heyday of IE6, frontend design was in murky waters. The frontend designer would need to employ lots of hacks, patches, and workarounds just to achieve the look and feel of a grand mock-up. Remember:
table
for layout?These were just a minute part of the painful challenges frontend designers faced yet nothing stopped us from adapting to the crappy non-standard browsers of that time. We moulded the web into different appearances despite the difficulties. Remember the time:
There’s an update to this entry:
Elements of CSS V2
—
In this basic HTML and CSS tutorial, we are going to demonstrate the following:
position: absolute
and padding
And some disclaimers:
Your content will flow through various containers (called regions) which you specify.
The CSS regions module allows content to flow across multiple areas called regions. The regions are not necessarily contiguous in the document order. The CSS regions module provides an advanced content flow mechanism, which can be combined with positioning schemes as defined by other CSS modules such as the Multi-Column Module [CSS3COL] or the Grid Layout Module [CSS3-GRID-LAYOUT] to position the regions where content flows.
Imagine a magazine layout where you could have multiple columns in your article or where the cut of a paragraph continues to the next page.
With all these CSS developments going on, one could really build a web app based on HTML and CSS as its front-end.
We’re really in the 21st century.
Also, checkout Adobe & HTML’s page on CSS Regions.
I’m being confounded about an article I’ve read about your logo being an image (and not a background image). You would notice about the differences between the two wherein img
puts your actual image on the page and h1
replaces the text with a background image of your logo.
You may be using one method over the other — and to calm your nerves down, Facebook and WordPress use h1
approach while Google and Firefox use img
approach (and a whole lot of different combinations for other sites out there).
Now, I won’t go into details about both methods because I’m sure you’re already using one — even different from the two mentioned. What’s important is the answer to “why are we using what we use?”
The answer lies on your priorities.
If you’ve answered the former, then most likely you’re using h1
approach and the latter, img
approach.
Personally, the way I test if I’m writing a web document properly is I strip it off everything — images and CSS — and see if it still makes sense from having semantic HTML elements to its document outline. And one of the natural steps in this test is having a heading on top of your document — usually the title of the site — it could be a logo or an photograph with an inscription — but what it represents is more important.
There are lots of combinations in putting up a logo on your webpage — just be conscious of why you’re choosing one approach over the other.