The world according to Sven-S. Porst
« Keynoted •
Main
• Rechnungs Checker 1.0.6 »
211 words
I’ve just thought about a potential and simpler redesign for our earthlingsoft page. The one real design problem it has is that it’s not obvious where to click if you want to download Rechnungs Checker, say. And that’s of course bad. So my current idea is to make it significantly simpler.
The main part should just be a line with all the application icons sitting there and their names beneath them. Just like they look on the desktop. And of course I want to use proper HTML and CSS to do that, i.e use a list with each application as an item. This works wonderfully for the icons only. But how do I get the text beneath each icon so it is nice and centered and such that the spacing is the same between any two icons?
In addition to the name, I thought about putting a short description beneath the name that is only displayed when the mouse hovers over the icon. That description could be wider than the icon or the name. How can I position it without ruining the rest of my arrangement?
I like to think that I used to be able to do such things in CSS, but it just wouldn’t work today.
Any hints?
January 13, 2005, 19:31
Hmm … what about:
… displaying the list items as blocks and floating them, which requires a width (and, as a side effect, places the icons in a kind of grid)
… wrapping the icons and the text below in paragraphs (inside the list item) and centering them.
… placing the description below with relative positioning, higher z-index and probably bigger width.
Something like this maybe?
Not tested, though …
January 13, 2005, 23:21
Thanks a bunch!
That’s exactly the idea I’d been looking for. It looks like it’ll do the trick.
January 14, 2005, 11:53
