Web Development

Archive for the ‘Web Development’ Category.

An HTML5 3 column layout example in ASP.NET

May 17, 2013, 7:00 am

A while back I posted about an html5 three column layout. Here is the same layout, only this post has built the web site using ASP.NET and it includes a Visual Studio project.

The _Layout.cshtml file looks like this:

@RenderPage("~/Layout/_Header.cshtml")
@RenderPage("~/Layout/_Nav.cshtml")
<div id="main">
   <article id="main-article">@RenderBody()</article>
    @RenderPage("~/Layout/_LeftAside.cshtml")
    @RenderPage("~/Layout/_RightAside.cshtml")
</div>
@RenderPage("~/Layout/_Footer.cshtml")

Then of course, the HTLM5 layout is in the header, asides, article, and footer. And even though the Article is placed before the asides, the asides can be either on the left or the right.

Download it here: HTLM5_ASPNET_ThreeColumnLayoutExample.zip

Category: HTML & CSS | Comment

Using knockout.js and MVVM with RadioButtons

April 11, 2013, 6:31 am

In the example below, radio buttons selection list is created by binding to a list in the view model. I show how to bind to both the selected radio button’s value and name. I also show how to disable a button unless the radio button is selected.

<!-- Step 1 - Create the HTML File or the View -->
<!DOCTYPE html>
<html>
<head>
    <!-- Step 2 - Include jquery and knockout -->
    <script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="scripts/knockout-2.2.1.js"></script>
    
    <!-- Step 3 - Add script to run when page loads -->
    <script type="text/javascript" >
        $(document).ready(function(){

			<!-- Step 4 - Add a RadioButtonModel -->
            function RadioButtonModel(inText, inValue, inGroupName) {
                this.text = inText;
				this.value = inValue;
				this.name = inGroupName;
            }

			<!-- Step 5 - Create ViewModel -->
            function SurveyViewModel() {
                var self = this;
                
				<!-- Step 7 - Create an observable list -->
                this.list = ko.observableArray([
                    new RadioButtonModel("Good", 10, "Q1"),
                    new RadioButtonModel("Average", 5, "Q1"),
                    new RadioButtonModel("Poor", 1, "Q1")
                ]);
				
				<!-- Step 8 - Create a selected item -->
				this.selected = ko.observable(0);
				
				<!-- Step 9 - (Optional) Create a computed value to get the selected text -->
				this.selectedtext = ko.computed(function() {
					var text = "";
				    ko.utils.arrayForEach(this.list(), function(item) {
						var selectedItem = self.selected();
						if (selectedItem == item.value)
							text = item.text;
					});
					return text;
				}, this);
				
				
				<!-- Step 10 - Create a computed value to require a selection before submitting -->
			    this.canClick = ko.computed( function() {
                    return this.selectedtext() != "";
                }, this);
                
            }
            
            <!-- Step 10 - Create a computed value to require a selection before submitting -->    
            ko.applyBindings(new SurveyViewModel());
        });
    </script>
</head>
<body>
    <!-- Step 11 - Create a div containing the html for one radio button and bind to foreach: list -->
    <div data-bind="foreach: list">
        <input type="radio" data-bind="attr: {name: name}, value: value, checked: $root.selected" /><span data-bind="text: text"></span>
    </div>

    <!-- Step 12 - Add html elements to see other properties -->
    <p data-bind="text: selected"></p>
    <p data-bind="text: selectedtext"></p>
    
    <!-- Step 13 - Add a button and bind its enable state -->
    <button type="submit" id="btnSubmit" data-bind="enable: canClick">Submit</button>

</body>
</html>

Hope this helps you.

Category: JavaScript | Comment

Using MVVM with HTML5 and JavaScript

April 9, 2013, 9:17 pm

The MVVM pattern is an excellent pattern for separating the UI or View and the Code or ViewModel and Model.

With Knockout.js the MVVM pattern can be used with HTML5.

Previously I wrote this post: Using jQuery to enable/disable a button based a text box

This same thing could be done using binding and the MVVM pattern, with jQuery and Knockout.js.

Here is a single file example of using knockout.js and with databinding.

