The right look but is it semantic?

[konnor5092]

Maybe what I have done is okay but semanticly it could be poor.

I have the front page of a site I'm working on here....

http://www.mattoconnor.co.uk/index2.php

The code I'm concerned about is the header

Code: Select all

<div id="header">
        <h1>Team bullet proof bomb</h1>
        <h2>| competing | <span class="grey">in</span> | the |</h2> 
        <div id="navigation">
            <ul>
                <li><a href='index2.php'>home</a></li>
                <li><a href='about.php'>about</a></li>
                <li><a href='services.php'>services</a></li>
                <li><a class="last" href='portfolio.php'>portfolio</a></li>
            </ul>
        </div>       
    </div>

Code: Select all

#header, #middle, #bottom {
    width: 608px;
    margin: 0 auto;
}

/****** HEADER******/

#header {
    background: #000000 url(images2/bulletprooflogo.jpg) left center no-repeat;
    height: 149px;
}

#header h2 {
    background: url(images2/mongoliarally.jpg) 70% 48% no-repeat;
    height: 90px;
    padding: 20px 0 0 238px;
    font-size: 14px;
    font-weight: normal;
}

A couple questions..

- Should I have the logo within the <h1> tag? or is it okay as a background to the whole header?

- How can I write semantic code for the <h2> tag whereby 'competing in the mongolia rally' is within the <h2> but a logo is substituted for the mongolia rally and positioned as shown on the webpage?

Many thanks in advance.

[MikeHopley]

For the logo, I would simply use this:

Code: Select all

<h1><img src="logo.xxx" alt="Team bullet proof bomb"></h1>

The <h2> should not be interrupted by the | dividers (this is incredibly annoying for screen readers), and it should have the full text. Use this:

Code: Select all

<h2><span>competing</span><span>in</span><span>the</span>
<img src="MongoliaRally.xxx" alt="Mongolia Rally"></h2>

The spans are only necessary because of your line divider effect (the | glyphs). Personally I would dump the dividers, but if you want to keep them, apply them as background images to the spans.

Alternatively, make the entire <h2> into an image, and use the same method as for the <h1>. This would be easier.

[Aso]

Matt, I see you've used

Code: Select all

 text-indent: -5000px

on your <h1> tag. Adding to that, set it to display:block and the height of your logo, then set the background of the <h1> element as the logo. Then do the same for the Mongolia Rally (and make an image that is the entire 'competing in the Mongolia Rally.')

Personally, I don't like images in header tags, and essentially the logo is presentation, not content. I must admit the Phark Technique (mentioned above) will suffer from CSS On / Images Off scenario, whereas Mike's suggestion will mean the alt tag is at least visible.

You might also want to read about FIR (Fahrner Image Replacement), but IMO it has no advantages over Phark (and requires extra markup)

[MikeHopley]

I don't see the problem with images in headings.

If you've decided that you prefer users to see the image, then why not put it straight into the heading? This is the most straightforward and logical way, and it avoids all possible accessibility problems (provided you use alt text).

All the "clever" alternatives involve potential accessibility problems.

Search engines can (and do) index alt content.

If the logo is being used to communicate a page heading, then it is not presentation. It's content. It happens to be content conveyed by an image, but it's content nonetheless.

[welshstew]

Originally Posted by aso186

You might also want to read about FIR (Fahrner Image Replacement), but IMO it has no advantages over Phark (and requires extra markup)

You can also look at the Gilder / Levin method:

http://www.mezzoblue.com/tests/revis...e-replacement/ - near the bottom

http://wellstyled.com/files/css-repl...example02.html - example (header)

http://wellstyled.com/css-replace-text-by-image.html - look at second method

again, it requires a little extra markup, and also solves the CSS on / images off scenario. It also works with JAWs (screen reader software).

[MikeHopley]

Were I to use an image replacement technique, it would be Gilder/Levin. That's the only one that seems even close to sane.

[konnor5092]

cheer chaps.

I'll give that a whirl.

[MikeHopley]

PPK's javascript version is another sane option.

[karinne]

There's also the Rundle text-indent method which I really like

How do I hide text but still have my site accessible to all?

[MikeHopley]

Originally Posted by karinne

There's also the Rundle text-indent method which I really like

How do I hide text but still have my site accessible to all?

Better than most, but the text is inaccessible for visual browsers with images off.

So a better title would have been: "How do I hide text but still have my site accessible to some?"