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.

Here is the content that comes after the div.

Here is the content that comes after the div.

-CSS Everywhere!
-Ashton Sanders

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:none;
}

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

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

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 started working with a new client who’s menu bar was made entirely with JavaScript, and even though he had 10 or so pages, Google only new about his home page.

HTML/Javascript 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

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