<!-- Step 1a - Create the HTML File or the View -->
<!DOCTYPE html>
<html>
<head>
    <!-- Step 2 - Include jquery and knockout -->
    <script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="scripts/knockout-2.2.1.js"></script>
    
    <!-- Step 3 - Add script to run when page loads -->
    <script type="text/javascript" >
        $(document).ready(function(){
        
            <!-- Step 4 - Create a ViewModel -->
            function BasicViewModel() {
            
                <!-- Note: In this case the model is just a string and a bool -->
                <!-- Step 5 - Create a text property to bind the text to -->
                this.text = ko.observable('');
                
                <!-- Step 6 - Create a bool property to bind the button enabled state to -->
                this.canClick = ko.computed(function() {
                    return this.text() != null && this.text() != '';  
                    }, this);
                }
          
            <!-- Step 7 -  Activates knockout.js bindings -->
          ko.applyBindings(new BasicViewModel());
        });
    </script>
</head>
<body>

    <!-- Step 8 - Create a HTML Elements with bindings -->
    <input data-bind="value: text, valueUpdate:'afterkeydown'" />
    <button type="button" id="btnEnter" data-bind="enable: canClick">Enter</button>
</body>
</html>

Anyone who knows MVVM will surely realize that while this example is all in a single file, it is likely that you will have a separate viewmodel javascript file in a production environment.

Category: JavaScript | 2 Comments

Creating a QUnit Test Project in Visual Studio 2010

February 20, 2013, 2:55 pm

You may want to Unit Test your JavaScript code and one library to do this with is QUnit.

QUnit is based on the idea of opening a web page to run your JavaScript tests. So here is how I create a new QUnit project in Visual Studio.

This article assumes that you have the following installed already:

Visual Studio 2010 or later
The NuGet Add-in for Visual Studio

Step 1 – Create a Visual Studio Project

Open Visual Studio.
Go to File | New | Project.
Select ASP.NET Empty Web Application.
Give the project a name:
Note: For this walk-thru, I named mine QUnitExample
Click OK.

Step 2 – Import QUnit

Method 1 – Using NuGet

This step requires internet access.

Right-click on your Project and choose Manage NuGet Packages.
Search for QUnit and locate QUnit for ASP.NET MVC.
Click Install next to QUnit for ASP.NET MVC.
Click Close.

You should now see a folder called Content with a QUnit.css file and a folder called Scripts with a QUnit.js file.

Note: The NuGet package had old files, so I had to update them manually following Method 2.

Method 2 – Just downloading the files

If the NuGet package is not up to date, you may want to download the files manually. Follow the steps above to get QUnit through NuGet and if it doesn’t work, download the latest files from the QUnit web site and replace the ones NuGet added to your project with the latest ones.

Step 3 – Create an HTML file to display test results

Right-click on the project and Choose Add | New Item.
Find and choose HTML Page.
Give the page a name.
Note: I named mine QUnitTestResults.htm.
Open the QUnitTestResults.htm file for editing.
I made the DOCTYPE tag simpler in line 1:
Enter something in the Title: Line 4.
Note: I called mine QUnit Test Results.
Add a Link to the qunity.css file: Line 5.
Add a script in the body that calls the qunit.js file: Line 8.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Test Results</title>
  <link rel="stylesheet" href="/Content/qunit.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="/Scripts/qunit.js"></script>
  <script src="/Scripts/tests.js"></script>
</body>
</html>

Step 4 – Create your first QUnit Test

Right-click on the Project and choose Add | New Folder.
Rename the folder to TestScripts.
Note: I like to keep the test scripts separate from the other scripts.
Right-click on the TestScripts folder and Choose Add | New Item.
Find and choose JScript File.
Give the JavaScript file a name.
I named mine ExampleTests.js.
Open the ExampleTests.js file for editing.
Add a test method to the ExampleTests.js file.

test("hello test", function () {
    ok(1 == "1", "Passed!");
});

Note: This test is straight from the QUnit home page.

Step 5 – Add the Tests to your HTML file

