Website Designers and Webmasters

What is CSS Zen Garden?

It’s a great idea, thats what it is. It’s the ultimate Test of a CSS Designer. They have one basic HTML file, that is free to download, but you’re not allowed to change it. The only thing you are allowed to change is the css (which is all you need), and people create the coolest designs using only CSS!

Introduction to Cascading Style Sheets

HTML is very functional, and you can do a lot with it, but there are two large down sides to it. It’s purposes is solely for formatting, and it clogs up your HTML documents with a lot of code. Adding a Cascading Style Sheet to your website not only makes it way easier to format( and change at a later date). It also simplifies to the code like nothing else.

I recently did a Search Engine Optimization on a site called: Clear Lake Guide Service. The previous website used about 100 lines of code for the header… Using CSS, I cut that down to 20 lines of code. It keeps the Search Engines happy, and the website designers happy.

So needless to say, you can do almost anything with CSS!

Now back to CSS Zen Garden:

Zen Garden takes submission from website Designers from all over the world. And every design looks like a completely different website, even thought the XHTML is EXACTLT the same as all of the others! Right now they are getting close to 1000 submissions! If I have a free hour, I’ll throw one together as well.

“CSS makes the internet spin a little bit lighter.”
-Ashton Sanders

I just started working on the design process for four different websites. I’ve done so many website designs, I’ve started doing some thinking about how to imporove my website design skills.

My favorite website designers are from Rigney Graphics. These guys are truly amazing! They did the website for the Rose Bowl and for my old Boy Scout Council: San Gabriel Valley Council. Both of those sites are just amazing.

The Boy Scout Council’s website design is different on almost every page, and is very pleasing to the eye. It’s got so many pictures on every page, and is so many pages, I could spend forever clicking though the pages.

Another Website that Rigney Graphics designed is TXL Films. Taron Lexton told Rigney to just make something cool, and they created that! Another amazing piece of work.

I strive to create website layouts like them.
-Ashton Sanders

As most designers know, there is a difference between Internet browsers. Internet Explorer and Firefox displays websites differently. Some differences are hardly noticeable, and others are huge.

From my experience, Firefox follows HTML and CSS rules to the letter while IE only follows most of them. Here is an example I ran into today having to do with Centering Images using CSS:

Using CSS to Center Images:
I have the same image three times. Here is the image:

As you can see it is just a simple 2×26 pixel image. In the following link example, I have this same image centered three different ways.

CSS Image Centering

If you are viewing this in Firefox, those three images will create one perfectly centered, two-pixel wide, vertical line (as it should). But in Internet Explorer, the bottom two images move to the left one pixel…. I would ask Micro, “Why?” But I’m sure I wouldn’t get an answer.

Three Cheers for open source!

BTW, Here is the Code for the three above images, so you can tell the different centering techniques that I used:

This one works correctly in both browsers:

<div style=”background: url(http://www.websitesinaflash.com/samplepages/wkd/images/button-div.jpg) center no-repeat; height:20px;”> </div>

These two don’t work correctly in Internet Explorer:

<div align=”center”><img src=”http://www.websitesinaflash.com/samplepages/wkd/images/button-div.jpg” alt=”"></div>

<div style=”text-align:center; margin:0 auto”><img src=”http://www.websitesinaflash.com/samplepages/wkd/images/button-div.jpg” alt=”"></div>

Enjoy,
Ashton

As I was doing some CSS research yesterday, I came upon a site that really impressed me. This site was primarily Red. It had a page called “skins”. “Skins” usually mean what the website/program look like. For example, Trillian messaging program is always the same program, but you can change the way it looks by getting new skins. Here are a couple skins from their website:

Now this kind of confused be, because a website will always have one look, and you have to actually edit the site to change that, right? Wrong! On this guy’s “skins” Page he had three buttons and when you clicked on them, it totally changed what the page looked like!! So of course I learned all I could about it, and here is what I have to share with you.

You can view his site here.

Here is the code:

You need two (or more) different style sheets to use for the same website. You will include it in the header like this:

<link rel=”stylesheet” type=”text/css” href=”asset/stile.css” title=”metrostation” media=”screen” />
<link rel=”alternate stylesheet” type=”text/css” media=”screen” href=”asset/cielo.css” title=”cielo” />

This is the javascript that needs to be included in the page:

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName(”link”)[i]); i++) {
     if(a.getAttribute(”rel”).indexOf(”style”) != -1 && a.getAttribute(”title”)) {
       a.disabled = true;
       if(a.getAttribute(”title”) == title) a.disabled = false;
     }
   }
}

Then all you need to do is create this simple anchor on your website that will switch themes to that CSS document(You will need to make a different button for each different CSS):

onclick=”setActiveStyleSheet(’cielo’, 1);return false;”

That is freaking the coolest thing, with endless possibilities. Once I have duplicated this on mywebsite, I’ll be sure to make a post so you can find it!

-Enjoy,
-Ashton Sanders

A normal brown cardboard box arrived at my house. Thankfully, it was much more than a normal brown cardboard box, for inside this box was a beautiful and expensive piece of machinery: My HP 17″ wide screen laptop computer!

It has arrived!!

Websites in a Flash now has four beautiful computers in it’s computer fleet, three of which are laptop computers. I use three of them, and my Executive Assistant uses the fourth.

Here is my ever-expanding Computer Fleet:

Websites in a Flash Fleet Description:

My Brand New HP Laptop (right):
This HP laptop will become my primary processing machine as soon as I get a laptop bag for it, and have some time to transfer over my programs and files. This is the most powerful machine in my fleet.

Stats:
17″ Wide Screen
Whole Keypad (including number pad)
1.6 Dual AMD Turion Processors,
1 Gig of Ram
100 Gig Hard Drive
DVD RW Dual Layer LightScribe
Built in Mic/Webcam
256MB Radion Card
Windows XP Media Center

My Desktop (center):
This is a custom built computer that I built for Websites in a Flash. I just got this 19 inch flat-panel monitor. (I usually have it hooked up to my other 19 inch monitor, but I couldn’t fit it into the picture.) This computer was built in December of 2004, and it’s one smooth, reliable computer. I never have a problem with it, and it never lags when I have 20+ programs open.

Stats:
Dual 19″ Monitors
3200+ AMD 64
1 Gig of Ram
128MB Radion Video Card
XP Pro
CD R/W
DVD R/W
Logitech Wireless Keyboard/Mouse MX3200 (547169 Key presses in 30 days)
Logitech Headset

My Old HP Laptop (left):
This computer has never let me down. It’s been there for the highs and lows, and I’ve never had a problem with it. (Don’t tell anyone, but it’s at least 5 years old.) You can tell from it’s stats that it’s been a while since it was top of the line, but it’s still pulling it’s fair share.

Stats:
14 inch screen
2200+ AMD
XP Home
512 Ram
CD R/W DVD R
64 Shared

You may think that I am a big HP guy… but I’m not. It just so happens that the fourth computer I have (also a laptop) is a Compaq. (=] If you didn’t know, HP owns Compaq.) But seriously, I was planning on getting a Dell, until I found this screaming deal for a 17 inch HP. I’m one to never pass up a really good deal. =]

“Computers are Life”
-Ashton Sanders