Site Technical Information — CSS Div construction methods

Tecnical Information — Site Construction

Site Coding

TechPatterns.com is coded exclusively using error free XHTML 1.0 Transitional. The XHTML and CSS are checked on W3C.org using their HTML validator and CSS validator. If you do find a page with errors, please let us know and we will fix it.

The site is built using only <div> tags, bypassing the more standard tables that almost all sites use, except for the very newest ones, which are usually tech oriented sites like this one. This method is not very well supported on older browsers like Netscape 4.x browsers, although that series of browser has finally (thankfully!!!) dropped under 1% market share, so it's not as important to worry about it anymore. Div tags also do not behave like tables, which means it's much more complicated to set their heights in relation to each other, unlike table cells, which default to this behavior. Widths are not a problem as a rule, since div tags automatically expand to fill their container, in most cases.

This site uses a trick (all cells are sized relative to a central container cell, which is itself sized relative to the body/html size [ CSS Code: body, html {height:100%; width: 100%} ] ).

One useful result of this is being able to resize the width dynamically. Try the window resizing feature to your right to see this in action. That simply changes the container width from 90%, standard, to either 80%, narrow, or to a tiny bit less than 100%, wide (to account for some borders) with Javascript. Once the change is selected a cookie is set, then that cookie is read by a small PHP script which then writes in the correct width information in the page head tag.

The difficulty in getting these methods to work consistently cross browser severely limits what you can do with this kind of div construction on a commercial level, although they are very powerful, allowing you to change the position of elements through the stylesheet without changing the page HTML.

Site Styling — CSS

All styling of the pages is done with linked external stylesheets, from the positioning and coloring of the container blue thing around the content iframe to the text, headers, links and nav bar. We decided to see how far this could be taken. As a result, every single element you see, each block of blue color, is a separate div element, positioned either absolutely or relatively. There are, except for the small upper right hand corner flash things on home and design and a tiny 4 pixel semi-transparent .png on the floating purple header, through which you can see the underlying page content and colors, no other graphics used on the site (except of course for things like screen shots). The shadow affect on the Tech main header is done by positioning two 'Tech' text elements over each other, coloring the bottom one darker, and positioning it a few pixels lower and to the right, thus creating the illusion of a shadow.

Site Programming

The left hand navigation bars and bottom content page navigation bars are built using a php script and arrays holding the navigation elements. This means that new sections and subsections can be added to the site simply by updating the navigation bar arrays, and adding the basic page template. This makes site updating and changes very efficient. We hope to have more features of techpatterns.com scripted in this way in the future, as time and interest permit.

While these techniques result in excellent search engine placement, since search engines can't read graphics, only text, and code, we cannot recommend something this extreme due to the difficulty of maintaining the code in a stable way. The basic construction and debugging of the main template for this site took about 3 weeks of work.