I’ve seen the ‘web 2.0′ layout (full width background, centred content) done in some pretty wacky and different ways, the worst being a background image and then fixed height sections laid on top (if the content wraps or the text is resized…bam..broken layout).

Because of this I am going to demonstrate the method I use – content strips. Hopefully this will be useful to CSS beginners who want to code this type of layout.

Essentially, what you do is treat each section, or ‘strip’, separately and layer them like a cake.

Lets take a commonly used design and demonstrate what I mean.

In the above design as you can see we have a header, a content (with two sub sections), and a footer. The footer and header require a full width background. So, horizontally we can see 3 strips – header, content, footer.

1
2
3
4
5
6

<div id="header"><p>Header</p></div>
<div id="content">
    <div class="mainContent"><p>Main Content</p></div>
    <div class="subContent"><p>Sub Content</p></div>
</div>
<div id="footer"><p>Footer</p></div>

Using CSS we can style each strip, leaving them all as full width elements. Header and footer should get a tiled background image each, and the text should be aligned center (text-align:center;).

1
2
3
4
5
6

.inner {
    width:700px;     /* Limits its width */
    margin:0 auto;   /* Makes this inner div centered */
    text-align:left;    /* Parent strips have center aligned text */
    overflow:hidden; /* To clear floats */
}

Our HTML now looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="header">
    <div class="inner">
        <p>Header</p>
    </div>
</div>
<div id="content">
    <div class="inner">
        <div class="mainContent"><p>Main Content</p></div>
        <div class="subContent"><p>Sub Content</p></div>
    </div>
</div>
<div id="footer">
    <div class="inner">
        <p>Footer</p>
    </div>
</div>

See how it works? Each strip can have its own background this way, and can shrink and grow to fit it’s content without breaking the layout.

As I said before, this is my preferred method of coding these kind of layouts and it has not failed me yet. I hope you found this useful.

In this post I will suggest some methods of marking up your search boxes, and show a neat way of styling it using css and a few images.

First things first

Lets think about what is needed. For a search box we need:

1. A form element
2. A text input
3. A submit button

Also, ideally we need a label element for accessibility reasons so that users know what purpose the input element has (you can read more about labels and accessibility at 456 Berea St).

Therefore, here is the markup we could use for our form:

1
2
3
4
5
6
7

<form action="page.html" method="post">
      <div>
            <label for="search">Search:</label>
            <input id="search" name="search" type="text" />
            <input alt="Search" src="img/search.gif" type="image" />
      </div>
</form>

This is pretty much the way most people would do it, but Im going to challenge this for the following reasons:

1. We rarely want the label visible after styling
2. Hiding the label with display:none can cause accessibility issues (link)
3. Other methods of hiding the label can also cause issues (link)
4. I want a method that does not require hiding the label…

Therefore I have come up with the following; this may have drawbacks which I’m hoping people will discuss in the article comments, any here goes:

1
2
3
4
5
6

<form id="searchform" action="page.html" method="post">
      <div>
            <input id="search" name="search" type="text" />
            <label for="search"><input title="Search" alt="Search" src="img/search3.gif" type="image" /></label>
      </div>
</form>

My reasoning behind this is, we still get the association between label and form element, the input has alt text of ‘Search’ which means this is what (in theory) the screen reader should pick up. Because this label doubles as the submit button we also don’t have to hide it. This method is also pretty easy to style. Lets get on to that now.

Styling the form

To style my form I will use 3 images: left curve, a gradient and the submit button. I could use a 4th image and tile it for the top and bottom borders, but for this Im just going to use css borders on the input box.

Now for the css:

