One very interesting debate among web design purists is how to best use CSS to represent quotes. In HTML, it is very simple to markup a block of text as a quote. Simply use the blockquote tag, like this:

<blockquote>The first step to getting the things you
want out of life is this: Decide what
you want.</blockquote>

Using CSS, we can assign a distinct look and feel to make the quote stand out from the text, like making it italic and maybe even indent it a little. A very common technique is to use an image as the quote symbol, and by setting it as the background of the block, we can have a rather nice effect, without any messy “img” tags.
I’ve created a custom quote image for the vSlider theme, and the CSS to use it, so the previous example would be rendered like this:

The first step to getting the things you want out of life is this: Decide what you want.

Now, the problem is that although this looks quite ok, it would be a lot nicer if we could also have the closing quote as well. And this is where the problems begin, since in CSS there is no way we can use two different images as backgrounds for the same block. If we could, it would be rather simple: the opening quote would be defined in the top left, and the closing quote on the bottom right. Since this is not possible, again we have one of those (unfortunately common) situations where we have to mix semantics and presentation. By adding a “div” tag, we can create a nested block with its own style and that can be used as a placeholder for the closing quote.
In the case of vSlider, I have defined this as a class named blockquote-inner. So, we can slightly change our previous example to:

<blockquote>
<div class="blockquote-inner">The first step to getting
the things you want out
of life is this: Decide what you want.</div>
</blockquote>

And the result would be:

The first step to getting the things you want out of life is this: Decide what you want.

Which looks a lot better, if I may say so. Uglier code, true… but nicer result
If you are using the vSlider theme, you can give it a try.

Tags: CSS,Design,HTML,Tips 4 Geeks,Way of the web
4 Comments »

It makes me extremely happy that a lot of people have downloaded my vSlider theme and are using it on their blogs. I’ve seen it being used from South America to Japan
It’s a good feeling to give something back to the community from which I got so much.

Some people have asked me how to change the header image, or how to get the effect they see on iRui.ac of getting a different image on each page refresh. It’s really, really simple. If you look to the folder structure of the theme, you will notice that the default image is located in \vSlider\images\headers\vSlider.jpg, but there is no direct link to this image on the HTML code. That is because I’ve added a little bit of PHP code that selects randomly any image located on that same folder. That is, just dump all your header images there, and they will be immediately picked up – you don’t have to change any code. They should all be the same size as the default one, of course.

I would also like to ask for some feedback on how well the theme works in other browsers and operating systems. As I mentioned in the download page of the theme, I only know how it looks and behaves in IE, FireFox and Opera. If you can leave some comments about this, I would appreciate it.
Also, if you have suggestions for improvements, feel free to shout them out!

Tags: Tips 4 Geeks,Way of the web
16 Comments »

This is a good techie tip if you are hosting your site in a “multi-domain” account (you know, when you have a single hosting account, but you can have many domains on the same IP address).
A common problem with these accounts is that they have wildcard DNS enabled, which means that any request for a sub domain that doesn’t exist gets redirected to your main page. The problem is that this will always be the main page of the main account!


Show me more… »

Tags: Tips 4 Geeks
2 Comments »

This is a nice tip for people having problems with custom 404 pages in Internet Explorer. If you don’t know what a 404 error is, then let me explain in the shortest form possible:

It’s what your browser gets when it can’t find the page you requested.

There, a very low-tech explanation that goes straight to the point. If you want a “real” explanation, I suggest www.plinko.net.
Take a look around - they have everything you need to know about 404, and then some.

When I was making my very own custom 404 page for this blog, which should be a reasonably easy task, I stumbled upon a really weird problem. No matter how much I tried, I could not see the page in Internet Explorer. It was working fine in Firefox, but IE kept showing me its own standard “Page not found”. I went googling on the problem and it became clear that this is a known issue. IE is a little bit too smart for its own good – if you dig through the options, you’ll find a little gem named “Show friendly HTTP error messages”. If this is enabled, then IE can choose to ignore the content of error pages and show its own version of them. And, this option is enabled by default (of course…).

A good workaround is to prevent your browser from knowing that your page is actually a 404 page, and you can do that by forcing the return of a code 200.
How exactly you do that? Well depends on which technology you are using for generating the pages. Basically, you must be able to control the HTTP headers being returned. In the case of PHP (which I use in this case), I could solve my problem by adding this block of code:

<?php
  header("HTTP/1.1 200 OK");
  header("Status: 200 OK");
?>

The two different styles of declarations are just to ensure that will work, regardless of what version of PHP is being used. Note that this must absolutely be the first thing on the page!
You can check my 404 page. If I did my job right, you should see it, even in IE.

Tags: Tips 4 Geeks
2 Comments »