CSS Scroll Box instead of iFrames

You've probably heard "iframes are horrible with search engines." Well, they are.

I recently had a client want me to create scroll boxes for their website so they could fit 1000+ words into a 300x457 pixel scroll box. How can I create this scroll box without the iframe? Well, you are about to find out.

Here is how you use CSS to create a scroll box instead of an iframe:

We're going to use a css attribute called "overflow," and by setting it to auto, it turns a normal div into a scroll box!

#scrollbox {
  width:300px;
  height:457px;
  overflow:auto;
}
<div id="scrollbox"> *enter endless amounts of words*</div>

That's it!
Enjoy

CSS - Paragraph Indent Text

"Can you indent the paragraphs?" This can be a very dreaded request to a web designer who doesn't know better. This may mean that you have to go through and add

&nbsp; &nbsp; &nbsp;

to the front of every paragraph... or if you are a CSS Master, you know about text-indent!

All it takes is a

<style type="text/css">
p
{
text-indent: 20px
}
</style>

And then all of your paragraphs look like this, everyone is happy and you are done with the website 4 hours earlier! Easiest way to intent paragraphs or text on the planet! Thank you CSS for being so cool.

-Ashton Sanders

Programming on Principle

There are many different ways to program websites. There a many different ways to program the exact same website. If you gave the same design to 100 different website developers, you would end up with 100 pages (that probably all looked fairly similar) and 100 completely different HTML code. Is it possible to say if one is right or wrong?

The Principle of Web Programming

The first principle of website programming is validating. When you make a website, it better be 100% valid. "Ah but it looks perfect in Internet Explorer..." (but it probably looks horrible in Firefox or Opera.) If your code is not valid, that means you are "doing it wrong." Only second rate Web Developers are okay with "doing it wrong."

With HTML, you can do just about anything! From anything as simple as changing the color of a body of text, to aligning tables around your site. But just because you can doesn't mean you should. HTML is not a styling language, its a formatting language. You should use HTML to enter and position your text and body copy.

Cascading Style Sheets, CSS, is a styling language. It's purpose it to add color and life to your website. If you remove your CSS from your site, it should end up being straight text with a couple pictures.

By Why Use CSS?

CSS makes life simple! Why else? Every website has certain aspects that will be the same throughout. Take headers for example: On any given website, it will have the same color, font, size, etc for the first title on every page. You could hard program that with HTML on every page, or you could just put it between "<h1>" tags, and then in your CSS document, you tell all h1's to be a certain size, color, font, etc., etc., etc.

Then when the client comes back and says, "Sorry man, I don't like that green, lets add 2 points of magenta to it," you don't have to reprogram your entire site. All you need to do is change 6 digits in one document, and the entire site changes!

And if that wasn't enough, it keeps your website code clean! I took a site that was almost 300 lines of code (where everything was programmed in HTML). I converted most of it to CSS, and it ended up being less that 40 lines of code! Search Engines love you! It is just that much easier for the Search Engines to get the text on your site.

"Program like your client is watching you... and they understand what you're doing."
-Ashton Sanders

CSS - Absolute Position Sidebar

This is what I call CSS tip in 30 seconds:

It is very useful to be able to put your navigation bar or side bar at the bottom of your HTML, and absolute position it to appear up on your site where you want it to go. This is actually pretty easy.

If you just want it to be along the left side of your screen and lets say 100 pixels from the top (for your header), this would be your code:

#leftnav {
    position:absolute;
    top:100px;
    left: 0;
}

If you want your navigation bar to go along the right, obviously you would replace "left" with "right".

Here is where it can get complicated: What if your layout is a fixed width, centered layout? Then you cant just align the navigation bar off to one side, because that would not stay inside of your layout, it would jump all the way off to the side. Here's what you would do for a 1000 pixel width and centered website layout:

#leftnav {
    top:100px;
    right: 50%;
    margin-right: -500px;
}

Quick Explanation: "right:50%" causes the right side of your navigation bar to be exactly in the middle of your screen. It doesn't matter what size screen you have, it will always be right in the middle. Then the "margin-right:-500px" moves the entire navigation bar 500 pixels to the right. So in essence, the navigation bar will always be 500 pixels to the right of the exact middle of your browser! That way it looks permanent, and won't move as you shrink your screen.

Another Note: If your navigation bar is going to the left side of your screen, here is another option: If you leave the side bar or navigation bar without the absolute positioning, and it appears directly below where you want it, then if you leave off the "right" or "left" in your CSS (leaving only "top:100px") your navigation bar will move straight up to the top of the screen, and stay where you need it to be.

-CSS in a Flash!
-Ashton Sanders

CSS - Unordered and Ordered Lists

As many young website designers do, when I first got started working with HTML and CSS, I tired to stay as far away from Unordered Lists (<ul>) and Ordered Lists (<ol>). Everyone has their own reasons, but I just thought there was too much to learn about it before I could get it to do what I want.