Open the QUnitTestResults.htm file for editing.
Add a script in the body that calls the ExampleTests.js file: Line 9.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Test Results</title>
  <link rel="stylesheet" href="/Content/qunit.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="/Scripts/qunit.js"></script>
  <script src="/Scripts/tests.js"></script>
  <script src="/TestScripts/ExampleTests.js"></script>
</body>
</html>

Step 6 – Run the tests

Right-click on the QUnitExample project and choose Set as StartUp Project.
Right-click on QUnitTestResults.htm and choose Set As Start Page.
Click Debug | Start Debugging.

Step 7 – Start testing your JavaScript files

Now you probably want to recreate this project in as an additional project to your production solution (if you haven’t done this already).

It is time to start testing your JavaScript file. If you add the script to your project as a link, then you don’t have to maintain two copies of it.

Right-click on the Scripts folder and choose Add | Existing Item.
Browse to the JavaScript file that you want to test and select it but don’t add it yet.
Click the down arrow next to Add and choose Add as link.
Right-click on the TestScripts folder and Choose Add | New Item.
Find and choose JScript File.
Note: My file is called MySample.js.
Give the JavaScript file a name.
Note: I named mine MySampleTests.js.
Open the ExampleTests.js file for editing.
Start adding tests.

Conclusion

This method allows for rudimentary testing of your JavaScript. However, it does not integrate with Visual Studio, or Code Coverage, or Gated Check-ins. So there is a lot more work that needs to be done.

Category: JavaScript, Unit Tests | Comment

Changing ol and li html tags to have “Steps” and Hanging indent.

February 11, 2013, 6:30 am

Let’s say you want to have a list of items. However, you want the word “Step” before each number in the list. You may be tempted to not use the ol and li tags and just write the list.

Step 1 – Do something.
Step 2 – Do something else.

However, it will be obnoxious to type “Step” every time. The list doesn’t scale either. If the list gets long and you want to reorder the list, or even add a step, you have to change every number. Also, what if you want a hanging indent? How are you going to do that?

Well, just use these CSS classes.

ol.Steps {
  counter-reset: section;
  list-style-type: none;
  padding: 0;
  padding-left: 55px;
}

ol.Steps li {
  text-indent: -55px;
}

ol.Steps li:before {
  counter-increment: section;
  content: "Step " counter(section) " - "; // Change to ": " if you like
}

Here is some sample html:

<ol class="Steps">
  <li>The first thing to do.</li>
  <li>The second thing to do.</li>
  <li>The third thing to do. However, this step is really, really long. In fact, it is so long that the instructions to do this step wrap all the way into multiple lines.</li>
  <li>The fourth thing to do.</li>
</ol>

Here is how it looks:

The first thing to do.
The second thing to do.
The third thing to do. However, this step is really, really long. In fact, it is so long that the instructions to do this step wrap all the way into multiple lines. No really. It has to go one multiple lines, even if the screen is really, really big.
The fourth thing to do.

Category: HTML & CSS | Comment

Using jQuery to enable/disable a button based on a text box

February 5, 2013, 6:24 pm

Since this is an html file, just create a blank file on your desktop called Test.html and copy and past the code below.

The steps for doing this are comments in the code.

Note: This should handle typing, pasting, code change, etc…

<!-- Step 1a - Create HTML File (see step 1b way below) -->
<!DOCTYPE html>
<html>
<head>
	<!-- Step 2 - Include jquery -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

	<!-- Step 3 - Add script to run when page loads -->
	<script  type="text/javascript">
		jQuery(document).ready(function () {
		
			<!-- Step 4 - Disable button by default -->
			$("#btnEnter").attr("disabled","disabled");

			<!-- Step 5 - Bind method to text box -->		
			$("#txtField").bind("propertychange keyup input paste", function () {
				if ($("#txtField").val() == "")
					$("#btnEnter").attr("disabled","disabled");
				else
					$("#btnEnter").removeAttr("disabled"); 
			});
		});
	</script>
</head>
<body>
<!-- Step 1b - Add HTML elements -->	
<input type="text" id="txtField" size="50"/>
<button type="button" id="btnEnter">Enter</button>
</body>

See a MVVM version of this here:
Using MVVM with HTML5 and JavaScript

Category: HTML & CSS, JavaScript | 1 Comment

