ghettocooler.net

Tuesday, October 06, 2009

Today’s update comes from me spending lots of time on Things Magazine. I love the site and their approach to discussing, pointing out, shouting about, whispering quietly amongst themselves, today’s potentially cluttered online culture. Sometimes they expound, sometimes they don’t. It’s art with some noise, noise with some meaning or even none at all. So I’ve borrowed heavily. It’s one of the few sites I leave Google Reader to read. Jammed in among popular noise makers, few sites demand such attention. There’s a couple of random patterns in use with these updated styles, the newest from Pattern Foundry and a squiggly lines pattern of my own creation which has stuck around.

Posted in code, design, interweb / Leave a Comment

Friday, April 03, 2009

etnies shop

What a novel idea, sell your own shoes online! In these tough economic times did Sole Technology stop messing around with overpriced under performing outsourced ecommerce and finally bring it all under their own umbrella?

It looks that way, congrats web dept, nice work!

Posted in california, code, design, interweb, skateboarding / 1 Comment

Saturday, January 31, 2009

bbcolors-color-schemes

Posted in code, interweb, original, tech / 9 Comments

Friday, March 28, 2008

I recently had to schedule some blood work for a physical and was blown away to find an “Add To My Google Calendar” button on the confirmation page.

Posted in code, design, interweb / Leave a Comment

Wednesday, March 05, 2008

Activities: Microsoft’s version of microformats? They’re awfully similar & require no work for the developer. The downside? HTML documents will continue to lack the rich markup that microformats offer. We can continue using microformats to mark up our documents of course, but I wonder if this will stagnate their growth.

Posted in code, interweb, link, tech / Leave a Comment

Wednesday, February 27, 2008

Just a tip. If you’re ever using SWFObject to write out your flash files and ExternalInterface to communicate with them, in Internet Explorer (6 & 7), make sure that the ID of your embedded flash file is all lowercase.

Take this basic code for example, used to mute the audio in a flash file from within HTML:

Posted in code, interweb, tech / 1 Comment

Tuesday, December 18, 2007

I’ve recently been using, and falling in love with, a Javascript library you’ve probably heard of – jQuery. So when I needed Tool Tip functionality for a project, the one thing I was sure about was that jQuery was the way to go. I tried writing some things myself and didn’t like the results. Then I tried a couple of different jQuery based Tool Tip plugins, which worked OK, but I knew they were cumbersome & supurfulous.

Posted in code, interweb / 2 Comments

Thursday, May 31, 2007

No silly javascript, no crazy coding, no waiting for images to load. Just some good old fashioned HTML, CSS, and a single image. Once you do this, you’ll never make your web site navigation any other way.

Warning: If you aren’t into front-end coding for the web, you may want to skip this. For those that are (I love you that much more), this has been covered elsewhere and covered much better, so hopefully this is old hat.

Posted in code, interweb / 48 Comments

Thursday, December 07, 2006

This technique has been around for so long, but still too many people are not using it. It’s one of the easiest first steps you need to take toward making your site semantically correct and search engine friendly (see the final result in action).

Never, ever, put a company logo as a straight up image in HTML. It needs to be recognized by Google and if it’s just an image sitting in your code, no one can find it.

Let Google know your logo is an important item on your site by dropping it in an <h1></h1>. Then let Google read and index your company name by using real text, not an image:

The HTML for your logo should look like this:

<h1>My Company</h1>

Now use some CSS to replace your text with an image (Use the width & height of your own image):

* {margin: 0;padding: 0;}
h1 {
display: block;
width: 250px;
height: 46px;
text-indent: -9999px;
background: transparent url(my-company.jpg) no-repeat 0 0;
}

Usually you’ll be linking your logo to your home page too, which is just as easy to accomplish:

The HTML:

<h1><a href="/" title="My Company">My Company</a></h1>

And the CSS for your anchor tag:

h1 a {
display: block;
width: 100%;
height: 100%;
outline: none;
}

