Skip navigation

Monthly Archives: August 2008

sometime we want to make center of our div from a body. usually i set the body align property into center, or using <center> tag but this will cause all of your element position to center. but that is old school 🙂

then how to do it with css property then you ask? very easy. all you need is playing with the margin property and place it after <body> tag. below is the way to do it

<div style=”margin:0 auto 0 auto; width:300px;”>This is center</div>

get it? you see we just set left and right margin property into auto so it will automatically set your div into center position. very nice.

Advertisements

i just got a very cool photoshop tutorial on the web. i got this from my friend’s news feed in face book (thanks ardi!).

check out this url: http://www.hongkiat.com/blog/30-nicest-photoshop-photo-effects-part-ii/

the tutorial gave me some of the effect that i normally can’t imagine to make. the page composed on some lighting effect tutorial, vector art, and some filter mixing tutorial.. it’s a yummy tutorial

browse there and you will find some useful resources for your design too such as free brushes and vector images

another of my favoite tool. i’m a big fan of this one.

most screen capture tool only give you the ability to capture the images on your screen, leaving the rest of the image below of your screen. this usually happen when your the image you want to capture much larget then your display monitor.

but not with this one. beside the common screen-given image capture, FastStone Capture lets you capture all of the content in your screen even it’s streched long down below of your screen. very neat. on FC it called “Capture Scrolling Window”. i use this a lot of time and saves me some time merging pieces of images in photoshop (hate it…hate it…hate it…)

it doesn’t stop there. with FC you can capture a freehand region. fantastic !! so you are free from box type image capture method.

once you capture what you want, FastStone Capture will deliver it to its image editor. there you can draw, add some caption, resize, give effect, watermark, etc. cool huh

in addition, you will get screen color picker and screen magnifier.

just get it ok, trust me with this one.

if you ever need a web color picker tool then Color Shchemer is one tool i can recommend.

Color Schemer

and why is this tool so great you ask? because i use it 🙂 for those of you who lack of color knowledge and sometime just don’t how to mix color then CS might be your greatest asset.

this tool equipped with color saver. so if you have color for a web project for instance, then you might want to save all the color you use on that project in a single file with this. just drag your favorite colors to the “Favorite Colors” box and after you have some then save it. rename that color if you want to.

then there this Color Scheme Analyzer. if you want a preview of color mixing of your saved favorite colors, then CS can show you.

and if you want to know what is the result by mixing two colors, yes it can answer your sense of curiosity.

one thing though, this tool already help me with numorous task for picking and mixing in my project. so this one i surely recommend.

whenever i make HTML page, i force my self to write those pages into a valid pages according to W3C standardization. in order to do so, i often check the pages i created in FireFox using HTML tidy plug-in. it will warn you if your HTML not valid.

one thing that was a challenge was flash embedded script. if you using the default flash script from dreamweaver, HTML tidy will warn you that it’s not valid. i forgot why it was not valid (i’ll try to look into it later and update in this post).

any way, then i start to looked the solution. several method come across but none of them works. then i found this blog (i forgot the address too, update later) giving detail explanation on why the default flash script is not valid, and that article give the valid script and it goes like this:

<object classid=”(long number here)”
codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0&#8243;
width=”(width)” height=”(height)”>
<param name=”movie” value”(your flash file here)”>
<param name=”quality” value=”high”>

<param name=”bgcolor” value=”#FFFFFF”>
<!–[if !IE]> <–>
<object data=”(your flash file here)”
width=”(width)” height=”(height)” type=”application/x-shockwave-flash”>
<param name=”quality” value=”high”>
<param name=”bgcolor” value=”#FFFFFF”>
<param name=”pluginurl” value”http://www.macromedia/go/getflashplayer”&gt;
FAIL (the browser should render some flash content, not this).
</object>
<!–> <![endif]–>
</object>

now it should work when you try to validate it on W3C, go on give it a spin 🙂

in my journey on making XHTML from CSS in early days i was stuck by float property. when i used float in a container, the background from the container just won’t appear in FireFox but it appear in IE 6, and the only came up in my mind was to add background color on each float, which is frustrating. what if you want to change color, then you have to re-type the color all over again.

lets use this simple CSS example:

<div style=”width:100px; background-color:#CCFF33;”>
<div style=”float:left; width:50px;”>box 1</div>
<div style=”float:left; width:50px;”>box 2</div>
</div>

you will get this in IE 6:
as appear in IE6
and you will get this on FF:
as appear in FF

not very nice eh? then i searched through Google when i met with this clear property clear:both. you can use this property in the end of every float in a container so your container background color will blanket all your float property. this way the CSS display on FF will have the same look as on IE 6, and beside this is what you want right?

<div style=”width:100px; background-color:#CCFF33;”>
<div style=”float:left; width:50px;”>box 1</div>
<div style=”float:left; width:50px;”>box 2</div>
<div style=”clear:both;”></div>
</div>

go on, give it a shot.