3 Column Table Layout verses 3 Column HTML5 Layout

August 14, 2012, 3:26 pm

Has HTML5 and CSS3 solved the layout problem? Or are tables layouts with CSS still a better solution.

You decide. Please post comments about other pros and cons you find. We all become experts when we all contribute.

Note: With both a table layout and an HTML5 layout, CSS is used, so this is not a CSS versus anything article. No matter which you use, lets agree that CSS should be used for style. However, CSS3 does add to the layout with the HTML5 solution.

3 Column HTML Table Layout with CSS Style

Click this link to see this layout: 3 Column HTML Table Layout with CSS Style

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table Layout with CSS Style - 3 Column</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
 
html, body 
{
  height: 100%;
}
 
body 
{
    margin:0
}
 
table.layout 
{
  height:100%;
  width: 100%;
  border-collapse:collapse;
}
 
td.header 
{
  padding: 15px;
  height: 120px;
  color: white;
  background: black
}
 
td.nav-bar 
{
  padding: 15px;
  height:20px;
  background:DarkGrey;
}
 
td.leftcol 
{
  padding: 15px;
  width: 170px;
  min-width: 170px;
  background-color:Navy;
  color: white;
}

td.midcol 
{
  padding: 15px;
  min-width: 625px; /* Make 425px for min res of 800x600 */
}
 
td.rightcol 
{
  padding: 15px;
  width: 205px;
  min-width: 205px;
  background-color:Navy;
  color: white;
}
 
td.footer 
{
  height: 120px;
  background: DarkGrey;
  text-align: center;
}

</style>
</head>
<body>
<table class="layout">
	<tr>
		<td class="header" colspan="3">Header</td>
	</tr>
	<tr>
		<td class="nav-bar" colspan="3">Nav bar</td>
	</tr>
	<tr>
		<td class="leftcol">Aside left</td>
		<td class="midcol">Article</td>
		<td class="rightcol">Aside right</td>
	</tr>
	<tr>
		<td class="footer" colspan="3">
			<a href="http://validator.w3.org/check?uri=referer">
				<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
			</a>
		</td>
	</tr>
</table>
</body>
</html>

HTML Table Layout Pros

Validated with W3C
Only 95 lines of code with everything on its own line
Works with every browser according to BrowserShots.org
Very easy to use.
Making the table be 100% height is easy
Changing the width or height of any part of the page is easy

HTML Table Layout Cons

Layout is coupled to the HTML, layout would be best decoupled – Solved by using scripting languages like PHP and ASP.NET
Left column is found in HTML before the article body - No current solution

3 Column Layout HTML5 with CSS Layout/Style

Click this link to see this layout: 3 Column Layout HTML5 with CSS Layout/Style

<!DOCTYPE html>
<head>
<title>Layout HTML5 with CSS Layout/Style - 3 Column</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
 
html, body 
{
  height: 100%;
}

body 
{
    margin:0
}

header 
{
  padding: 15px;
  min-height: 150px;
  color: white;
  background: black
}
 
nav
{
  padding: 15px;
  min-height:20px;
  background:DarkGrey;
}

#main 
{ 
  /* height:100%; */ /* Broken with it, broken without it */               
  display: -moz-box;				/* Firefox */
  display: -webkit-box;				/* Safari and Chrome */	
  display: box; 					/* Future standard */
}

#main-aside-left
{
  padding: 15px;
  width: 170px;
  min-width: 170px;
  -moz-box-ordinal-group: 3; 		/* Firefox */
  -webkit-box-ordinal-group: 3; 	/* Safari and Chrome */
  box-ordinal-group: 3; 			/* Future standard */
  background-color:Navy;
  color: white;
}

article 
{ 
  padding: 15px;
  min-width: 625px;					/* Make 425px for min res of 800x600 */
  -moz-box-flex: 2; 				/* Firefox */
  -webkit-box-flex: 2; 				/* Safari and Chrome */
  box-flex: 2; 						/* Future standard */
  -moz-box-ordinal-group: 2; 		/* Firefox */
  -webkit-box-ordinal-group: 2; 	/* Safari and Chrome */
  box-ordinal-group: 2; 			/* Future standard */
}

