Michele on the Road: on Travel, Photography and Life

Since releasing this design, the tabbed menu it sports has been featured in quite a few galleries and every now and then I’ll receive an email from someone asking how I implemented it.
Personally, I think it should be quite easy to understand how it works by giving a quick glance at the HTML/CSS, but it doesn’t seem so. So I decided to write a quick tutorial for posterity.

Get the HTML in place

First of all, you’ll have to write the HTML. I’ve used a very simple ul list with some properly assigned IDs:

<ul id="usection1" class="tabbed-menu">
  <li id="lsection1"><a href="#"><span></span>Section1</a></li>
  <li id="lsection2"><a href="#"><span></span>Section2</a></li>
  <li id="lsection3"><a href="#"><span></span>Section3</a></li>
  <li id="lsection4"><a href="#"><span></span>Section4</a></li>
</ul>

Basically, each li has got it’s own ID. Plus, the ul should be given a different ID based on where on the site we are.
Are we in Section 1? give it ID usection1. Is it Section 2? use usection2. And so on…

Set the CSS on fire

We want to use different images for each item in the menu, plus they have to change when the mouse rolls over and the active item should be different from the rest.
So we need three images for each item. In my example images have the following size: 84×59. Also note, the images already include the white padding.

Let’s style the lis and ul:

ul.tabbed-menu {
  display: block;
  float: right; /* In case you want it on the right */
  width: 336px; /* Width of an item * # of items */
  height: 59px; /* Height of an item */
}

ul.tabbed-menu li {
  overflow: hidden; /* No bits of text should spill out of the li */
  display: block;
  float: left;
  position: relative; /* What's inside the li should be absolutely
                         positioned INSIDE the li */
  width: 84px; /* Width of the image */
  height: 59px; /* Height of the image */
}

Now make each item look different:

#lsection1 a span, #lsection2 a span, #lsection3 a span, #lsection4 a span {
  /* It should fill the LI */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Basic look */
#lsection1 a span {
  background: url("section1.gif") no-repeat top left;
}

#lsection2 a span {
  background: url("section2.gif") no-repeat top left;
}

#lsection3 a span {
  background: url("section3.gif") no-repeat top left;
}

#lsection4 a span {
  background: url("section4.gif") no-repeat top left;
}

/* When ul's id and li's id match, it means that li is the active one */
#usection1 #lsection1 a span {
  background: url("section1-active.gif") no-repeat top left;
}

#usection2 #lsection2 a span {
  background: url("section2-active.gif") no-repeat top left;
}

#usection3 #lsection3 a span {
  background: url("section3-active.gif") no-repeat top left;
}

#usection4 #lsection4 a span {
  background: url("section4-active.gif") no-repeat top left;
}

/* Here we set the mouseover effect */
#lsection1 a:hover span, #usection1 #lsection1 a:hover span {
  background: url("section1-hover.gif") no-repeat top left;
}

#lsection2 a:hover span, #usection2 #lsection2 a:hover span {
  background: url("section2-hover.gif") no-repeat top left;
}

#lsection3 a:hover span, #usection3 #lsection3 a:hover span {
  background: url("section3-hover.gif") no-repeat top left;
}

#lsection4 a:hover span, #usection4 #lsection4 a:hover span {
  background: url("section4-hover.gif") no-repeat top left;
}

That’s it. You can change the number of items simply by changing the width of the ul and by adding the proper code to the CSS.
Mind you, the order in which the different blocks of code are written in the CSS IS important.

If you find this tutorial useful, please Digg it!. :)

It’s been exactly one year since I first introduced 16bugs on this very blog. And it’s been a great experience!

16bugs was my first Rails full-blown app and since then I’ve learnt a lot, both as a developer and as an entrepreneur.
During this year, I established my first company with two of my best friends and released two new apps — Unilife and Pagety. But with that came a much bigger effort from me to keep things running smoothly and, especially in the past few months, I’ve been devoting most of my time to this, while neglecting a bit my social life — blogging included ;) –…shame on me. Yet the thing is I love doing this stuff!

Ahead I see even busier days! We’ll soon start working on a very cool app for a client and on the side we have at least two more we’d like to internally develop.
Plus, I’d like to release a new version of 16bugs as soon as possible which will be RESTful, finally!

Meanwhile, you can enjoy a great offer on both Pagety and 16bugs:

• Use coupon code ‘launchfest’ when upgrading your Pagety account, you’ll get a 50% discount on any plan for up to one year
• If you upgrade your 16bugs account before Sunday, you’ll get an extra month for free

And now for some sleep — which I’m in deep lack of…

So yesterday we launched Pagety. We opted for a stealth launch during the week-end and will try to get some good coverage at the start of the next week.

What is Pagety?

