A Simple HTML5 & CSS3 Layout

I’ve been working with HTML5 and CSS3 since they came out.  At first I remember being confused.  I had spent some time getting my bearings in Flash when the buzz began touting HTML5 & CSS3 as the “simple” solution for the future.  I’m all for the future of technology, but, I think any of us who have worked in HTML5 and CSS3 might take issue with the “simplicity” of this new cross-browser functionality.  As a community we’ve stuck with it though many blogs and conference lectures on “What is HTML5″, and after a few years, most of the browsers have adopted it, and a few major players have used it.

Pandora, which had a beautiful user interface, wanted to stay at the forefront of technology and recently released it’s HTML5 version: http://www.pandora.com While some people may feel it lost some “crispness” I think they accomplished their goals of a light-weight and elegant solution that will work across platforms and devices.

The code I’ll show here will accomplish a very simple layout that shows off some of the things developers want: rounded corners and dropped shadows.  I don’t understand why we like these two features so much, but we do.  I rarely see a developer new to the technique not experience some sort of inner-glee.  And business people think we’re “square”… pshaw!

Here’s a picture of the finished results:

A Simple HTML5/CSS3 layout

A Simple HTML5/CSS3 layout

This sort of layout is where I like to start for a website.  It’s past all the irritating CSS3 layout annoyances and before dropping custom images in.  Okay, here’s the code

<!doctype html>
<html lang="en">
<head>
    <title>Some Title</title>
    <!--    <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>-->
    <link href="Version2.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="outsideBox">
        <header>
            <table class="headerTbl">
                <tr>
                    <td>
                        <h2>
                            AwesomeSauce LLC.</h2>
                    </td>
                    <td style="text-align: right;">
                        Search&nbsp;&nbsp;<input type="text" maxlength="100" size="50" />&nbsp;&nbsp;<img
                            src="resources/images/smallSearch.png" alt="Search for DDA" />&nbsp;&nbsp;
                    </td>
                </tr>
            </table>
        </header>
        <nav>
            <ul>
                <li class="selected"><a href="#">Pending</a></li>
                <li><a href="#">Advances</a></li>
                <li><a href="#">Quick Entry</a></li>
                <li><a href="#">Commitments</a></li>
                <li><a href="#">Rates</a></li>
            </ul>
        </nav>
        <div id="alerts">
            alerts go here</div>
        <div id="sideNav">
            <ul class="top-level">
                <li class="selected"><a href="#">Pending</a></li>
                <li><a href="#">Advances</a></li>
                <li><a href="#">Quick Entry</a></li>
                <li><a href="#">Commitments</a></li>
                <li><a href="#">Rates</a></li>
            </ul>
        </div>
        <div id="mainContent">
            <table>
                <tr>
                    <td>
                        <div id="parentBox">
                            Top Level Grid here
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="childBox">
                            Bottom Level Grid here
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

And here’s the CSS:

body {
    background: #fff;
}

.outsideBox {
    height: 100%;
    min-height: 650px;
    border: 1px solid black;
    border-radius: 1.6em;
    padding: 1em;
    margin: 2em;
    position: relative;
    display: block;
    box-shadow: 4px 4px 4px 4px #202e46;
}

.headerTbl {
    width: 100%;
}

/*------------------------------
= TOP NAVIGATION
------------------------------*/
nav {
    position: absolute;
    left: 0;
    width: 100%;
    background: #202e46;
}

nav ul {
    margin: 0 auto;
    width: 940px;
    list-style: none;
}

nav ul li {
    float: left;
}

nav ul li a {
    display: block;
    margin-right: 20px;
    width: 140px;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #777;
}

nav ul li a:hover {
    background: #F0F0F0;
    color: #202e46;
}

nav ul li.selected a {
    background: #F0F0F0;
    color: #000;
}

/*------------------------------
= ALERTS
------------------------------*/
#alerts {
    width: 100%;
    display: block;
    width: 940px;
    background-color: Red;
    color: White;
}

/*------------------------------
= VERTICAL NAVIGATION
------------------------------*/
#sideNav {
    float: left;
    font-size: 1em;
    width: 150px;
    padding-top: 3em;
}
#sideNav ul {
    height: 100%;
    border-radius: 1.6em;
    margin: 0px;
    padding: 0px;
}
#sideNav li {
    list-style: none;
}

ul.top-level {
    background: #202e46;
}

#sideNav a {
    color: #777;
    cursor: pointer;
    display: block;
    line-height: 25px;
    text-indent: 25px;
    text-decoration: none;
    width: 100%;
}
#sideNav a:hover {
    background: #F0F0F0;
    color: #202e46;
}
#sideNav li:hover {
    background: #f90;
    position: relative;
}

/*------------------------------
= MAIN CONTENT
------------------------------*/
#mainContent {
    padding-top: 3em;
    display: block;
    float: right;
    height: 100%;
    min-height:500px;
    width: 80%;
    font-size: 1em;
}
#mainContent table {
    height: 100%;
    border: 1px solid black;
    width: 100%;
}

If you have tried to do HTML5 and CSS3 like I have, you’ve probably come across some impressive kitchen sink solutions along the way.   I personally don’t have 100 hours to put towards figuring it all out :-)  I have about 10.  If you have less than 10, here’s something for you.

Enjoy

Special thanks to (some of these were used in the final solution for JQuery & DataTables):

  • http://jonraasch.com/blog/css-rounded-corners-in-all-browsers  http://thany.nl/apps/boxshadows/
  • http://html5shim.googlecode.com/
  • http://dotnetspeaks.com/DisplayArticle.aspx?ID=68 http://www.dotnetspeaks.com/DisplayArticle.aspx?ID=67
  • http://aspdotnetcodebook.blogspot.com/2010/01/page-languagec-autoeventwireuptrue.html

Leave a comment


Name*

Email(will not be published)*

Website

Your comment*

Submit Comment

© Copyright Duke Hall - Designed by Pexeto