#main-aside-right
{
  padding: 15px;
  width: 205px;
  min-width: 205px;
  -moz-box-ordinal-group: 1; 		/* Firefox */
  -webkit-box-ordinal-group: 1; 	/* Safari and Chrome */
  box-ordinal-group: 1; 			/* Future standard */
  background-color:Navy;
  color: white;
}

footer 
{
  height: 120px;
  height: 120px;
  background: DarkGrey;
  text-align: center;
}

</style>
</head>
<header>Header</header>
<nav>Nav bar</nav>
<div id="main">
   <article>Article</article>
   <aside id="main-aside-left">Aside left</aside>
   <aside id="main-aside-right">Aside right</aside>
</div>
<footer>
  <a href="http://validator.w3.org/check?uri=referer">
    <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
  </a>
</footer>

HTML5 Layout Pros

W3C validated (experimental)
Article data comes before the data in the asides - This is a huge SEO bonus
Only 97 lines of code both CSS and HTML code, with everything on its own line
Very easy to use.
Making the table be 100% height is easy
Changing the width or height of any part of the page is easy

HTML5 Layout Cons

It doesn’t work on IE 9 or below and fails in many other browsers according to Browsershots.org. - No current solution.
Much of the CSS has to be duplicated - No current solution but when it is fixed, the code will be another 10 lines smaller
If the content does not fill the screen, there is no way to make the screen exactly 100% - No current solution but as long as the content is larger than the screen this doesn’t matter
Layout is coupled to CSS, a styling tool, layout should be decoupled – Solved by having a separate CSS file just for layout

Conclusion

Use Table layouts for now if your browser support is high priority.

Use HTML5 layouts if you can enforce uses to use HTML5 capable browsers.

Category: HTML & CSS | Comment

I demand a simpler CSS for HTML5!

July 3, 2012, 3:02 pm

Look, I love the browser as much as the next person, but that is as a user. I have no love for web development and the developers of html and css and the browsers are the reason why. Some things are not as hard as they are making it out to be.

HTML5 is becoming all the rage and the buzz world of the day. “Hey, just use HTML5 and all your problems will be solved.” Non-technical decision makers (and technical ones for that matter) are buying this. What nobody tells these people is that HTML5 is a current problem in and of itself. First, it is not a complete standard yet. Second, everyone is implementing the standard now, but doing it slightly differently. The problem is exacerbated by the use of vendor specific tags for future standards.

There are 13 known prefixes.

prefix	organization
-ms-, mso-	Microsoft
-moz-	Mozilla
-o-, -xv-	Opera Software
-atsc-	Advanced Television Standards Committee
-wap-	The WAP Forum
-khtml-	KDE
-webkit-	Apple
prince-	YesLogic
-ah-	Antenna House
-hp-	Hewlett Packard
-ro-	Real Objects
-rim-	Research In Motion
-tc-	TallComponents

The design currently is the implement a feature first using a vendor tag and only later make it a standard feature. It is not possible to sustain this model for browser progress.

Could you imagine if there was a setting and every vendor implemented it with its prefix. For example, the display setting is already a problem and could get worse. What if it was as bad as this?

#main
{
  display: -ms-box;
  display: mso-box;
  display: -moz-box;
  display: -o-box;
  display: -xv-box;
  display: -atsc-box;
  display: -wap-box;
  display: -khtml-box;
  display: -webkit-box;
  display: prince-box;
  display: -ah-box;
  display: -hp-box;
  display: -ro-box;
  display: -rim-box;
  display: -tc-box;
}

Is it possible that we may someday have to call a setting for each an every vendor prefix? Sure, but it is not likely. Ok, that above is a little absurd and an exageration, as nobody would use all those tags, we don’t even know what half those vendors are. However, even twice is too much! Do we really want to call a setting more than once? Should we ever have to? No, we shouldn’t. That is one of the biggest problems with web applications today.

I just can’t believe that we as developers are putting up with this html/css/browser problem.

I have to put the setting that is going to be the standard, and then for each browser, I have to put the browser specific setting. They are not smart enough to have each browser use the same tag for future standards, maybe something like -fs- for future standard, but instead lets use the vendor specific tag -moz- for mozilla and -webkit so we have to have a different tag for the same setting added for every browser we wish to support.

