9-slice scaling in HTML

The Adobe Fireworks help has a good article explaining 9-slice scaling. Now imagine you’re designing a liquid width layout for a website - wouldn’t it just be great if it would scale as it was 9-sliced? Here’s how:

Slicing

First you need one image for each of the outer areas in the 9-slice grid. That’s top left, top center, top right, left center, right center, bottom left, bottom center and bottom right. We don’t need an image for the center, since it’s filled with one solid color in this example and we can use CSS for that. Note that all top and all bottom slices must share the same height. The top center and bottom center slices should be 1 pixel wide, since we’re not going to scale them, but repeat them (which is the difference of this technique compared to the original 9-slice scaling). Left and right center slices only need to be 1 pixel high for the reasons just mentioned.
After all, the slicing looks like this (forgive me the typo):

HTML code

Here’s the HTML you’ll need. Read the comments in the code for explanation.

<div class="content">
	<!-- this is the overall container -->
	<div class="content-top">
		<!-- this contains the top left, top right and top center slices -->
		<div class="content-top-left"></div>
		<div class="content-top-right"></div>
		<!-- notice the top center or top repeat slice needs to be at the end -->
		<div class="content-top-repeat"></div>
	</div>
	<div class="content-repeat">
		<!-- this is just a container for the vertically scaling part - you could leave it out, but it seems cleaner to me -->
		<div class="content-repeat-left">
			<div class="content-repeat-right">
				<!-- in this case the left center and right center must be nested and must contain the actual content div, so they automatically scale with it -->
				<div class="content-repeat-center">
					<!-- /** this is where you'd place the content **/ -->
					<div class="content-repeat-clearfix"><!-- this will prevent problems with floated stuff within the content --></div>
				</div>
			</div>
		</div>
	</div>
	<div class="content-bottom">
		<!-- this contains the bottom left, bottom right and bottom center slices -->
		<div class="content-bottom-left"></div>
		<div class="content-bottom-right"></div>
		<!-- as above the bottom center div must be after the bottom left and right divs -->
		<div class="content-bottom-repeat"></div>
	</div>
</div>
 

Read the rest of this entry »

Posted in Web Development, Design, PHP, XHTML & CSS | No Comments »

I have a dream…

Semantics is the reason why HTML exists: there are elements to tag headlines, tables, lists and countless other types of text to give the text a structure. I know ad providers wouldn’t even consider this, since it would make their ads easily blockable by ad-blockers like Adblock Plus for Firefox, but seeing German sites are required by law to mark advertisements and make them stick out of the text flow why isn’t there an <ad> element (or at least one on the to-do-list for HTML5) to make that tag machine-readable?
The only way to make ad providers use such an element would probably to require it by law - and given the expertise the German government has recently shown in laws concerning information technology and the Internet years will be passing by without an <ad> element *sigh*

Posted in Web Development, XHTML & CSS | No Comments »

Webmail done right

I recently bought a (gs) shared hosting package at mediatemple.net. I’m not going to talk about their system now, but about their webmail client, which is provided by @Mail, their mail server. The @Mail web interface comes in 4 variations: Simple (which is plain HTML), Simple with AJAX (which is how most other webmail interfaces work today), Advanced for IE6+ (please, don’t ask me to comment on this one) and Advanced for Mozilla.
When I logged in using the Advanced for Mozilla interface I noticed something in the address bar: .webmail/parse.php?file=html/english/xul/xullogin.html&XUL=1. XUL? Wait… I’ve heard this before… A quick lookup at Wikipedia confirmed my thoughts: XUL is the XML User Interface Language, the Language the Firefox layout (i.e. XUL defines where the Home button is) is written in. But what does that mean for a webmail client? The answer is easy: It’s a hell lot faster than HTML + JavaScript, actually it’s running at the native speed of your browser, which is pretty amazing. The XUL interface also takes advantages of features your OS can do for you: The menus and lists are rendered by your OS and even sorting is done at native speed - awesome.
However, it’s still getting better: PGP built-in right into your webmail client! Unfortunately it seems you can’t upload your own key or download your private key after you generated a key using the webmail interface, but I’m sure we’ll see some improvements in the next version(s) of this software.

If you have a Firefox Browser at your hands, make sure to try the @Mail-Demo at http://demo.atmail.com/index.php

Posted in Personal, Web Development, Design, XHTML & CSS | No Comments »