ucantblamem

Archive for the 'Design' Category

Hack: spacing inline elements with CSS

5th Oct 2007

Inline (HTML) elements don’t do left or right margins… No, really; you can’t put margin’s on an inline element and expect it to behave. Quite often I’ve been able to hack my way around this by adding padding to the element instead, but this doesn’t always work, especially on images.

For many months I’ve had this issue with breadcrumbs (pathways) in Joomla! 1.0.x. An example of the type of output you’re likely to find from Joomla’s mospathway() function might be as follows:

<span class=\"pathway\"><a href=\"#\" class=\"pathway\">Home</a>
<img src=\"#/arrow.png\" alt=\"arrow\" />
<a href=\"#\" class=\"pathway\">Sub page</a></span>

You can see that it outputs images without any surrounding elements, so we can’t use my little padding hack. However, today while working on a project it hit me: Hmm… I wonder if word-spacing will affect images the same way it does text???

So, I gave it a go and sure enough, word-spacing works a treat. My simple solution works as follows:

.pathway {
	word-spacing: 1em;
}

.pathway a {
	word-spacing: normal;
}

You can see that we add the word-spacing (duh!) and then reset the word-spacing inside the anchors, that way we’re only really affecting the spacing around the images.

This little solution is going to be a welcome addition to my little “toolkit” as this problem has often found me going to such length as floating all the elements, using margins and then clearing a whole bunch of stuff to make it work; which is both expensive (in code length) and messy. I haven’t tried this trick on other issues (like spacing inline list-items for columns) etc, but I can only imagine it’s going to pretty much make my year!

Random eating

28th Mar 2007

Even in the days of the now extinct Kindalogical (R.I.P), I wasn’t really fussed by the idea of making lunch and bringing it to work with me. I think it’s probably the combination of getting up early in the morning (before midday), making a preemptive decision 5 hours ahead of time and general all-round laziness. What this means, is that everyday I chose from a fairly broad selections of eateries and restaurants what I will inevitably power my brain.

Unfortunately, these days, I’m finding that when midday roles around and the digestive system screams for more work, I’m left with a wide-array of options and the inability to be decisive… My fellow work mates could surely attest to my ridiculous fuss about the days cuisine of a lunch hour.

In jest, not two days ago, I told the crew that I would build a small app to randomly pick from the available options and allot me a meal for the day. To show that my actions do, in-fact, speak louder than words and also that I have far too much time on my hands; I built it!

I call it simply; Randomiser.

It is hardly an app… I think it has no more than about 10 lines of actual PHP code, but the plan is to evolve it gradually as I think of new features.

Currently, it pre-fills the textarea with some general options (available in my area) which the app randomly chooses from and displays on screen. Of course, if anyone else in the world finds this slightly amusing useful you can simply enter your own options (one per line) and hit the button for an instant lunch-time choice.

Enjoy you meal!

dotMobi Mobile Web Developers Guide

22nd Mar 2007

This past Wednesday I finished reading the “dotMobi Mobile Web Developers Guideâ€?, authored by Ronan Cremin, Jo Rabin, Brian Fling and D. Keith Robinson. This is a resource that has certainly helped this web-developer to better understand the Mobile space and how to tackle a Mobile-based project on a technical level. (more…)