Web Design by Sheriar Designs: Impeccable Code | Beautiful Design

The design for this site has changed and, unfortunately, I do not have the cached version, so live links will take you somewhere that looks slightly different from the images contained in this article.

I recently finished developing all the xhtml and css for the Energy Muse site redesign. This gorgeous site was designed by my good friend Hong Vo at Namaste Interactive. Isn’t she amazing, folks? I mean, really, this design is so beautiful – it just kills me that I didn’t do it myself!

Building this site was a great experience for me. It posed many challenges and solving these challenges was fun and rewarding. It occurred to me that the solutions I came up with would be great to share with my fellow web-standards-minded web designers. In fact, the desire to share the story of this site was what finally pushed me to start blogging.

These “tutorials” are aimed at experienced designers with a solid foundation in xhtml and css. I am not going to cover any of the basic layout techniques I used in this site, only those techniques that I think might be of help in expanding the toolbox of other experienced web developers.

In this first entry I will discuss the development of the index page which, in olden times, would most likely have been a gigantic image map. But I wanted to mark it up semantically so that it was accessible to search engines, hand-held devices, people with disabilities, or those myth-like people I’ve heard about … those that have images and/or styles disabled for some crazy reason (do they really still exist … has anyone met one of them?).

First Things First … The Basic Structure

:x:

The entire page is wrapped in a div (outerWrapper) and the content, up until the footer, is also wrapped in a div (container).

<div id="outerWrapper">

<div id="container">
THE CONTENT
</div>

THE FOOTER, THE COPYRIGHT, THE TAGLINE

</div>

:c:

The outer wrapper will come in handy later, when we talk about how we get that header to extend out about 1200 pixels but not create a horizontal scroll if the browser window is smaller than that. It establishes a div that spans the entire width of the window and is positioned absolutely at the top. The container simply establishes that our basic site (without the extended header) is 780 pixels wide and is horizontally centered with the appropriate background color.

#outerWrapper {
position:absolute;
top:0;
width:100%;
}
#container {
position:relative;
width:780px;
margin:0 auto;
background:#faf4eb;
padding-bottom:9px;
}

The Header

Ok, so the main image of the header, after some trial and error, ended up looking like this:

Notice that the search and shopping bag text are there, as well as the shopping bag icon. This wasn’t the case initially, but we just couldn’t find a web-based font that everyone was happy with for the text, and the bag icon has a beautiful gradient drop shadow on it that was hard to blend in over a beautiful gradient background! But no worries … all our content is still there under that big background image, as you will soon see!

All header content is wrapped in a div with the id of header with this definition in the css:

#header {
position:relative;
width:780px;
height:147px;
background:url(../images/backgrounds/bg_header.gif);
}

The Link Back Home

The client wanted users to be able to click on the logo and have that take them to the home page.

The XHTML

For about 10 seconds I toyed with the idea of using a 1×1 transparent gif and sizing/positioning it to lay where it needs to in order to get the job done. But my “archaic old-school siren” went immediately wailing. I decided instead, on a more semantic variation on that theme.

<p class="home">Home</p>

This provides a nice actual link, called “Home,” which can be seen in unstyled browsers, and which brings users back to the home page.

The CSS

Pretty simple stuff – hide the “Home” text, and resize and position the link over the logo. Sweet.

p.home a {

display:block;
width:153px;
height:137px;
position:absolute;
top:0;
left:314px;
}
p.home a span {
display:none;
}

The Search Form

So, we already have the term “Search” in there as part of the header graphic. The trick was to place the rest of the form elements correctly around it, and to hide the actual Search label for unstyled browsers.

The XHTML

Completely straightforward markup.

<div id="search">
<form action="" method="post">
<label for="search">Search</label><input type="text" value="keyword or item #" onfocus="select()" class="search" /><input name="" type="image" class="btn" onclick="submit()" src="images/buttons/btn_go.gif" align="bottom" />
</form>
</div>

The CSS

We absolutely position the form, hide the label, style the box, and after a little trial and error find the right code combination to line the button up just right with the box.

#search {
position:absolute;
top:20px;
left:77px;
text-transform:lowercase;
}
#search label {
display:none;
}
#search input.search {
border:1px solid #f3e7d4;
width:100px;
font-family:Lucida Grande","Lucida Sans","Lucida Sans Unicode;
font-size:0.7em;
color:#666;
padding:1px 2px;
}
#search input.btn {
vertical-align:bottom;
position:relative;
padding-left:3px;
}