#searchform div {
    /* This div will have the left image as a background */
    background: url(search1.gif) no-repeat left top;
    padding: 0 10px;
    margin: 0;
    line-height: 1;
}
#searchform #search {
    /* Im going to apply a top and bottom border to this input so that it fits with my images and give it the gradient background */
    border-top:2px solid #999;
    border-bottom:2px solid #999;
    border-left:0;
    border-right:0;
    background: #fff url(search2.gif) repeat-x top;
    padding: 3px 2px 2px 0;
    height: 15px;
}
#searchform input {
    /* Some reset styles to make my form elements play nice */
    vertical-align: top;
    margin: 0 !important;
    line-height: 1;
    outline:0 !important;
}

Internet explorer plays up a bit regarding input positioning but this can be overcome with a conditional comment to add a pixel of padding to the input box:

1
2
3

<!--[if lte IE 7]>
      <style type="text/css" media="screen">#searchform #search {     position:relative;     margin-top:-1px !important; }</style>
<![endif]-->

Heres what it looks like:

Mission accomplished?

It looks nice, but how accessible and semantic do you think the code is? I personally think its better than simply hiding the label but I could be wrong. Discuss below!

The problem occurs when resizing the browser window; cutting off background images and potentially making text illegible. Worse still, the bug also seems to affect mobile browsers with a zoom function, such as opera mobile.

After some dabbling I found a solution, which I shall explain in this post.

The sites that are most affected are those that use ‘content strips’ as I like to call them; that is a full width background with content centered down the middle. I tend to code a ‘strip’ like this:

1
2
3
4
5

<div id="header">
     <div class="inner">
          ...Content goes here...
     </div>
</div>

In this example #header is a block level element making it full width with a background image (usually tiled). .inner is my content div; it has a width set and auto-margins to make it centered on the page. The diagram below shows the structure of the layout on blue anvil:

If you make the window smaller and then use the horizontal scrollbar in the browser window you will notice the background gets ‘cut-off’. This seems to affect all modern browsers. From what I can gather, it seems the divs with the background image resize with the browser window, meaning any fixed width content will spill out and be shown on the page background; this demo page has the bug for you to see.

The problem itself is not major for most people, since (I assume) resizing the window and scrolling is quite rare. However I have noticed it happening before on the Nintendo Wii browser, and some mobile browsers (opera mobile for instance) where the problem can be more severe; its more of a problem on these devices because It can prevent the user from being able to read content. For example, when opera mobile cut the background off of the footer on Blue Anvil the white text was not legible, as this screenshot shows (taken from my HTC Diamond using Opera Mobile before I fixed the layout):

I experimented with all sorts of attempted fixes; wrappers, 100% widths, clearing…nothing seemed to work at first. In the end I found a workable solution which was actually quite simple: min-width. Using min-width on the div with the background prevented the browser from shrinking it too much hence eliminating the problem.

This fix is quite simple and does not seem to affect anything else on the page or cause any issues of its own, so it is something which can be added easily to any layout suffering from this problem.

Enjoy.

Ive rounded up my favorite methods, and this entry will show you how to use them, and when to use them.

Method 1 – Stick the image in the Heading tag

This method simple involves putting your logo in a heading tag, and giving it relevant alt and title attributes. It works well with simple logos, but if you want cool rollovers etc, you will need a different method.

(X)HTML

<h1>
   <a href="home.htm" title="homepage">
      <img src="logo.gif" alt="Site name" />
   </a>
</h1>

Suits – Simple logo’s with an alt tag, and possibly a link

Pro’s – Alt text should remain visible with images off, logo visible when CSS disabled

Con’s – No css rollovers, you must resort to Javascript

Method 2 – Phark Method – modified

This method involved using a CSS background image to show the logo. If CSS is disabled you still see the heading text, however with images off and CSS on the logo is hidden, which is a shame.

It works by indenting the text out of sight, and showing the background image. I use this one when I have a transparent logo, e.g. A transparent png, since other methods (like Gilder/Levin below) show the heading text underneath the image.

My modded code below also allows pretty rollovers, a nice addition.

(X)HTML

<h1>
    <a title="Homepage" href="home.htm">
    <span>
        Site name
    </span></a>
