Author: Abdullah Yahya

Here are some different way to horizontally center HTML elements:

<div style=”margin: 0 auto; width:500px;  height: 500px;”> some text </div>

The div is centered but the text within it isn’t.

<div style=”margin: 0 auto; text-align: center; width:500px;  height: 500px; “>some text </div>

The div and the text within it are centered. Continue reading Center Align HTML Elements

To add a gradient to an element using CSS, just add the following code to your CSS

[cc lang=”css”]
background: #dcd9d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#dbd8d0′, endColorstr=’#f4f3f1′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#dbd8d0), to(#f4f3f1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #dbd8d0, #f4f3f1); /* for firefox 3.6+ */
[/cc]

If a browser doesn’t support gradients, it will just display the background color.

To change the direction and other values of the gradient, check out http://webdesignerwall.com/tutorials/cross-browser-css-gradient.

To add rounded corners to an element using CSS, just add the following code to your CSS
[cc lang=”css”]/* 4 rounded corners */
-webkit-border-radius: 10px; // for Safari and Chrome browsers
-khtml-border-radius: 10px; // for Konqueror browser
-moz-border-radius: 10px; // for Firefox browser
border-radius: 10px; // for browsers that support CSS 3
[/cc]
Of course, change the values (10px) to whatever value you want to change the corner radius.

If a browser doesn’t support rounded corners, it will just show square corners.

For more information, visit http://www.css3.info/preview/rounded-border/

I just found a quick and cool way to create rounded corners on images using CSS.  I don’t have time to write about it but you can read about it here:

http://webdesignerwall.com/tutorials/css3-image-styles

Here’s how to use it:

1. Add image to your web page

[cc lang=”html”]

[/cc]

Continue reading CSS Rounded Corners on Images

Keeping track of events on your website is very useful. Google Analytics comes with a useful feature called Event Tracking.

http://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.html

For example, if you want to track all clicks to on a link you can use

[cc lang="html"]Play[/cc]

Continue reading Google Event Tracking

Text Processing

Dreamweaver Find and Replace (w/ Regular Expressions)

Finding and replacing text is pretty straightforward. For example, you can find all text matching “car” and replace them with “cars”. Other types of find and replace are not so obvious. Here are some examples.

• Replace “x” with “x followed by a tab”
  This is useful when you want the text to be tab delimited so you can copy and paste it all into Excel so that each column (separated by a tab) will appear in its own column for further processing.
  FIND: x
  REPLACE: xt
  REGEX: checked
•  Replace new lines with “x newline”
  This is useful if you need to edit text that appears at the end of a line.
  FIND: n
  REPLACE: xn
  REGEX: checked
• Wrap multiple values (one on each line) with single quotes (‘x’)
  This is useful when you’re building a long drop down list of options in the format
  <option value=’a’>a</option>
  <option value=’b’>b</option>
  <option value=’c’>c</option>
  …
  FIND: n
  REPLACE: ‘n’
  REGEX: checked

Continue reading Batch Processing / Automation Tips

Recently I had to do some Recently I had to do some stuff in Windows Command prompt. I got tired of having to type everything out letter by letter so I found these shortcuts.

Copy Text To Clipboard

Highlight  the text you want to. It will be copied to your clipboard.

Paste Text Within Windows Command Shell

Right-click your mouse to paste

Auto-Complete Entering Commands

Type the first few letters of a command or file / folder path and then hit TAB

Cancel The Currently-Running Program

Hit CTRL+C