When you have a list of items, links, etc., it should be in a list

I found this amazing article about lists on AListApart.com: Taming Lists

(Lists are also what you would use to create a pop-up menu only using CSS.)

-Ashton Sanders

CSS - Float

Their is magic in Cascading Style Sheets. (Some properties more than others, but still magic.) Float is one of those CSS properties that really fundamental for any developer trying to create layouts without any tables.

CSS - Float

There are three possible values for float: right, left and none. They are pretty self-explanatory, but here goes anyway:

Lets say you have a div that is 200px wide and 30px tall. Normally any content that comes after it would start at the bottom (30px bellow the top of the div.):

Here is the content that comes after the div.

If you float that same div to the right, all of the content that comes up after the div will show up on the left hand of the div (exactly like the content would come up next to a right-aligned picture):

Here is the content that comes after the div.

And vise versa if you float left:

Here is the content that comes after the div.

This is a very simple property, but you will use it in every CSS design you create. It is definitely a property you want to have ready to throw in to your CSS!

-CSS Everywhere!
-Ashton Sanders

CSS - Replacing Text with an Image

Cascading Style Sheets (CSS) make it very easy to replace text with an image. Here is the whole process described in as few words as possible:

Background Information

In CSS, "display:none" will cause that element and every child in it to disappear. There is nothing you can do to make one of the child's element.
"background-image" give an element a background. This can be applied to just about every element.

Create the Elements in HTML

In your HTML, write this:

<h3 id="title">
  <span>Here is the Title!</span>
</h3>

Create the CSS to replace the text with an image

In your CSS, write this:

/* Remove the Text */
#title span {
  display:non;
}

h3#title {
  background: url("image/url.jpg") no-repeat top left;
  height: 20px;
  width: 100px;
}

And Bam! Your text has disappeared off of the page, and the H3 element is 20 pixels wide and 100 pixels tall. It also has an image for a background that is aligned in the top left corner.

I've seen that CSS Text Replacement technique described with two pages, so I thought I'd see how short of a blog I could make out of it.

And Now you know how to replace text with an Image!

On a side Note, I've also seen this done with: "text-indent: -5000px;" or "visibility:hidden". These work, but I would stick with display:none. It's the cleanest way to do it.

-I hope that helps you out with your CSS and Design Needs.
-Ashton Sanders

CSS - Absolute Positioning

Absolute Positioning with CSS can be a very useful thing.

I've been working a lot with CSS over the last year, but I've just recently discovered the secret to absolute positioning.

Absolute Positioning in CSS

Absolute positioning will allow you to move an HTML item from anywhere in your code to the same spot. For Example: The side bar on this page (Top Horse Connection) is at the very bottom of the HTML code. But the CSS absolute positioning tells the side bar to be positioned 170 pixels from the top of the page. Here is the CSS Code:

#sidebar {
  position:absolute;
  top: 170px;
  left:0;
}

As you can see, it's very simple. And it's very useful when you want something to align along the right or left side of the screen. But what if you want a sidebar to be positioned in the middle of your screen (lets say 300 pixels to the left of the exact middle)?

You could do:

#sidebar {
  position:absolute;
  top: 170px;
  left:400px;
}

On a 1400 pixel-wide-screen, that would work perfectly!, but what if your screen was 800 pixels wide, then the sidebar would be 100 pixels to the right of the middle... So what now?!?!

This is what would you do:

#sidebar {
  position:absolute;
  top: 170px;
  left: 50%;
  margin-left: -300px;
}

And Wala!

-More on the way
-Ashton Sanders

CSS Button - (One SWEET CSS Button)

It is true: "You can make a button a million different ways." There are also as many ways to create a button that will change when you hover your mouse over it. You can use JavaScript, CSS (Cascading Style Sheet), plain HTML, etc. But each one has it's own problems:

JavaScript button: Search Engines have a tough time with JavaScript. I recently got a client who's menu bar was made with JavaScript, and even though he had 10 or so pages, Google only new about his home page.

HTML button: The "onmouseover= and then call in a new image" works pretty well, but you will notice a half second delay or so, because the image has to load. (Yes, you can have the button's load with the site numerous different ways, but that's adding lots of random annoyances that you don't have to deal with.)

CSS button: You can also use CSS to load a new images when someone "a:hover"s over your button.

Here is the best way to make a button that changes when your mouse hovers over it (And yes it uses CSS! Which keeps your website code nice and clean, and Search Engines Love you.) This CSS button technique is also 100% valid CSS and HTML!

First you make one image that has two versions of your button: 1)"Up" and 2) "Hover" side by side. Like this:

(This button used courtesy of www.tophorseconnection.com)

The Reason you put the two images into one image is so that the "Hover" image is loaded at the same time that the "Up" image is.

