Feb 12

In this tutorial I will show how to write C# code that handles the FileUpload control. We will use the RegularExpressionValidator control for client-side validation and introduce server-side validation methods when uploading specific file types.

coming soon…

Feb 12
Simple centered CSS layout
icon1 Steve | icon2 CSS | icon4 02 12th, 2007| icon3No Comments »

When developing a web app or site, I usually start off with an XHTML file (template.html) and a CSS file (base.css). This example is a common layout for most websites and web apps, which is a centered, two-column layout and from there you can tweak it however you want. The naming convention I use for XHTML, CSS and JavaScript is all-lowercase with dashes seperating words. The reason I use this method is because in my ASP.NET controls, I use camel case and sometimes there could be similar name conflicts.

Stubbing out the XHTML file

First we’ll start with the XHTML file. Below is the list of <div> element IDs to stub out:

  1. wrapper: This is the overall container that wraps all the DIVs, it also allows us to center the main area of our site.
  2. header: Here we usually place a logo, slogan and/or header navigation.
  3. nav: Holds the main navigation for the site. I’ve seen developers use this nav ID in ULs and DIVs, so the choice is up to you.
  4. main-content: This is the middle part between the header and footer. It will also hold sub-DIVs depending on how you want to section out your site.
  5. footer: Finally you can place copyright, support email, or a footer nav in this area.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Simple CSS layout</title>
    <link rel="stylesheet" href="css/base.css" type="text/css" />
</head>
<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="nav">
            <ul>
                <li><a href="#">home</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </div>
        <div id="main-content">
            <div id="side-bar"></div>
            <div id="content"></div>
        </div>
        <div id="footer"></div>
    </div><!-- end: wrapper -->
</body>
</html>


To be continued…