Tag: HTML
Styling form buttons
Anyone who’s used the web has encountered buttons in forms. Buttons, as with most form controls, can be a bit tricky to style for consistent look cross browser and cross platform as the operating system often has more to do with how they are rendered than the browser itself. Roger Johansson has delved into this issue in more detail.
Content bookends
Sometimes you want to have a list of text items or images appear on the same line but with some items aligned to the left and some aligned to the right. An example of this would be a footer where you want to split the links down the middle. Or maybe a blog post where you want to put the date on the left and the number of comments on the right. More on Content bookends
Onfocus, background-changing, sliding door tabs
There are already several excellent articles discussing the sliding door tabs technique for creating navigation elements, so why do we need another one?
What is the correct tag for the title of a site?
The title of your site is a fairly important aspect of any site and in most cases appears on every page. But just what is the correct tag to use to display your site’s title? We, of course, have the <title> tag but this doesn’t actually appear in the body of your page, but rather at the top of your window.
What is ‘semantic mark-up’?
se·man·tic adj.
- Of or relating to meaning, especially meaning in language.
- Of, relating to, or according to the science of semantics.
OK, so semantic has to do with ‘meaning’ but what has that got to do with coding web pages? Well, when referring to semantic mark-up, it means using the correct tag to accurately describe the type of content.
Elastic layouts
Prompted by a comment from Mike Cherim of Accessites in answer to my post on Zoom Layouts, this post is to list Elastic Layouts.
Zoom layouts
I came across an article today on A List Apart written by Joe Clark: Big, Stark & Chunky (it is 18 months old – I know, I should read ALA more often) which was aimed at promoting the use of ‘zoom layouts’, which are those designed for people with low or impaired vision.
What is divitis?
‘Divitis’ is a term used to describe an error common amongst newcomers to building CSS-based sites whereby they use too many divs for everything.
What’s the difference between classes and IDs?
Classes and IDs are how we create different styles for different elements on the page.
IDs are unique identifiers and can only be used once on any one page. Classes can be reused and applied to different elements.
My links won’t change colour when I hover over them
Usually when people have trouble with their links not doing what they want, it’s because they’ve arranged them in the wrong order. More on My links won’t change colour when I hover over them
How do I get different styled links?
So you’ve set up the styles for the links of your page but you have one section that you want to be different from everything else. To do that, you need to assign a different class or ID.
How do I centre my layout?
To centre a CSS layout horizontally, you need to add margin: 0 auto; to either the body or a containing element More on How do I centre my layout?
My floated layout won’t work!
Usually when people have trouble with floating columns it’s because they’ve specified a width where there doesn’t always need to be one.
Why won’t faux columns work?
One of the easiest methods of giving your site the appearance of the columns being the same height is to used the Faux Columns technique as first outlined by Dan Cederholm on A List Apart.
While the method is simple, unfortunately, many newcomers to CSS have trouble getting it right at first. More on Why won’t faux columns work?
Single image replacement rollovers with Suckerfish dropdowns
I discovered two of my most often used CSS techniques at the same place – Petr Staníček’s Wellstyled.com (Staropramen, Budvar, Pilsner Urquell, great CSS techniques – gotta love the Czechs 
).
And those techniques are an image replacement (IR) technique that I later found out was actually called the Gilder Levin method and the use of a single image for creating CSS rollovers without the need for preloading images.
More on Single image replacement rollovers with Suckerfish dropdowns