This is nonsense. I am so embarrassed for the organizations and their developers who have brought us to this point. We have to make every setting multiple times? Really? I am so glad I am not a developer for a browser because I take pride in my work and I would be so embarrassed to be part of such a mess.

How is it that browser developers aren’t smart enough to figure out a way we can use a single css tag, even for future standards?

Too many browsers

Competition is supposedly a good thing right? Well, I am not so sure that when dealing with free projects that is the case. I believe it is true for competitive businesses, but nobody is selling a browser.

Browsers are starting to sprawl worse than Linux. How many browsers do we rally need?

Here is a short list of browsers and they are all free:

IE 6, 7, 8, 9
Firefox
Chrome
Opera
Safari
Konqueror (KDE)

Sometimes with free projects, different from commercial projects, a division of the work force is a bad thing. I feel the same way about browsers as I do for Linux. If two groups worked together, they would often get more done than working apart. Sometimes there are natural divisions that lead to benefits in different areas, such as a desktop Linux version versus a server Linux version. With browsers there really isn’t a natural division like that.

We are re-inventing the wheel with each browser.

Unfortunately, control of the browser is coveted. The browser is the single most used application by the billions of computer users on our world. Controlling something as simple as the default browser homepage could mean the difference of millions, and perhaps billions, of dollars in advertising sales.

So to me, the question is this: How can we have a single browser but every commercial company still gets this “control” that they so desperately want? Wow…once you really get the question pinned down, the answer is easy.

There is no reason that a single browser shouldn’t exist and all current browser developers could stop working on their browser and get one single browser to work. Use a BSD license so Windows and Apple and everyone else could include this browser with their own default settings (the default home page however they want, etc…), and mobile phones could do the same.

Then the next time the standard is increased from html5 to html6, we won’t have the mess we have now trying to go to html5. And we won’t have to wait as long because the combined efforts will take us to there so much faster.

Category: HTML & CSS, Web Development | 2 Comments

Monitoring the uptime of your blog

March 29, 2012, 4:26 pm

So my blog was down and I didn’t know. The mysql server and CPanel were down, actually.

I decided I should set up a monitoring service so I set out to find one.

I found this article:

http://mashable.com/2010/04/09/free-uptime-monitoring/

This was the first one on the list and it will monitor up to 50 sites for free every 5 minutes and try to send you email or texts if your site is down.

http://www.uptimerobot.com

Google pulled this site up and while it only monitors one site for free and only at 30 or 60 minute intervals, it seems to have some statistics for you.

http://www.siteuptime.com/

Category: Web Development | Comment

Table Layouts still win over CSS layouts in 2012

February 1, 2012, 5:29 pm

The longer I am blogging and the more often I mess with my html layout (which is done in CSS) the more I come to realize that while CSS is a solution for HTML layouts but it is not a good solution and it has in my opinion completely failed to address the layout problem.

Look at any development language, GTK, QT, wxWidgets, Windows Forms, Windows Presentation Foundation, and a dozen others and they all have simple and easy to use layout systems. It is common to have Grid layouts, wrapping layouts, and more.

What does CSS2 and HTML4 have specifically for layout?

Nothing specific to layout. A div is not specific to layout. I was using what the author called Holy Grail 3 column liquid-layout. However, after two days, I still can’t change the width of my right side bar without breaking the layout in some way, which is mostly because the layers and layers of div elements is a mess in this layout.

What does CSS3 and HTML5 have specifically for layout?
They have new elements: article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr

However, while you can use HTML5 and CSS3, just be aware your website will only look good in newer browser. Please don’t try to view your site on Windows XP with IE7 or IE8.

I want the developers of Firefox, Opera, Internet Explorer, Safari, Chrome, HTML5 and CSS3 to know that when it comes to layout, YOU HAVE FAILED!!!!

If there is one reason that I wish Silverlight could become the de facto internet standard is for the simple reason that the layout features in XAML are so far superior than those of even the new HTML5 and CSS3 that there isn’t even a comparison.

So what is the solution to an easy HTML layout?

