Horizontal centering - Revision history

Batch1211 at 20:53, 29 September 2010

2010-09-29T20:53:08Z

Chris Davenport: Removed heading. Headings should be in the calling page, not in the called page.

2010-02-25T21:16:02Z

Removed heading. Headings should be in the calling page, not in the called page.

Chris Davenport: Reverted edits by Arcturusweb (Talk) to last version by Daganray

2010-02-25T21:03:07Z

Reverted edits by Arcturusweb (Talk) to last version by Daganray

Arcturusweb at 18:07, 24 February 2010

2010-02-24T18:07:56Z

Arcturusweb at 17:56, 24 February 2010

2010-02-24T17:56:13Z

Daganray at 20:58, 15 November 2009

2009-11-15T20:58:42Z

Daganray at 20:39, 15 November 2009

2009-11-15T20:39:20Z

Daganray at 10:00, 15 November 2009

2009-11-15T10:00:21Z

Daganray: New page: Horizontal centering is achieved with CSS in one of two ways, depending on what you are centering. For the first example, let's say you have a horizontal menu at the top of your page that...

2009-11-15T09:54:28Z

New page: Horizontal centering is achieved with CSS in one of two ways, depending on what you are centering. For the first example, let's say you have a horizontal menu at the top of your page that...

New page

Horizontal centering is achieved with CSS in one of two ways, depending on what you are centering.

For the first example, let's say you have a horizontal menu at the top of your page that you want centered in your layout. You would do it with a block of code in the linked CSS file like this:

#horz_menu {margin: auto; width: 900px; height: 25px; }

The "auto" value in the "margin" attribute centers the item, so this would create a menu area that is 900 pixels wide and 25 pixels tall and would be centered in whatever space it is placed in.

If you need to add some margin space above and below the menu and still keep it centered you would adjust the code like this:

#horz_menu { margin: 20px auto 20px auto; width: 900px; height: 25px; }

This would add 20 pixles of space on the top and bottom of the menu while keeping the left and right margin in a centered mode.

The second example is when you simply want to center text, in which case you just add the "text-align" code.

#main_menu h1 { padding: .75em 0 .52em 0; font-size: 0.8em; font-weight: bold; color: #0033CC; background-color: transparent; text-align: center; }

This would cause text in an h1 tag within the main_menu div tag of the html code to be centered in the horizontal menu. It would also have some padding above and below it.

--[[User:Daganray|daganray]] 09:54, 15 November 2009 (UTC)

← Older revision		Revision as of 20:53, 29 September 2010
Line 32:		Line 32:

	So as you can see, horizontal centering for structural items is achieved with the "margin" attribute whereas horizontal centering for text items is achieved using the "text-align" attribute.		So as you can see, horizontal centering for structural items is achieved with the "margin" attribute whereas horizontal centering for text items is achieved using the "text-align" attribute.
−	<noinclude>[[Category:Templates]]</noinclude>	+	<noinclude>[[Category:Templates]]</noinclude>[[Category:Tutorials]][[Category:Template Development]]

@@ Line 1: / Line 1: @@
 Horizontal centering is achieved with CSS in one of two ways, depending on what you are centering.
@@ Line 14: / Line 12: @@
 This would add 20 pixles of space on the top and bottom of the menu while keeping the left and right margin in a centered mode.
 The second example is when you simply want to center text, in which case you just add the "text-align" code.
@@ Line 21: / Line 18: @@
 This would cause any links within the horz_menu div tag of the html code to be centered in the horizontal menu. They would also have .75em of padding above and .52em of padding below them.
 These same techniques work for the overall page layout as well. Let's say you want the shell content area of your page to be 900 pixels wide and to be centered on the page and that you want the headline to be centered within it. Your CSS code would look something like this:
@@ Line 36: / Line 32: @@
 So as you can see, horizontal centering for structural items is achieved with the "margin" attribute whereas horizontal centering for text items is achieved using the "text-align" attribute.
+<noinclude>[[Category:Templates]]</noinclude>
---[[User:Daganray|daganray]] 09:54, 15 November 2009 (UTC)

@@ Line 1: / Line 1: @@
+== Horizontal Centering ==
-=== Headline text ===
 Horizontal centering is achieved with CSS in one of two ways, depending on what you are centering.

← Older revision		Revision as of 18:07, 24 February 2010
Line 1:		Line 1:
		+
		+	=== Headline text ===
		+
	Horizontal centering is achieved with CSS in one of two ways, depending on what you are centering.		Horizontal centering is achieved with CSS in one of two ways, depending on what you are centering.

← Older revision		Revision as of 17:56, 24 February 2010
Line 1:		Line 1:
−	~~== Horizontal Centering ==~~
−
	Horizontal centering is achieved with CSS in one of two ways, depending on what you are centering.		Horizontal centering is achieved with CSS in one of two ways, depending on what you are centering.

← Older revision		Revision as of 20:58, 15 November 2009
Line 20:		Line 20:
	#horz_menu a { padding: .75em 0 .52em 0; font-size: 0.8em; font-weight: bold; color: #0033CC; background-color: transparent; text-align: center; }		#horz_menu a { padding: .75em 0 .52em 0; font-size: 0.8em; font-weight: bold; color: #0033CC; background-color: transparent; text-align: center; }

−	This would cause any links within the horz_menu div tag of the html code to be centered in the horizontal menu. It would also have .75em of padding above and .52em of padding below them.	+	This would cause any links within the horz_menu div tag of the html code to be centered in the horizontal menu. They would also have .75em of padding above and .52em of padding below them.

@@ Line 1: / Line 1: @@
-== Horizontal centering ==
+== Horizontal Centering ==
 Horizontal centering is achieved with CSS in one of two ways, depending on what you are centering.
@@ Line 5: / Line 5: @@
 For the first example, let's say you have a horizontal menu at the top of your page that you want centered in your layout. You would do it with a block of code in the linked CSS file like this:
-  #horz_menu {margin: auto; width: 900px; height: 25px; }
+  #horz_menu {margin: auto; width: 800px; height: 25px; }
-The "auto" value in the "margin" attribute centers the item, so this would create a menu area that is 900 pixels wide and 25 pixels tall and would be centered in whatever space it is placed in.
+The "auto" value in the "margin" attribute centers the item, so this would create a menu area that is 800 pixels wide and 25 pixels tall and would be centered in whatever space it is placed in.
 If you need to add some margin space above and below the menu and still keep it centered you would adjust the code like this:
-  #horz_menu { margin: 20px auto 20px auto; width: 900px; height: 25px; }
+  #horz_menu { margin: 20px auto 20px auto; width: 800px; height: 25px; }
 This would add 20 pixles of space on the top and bottom of the menu while keeping the left and right margin in a centered mode.
@@ Line 18: / Line 18: @@
 The second example is when you simply want to center text, in which case you just add the "text-align" code.
-  #horz_menu h1 { padding: .75em 0 .52em 0; font-size: 0.8em; font-weight: bold; color: #0033CC; background-color: transparent; text-align: center; }
+  #horz_menu a { padding: .75em 0 .52em 0; font-size: 0.8em; font-weight: bold; color: #0033CC; background-color: transparent; text-align: center; }
-This would cause text in an h1 tag within the main_menu div tag of the html code to be centered in the horizontal menu. It would also have some padding above and below it.
+This would cause any links within the horz_menu div tag of the html code to be centered in the horizontal menu. It would also have .75em of padding above and .52em of padding below them.
 --[[User:Daganray|daganray]] 09:54, 15 November 2009 (UTC)