s

Posts Tagged with "css"

Better Text Replacement with CSS

Apr 16, 2009  -  Comments

There are several methods for rendering non-web fonts (eg. Cufón and sIFR). Both are tedious to set up and implement. The easiest alternative is the good old image-instead-of-text trick, but that's not good for SEO, even with alt tags.

There is a way to have SEO text AND use an image as the text. With a little CSS trickery, you can easily achieve the desired effect. Worth noting, however, is that this method is really only good for non-dynamic, fixed width text (such as headings). It's not practical for blocks of text.

The first thing you need is an image for the text you want to replace (and yes, I'm using Comic Sans):

Now for the html code that we'll be working with:

<h1 class="replace heading">My Heading</h1>

The CSS does all the work.

.replace {
  display:block;
  height:0;
  overflow:hidden;
  font-size:0;
  letter-spacing:-1em;
  text-indent:-1000em;
}
.heading {
  width:135px;
  padding:26px 0 0 0;
  background:url('/images/custom_header.png') no-repeat 0 0;
}

First, we make the h1 virtually invisible via CSS by assigning a height and font-size of 0. Then we make sure it's invisible in all browsers by setting the letter-spacing and text-indent. The heading class has a top-padding which creates just enough space to show the image, which we set as the background. Super easy and effective!

You'll notice that I made two classes. I use the replace class as a global for the styles that are common to all replaced text, then the heading class has the unique styles.

Tagged: csstutorialtext replacement

Working with the flash hash

Aug 17, 2008  -  Comments

The flash hash is what Rails uses to display messages (both notices and errors). Since it's a Hash, you can assign any key/value pair that you want, but I tend to stick with flash[:notice] for a success message, and flash[:error] for an error message.

In my opinion, using the flash hash is a little confusing. I haven't come across a book or tutorial that fully explains how to control it properly. So, here are the options for using the flash hash in Rails.

flash[:key] and flash.now[:key]

The following method shows how to best use the flash hash:

def create
  @user = User.new(params[:user])
  respond_to do |format|
    if @user.save
      flash[:notice] = 'User was successfully created.'
      format.html { redirect_to admin_users_path }
    else
      flash.now[:error] = 'The user could not be created'
      format.html { render :action => 'new' }
    end
  end
rescue Exception => ex
  logger.warn('ERROR: ' + ex.message)
  flash.now[:error] = 'There was an error creating the user.'
  render :action => 'new'
end

Notice that I use the flash hash in two different ways: flash[:key] and flash.now[:key]. The way I use it depends on when I want it displayed. The flash[:key] usage should only be used before redirection, because it makes the object available for the current action and the next action. The flash.now[:key] usage should be used when you only want the flash object to be available to the current action.

Here's an example why you shouldn't use flash[:key] without redirection. Let's say this is your controller:

class MainController < ApplicationController
  def index
    flash[:notice] = 'Welcome to the site!'
  end
  
  def profile
  end
end

When you visit the index page, you'll see the message 'Welcome to the site!.' If you then click a link from the index page that takes you to the profile page, you'll still see the message 'Welcome to the site!' because the flash[:key] is available to the current action and the next action.

Displaying the flash

Here is a really helpful method to display the contents of the flash hash that I modified from one of Ryan Bates' awesome Railscasts:

<%- flash.each do |key, msg| -%>
	<div id="<%= key %>">
		<p style="float:right;"><%= link_to_function 'X', "Effect.Fade('#{key}')" %></p>
		<p><%= msg %></p>
		<div class="clear"></div>
	</div>
<%- end -%>

This method will loop through each key in your flash hash and create a div with the name of the key, then put the contents inside with a link to close the message div.

I put this method in a partial called _notice_div.html.erb and include it at the top of my application layout. Here are the styles I use for notices and errors:

#notice { background-color: #A4E7A0; border: 1px solid #26722D; }
#error { background-color: #F0A8A8; border: 1px solid #900; }
#notice, #error { width: 90%; margin: 0 auto 10px auto; padding: 5px; }
#notice p, #error p { margin-left: 20px; padding: 0; font-size: .75em; color: #000; }
#notice a, #error a { text-decoration: none; padding: 0 3px; }
#notice a { border: 1px solid #26722D; color: #26722D; }
#error a { border: 1px solid #900; color: #900; }
#notice a:hover, #error a:hover { color: #333; border: 1px solid #333; }

This is a notice div.

This is an error div.

Tagged: railscssflashtutorial

Ruby compressor for JavaScript and CSS files

Dec 11, 2006  -  Comments

On Friday, Adam and I were talking about the different JavaScript libraries that are available and how bloated they are. They can easily double the page weight of your site. But, if you want to use the pre-canned goodness of Prototype or Scriptaculous, then that's the price you pay. We were trying to find ways to decrease the amount of files a user downloads when they visit our company Web site. One idea was to compress the CSS file and all of the large JavaScript files that we use. Well, I found a cool online service to compress and combine JavaScript files, but there were no readily available sources for shrinking any other kind of file that I could easily find. So, Adam told me to use sed via the command line and use the power of regular expressions to strip line breaks, tabs, and spaces out of the given file. Well, I don't know anything about regular expressions, and Adam couldn't recall the exact syntax off the top of his head. So, he retired to his corner and whipped up a nice little Ruby program to do it for us.

Enter the Shrinker!

You can download the Ruby file below. If you're on a Mac, just copy it to /usr/local/bin then CHMOD 777 it. After that, you can simply run sudo shrinker path/to/file and it will spit out a new file with the extension .shrunk that you can now name anything you want. Windows users can dump the file anywhere they want and then run, from the command line: ruby path/to/shrinker.rb path/to/file to get the same thing.

File: shrinker.rb (UPDATE: This file is no longer available, sorry.)

Tagged: rubyscriptjavascriptcss

Using a background image on a table row

Nov 26, 2006  -  Comments

How many times have you had the need to apply a background image to a table row? Chances are, not very often. Before a week or two ago, I'd never even thought about it. I was living in blissful ignorance of the problems that can occur when trying to achieve this. But, of course, things don't go perfectly forever. Recently, Buck handed me a design for a client that incorporated complicated styling for a table that presented information. After the requisite belly-aching, I did what was asked of me. Very simple CSS:

tr.bar { background: url(/images/tr_background.gif) no-repeat 0 0; }

As you'd probably guess, it works perfectly in Firefox, but not Internet Explorer. But surprisingly, it doesn't work in Safari either. So, there must be more to this than just IE and their non-compliance. Having moved on to another project, I didn't have time to research the bug or find a solution. So, I handed it off to Colin, who, after a little experimentation, was able to find an excellent workaround.

The problem with IE and Safari is that they don't allow a background image to be applied to a <tr>. What do they do when you try this? The <td>'s inherit the background. This might not be a huge problem normally, but the reason the <tr> needed the background to begin with is because it had rounded corners on the top-right and top-left. So with the bug, each <td> had a rounded corner on the top-left, which looked a little funny.

Colin found a fix for this, which entailed making a class for the first and last <td>'s and having a separate image for them than the center <td>'s. This would work, but why not use the same image? Colin used the idea of having a class for the first and last <td>, but instead of making new images, he just fiddled with the background-position.

Here's what he came up with:

td.first { background: url(/images/tr_background.gif) no-repeat 0 0; }
td { background: url(/images/tr_background.gif) no-repeat 50% 0; }
td.last { background: url(/images/tr_background.gif) no-repeat 100% 0; }

This way, we use the same image. The first <td> starts the image in the top-right, showing the rounded corner, the middle <td>'s center the image, so you don't see either corner, and the last <td> starts the image in the top-left so you can again see the intended rounded corner. Perfect.

Tagged: xhtmlcss

Multiple CSS classes on a single element

Oct 19, 2006  -  Comments

Do you worry about repeating styles in your CSS? If a lot of your CSS classes use a common style like text-align: center; or color: #CCC:, you can actually create a single class for each of these styles and save a ton (well, not really, maybe one or two KB) of bandwidth on page load. A lot of people don't know about assigning multiple CSS classes to a single element.

Let's say you have a <p> tag that you want to add specific styles such as margin and padding, plus some pretty common(throughout your Web site) styles like text-align: center; and color: #666;. Instead of writing each of these styles for every element that they appear on, you can write a single class for each style, or group of styles that usually appear together, and just add it to the class application on the desired element.

Your stylesheet might look like this:

.specific_style {
  margin: 5px 10px;
  padding: 2px;
}

.center_text { text-align: center; }

.dark_gray { color: #666; }

And then you can add multiple classes to any element by separating them with a space, like so:

<p class="specific_style center_text dark_gray">Lorem ipsum dolor sit amet.</p>

This will apply the specific_style class as well as centering the text and coloring it dark gray. This is a wonderful way to keep your CSS DRY. Be careful though. Don't overuse this method or your elements will have classes a mile long. Very handy when used properly!

Tagged: xhtmlcss