Web Design

From Jeff's Weather Service ~ Wiki Page
Jump to: navigation, search

Web Design

Converting EM to Pixels

1.0em = 10px
1.1em = 11px
1.2em = 12px
2.0em = 20px
5.0em = 50px

RGB Color Calculator

http://www.drpeterjones.com/colorcalc/

216 Web Safe Colors

http://www.web-source.net/216_color_chart.htm

HTML Colors

http://www.w3schools.com/html/html_colors.asp

HTML Symbols/Shapes

http://www.alanwood.net/unicode/geometric_shapes.html

CSS Color Names

http://www.w3schools.com/css/css_colornames.asp

Useful Links

W3Schools:

http:/w3schools.com

Learn HTML:

http://www.w3schools.com/html/default.asp

Learn CSS:

http://www.w3schools.com/css/default.asp

Learn Javascript:

http://www.w3schools.com/js/default.asp

Learn PHP:

http://www.w3schools.com/php/default.asp

Floatutorial:

http://css.maxdesign.com.au/floatutorial

Vertically Aligning text:

http://phrogz.net/css/vertical-align/index.html
http://css-tricks.com/2767-vertically-center-multi-lined-text/

Method 1

The following example makes two (non-trivial) assumptions. If you can meet these assumptions, then this method is for you:

You can put the content that you want to center inside a block and specify a fixed height for that inner content block. It's alright to absolutely-position this content. (Usually fine, since the parent element inside which the content is centered can still be in flow.

If you can accept the above necessities, the solution is:

1.) Specify the parent container as position:relative or position:absolute.

2.) Specify a fixed height on the child container.

3.) Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.

4.) Set margin-top:-yy where yy is half the height of the child container to offset the item up.

An example of this in code:

<style type="text/css">
 #myoutercontainer { position:relative }
 #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...

Hey look! I'm vertically centered!

How sweet is this?!

Method 2

This method requires that you be able to satisfy the following conditions:

   You have only a single line of text that you want to center.
   You can specify a fixed-height for the parent element.

If you can accept the above necessities, the solution is:

1.) Set the line-height of the parent element to the fixed height you want.

An example of this in code:

<style type="text/css">
 #myoutercontainer2 { line-height:4em }
</style>
...

Hey, this is vertically centered. Yay!

GIMP Tutorials

Adding outline to text:

http://gimpology.com/submission/view/how_to_outline_text