Now we need to to create the HTML. All you do is add a button class to an anchor:

<a href="#" class="button">&nbsp;</a>

The button's CSS can become a little more complicated, and sometimes (you never know when it will strike) Internet Explorer won't do what you want... So here is the CSS that I created for this css button class:

a.button {
display:block;
width: 157px;
height: 46px;
background: url("../images/button-home.gif") no-repeat;
}

a.button:hover {
background-position: -170px 0
}

As you can see from this sweet CSS button, all you do is give it the correct width and height for the button in the image, and include the button image as a background with a "no-repeat." Then when someone hovers over the button, the background image moves 170px to the left! This saves you from having to load a new image!!!

Click Here to See this CSS Button Technique in Action!

More Information about this CSS Button Technique

Disabled CSS Buttons

Yes, there is so much that you can do with this technique. You can add a third image, that is grayed out (so that it looks disabled), and then apply that to a "disabled=disabled" input! (Yes you can use this same sweet CSS button technique on inputs!)

But Wait, There's More!

There is a problem with this example: you have to create a new image for every new CSS button. Here is what you do:

Instead of using an image with words on it, make an blank button image (without words). And put text between the anchors! You may need to add some extra CSS code to place the text where you want it on the CSS button.

This Sweet CSS Button Technique in use:

Here is a perfect example of this CSS Button technique reusing the same background: Database in a Flash (Yes, there is only one button image, that is reused throughout the entire program!)

Adding Animation to your CSS buttons!

I was having some trouble with a site that I developed a while ago, because the main navigation bar was made with Flash, and Internet Explorer users had to click twice on the navigation bar to get it to work. (There's a rant for another day =]) So I was stuck with how to make this sweet flash navigation bar into CSS and HTML.... This it struck me! Just a couple days ago I came up with this sweet idea using this very technique! I made a button just like above, except it was an animated gif, and the "Up" image was motionless and the "Over" image was animated! You can check it out at Fiditz.com!

-Thats all for today!
-Ashton Sanders

CSS Zen Garden

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

CSS Difficulties - Centering Images

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 2x26 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

Switching CSS on the Same Website

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

Internet Explorer CSS Tip

Beginners Note: The main purpose of CSS, or Cascading Style Sheets, is to add color and life to a website. The main use for HTML, or Hyper Text Markup Language, on the Internet is to create the format or layout of your website. (Note: It is quite possible to create two identical websites, one in only HTML, and one with almost no HTML formatting and lots of CSS.)

Many Search Engine Optimizers will tell you that the more CSS you use the better. The reason for this is simple: If you created a web page only in HTML, a search engine would have to index 300 lines of code (lets say), while on the other hand, if the same website was formatted with lots of CSS, you would only have 50-100 lines of HTML for the search engine to index. So the search engine would index almost only textual information, and very little code. And in theory, the search engine will think that you are a much more important resource for it to index.

As any Website designer will tell you, Internet browsers can react very differently to the same piece of CSS code. And since a vast majority of the public use Internet Explorer, it's very important for your website to look good in that browser. Unfortunately, this browser doesn't listen to CSS directions as rigidly as FireFox, the next most popular Internet browser. (Internet Explorer Vs. FireFox)

Now for the Internet Explorer CSS Tip:

Lets say you have this piece of CSS code:

.text {
padding-top: 5px;
}

And this is your HTML:

<div>Welcome to the HTML Class</div>
<div class="text">Today we will be learning about HTML</div>

And for some reason the freaking Interent Explorer won't listen to your css. No matter what, it just refuses to add padding in between the two <div>s. There are many things you can try to get it to work. You can change it to "margin" or change the distance to 70px. Nothing happens. Believe me... one of the most frusturating things in the world... second only to stupid people... maybe.

Well behold there is something else you can try: be more specific when you define your selector (.text). Try this:

div.text {
padding-top: 5px;
}

I've found that Internet Explorer takes much more kindly when you are more specific with your CSS defining.

Another CSS Note I thought I'd throw in as a bonus:

I realized that almost none of the CSS tutors on the Internet tell you about this extremely useful CSS syntax that can help you to be more specific. Lets take this example. You have a 100 page site with lots of pictures that you want to validate. Unfortunately, a couple of your pictures don't have an "alt" tag (which will create an error in almost all HTML validators). The solution is use this CSS code:

img[alt] {
border: 5px solid #FF0000;
}

This code will put a 5px red border around ever image that has an alt. This will make it easy for you to scan through your site and easily view images that are and are not properly formatted.

This is how it works: After the HTML tag (selector) and inside the brackets [ ] put any atribute for that HTML tag. You can also put the attibute and that atributes variable. Like this:

img[alt="Websites in a Flash"] {
border: 2px solid #FF0000;
}

With that code, any image that has the alternate text of "Websites in a Flash" will have a 2px red border around it.

-Enjoy
-Ashton Sanders