Web Design by Sheriar Designs: Impeccable Code | Beautiful Design

« Read Part One

In the second installment of my Energy Muse Case Study Series I will discuss how I accomplished this layout in a semantic way. The challenge was to connect each text lable with its corresponding image while maintaining the unique positioning of each and the visual of a line running between them. I also wanted the text to have a hover effect when its corresponding image was moused over.

The Border

I pretty quickly ruled out the possibility of the horizontal line being created by some sort of border effect. Anything that I would be able to apply a border to like that would separate my images from their labels. So, the logical conclusion seemed to be to use a background image. Ok, but a background image on what, exactly?

The Rows

I created a div with a class of “row” for each of the three rows. I also defined an additional class of “first” to put on the top row to give a little space between all the rows and the above title graphic.

:x:

<div class="row first">
CONTENT
</div>

<div class="row">
CONTENT
</div>

<div class="row">
CONTENT
</div>

:c:

I give each row a position of relative so that I can anchor internal elements to their respective rows later on. Then I define the width and height of the row and apply our background image, which is just a 1×20 pixel gray graphic, to repeat horizontally 31px down from the top of the row. I also define link styles.

/* -- Row -- */
.row {
position:relative;
width:580px;
height:140px;
background:url(images/backgrounds/bg_line_horiz.jpg) repeat-x 0 31px;
}
.row {
margin-top:16px;
}
.row a {
font-weight:bold;
font-family:Georgia,Times New Roman,Times,serif;
font-size:0.9em;
}
.row a:hover {
color:#19a1b2;
}

The Paragraphs

I decide to contain each linked label and image within a paragraph tag. That way it will preserve logical formatting even with styles disabled. Also, giving a unique id to each paragraph, I am able to place each child element of that paragraph exactly where I want it. I give no css styles to the paragraph itself, as none are needed. Because I specifically choose not to declare a position of relative to the paragraphs, then all child elements will position themselves within the row and not the paragraph.

:x:

<div class="row first">
<p id="row_bSellers">content</p>
<p id="row_wNew">content</p>
</div>

<div class="row">
<p id="row_coin">content</p>
<p id="row_pendant">content</p>
<p id="row_goddess">content</p>
<p id="row_chakra">content</p>
<p id="row_mBead">content</p>
</div>

<div class="row">
<p id="row_bracelets">content</p>
<p id="row_earrings">content</p>
</div>

The Links and Images

Now here comes the sneaky part. I decide to put both the text for the image and the image itself into the same anchor tag. This takes care of my objective to have rollover effects on the text when the image is moused over – because they are both part of the same link. This will also allow me to absolutely position each link and then position each image within that link.

:x:

<div class="row first">
<p id="row_bSellers">Best Sellers <img src="images/collection/row_bSellers.jpg" alt="Best Sellers" /></p>
<p id="row_wNew">What's New <img src="images/collection/row_wNew.jpg" alt="What's New" width="167" height="85" /></p>
</div>

<div class="row">
<p id="row_coin">Coin <img src="path" alt="Coin" width="63" height="90" /></p>
<p id="row_pendant">Pendant <img src="path" alt="Pendant" width="82" height="90" /></p>
<p id="row_goddess">Goddess <img src="path" alt="Goddess" width="121" height="90" /></p>
<p id="row_chakra">Chakra <img src="path" alt="Chakra" width="50" height="90" /></p>
<p id="row_mBead">Miracle Bead <img src="path" alt="Miracle Bead" width="121" height="90" /></p>
</div>

<div class="row">
<p id="row_bracelets">Bracelets <img src="path" alt="Bracelets" width="128" height="84"/></p>
<p id="row_earrings">Earrings <img src="path" alt="Earrings" width="97" height="83" /></p>
</div>

:c:

We give a position of absolute to each link so that we can position it within its respective row and so we can position the images within the link to the link itself (because the link has now been givin a position, the images within it will position to the link rather than to the row). Now it’s just a question of positioning each link, and then positioning each image within the link. Getting the positioning just right was pretty much accomplished by trial and error.

/* individual placements */
p#row_bSellers a {
position:absolute;
top:9px;
left:140px;
color:#aa763f;
}
p#row_bSellers img {
position:absolute;
top:23px;
left:-15px;
}
p#row_wNew a {
position:absolute;
top:9px;
left:310px;
color:#aa763f;
}
p#row_wNew img {
position:absolute;
top:23px;
left:-20px;
}
p#row_coin a {
position:absolute;
top:9px;
left:22px;
color:#ab2f7a;
}
p#row_coin img {
position:absolute;
top:23px;
left:-7px;
}
p#row_pendant a {
position:absolute;
top:9px;
left:112px;
color:#ab2f7a;
}
p#row_pendant img {
position:absolute;
top:23px;
left:-12px;
}
p#row_goddess a {
position:absolute;
top:9px;
left:220px;
color:#ab2f7a;
}
p#row_goddess img {
position:absolute;
top:23px;
left:-12px;
}
p#row_chakra a {
position:absolute;
top:9px;
left:340px;
color:#ab2f7a;
}
p#row_chakra img {
position:absolute;
top:23px;
left:0;
}
p#row_mBead a {
position:absolute;
top:9px;
left:438px;
color:#ab2f7a;
}
p#row_mBead img {
position:absolute;
top:23px;
left:-13px;
}
p#row_bracelets a {
position:absolute;
top:9px;
left:143px;
color:#3bac1b;
}
p#row_bracelets img {
position:absolute;
top:23px;
left:-33px;
}
p#row_earrings a {
position:absolute;

top:9px;
left:310px;
color:#3bac1b;
}
p#row_earrings img {
position:absolute;
top:23px;
left:-20px;
}

That’s a Wrap!

Take a look at the finished page and then check it out without styling to see how it holds up semantically.

« Read Part One

This entry was posted on Tuesday, November 15th, 2005 at 6:01 pm 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.