Centering a “position: absolute” element

Sometimes we have a one-line div, having 3 elements. One floats to the left, one floats to the right, and one in the middle. The one in the middle often gets pushed around by the left/right element, resulting off-centered. related question. [code language=“html”] \[/code\] The fix is to give the following css to the center div. [code language=“css”] position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; [/code] Thanks to the following link. =) ...

July 8, 2015 · 1 min · birdchan

Text wrapping inside a table

Sometimes I have a long continuing string inside a table that messes up my table width. For example, SDFSDFDGFHDGREFGFGSDFGFGHGDSFGHJTYRGHTYYEGHJTRTWEGRTYEGFHERGHRETERHRTTWERHGEWGERGW That will give you a very wide column… Just how to squeeze the column to the width we specify? “Easy,” you might say, “just set the td width!” SDFSDFDGFHDGREFGFGSDFGFGHGDSFGHJTYRGHTYYEGHJTRTWEGRTYEGFHERGHRETERHRTTWERHGEWGERGW Nope. It turns out the same, one long continuous string. The root problem here is that, the table width is determined by the content, but not the width we specify! ...

July 20, 2012 · 1 min · birdchan

Adding shadow to wp-codebox

Too bad wp-codebox contains two divs namely wp_codebox_msgheader and wp_codebox, we cannot simply give the box-shadow to one single div. After playing with this a bit, here is my parameters. The css file is located at /your-wp-root/wp-content/plugins/wp-codebox/css/codebox.css. .wp_codebox_msgheader { box-shadow: 6px 14px 11px #808083; } .wp_codebox { box-shadow: 7px 10px 10px #888; } The overlapped area seems smooth with this setting. I also added bottom margin to the codebox, see if you like it. ...

May 19, 2012 · 1 min · birdchan

PSD to CSS

I found this nice video tutorial recently. Say you hire someone or somehow you have a website design on a psd file, now you need to convert that to actual webpages. You can actually do that yourself without getting other people to do it. It might be much easier than you think! I am assuming you already have some knowledge in HTML and CSS… if not… it’s a good idea to learn them! ;) ...

June 10, 2010 · 1 min · birdchan

CSS playground

At last! These guys did it! If you like CSS and you are playing with it, you will probably want to check out these two online mini CSS IDEs. They are JS Fiddle and CSS Desk. I will be placing these two at my tools page.

April 15, 2010 · 1 min · birdchan