Sunday, July 06, 2008

I have begun to rewrite my website, www.doitconsultants.com (It really needs it as you can see) using CSS.  I found some

examples and was able to start.  Then, I couldn't figure out why the columns were not lining when I realized I needed to know

more than just hack my way around in CSS.  I went to the book store to find a book on CSS.  I didn't need one that explained

web development or assumed I knew nothing.  I was looking for some specifics between two and three column layouts.  I figured

it would be a hard book to find.  I grabbed 3 CSS books from the shelf and started flipping through them.   One was too basic

and another was more like a glossary.  Then, I came across Stylin with CSS by Charles Wyke-Smith.  This book immediately

caught my eye by full color pages and a lot of examples.  The book was more than just eye candy though.  The book had a

chapter of exactly what I was looking for.  He clearly explains multiple layouts, liquid flow, etc.  Like any good

book, you can download all of the examples from his book.  The best part is his examples include a css library he created

that he gives you for free.  Great book, I highly recommend this book for all web developers.

As a design challenged ASP.NET developer, most templates available from websites such as http://www.freecsstemplates.org/ have

great examples we can use, however these require some modifications to work with ASP.NET.  This book refers to Dreamweaver

but doesn't require any specific IDE.  Before I continued with my website design, I wanted to do an exercise to help me understand the examples.  So I decided to create some basic ASP.NET project templates.  I created three templates to reflect the 3 usual layouts.  Each of the templates also include a cool feature I learned from the book to round the corners using Nifty Corners at http://www.html.it/articoli/nifty/index.html.  The also include ASP.NET best practices like Master Pages, Site Maps, and Menu controls.


 1.  Three Column - Rounded Corners with Left Navigation, main center content, and a right promo area.


ThreeColumn.vsi.zip (24.52 KB) (Remove the .zip to install)


 2.  Two Column - Rounded corners with left navigation and main content.


TwoColumn.vsi.zip (23.84 KB) (Remove the .zip to install)

 

 3.  Two column with Top Navigation - Rounded corners with top navigation, left side links and main content.


TwoColumnTopNav.vsi.zip (24.11 KB) (Remove the .zip to install)

 

All of the templates come with multiple CSS layouts.

Feel Free to download these and use them for your projects.  Send me any updates or problems.  I tested them in IE7 and Firefox 3.0 and they look good in both.  Not sure about the others. 

Code Smart Not Hard

Mike

Sunday, July 06, 2008 9:16:35 PM (Central Standard Time, UTC-06:00)  #    Comments [1]  | 

Theme design by Jelle Druyts

Pick a theme: