Feeds:
Posts
Comments

Archive for the ‘web’ Category

My job involves creating web pages, and though that does not mean I need to make them beautiful, I sure like to make things look nice. Ever time I come across some magazines and especially those well-designed advertisements in them, I wonder to myself, “man, I wish I could use those fonts for my websites.” Unfortunately, it would always end up with disappointment, especially in the days when my boss was sticking to Debian with its very limited default collection of fonts. Though everybody in the lab has since switched to Mac, making sure things that look nice look equally nice for most of our users would still limit us to very few options.

That’s changed by web typography, and for me, by a neat website called typekit, brought to us by a small startup called Small Batch. The same talented team was behind the acclaimed Measure Map, better known as Google Analytics since Google acquired it. With CSS 2.0 providing features to enable web typography, typekit fills the gap of commercial font distribution. If the Web is a platform, then typekit is the /Libary/Fonts. By patching your webapge on the fly using JavaScript, typekit tries to be unobtrusive as possible. And you won’t get your hands dirty by writing those patchy JavaScript, as typekit provides a very friendly editor to express how you want to dress up your page with its collection of hundreds of nice-looking fonts in its library. Oh, yes, you can try it for free for an unlimited time.

Read Full Post »

Centering a block using CSS

Many times, I’ve found myself in the need of a solution to center a block in a webpage. This problem is complicated if the parent block has a variable width, for example, when the parent block is body. In the past, I used the trick of negative margin. For example, if the block has a width of 500px, I would do:

.centered-block {
  width:500px;
  margin-left: -250px;
  position:relative;
  left: 50%;
}

The negative margin puts exactly half the block off the left border of parent block, effectively aligning the center of the block at the left border of the parent block. Moving the block to the right by 50% will now place the center at the center of the parent block. The combination effect of the two is that the block is center aligned to the parent block.

I sometimes see undesired horizontal scroll bar when using this method, possibly due to the last line in the CSS code, which could potentially increase size of the canvas.

I have found a better solution that uses inline-block. The corresponding code for the above scenario using inline-block can be:

.parent-of-centered-block {
  text-align:center
}
.centered-block {
  width:500px;
  display:inline-block;
  text-align:left
}

Using this method, I have never seen undesired horizontal scrollbar. There is an extra benefit. You could now eliminate the width property if you want the centered block to have a flexible width, meaning it can be as small as possible but grow when necessary to accommodate content in one line if possible. In one of my cases, I wanted to place a line of several icons in the center. I removed the width property, and let the block to figure out its best width by trying to put all icons on the same line. See it works in a real case.

Read Full Post »