WEB STANDARDS CREATIVITY

Styling the branding
I hope that despite all the new techniques and selectors, your mind is free from worries. There is one more area of the page
for you to work on, and that’s my favorite part of any site design: the branding.
At this point, you have already worked with all of the techniques and types of selectors that will transform the branding
area’s top-level heading and the extract from Marley’s “Three Little Birds” into attractive and meaningful visual elements.
As these elements will be positioned to create the visual effect of the logo “breaking out of the box,” start by turning the
branding division into a positioning context for these elements.
div[id="branding"] {
position : relative; }
Now you are all set to position the top-level heading and blockquote. Use the Phark image replacement method to replace
the text with a background-image.
h1 {
z-index : 1;
position : absolute;
left : -50px;
top : -30px;
height : 178px;
width : 379px;
background : url(../images/h1.png) no-repeat;
text-indent : -9999px; }
div[id="branding"] blockquote {
z-index : 2;
position : absolute;
left : 225px;
top : 85px;
height : 103px;
width : 198px;
background : url(../images/blockquote.png) no-repeat;
text-indent : -9999px; }
To ensure that the catchy blockquote always stays in front of its neighboring heading, the blockquote has
been given a higher z-index. For a more detailed explanation of the creative flexibilities of z-index, read my
24ways article at http://24ways.org/advent/zs-not-dead-baby-zs-not-dead.
chapter 4 Designing for Outside the Box
103