</h1>

CSS

h1 a span
{
    	height:164px;
    	width:219px;
    	background: url('logo.png') no-repeat;
    	text-indent: -5000px;
}
h1 a:hover span, div#header h1 a:focus span
{
    	height:164px;
    	width:219px;
    	background: url('logoHover.png') no-repeat;
    	text-indent: -5000px;
}

Suits – Headings when you want a link, and your logo is transparent.

Pro’s – Text displayed when images off, transparent images work, css rollovers work.

Con’s – Breaks with images off and CSS on.

Method 3 – Gilder/Levin Method – modified

This method is my favorite when using opaque images. It works by hiding the text with a background image via CSS, it does however need some un-semantic markup; but thats a small price to pay. The span is basically positioned to cover up the header text, thats the reason it needs to be opaque. And remember; the width and height must match the image!

(X)HTML

<h1 id="header">
	Site name<span></span>
</h1>

CSS

h1#header
{
      margin:0; padding:0;
      position:relative;
      width:316px; height:29px;
      overflow:hidden;
}
h1#header span
{
      display:block;
      position:absolute;
      width:316px; height:29px;
      margin:0; padding:0;
      background:url(logo.gif) top left no-repeat;
}

Suits – Headings when you want a link, and your logo is opaque.

Pro’s – Text displayed when images off and also when CSS off.

Con’s – Cannot use a transparent image.

Conclusion

So they were my favorite methods, but are they best? DO you have better solutions? Leave a comment and tell me your views on image replacement.

Related reading

• Revised Image Replacement
• JavaScript Image Replacement
• MIR: Image Replacement
• Using Background-Image to Replace Text

This article is aimed at semantic mark-up beginners, including clients who want to learn more about code so they can ensure their sites are semantically correct. It also shows the mark-up available and it’s usage.

What is Semantic Mark-up

In web development, Semantic Mark-up is the name given to ‘marking up’ (coding) your sites with code that represents the information contained in elements, and is descriptive. More importantly, in my opinion, it makes reading code much, much easier because you can see and understand what is happening, rather that being swamped with meaningless code.

An example would be, say I wish to make an important point stand out by making it bold.
I could use the <b> tag, but as ‘b’ says nothing about the content it holds it is not semantically correct, it simply tells the browser to render the text in bold.

The semantic way would be to use <strong>, as it tell you that the contained code is important and ‘strong’.

Another example is <i> for italic, it doesn’t explain what the content represents, however the <em> tag does (emphasis).

Another aspect of semantics is using the correct tags for the correct content, for example, if I want to make a bulleted list I would use the <ul> tag (unordered list). If I wanted to have a main heading I would use the <h1> tag (heading 1).

Why bother

There are many valid reasons for making your mark-up semantic, rather than presentation based, here are the main points in my opinion.

Ease of updating

At some point you are going to want to update the look of your site, making your site semantic will make this task seriously simpler. Take this for example, say you have a site with many pages with lists of content on them, and you want to make the list items have uppercase text, but you have used presentational mark-up:

<p>
-	list item</br>
-	list item</br>
-	list item
</p> 

To do this you would have to go through all of your pages, updating the content to have upper case letters instead of lower. Ouch.

Now consider you used an unordered list:

<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

Now you could convert to upper case with a simple line of CSS, without touching the mark-up itself.

ul {text-transform: uppercase ;}

Simple, separating content from presentation is definitely beneficial.

Presentational mark-up is inaccessible

Presentational mark-up does nothing to say what the content it holds is for. This can reduce understanding, and meaning, of the text.

You can look at this from a few different ways.

To someone reading the code, for example a web programmer, if a code is presentational it makes it very hard to make sense of. For example:

<font size=”14px” color=”#000”><b>Welcome to the site</b></font>

This would mean very little to anybody reading. What is the text for? What does it represent? The semantic, better way would be:

<h1>Welcome to the site</h1>

