Classic web-page layout with HTML and CSS

I met up with a great friend of mine the other week for our monthly “tech-talk” session, in which we share things we’ve learned or heard about in the IT world. We hold these sessions in order to give ourselves the illusion that we are actually managing to keep up with the ever-changing world of IT, and of course to enjoy some good banter and real ale.

We started talking about the layout of web-pages, and why using tables for anything other than an actual table is a bad idea. (If you don’t know why it’s a bad idea, ask someone with a visual impairment for their thoughts on the matter…)

I promised to share with my mate how I would go about creating a classic header/columns/footer web-site using only divs and CSS. Here is the result:

<html>
    <head>
        <title>Class Page Layout</title>
        <style type="text/css">
            body {
                font-family:'Courier New';
                font-size:1em;
                background-color:gray;
            }

            ul {
                margin:0px;
            }

            #container {
                width:800px;
                margin-left:auto;
                margin-right:auto;
            }

            #header {
                height:50px;
                padding:10px;
                margin:0px;
                background-color:#FFFF66;
            }

            #mainContent {
                height:400px;
            }

            #leftSection {
                background-color:#99FFFF;
                width:25%;
                float:left;
                height:100%;
            }

            #centreSection {
                background-color:#00FF00;
                width:50%;
                float:left;
                height:100%;
            }

            #rightSection {
                background-color:#99FFFF;
                width:25%;
                float:left;
                height:100%;
            }

            #footer {
                clear:both;
                height:50px;
                padding:10px;
                margin:0px;
                background-color:#FFFF66;
            }

            #footerLeft {
                float:left;
            }

            #footerRight  {
                float:right;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">Header</div>
            <div id="mainContent">
                <div id="leftSection">
                    <ul>
                        <li>One</li>
                        <li>Two</li>
                    </ul>
                </div>
                <div id="centreSection">
                    <h1>Heading</h1>
                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                </div>
                <div id="rightSection">
                    <ul>
                        <li>One</li>
                        <li>Two</li>
                    </ul>
                </div>
            </div>            
            <div id="footer">
                <div id="footerLeft">Footer</div>
                <div id="footerRight">Copyleft 2013</div>
            </div>
        </div>
    </body>
</html>

You can view the actual page here.

Although you’d probably use something like Bootstrap to achieve this kind layout these days, especially if you wanted it to render nicely on mobiles, it’s good to be able to build this kind of layout from scratch as well. The secret to getting it working is in the floats, and if you use the Web Developer toolbar by Chris Pederick to turn off CSS as I mentioned in a recent post about Firefox add-ons, you can see that the underlying HTML is a simple set of divs, one after the other.

I’ve tested this layout in the following browsers and all looks good:

  • Firefox
  • Chrome
  • IE10
  • IE9
  • IE8
  • IE7
  • Opera
  • Safari (for Windows)

Getting the auto-incremental ID of a record in SQL Server

Time for another SQL Server aide-memoire…

I can never remember which command to use in T-SQL to get the ID of the most recently added record when using auto-incrementing IDs. There are three choices:

  • @@IDENTITY
  • SCOPE_IDENTITY()
  • IDENT_CURRENT(‘{TableName}’)

However, as described in great and excellent detail by the ‘SQL Authority’ in one of his blog posts, the one to use is SCOPE_IDENTITY(). This to restrict the ID to one generated in the current scope, rather than accidentally getting an ID generated by a trigger further down the line.

Geeky Google Analytics

Google Analytics is awesome, there is no doubt about it. It’s easy to integrate into websites and the UI to get metrics information out of is pretty cool too, especially the real time stuff which now seems to work better than ever. However, when I’m asked particularly complex metrics-based questions by guys I develop sites for I often find it difficult to get exactly the information I need from the standard Google Analytics UI.

Instead, I find the Google Analytics Query Explorer 2 tool useful. It’s not pretty, but it allows me to build up complex analytics queries in a single screen without having to search around for filters and options. It feels more like writing SQL against Google’s Analytics store rather than battling with the standard UI they wrap around the numbers. I wouldn’t be surprised if the default UI uses the Query Explorer behind the scenes to get at the numbers either.

Enjoy!

Essential FireFox add-ons for web-developers

Although Chrome seems to be winning the browser wars these days, I still like to develop against Firefox first and then tweak/hack CSS for compatibility with other browsers afterwards. I do this because I believe that Firefox most closely adheres to the HTML and CSS standards when it renders sites. I’m pretty sure that this belief used to be true, but I’m not certain if it’s technically correct today. However, as an approach it still seems to work pretty well. I’d be interested to hear your views on this.

I thus know more about Firefox add-ons than add-ons for other browsers. Here is my list of essential Firefox add-ons, which I’ll keep up-to-date:

Firebug

Totally essential for web-developers. Does pretty much everything you’ll ever need, from on-the-fly HTML and CSS tweaks, to JavaScript debugging, to monitoring network calls and cookies, and much, much more.

Web Developer by Chris Pederick

If you do find something that Firebug doesn’t do, there’s a fair chance that Chris Pederick has thought of it and included it in his web-developer toolbar. Worth getting alone because it makes it ridiculously easy to enable/disable JavaScript and CSS without having to remember where the options are hiding in the standard Firefox options. It does some other neat things too though, like highlighting elements of certain kind and showing outlines, which are invaluable if you want to get everything to line up nicely.

iMacros

Not really a developer tool, but a great tool for recording and replaying macros in Firefox. I tend to use it to log in to sites that have laborious access procedures or have auto-complete disabled.

User Agent Switcher

Another one from Chris Pederick, and very useful for testing out different user agents with your code. When used in conjunction with the re-size feature in the Web Developer toolbar mentioned above, you can get your sites in a pretty good state to work on mobile devices, before testing on the devices themselves.

SAML Tracer

Useful when working with SAML based single-sign on solutions, which I’ve been doing lately with ADFS.

That’s all for now folks!