Actually this should be an extension of my last post about my website progress report on Calcon Construction.

I was faced with a bit of a challenge on how the section titles of each page would be displayed, and here is my solution to it. The mock-up site can be found at this page.

As you can see, the logo of the company constitutes of a red cell and then a blue cell over it. Each section title must emulate the shape of this. The simple way (well, simple at first) to do this would be to, of course, make images using Photoshop. But…

This method has disadvantages :

• The title is not in text, and hence not picked up on search engines (alt attributes could be used, but as far as I know, they don’t count as much as text would for SEO).
• It takes up more bandwidth and more time to load. I know it wouldn’t be a huge issue in the fast modern internet we have, but hey, there’s the few out there with 56.6 kbps modems and as a web designer, if I can save them the grief, it’s the better way to go. Web Designer’s code of conduct! Haha.
• It’s a major pain in the ass to add new sections each time it comes up. Each image needs to be genereated by Photoshop.

Now you may be asking “Why don’t you put the red/blue cell as a background, and put the text over top?” That method has 1 disadvantage.

• I cannot adjust the width of the blue bar based on the length of the title, so sometimes I’ll have too much slack, or worse, have the text go over the boundaries.

And then it hit me - these shapes, that imitate the logo, are pretty darn simple actually, so why not use some good CSS to adjust this?

1. First step - create HTML tag structures to hold that shape. We’ll create a larger DIV tag that holds the other 2 cells (the red and the blue) in it, and then put the two DIV tags within, like this code :

   <div id=”titleholder”>
   <div id=”titleredbar”></div>
   <div id=”titlebluebar”>Section TItle comes here</div>
   </div><br /><br /><br /><br /><br /><div id=”titleholder”>
   <div id=”titleredbar”></div>
   <div id=”titlebluebar”>Section Title automatically stretches with longer titles</div>
   </div>

   Note that I created two instances of it with line breaks, just to test the dynamic-width module based on the title length. The titleholder DIV holds the whole thing, to give relative positioning of the red/blue bars, and then the red/blue bars reside inside.

2. Now that we have the DIV structures set, let’s set the CSS for the 3 of these cells.

   #titleholder
   {
   position:relative; /* the title holder NEEDS to be set to relative. This cell surrounds the #titleredbar and #titlebluebar DIVs, and by doing this you set it so that the whole title element and the two DIVs underneath it show up at a relative position on the screen, NOT an absolute position. */
   
   background:transparent; /* This will, of course, have a transparent background, especially becase we’re debating having a faded background in the main cell. */
   
   z-index:0; /* Set this as the z-index 0. z-index on elements define which comes on top of another. Any element with a higher z-index will come ontop of this #titleholder DIV.*/
   
   font-size:0.9em; /* Do I need to explain?? */
   
   display:block; /* just to prevent any other element or the next paragarphs from coming on the same line or overlapping, set this display to “block”. I don’t think this is quite necessary but I put it in anyways as an insurance. */
   }

   #titleredbar
   {
   position:absolute; /* NOTE CAREFULLY - #titleredbar is WITHIN the #titleholder, and #titleholder’s position is “relative”. So setting the position of the #titleredbar and #titlebluebar to “absolute” means it is absolute COMPARED TO the #titleholder’s position!!!! */
   
   top:0px; /* This element is the red element. This should be at the top left corner, so set the positioning this way. 0 pixels from the top, 0 pixels from the left. */
   left:0px;
   background:#721414; /* This is our reddish/maroon color of choice. */
   z-index:5; /* This z-index could be any number, as long as it’s higher than 0 (which was the z-index of #titleholder) and lower than the z-index of the #titlebluebar, which needs to come on top*/
   width:82px; /* This is the width/height I picked - could be anything really.. bigger overall or smaller. */
   height:27px;
   }

   #titlebluebar
   {
   position:absolute; /* NOTE CAREFULLY - #titleredbar is WITHIN the #titleholder, and #titleholder’s position is “relative”. So setting the position of the #titleredbar and #titlebluebar to “absolute” means it is absolute COMPARED TO the #titleholder’s position!!!! */
   top:9px; /* This element is the blue element. This should be indented in a little bit from the top-left corner so that the red is partially exposed. In my case I set it to be 9 pixels from the top, 9 from the left. */
   left:9px;
   background:#091d37; /* This is the blue we have. */
   z-index:6; /* This z-index MUST be higher than the z-index of #titleredbar */
   height:22px; /* This height, as you can note, is shorter than that of #titleredbar, but it appears to be roughly the same. Somehow the fact that this element has padding, and text, stretched the height so I had to manually reduce it. */
   color:#ffffff; /* Set the text color to be white in this cell. */
   min-width:120px; /* this is just for IE6 - sets the min width to be 120px, but this attribute innately says “if it needs to be longer, stretch it”. */
   width:auto !important; /* This is the same thing for Firefox, that allows the width to stretch if needed. */
   width:120px; /* While the above line tells Mozilla engines that the width can be stretched, this sets the minimum width, so it doesn’t appear TOO short. */
   padding-top:7px; /* Give it wahtever padding you need to position the text within. */
   padding-left:15px;
   padding-right:15px;
   font-size:0.9em; /* This element is the red element. This should be at the top left corner, so set the positioning this way. 0 pixels from the top, 0 pixels from the left. */
   font-weight:bold;
   }

   For a visual guide to which CSS applies to which DIV cell, here is an outlined diagram :

   

   So there it is - all the CSS for the 3 different ID’d DIV’s. Keep in mind that if you actually needed to repeat the section title multiple times on one document, you should have set classes, not ids (that’s technically the right way to do it - ids are supposed to be used once in each document without recycling) but in this case I know I’ll have 1 title each. Do note though, despite the repitition of the ids, it shows up just fine on both FF 2.0 and IE 7.

3. Fill in the text within the #titlebluebar and test out the length! The sample page for calcon construction at http://calcon.jeffkee.com/ shows you two instances of it. Hit Ctrl + A to select all elements and you’ll see that they are all in pure text and CSS only.

This method as these advantages (although they may be obvious after all that explanation)

• The loadtime is small, and it doesn’t take up much bandwidth. All of this is done without images - just text code that spans across a few dozen lines.
• This method is search engine friendly, as it shows more pure text.
• This method allows you to add new pages and new sections without having to go back to Photoshop to adjust the length and such. When this website has to be more dynamic and driven on a database site, I can use this design as a basis to fire out dynamically generated content in a snap, and it still looks very nice and composed with its automatically adjusting section title and all.

Cheers fellas!

This entry was posted on Saturday, February 24th, 2007 at 11:05 pm and is filed under Coding, SEO, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.