Posts tagged with “CSS”
Sorry for the lack of updates. I’ve been quite busy with a huge project that I can hopefully show you in some weeks. And I can assure you Yuckfu isn’t dead either.
Another thing I finished up yesterday was my new portfolio. Not that I haven’t done any of these before, but this is one new! And fancy! Did I mention its new?
This time I spent much more time on the actual layout and functionality of the portfolio itself. The main feature is that you can pan the document, just like you would pan the map on Google Maps. This is all done with a small JavaScript, based on the wonderful jQuery library. While the new portfolio makes heavy use of transparent PNGs, the site still looks okay-ish and remains perfectly usable in IE6. It also degrades gracefully for browsers that have JavaScript disabled or the iPhone, which has no notion of onmousemove events.
I also made sure that the print version from all major browsers looks good. The Hartija Css Print Framework is a great starting point for creating specialized print Style Sheets. I only had to tweak some values and remove elements, like the menu, that make no sense in print.
As Tag Clouds become more and more common in blogging systems, one wonders why this intuitive approach hasn’t been used for other media types like images or videos (or video previews).
The idea to scale elements in their relevance of importance is not new, however it wasn’t possible to do this with images in websites so far. HTML and CSS offer no direct mechanism to position images of different sizes in a pleasing way.
To solve this problem, I developed a simple PHP script that calculates sizes of DIVs based on their importance and arranges them in a fixed-width grid, while closely maintaining their order. The grid is pre-generated by PHP with a width of 768px in order to fit on small screens, but scales with the help of JavaScript to fit in any browser window.
Here’s a demo of how this actually looks in action: Grid-Solver Demo
Read complete post »
I recently finished work on tinyprice.de, an online community for exchanging coupon codes. The programming part was not a problem at all – just simple database I/O etc. – the layout however was quite a challenge.
Of course, the only browser making problems was Microsofts IE6. It was quite a struggle, but in the end I managed to work around every bug, without using any dirty hacks.
One particular problem I encountered, was a textarea for user comments, that had a width: 100% style. In IE6 it always spanned over the whole page, not only over the parent element. The solution I found after a lot of research, was quite simple: just wrap the textarea in a fieldset AND a div element, and everything works fine again:
<fieldset>
<div>
<textarea style="width: 100%;" name="content"></textarea>
</div>
</fieldset>
