Positioning Elements - Revision history

Paul: /* Display Property */

2009-04-04T04:58:50Z

Display Property

← Older revision		Revision as of 23:58, 3 April 2009
Line 191:		Line 191:
	== Display Property ==		== Display Property ==

	~~p122~~		p127

	== Box Tips ==		== Box Tips ==

Paul at 04:06, 4 April 2009

2009-04-04T04:06:23Z

← Older revision		Revision as of 23:06, 3 April 2009
Line 192:		Line 192:

	p122		p122

	~~<center>[[Cascade Style Sheets\|Back to Cascade Style Sheets]]</center>~~

	== Box Tips ==		== Box Tips ==
Line 200:		Line 198:

	<pre>* {margin:0; padding:0;}</pre>		<pre>* {margin:0; padding:0;}</pre>

			<center>[[Cascade Style Sheets\|Back to Cascade Style Sheets]]</center>

Paul: /* Box Margins */

2009-04-04T03:57:48Z

Box Margins

← Older revision		Revision as of 22:57, 3 April 2009
Line 119:		Line 119:

	Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.		Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.

			==== Collapsing Margins ====

			p108

			Distance between vertical margins is collapsed. That means when a bottom margin touches a top margin the large one is the distance not the sum of them both.

	== Sizing the Box ==		== Sizing the Box ==

Paul at 03:53, 4 April 2009

2009-04-04T03:53:09Z

← Older revision		Revision as of 22:53, 3 April 2009
Line 188:		Line 188:

	<center>[[Cascade Style Sheets\|Back to Cascade Style Sheets]]</center>		<center>[[Cascade Style Sheets\|Back to Cascade Style Sheets]]</center>

			== Box Tips ==

			Set margins and padding to zero on all your style sheets to ensure your style appears consistent across browsers. You can always change the settings to your desired result.

			<pre>* {margin:0; padding:0;}</pre>

Paul: /* Border Property Shorthand */

2009-04-04T03:35:26Z

Border Property Shorthand

← Older revision		Revision as of 22:35, 3 April 2009
Line 77:		Line 77:

	Declaration order is always top, right, bottom, left. You can remember this as TRouBLe (Top, Right, Bottom, & Left). If you leave out a side CSS interprets the last side equal to the opposite side.		Declaration order is always top, right, bottom, left. You can remember this as TRouBLe (Top, Right, Bottom, & Left). If you leave out a side CSS interprets the last side equal to the opposite side.

			Example syntax without shorthand for borders:
			<pre>{margin-top:3px; margin-right:3px; margin-bottom:3px; margin-left:3px;}</pre>

	Example syntax with four sides:		Example syntax with four sides:

Paul: /* Border Property Shorthand */

2009-04-04T03:32:57Z

Border Property Shorthand

← Older revision		Revision as of 22:32, 3 April 2009
Line 76:		Line 76:
	CSS supports shorthand for borders.		CSS supports shorthand for borders.

	Declaration order is always top, right, bottom, left. If you leave out a side CSS interprets ~~makes~~ the last side equal to the opposite side.		Declaration order is always top, right, bottom, left. You can remember this as TRouBLe (Top, Right, Bottom, & Left). If you leave out a side CSS interprets the last side equal to the opposite side.

	Example syntax with four sides:		Example syntax with four sides:

Paul: /* Floating and Clearing */

2008-05-20T22:37:27Z

Floating and Clearing

← Older revision		Revision as of 17:37, 20 May 2008
Line 156:		Line 156:

	p119		p119

			Example Aslett Clearing Method p144
			<pre>
			/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
			/* simply add the clearfix class to any containter that must enclose floated elements */
			/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
			.clearfix:after {
			content: "."; /* the period is placed on the page as the last thing before the div closes */
			display: block; /* inline elements don't respond to the clear property */
			height: 0; /* ensure the period is not visible */
			clear: both; /* make the container clear the period */
			visibility: hidden; /* further ensures the period is not visible */
			}

			.clearfix {display: inline-block;} /* a fix for IE Mac */

			/* next a fix for the dreaded Guillotine bug in IE6 */
			/* Hides from IE-mac \*/
			* html .clearfix {height: 1%;}
			.clearfix {display: block;}
			/* End hide from IE-mac */
			/* end of "no-extra-markup" clearing method */
			</pre>

	== Display Property ==		== Display Property ==

Paul: /* Color */

2008-05-20T15:46:12Z

Color

← Older revision		Revision as of 10:46, 20 May 2008
Line 67:		Line 67:

	Color includes any color value.		Color includes any color value.

			[http://www.w3.org/TR/CSS21/box.html#border-color-properties Border Color Properties]

	==== Border Property Shorthand ====		==== Border Property Shorthand ====

Paul: /* Style */

2008-05-20T15:44:41Z

Style

← Older revision		Revision as of 10:44, 20 May 2008
Line 38:		Line 38:
	==== Style ====		==== Style ====

	~~Style includes~~:		Border style: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', and 'border-style'
	* none
	* hidden		The border style properties specify the line style of a box's border (solid, double, dashed, etc.). The properties defined in this section refer to the <border-style> value type, which may take one of the following values:
	* dotted
	* dashed		; none : No border; the computed border width is zero.
	* solid
	* double		; hidden : Same as 'none', except in terms of border conflict resolution for table elements.
	* groove
	* ridge		; dotted : The border is a series of dots.
	* inset
	* outset		; dashed : The border is a series of short line segments.

			; solid : The border is a single line segment.

			; double : The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.

			; groove : The border looks as though it were carved into the canvas.

			; ridge : The opposite of 'groove': the border looks as though it were coming out of the canvas.

			; inset : The border makes the box look as though it were embedded in the canvas.

			; outset : The opposite of 'inset': the border makes the box look as though it were coming out of the canvas.

			All borders are drawn on top of the box's background. The color of borders drawn for values of 'groove', 'ridge', 'inset', and 'outset' depends on the element's border color properties, but UAs may choose their own algorithm to calculate the actual colors used. For instance, if the 'border-color' has the value 'silver', then a UA could use a gradient of colors from white to dark gray to indicate a sloping border.

	==== Color ====		==== Color ====

Paul at 15:42, 20 May 2008

2008-05-20T15:42:11Z

← Older revision		Revision as of 10:42, 20 May 2008
Line 5:		Line 5:
	# Margin - Set distance between this box and adjacent elements		# Margin - Set distance between this box and adjacent elements
	# Padding - Set distance of content from border of box		# Padding - Set distance of content from border of box

			=== Box Dimensions ===

			[http://www.w3.org/TR/CSS21/box.html#box-dimensions Box Dimensions]

	=== Box Border ===		=== Box Border ===