Now it actually means something, it is a heading.

You can also see that in the above example the semantic code was much more organised and compact, and would make the file size lower.

Computers understanding the content

If a program wants to understand the code, presentational mark-up does little to help. Semantic mark-up however describes the content making it much easier and more meaningful to a program.

An example would be a screen reader program for the blind. They would not benefit from the presentation of an element, they would rely on what the element is to make sense of it, therefore semantics would be very important in that case.

You should also realise that search engines need to read you page, so by impoving your site’s semantics you are also improving your visibility to the search engines.

Search engine optimisation

Most search engines weight keyword importance by what they are e.g. paragraph text. By using semantics you are essentially telling the search engine what is important, and what is less important. For example, keywords in the headings are deemed more important than keywords in the paragraphs.

Semantic elements – A guide

This section describes and lists common elements, and what they should be used for in web documents.

Block-level elements

Block level elements usually render on a new line, and can contain inline elements and other block elements.

Headings

The heading elements (h1, h2, h3 and so on) should be used for headings in your document.
As the heading number increases, the importance of the heading is reduced.

As a general rule, it is wise to use <h1> once, for the main page title, then use h2 and possibly h3 for the page headings.
But remember, what ever you do, keep it consistent.

Paragraphs

Paragraphs of text should always be wrapped in the paragraph (<p>) tag. The ‘p’ tag. By default, starts on a new line, so this is the correct method of making paragraphs; do not use the <br /> element to do the same thing, as this is not semantic. Example:

Correct usage:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus libero felis, iaculis vitae, elementum id, laoreet sit amet, elit. Cras iaculis aliquet augue.</p>
<p>Quisque lacus velit, tempus at, faucibus eget, lacinia id, libero. Duis aliquam, eros a consequat imperdiet, sapien ante ullamcorper sapien, id venenatis lacus augue in lorem.</p>

Output:

Incorrect usage:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus libero felis, iaculis vitae, elementum id, laoreet sit amet, elit. Cras iaculis aliquet augue. <br />Quisque lacus velit, tempus at, faucibus eget, lacinia id, libero. Duis aliquam, eros a consequat imperdiet, sapien ante ullamcorper sapien, id venenatis lacus augue in lorem.</p>

Output:

They make look the same, but the 2nd is not semantically correct, and also does not separate content from presentation, as you are forcing the presentation to be changed with a ‘break’.

Blockquote

Quotation

Used, usually along with ‘cite’, to quote a source of information. By default, the block quote element is displayed as a block level element, and has margins/indentation.

Blockquote can also have the attributes title and cite. Even though it has a ‘cite’ attribute, not many browsers use this, so it is wise to use the ‘cite’ element with it also, so the source is visible.

Example:

<blockquote cite="http://www.source.com">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus libero felis, iaculis vitae, elementum id, laoreet sit amet, elit.</p>
<p><cite><a href=" http://www.source.com ">http://www.source.com </a></cite></p>
</blockquote>	

Output:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus libero felis, iaculis vitae, elementum id, laoreet sit amet, elit.

http://www.source.com

Inline Elements

Inline elements can usually only contain text, and other inline elements. They do not begin on a new line, like block elements.
I will outline the most common elements, with alternatives for use if you just want to change style; do not use these tags if you are just after the styling and not the meaning of the tag.

Abbr

abbreviated text

The ‘abbr’ tag is used to mark-up abbreviations, and by using its ‘title’ attribute you can display the full meaning as a tool tip.

Acronym

acronyms

The acronym tag works in exactly the same way as the abbr tag, but is specifically for acronyms.

Cite

Citation

Used for referencing a source of information.

Code

Computer code

The code tag should be used when displaying an extract of code, by default some browsers render it in a mono-space font such as courier.

Del

Deleted

If you delete, or retract, some text on your page, but still want it visible, you should use the ‘del’ tag. By default, most browsers show deleted text with a strike-through.