To put it simply, Pagety is a cross between a CMS and a hosting platform.
There’s no reason to uncouple those two functionality which are vital to every business: a way to easily manage your website and a reliable place to host it.
What’s better than managing both from the same place?

You can read the full announcement on our company blog.

It’s been a pretty intense start of the year and I’ll now relax for a couple of days and then start working on some client work, while listening to the feedback coming from Pagety’s users and making it even better! :)

Edited: Digg it!

I know, I know, I’ve been neglecting this poor ol’ weblog of mine for so long…and I’m frankly quite ashamed of it.
But you know, life gets busy, and days become weeks, and weeks become months. ;)

As I’ve already mentioned before, we’re working on a new Web application which is going to launch in the next few hours.
Meanwhile, we’ve launched our company blog where we’ll write about our business and projects, and lots of other different stuff.
I’d be very happy, if you decided to take a look at it and subscribe to the feed.

Our next app is called Pagety and it’s a very simple and easy to use hosted CMS. I know it’s not very explicative, but I’ll say more when the announcement comes.
In the meantime, make sure you sign-up to be notified when we open the doors to everyone.

Now that we’re almost done with our last project — not that I won’t have anything to do, then — and that I have another blog to look after, I hope I’ll get back into the blogosphere.
I have quite a long list of things to write about, a couple of how-tos, but I never seem to get the time to seat down and write them.

Anyway, watch out for the announcement!

To wrap 2006 up, here’s my Best of… for this year.

Read the rest of this entry »

If you’ve been reading this blog in the past months, you should know that after announcing I mentioned working on another secret project, every now and then — mostly as an excuse for not blogging…how lame of me! ;)

Read the rest of this entry »

I was baptised. I went to a Catholic school. Basically, I was grown to be a Catholic. And I’m not.
As soon as I started asking myself questions, I began being dubious about religions. Not just Catholicism, all religions.

I think religions do more harm than good and usually, positive things about a religion can either be found somewhere else, too, or were introduced in that religion, through an evolutional process, with the help of free thinkers — often battled by the heads of that same religion.

Read the rest of this entry »

I’ve been vegetarian for the past two years and I must say I’m very happy about it and I’m absolutely regret-free.

This post isn’t about why I decided to become veg — don’t be afraid, I’ll write about that, too ;) –, instead it’s about the single bad thing about being veg.

When someone invites me to have lunch/dinner at her/his house, I have to make sure that person knows I’m veg.
That person, most of the times, will then be a bit upset — not in a bad way ;) — because for a non-veg it’s sometimes difficult to come up with a meat-free meal, or she/he will need to cook a separate meal for me if it’s a lunch/dinner with a few people.

As you can see, it’s not really a problem with being veg, it’s more of an issue of politeness: I feel bad about giving someone some headaches simply because she/he wanted to be nice and invited me to eat at her/his place.

So, are there any vegetarians between people reading this blog? How do you cope with this problem?

Good morning, ladies and gentlemen. I’m very excited to introduce you with my new sweet little creature. I’ve been working very hard on it for a good while and now it is ready to see the light.
Here comes 16bugs.

16bugs is a Web application — of course, with a bit of so-called Web 2.0 — for managing a usually tedious and dull task such as bug tracking.

If you’ve ever scouted around for a good bug tracking solution, sure enough you know what all of the available solutions have in common:

1. They’re hard to install, usually needing a custom machine.
2. They’re not intuitive to use for non-developers — and often for developers, too.
3. Most look really bad!

And this is where 16bugs comes in. It tries to fill all those gaps:

1. No need to spend 1 day to install it: it’s hosted!
2. I struggled to make it as intuitive and easy to use as possible.
3. Aren’t those ladybugs lovely?

It’s the first time I attempt something of this kind — I mean on the hosted side of things — so you might see things stumble and fall at the beginning. But rest assured I’ll do everything I can to fix any issue that might — and definitely will thanks to our good friend Murphy — arise.

It definitely isn’t choke-full of features, indeed it’s actually what I tried to avoid. If you’re Apple, Google or Microsoft, you might find it useless. Instead, if you’re a small software development company or a web designer, it might suits your needs perfectly.
Especially web designers don’t need many features, they just need a place where their clients — or anybody else for what this matter — can go to tell what’s wrong: so it needs to be easy to use.

Now I ask you, my fellow readers, to try it out — if you’re interested, of course — and then spread the word — if you like it, of course ;) .
And if you don’t want to do it for me, at least do it for those poor little ladybugs… :)

Update: digg 16bugs! :)

I think University is useless. Unless you’re studying something that’s pure theory such as Mathematics, Physics, Literature or something like Medicine and probably Law, it’s just as useful as eating crap.

I’m studying Computer Engineering and not only I find it extremely dull — which is kind of subjective –, I find it extremely useless, too. Why?

Read the rest of this entry »