Shahid Online - Tech Corner

When it comes to trying to use pure CSS to layout documents, it may seem daunting at first but is actually more straightforward than using table s. First off, define the columns in your HTML page: <div id ="leftColumn" > Content comes in here... </div> <div id ="middleColumn" >   <h1> Document Header </h1>   <p> Content comes in here...... </p> </div> <div id ="rightColumn" >Content comes in here....... </div> Now that is the structure put in place.  The wizardy is done using the id s of each div : #leftColumn {   position : absolute;   top : 140px;   left : 0;   width : 20%;   margin-top : 1%; } #middleColumn {   position : absolute;   top : 140px;   left : 20%;   min-width : 360px;   width : 58%;   margin : 1% 1% 0 1%; } #rightColumn {   position : absolute;   top : 140px;   left : 80%;   width : 20%;   margin-top : 1%...

My work place tasked me with trying to be as purist as possible with HTML and CSS for an interface their web application. Without any formal web development background, I have always been one of those who intermingle the code and have presentation within the HTML. I think it came out pretty well. I separated design from content in addition to separating the dynamics. Mind you, I even separated out all the server talk and taught myself some XML/XSL in the process. After all that I learnt Ajax, without realising it. One little nugget from all this is creating a pure CSS rollover button for the menu, without Javascript. There's alot of websites that help out in this, but they are not "pure" as they involve you including the image in the HTML and to perform some shifting with the image. Hell no to that. My way leaves out the usual ul tag and dives straight into the anchor ( a ) tag as it should be: a href ="links.htm" id ="linksButton" title ="Lin...