Del can also be a block-level element.

Alternative: <s> or <strike> – strikethrough tag (deprecated), alternatively use CSS – text-decoration: line-through;

DFN

Definition Term

The ‘definition term’ tag is quite uncommon, but is used for defining a term for the first time in a document. It can be used with the title attribute to define its contents.

Example:

<dfn title="Opera's web browser">Opera</dfn> is available on desktop pc's and mobile devices.

Output:

EM

Emphasis

Used for emphasising the text inside. By default the emphasised text is represented with an italic style.

Alternative: CSS – font-style: italic ;

Ins

Inserted text

This tag can be used to identify text you have inserted at a later date, and is especially useful when using along with the ‘del’ tag, so show what you have replaced the deleted text with.

Ins can also be a block-level element.

Kbd

Keyboard instructions

This tag is for marking up keyboard instructions for the user to perform.

Samp

Sample output

This rarely used tag is for marking up sample output from a program/script, for example an error message in windows.

Var

Variable

The ‘var’ tag can be used to indicate a variable name when writing about computer code.

Example:

The users name is stored in <var>$name</var>.

Output:

Strong

Stronger emphasis

Used for a stronger emphasis on the text inside. By default the ‘strong’ text is represented with a bold styling.

Alternative: CSS – font-weight: bold;

Lists

There are three types of lists:

UL

Unordered lists, a.k.a bulleted lists. Use these when your list doesn’t need to be numbered. List items in the unordered list are specified with the ‘li’ tag. A popular usage is with navigation links, as they are listed in a ul (and usually styled with css). The blue anvil navigation bar is a UL.

OL

Ordered lists, a.k.a numbered lists. Use this when you want list items (defined again by ‘li’) to be numbered.

DL

Definition lists. These use the tags ‘DL’ (Definition list), ‘DT’ (Definition term), and ‘DD’ (definition description), and are used to show terms and definitions. The list you are currently reading is a definition list! See below for the code.

Definition list example

<dl>
<dt>Term</dt>
<dd>Term definition.</dd>
<dt>Another term</dt>
<dt>Another term</dt>
<dd>Definition for both terms above.</dd>
</dl>

Output:

Term

Term definition.

Another term

Another term

Definition for both terms above.

Ordered list example

<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>

Output

1. List item
2. List item
3. List item
4. List item

Unordered list example

<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

Output

• List item
• List item
• List item
• List item

Basic Semantic examples

Code listing Example

If you wanted to show some code on your web page, to do it semantically you could do the following.

<code>$name = 'Bob'; $name.=' Smith';</code>
When you echo <var>$name</var> it will display <samp>Bob Smith</samp>.

Example Output

As you can see, the code is easy to read and is clearly labelled, even if the difference to the presentation is minimal.

Navigation bar example

A well laid out navigation would look like the following:

<ul id=”navexample”>

<li><a href="http://www.blue-anvil.com/index.php" >Journal</a></li>

<li><a href="http://www.blue-anvil.com/services” >Services</a></li>

<li><a href="http://www.blue-anvil.com/contact">Contact</a></li>

</ul>

Un-styled, this mark-up will output like this:

• Journal
• Services
• Contact

The list based navigation could then be styled via CSS to change the look, read on for more information.

CSS the holy grail

So far this article has focussed on the mark-up of the web page, but it doesn’t end there. Now you know how to write a solid base for a page, you can style the presentation using the power of CSS. This section has some examples.

How to style an element

To style an element, just put the element name in your css document and add styles, for example, have you noticed my ‘code’ elements?

Code goes here

To achieve this effect, I have the following in the style sheet:

code{ styles go here }

This applies to all of the semantic tags, style as you please!

Closing statement

I hope this article has helped give you an insight into the world of semantics, and that the points raised benefit you web site’s design.

Feel free to leave any comments related to this article!

Further Reading

I recommend DesignBits “Create a Semantic web page” as a good follow up to this article.