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
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 <input type="text" maxlength="100" size="50" /> <img src="resources/images/smallSearch.png" alt="Search for DDA" /> </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