It just doesn’t get easier than the good old table layout, but you can at least style your layout with CSS. CSS is good at styling even if it fails at layouts.

Look how easy it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 Column Table Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

html, body {
  height: 100%;
}

body {
    margin:0
}

table.layout {
  height:100%;
  width: 100%;
  border-collapse:collapse;
}

tr.header {
  height:150px;
  background:black
}

tr.menu {
  height:50px;
  background:DarkGrey;
}

tr.body {
  height:100%;
}

tr.footer {
  height:150px;
  background:DarkGrey;
  height:150px;
}

td.leftcol {
  padding: 15px;
  width: 170px;
  min-width: 170px;
  background-color:Navy;
}

td.midcol {
  background-color:Grey;
  min-width: 625px; /* Make 425px for min res of 800x600 */
}

td.rightcol {
  padding: 15px;
  width: 205px;
  min-width: 205px;
  background-color:Navy;
}
</style>
</head>
<body>
<table class="layout">
<tr class="header">
<td colspan="3"></td>
</tr>
<tr class="menu">
<td colspan="3"></td>
</tr>
<tr class="body">
<td class="leftcol"></td>
<td class="midcol"></td>
<td class="rightcol"></td>
</tr>
<tr class="footer">
<td colspan="3">
  <p style="text-align: center;">
    <a href="http://validator.w3.org/check?uri=referer">
	  <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
    </a>
  </p>
</td>
</tr>
</table>
</body>
</html>

t took less than 30 minutes to make this layout.
It still uses CSS to style the layout.
Changes are easy (any column can be re-sized in seconds).
Left and right columns are always the same height.
The background colors always extend vertically as far as needed.
It is of course, W3C compliant.

Sorry CSS, until you have a real layout solution I think you lose to a good old-fashioned table.

But what about dynamically changing the layout?

Well, lets face, it. Dynamic changes are done in code anyway, and any good developer can code up that solution. Besides, most web sites are using some sort of Content Management System, like WordPress, Drupal, SilverStripe, or others. Each of these allow for Themes or Styles and so you can easily code up a way to switch styles with code such as php, asp.net, ruby, or any programming language.

Category: HTML & CSS | 1 Comment

Rhyous

Knight of the Code

An HTML5 3 column layout example in ASP.NET

Using knockout.js and MVVM with RadioButtons

Using MVVM with HTML5 and JavaScript

Creating a QUnit Test Project in Visual Studio 2010

Step 1 – Create a Visual Studio Project

Step 2 – Import QUnit

Method 1 – Using NuGet

Method 2 – Just downloading the files

Step 3 – Create an HTML file to display test results

Step 4 – Create your first QUnit Test

Step 5 – Add the Tests to your HTML file

Step 6 – Run the tests

Step 7 – Start testing your JavaScript files

Conclusion

Changing ol and li html tags to have “Steps” and Hanging indent.

Using jQuery to enable/disable a button based on a text box

3 Column Table Layout verses 3 Column HTML5 Layout

3 Column HTML Table Layout with CSS Style

HTML Table Layout Pros

HTML Table Layout Cons

3 Column Layout HTML5 with CSS Layout/Style

HTML5 Layout Pros

HTML5 Layout Cons

Conclusion

I demand a simpler CSS for HTML5!

Too many browsers

Monitoring the uptime of your blog

Table Layouts still win over CSS layouts in 2012

Categories

Recent Posts

Last Updated Posts Widget

Archives

My other blogs

Step 1 – Create a Visual Studio Project

Step 2 – Import QUnit

Method 1 – Using NuGet

Method 2 – Just downloading the files

Step 3 – Create an HTML file to display test results

Step 4 – Create your first QUnit Test

Step 5 – Add the Tests to your HTML file

Step 6 – Run the tests

Step 7 – Start testing your JavaScript files

Conclusion

3 Column HTML Table Layout with CSS Style

HTML Table Layout Pros

HTML Table Layout Cons

3 Column Layout HTML5 with CSS Layout/Style

HTML5 Layout Pros

HTML5 Layout Cons

Conclusion

Too many browsers

Categories

Recent Posts

Popular Posts

Last Updated Posts Widget

Archives

My other blogs