The Shopping Bag

Remember – the icon and text are already there in the graphic of the header. We just need to be able to click on them.

The XHTML

A simple paragraph.

<p id="viewBag">
view shopping bag
</p>

:c:

Just like the Home link – with the shopping bag link we just need to place the link in the correct size/position over that part of the header graphic and hide the link text.

#viewBag {
position:absolute;
top:14px;
right:32px;
text-transform:lowercase;
}
#viewBag a {
display:block;
width:134px;
height:34px;
}
#viewBag a span {
display:none;
}

The Top Navigation List

I was about to just leave this out thinking, it’s a styled unordered list, nothing to it … they won’t want to read about that! But then I had a quick look over the code and thought it might be interesting for some of you to take a peak at. Skip down to The Body of the Page if you’ve already got a firm handle on this sort of thing.

:x:

Our good friend, the unordered list.

<div id="topnav">
<ul>
<li id="tnav_wJewelry">Women's Jewelry</li>
<li id="tnav_uJewelry">Unisex Jewelry</li>
<li id="tnav_mMarket">Muse Marketplace</li>
<li id="tnav_cGallery">Celebrity Gallery</li>
</ul>
</div>

:c:

First we absolutely position the entire list and give it a width.

#topnav {
position:absolute;
bottom:30px;
left:0;
}
#topnav ul {
width:780px;
}

Next we define the anchor tags, giving them a display of block so that they will hold their size and any padding/margin. We add 8 pixels of padding to the bottom to allow for the 8px underline effect on hover. For that effect we are actually going to use a background image – a small 20px by 8px image with a solid fill of the color we want. Initially it was done just using the border-bottom property, but I seem to recall IE not playing nicely with that, so this was a workaround.

#topnav a {
color:#b4844f;
text-transform:lowercase;
font-weight:bold;
font-family:Georgia,Times New Roman,Times,serif;
font-size:0.7em;
padding-bottom:8px;
display:block;
}
#topnav a:hover {
background:url(../images/backgrounds/bg_tnav_hover.gif) repeat-x bottom;
}

The next bit of code applies absolute positioning to each list item.

#topnav li {
position:absolute;
}
li#tnav_wJewelry {
left:25px;
}
li#tnav_uJewelry {

left:170px;
}
li#tnav_mMarket {
right:170px;
}
li#tnav_cGallery {
right:25px;
}

And, finally, the proper rollover and “on” colors for each link.

li#tnav_wJewelry a:hover,
li#tnav_wJewelry a.on {
color:#19a1b2;
}
li#tnav_mMarket a:hover,
li#tnav_mMarket a.on {
color:#a1176b;
}
li#tnav_uJewelry a:hover,
li#tnav_uJewelry a.on {
color:#1d8200;
}
li#tnav_cGallery a:hover,
li#tnav_cGallery a.on {
color:#9f1000;
}

The Body of the Page

We need to make that stunning woman and that field of purple one big clickable area as well as an individual link over the text (which currently points to the same place, but needs to be able to be switched out). And of course each small “banner” on the right and at the bottom have to be clickable too. But we want to do it with semantic flair. ;o)

The containing element for the large image on the left and the banners on the right is a div with the id of “homeCenter” with this definition in the css, which gives it it’s position and size:

#homeCenter {
position:relative;
width:760px;
height:332px;
margin:0 auto;
}

The Large Main Area on the Left

:x:

Just a heading and a paragraph.

<h1>Jewelry with a Purpose</h1>
<p class="shop">

:x:

Headings and paragraphs wrapped in a div.

<div id="rightcol">
<h2 id="t_jewelryStore">Jewelry Store</h2>
<p>Shop now</p>
<h2 id="t_celebrityGallery">Celebrity Gallery</h2>
<p>Who's wearing us?</p>
<h2 id="t_museMarketplace">Muse Marketplace</h2>
<p>Shop now</p>
</div>

:c:

We give the containing div an absolute position (we place #homeCenter before the #rightcol because on other pages #rightcol has a very different layout), hide the h2 and paragraph text, remove all padding on the headings, give all links a display of block and a defined width, then each individual link it’s own height and background image. Voila!

#homeCenter #rightcol {
position:absolute;
top:-10px;
right:0;
width:296px;
height:332px;
background:#fff;
}
#homeCenter #rightcol h2 span,
#homeCenter #rightcol p {
display:none;
}
#rightcol h2#t_jewelryStore,
#rightcol h2#t_celebrityGallery,
#rightcol h2#t_museMarketplace {
padding:0;
}
#rightcol h2#t_jewelryStore a,
#rightcol h2#t_celebrityGallery a,
#rightcol h2#t_museMarketplace a {
display:block;
width:296px;
}
#rightcol h2#t_jewelryStore a {
background:url(../images/home/side_jStore.jpg);
height:113px;
}
#rightcol h2#t_celebrityGallery a {
background:url(../images/home/side_cGallery.jpg);
height:108px;
}
#rightcol h2#t_museMarketplace a {
background:url(../images/home/side_mMarketplace.jpg);
height:111px;
}

The Banners on the Bottom

By now you’re probably getting the gist of it, eh? ;o)

:x:

Once again, just headings and paragraphs. The only difference here is we’ve given them a heading level of 3 instead of 2, since they are slightly less important than the buttons on the top-right.

<div id="homeButtons">
<h3 id="t_freeMuseNews">Free Music News</h3>
<p>Affirmations | News | Specials</p>
<h3 id="t_visitMuseBlog">Visit Muse Blog</h3>
<p>Energy | Musings | Sustainability</p>
<h3 id="t_asSeenOnQvc">As Seen on QVC</h3>
<p>October 22nd &amp; 31 | Featuring Heather Askinosie</p>
</div>

:c:

Nothing too new here: size, position, hidden text, individual backgrounds. This should be becoming old hat by now.

#homeButtons {
width:780px;
height:76px;
position:relative;
}
#homeButtons h3 span,
#homeButtons p {
display:none;
}
#homeButtons h3#t_freeMuseNews a,
#homeButtons h3#t_visitMuseBlog a,
#homeButtons h3#t_asSeenOnQvc a {
display:block;
width:251px;
height:67px;
position:absolute;
bottom:0;
}
#homeButtons h3#t_freeMuseNews a {
background:url(../images/home/hButton_news.gif);
left:9px;
}
#homeButtons h3#t_visitMuseBlog a {
background:url(../images/home/hButton_blog.gif);
left:264px;
}
#homeButtons h3#t_asSeenOnQvc a {
background:url(../images/home/hButton_qvc.gif);
right:9px;
}

The Footer Etcetera …

Nothing too interesting to report here – all pretty straight forward. There is a little image replacement on the tagline, but we don’t really have to talk about that at this point, do we? One small point of interest might be that I’ve included a horizontal rule right before the footer (I’ve also included one right before the content). I’ve simply hidden all hr tags in the stylesheet. Why do add elements that I’m just going to hide? Simply to make it a bit more readable and organized looking to those who my be browsing sans images/styles.

Last But Not Least … the Extended Header

This was actually done last and it was a bit tricky for me to figure out. How do I make it so that the curvy graphic at the top of the screen can expand all the way out to 1200 pixels, but when the screen is smaller than that show no horizontal scroll bar? I couldn’t use a background image on the body … that honor was already being used up. If I put the whole page in a containing div big enough to fit the header then the scroll bar would be there. No – it had to be its own element and it had to “not take up any space” so that the page could actually site on top of it. That leaves absolute positioning. But, how do you absolutely position something to be in the middle horizontally? I got stuck on that one for a while. Finally, this is what I came up with:

:x:

Simply add this div to the top of the page, after the body.

<div id="headerExtend"></div>

:c:

It all looks so simple now that I just look at the solution. Create an absolutely positioned div that is 100% wide and 89px high. Now simply give it a background image that is centered! Aha! Well, all good and well, but of course our friend IE didn’t quite want to play nicely with that. For some reason, it was off, just a bit, just about … 1%. Well, that is what I figured out after playing around a little anyway. So, we define two background properties, one with a position of 50% (for FF and company) and one with a position of 49% (for IE). And, amazingly, it worked.

#headerExtend {
width:100%;
height:89px;
background:url(../images/backgrounds/bg_headerExtend.gif) no-repeat 50% !important;
background:url(../images/backgrounds/bg_headerExtend.gif) no-repeat 49%;

}

And That’s a Wrap

Take a look once again at the finished page and then look at it with styles disabled to really get a sense of how it is built semantically. That’s a lot more accessible than an image map, guys!

Stay tuned for Part 2, where we will examine how to make this layout work!

» Read Part Two

This entry was posted on Saturday, October 29th, 2005 at 10:59 am and is filed under CSS, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.