It’s as simple as that! Go edit your logo’s HTML.

See the final result in action, disable CSS styles to see it through google’s eyes. View source, copy & paste.

Update: For even more search engine love, be more descriptive in your H1:

<h1>My Company - My Companies Main Goal</h1>

Or, use any HTML element you deem most appropriate.

Did you find this post helpful?

Posted in code, interweb / 23 Comments

Sunday, November 13, 2005

Update: Get help from the community & discuss this tutorial on CSSDiscuss.com – Guest posting is currently enabled.

How many times do you have an image floated left in a block of content, but want to keep that content from wrapping around your image?

You’ve tried to accomplish this before, but what you really need is something that plays nicely with any HTML & any amount of content you, or more realistically, your database can throw at it.

The example below can easily fall apart without the proper CSS in place:

The HTML:

<div class="callout">
<h3>team report, replaced image</h3>
<h2>Team Report 10-06-05</h2>
<p>Eric Koston and Rick McCrank are still in Toronto, having a killer time filming for the upcoming éS video with filmer Scuba Steve.</p>
</div>

And the CSS to get started:

.callout {width: 275px;}
.callout h3 {
width:115px;
height:65px;
float:left;
text-indent:-8008px;
background:transparent url(team-report.gif) no-repeat 0 0;
}

The important part is that you have your <h3> (in this case, an image replacement) floated left. Any html that comes after your <h3> will now wrap around it. Take a paragraph for example:

That’s the easy part. Now, how do we keep that paragraph from wrapping? Your first instinct might be to increase the height of .callout h3, we’ve all tried to get away with that method in the past. You’ll tell yourself – the content will never be more than five lines long. Deep down inside – you know this isn’t the case & that you’ll be editing that bit of CSS in the near future. And then a month after that; and then the following month and then… well you’ll be editing that css until the entire site gets redesigned; which you know isn’t happening anytime soon.

So, we need a future proof method to keep this content tight, the way your pixel princess intended it to be.

One solution might be to put a width on the paragraph tag and float it right. Let’s try:

.callout p {
width:160px;
float:right;
}

Resulting in:

Not a bad start. With this in place, any content in a paragraph tag will never wrap under your image. Unfortunately, chances are this content is variable & is being pulled from a database. Who knows what HTML will be spit out. It’ll fall apart if say, instead of a paragraph, you had an unordered list:

This doesn’t quite hold up very well, does it? So let’s change the .callout p { } declaration to .callout * { } instead. The * selector will select P’s, UL’s & any HTML that falls under .callout :

.callout * {
width:160px;
float:right;
}

Our new declaration solves that quite nicely indeed. There’s just one problem. What if some HTML appears deeper? Take these potential list items for example:

An anchor tag perhaps?
Or a strong tag perhaps?

Some basic HTML, will render as this:

This really screws things up. Cleary we only want .callout * { } to apply to parent elements, and not their children, no matter what they are. So let’s overwrite any child’s width & float values with:

.callout * * {
width:auto;
float:none;
}

Quite literally, the .callout * * { } declaration says: if any html element contains any HTML element, do { width:auto;float:none;}.

There it is, exactly what we want & it’ll work in all current browsers (including IE!). Throw any HTML at it, with any varying amount of content & you’ve got some lean & mean & pretty basic CSS to prevent it from wrapping under your floated image.

Your final css:

.callout {
float:left;
width:275px;
}
.callout h3 {
width:115px;
height:65px;
float:left;
text-indent:-8008px;
background:transparent url(team-report.gif) no-repeat 0 0;
}
.callout * {
width:160px;
float:right;
}
.callout * * {
width:auto;
float:none;
}

View the final HTML: CSS Image floats, no text wrap.

Get help from the community & discuss this tutorial on CSSDiscuss.com – Guest posting is currently enabled.

Did you find this post helpful?

Posted in code, interweb, skateboarding, tech / 107 Comments