Creating and Using an Image Header

JavaScript Editor

Best javascript editor debugger Ajax website
↑

Main Page

Creating and Using an Image Header

The one place where it probably makes sense to use an image for a handheld page is as a title for the entire page, to give your page its own identity in that very small screen.

To create and use an image header:

1.	Create a new image or reduce an existing one to only 100 pixels wide (Figure 13.11). Figure 13.11. Here's our little 100-pixel wide header image.
2.	Add the image to your header `div` in the usual way (Figure 13.12). Figure 13.12. Since this logo shows the name of the Web site, we should repeat this name in the `alt` attribute just in case the image is not displayed.
3.	Use the name of your Web site for the alternate text (see page 91).
4.	If this XHTML page will also be used for your regular screen site, add `#header img {display:none}` to hide the image in your header div for regular screen browsers (Figure 13.13). (You may have to adjust this according to the contents of your own header `div`.) Figure 13.13. We don't want the logo to appear on our site when it's viewed with regular computer screens, so we'll add this line to our screen style sheet.
5.	If desired, hide the regular header (Figure 13.14). Figure 13.14. The logo conflicts with the text header, so we'll hide the `h1` element on hand-helds only.

Tip

If the image is bigger than 100 pixels it will be scaled proportionally to fit smaller screens, like on telephones, and may become too short to be legible. If it is larger, there will be room leftover, a much more palatable outcome.

Figure 13.15. Now the first thing our visitors see is our logo and the text header is hidden. (It will continue to be displayed on larger computer screens.)

JavaScript Editor

Best javascript editor debugger Ajax website
→