Tag: css

Simulating a Table Using an Unordered List

NOTE: It should be said that semantically correct HTML should always be used in favor of <div> craziness. This is meant more as a proof of concept.

Your first question immediately might be, “why would I want to simulate a table with a list, why not just use a table?” With the raise in popularity of AJAX sortable list elements, using list items to represent a multiple column data table can allow for easy sorting of various more “tabley” information. So let’s get started.

First let’s look at our HTML:

Now the CSS:

Ok – I’ve left something out for space. I also implement the clearfix solution as given at: http://www.positioniseverything.net/easyclearing.html

I’ll keep this post short, because I’m expecting that you can figure out everything that was done by the HTML and CSS. Hope it helps someone somewhere to do something cool.

Result:

Advertisement

Geocoding in Microformats with Google

So I finished a few TextMate snippets last night to help me in the production of microformats for my client’s websites. A few little tweaks left, but all and all I’m happy with them.

Today I decided to try something new and to add some geocoding data to a new site’s “Contact Us” page address hCard. For those of you that haven’t yet really experimented with using geocoding within a microformat it is actually done quite easily. All you do is add the following code to your hCard:

<div class="geo">
	<span class="latitude">[lat number]</span>
	<span class="longitude">[long number]</span>
</div>

So, how do you get lat/long codes? Simple – you use Google Maps… Just go to http://maps.google.com and look up the location that you want to geocode. It’s good to give the found location a double-click in the map just to make sure that it is the center focused it. Then click on the “Link to this Page” button. Look up in the URL and you’ll see a ton of various query strings. Look for the ll= NOT the sll= or anything like that… it will say &ll= with a number, like so:

&ll=38.898114,-77.037163

Just after the last number will be another “&” to start the next query option, make sure you leave that last “&” out. That’s it – the first number in that string is your latitude and the second number (after the comma) in the longitude.

Happy Geocoding!

Preparing for CSS Naked Day with Ruby on Rails

So you are sitting there around the house watching reruns of Smallville and Seinfeld and you think, “I wish I could jump onto the CSS Naked Day bandwagon with my Ruby on Rails application”, well you are in luck. Conditional statements in Rails are a piece of cake and with logical expressions like “unless” we save ourselves a ton of code.

In our layout when we call our stylesheet link tag we would just add some conditional code to the end like this:

<%= stylesheet_link_tag "default"
unless (Time.now.month == 4) and (Time.now.day == 5) %>

And that’s it, show the stylesheet unless it’s April 5th. The carriage return is for the blog, this can go on one line. I do have to say, be nice to your users here, you just might break the shit out of some of your UI without your CSS. Most Rails applications have more then just a blog on them so I suggest not doing this on a production application (do I really need to be saying this?).