Horizontal and vertical centering - Revision history

Praveenkumar31 at 10:54, 17 December 2011

2011-12-17T10:54:08Z

Praveenkumar31 at 10:36, 17 December 2011

2011-12-17T10:36:18Z

Praveenkumar31 at 10:33, 17 December 2011

2011-12-17T10:33:12Z

Chris Davenport: New page: {{cookiejar}}

2008-06-19T08:16:30Z

New page: {{cookiejar}}

New page

@@ Line 1: / Line 1: @@
-{{cookiejar}}
+== Using CSS files ==
 To center any of the object in html document using .css or center tag .If you are using Joomla your joomla menu are unordered list <ul> and items in side the menu are with <li>.You can use following css in your css script file. CSS file with file name centerObj.css for 100X100 object.
 .centerelement
@@ Line 19: / Line 20: @@
 and import it into your joomla document using JHTML::stylesheet(centerObj, $path);
 $path = path to your document.
 For ordered and unordered List in joomla.Add the below code to your template.css related to joomla template.
 <div id="navcontainer">

@@ Line 1: / Line 1: @@
 {{cookiejar}}
-You can center any of the object in html document using .css or <center> tag .If you are using Joomla your joomla menu are unordered list <ul> and items in side the menu are with <li>.
+To center any of the object in html document using .css or center tag .If you are using Joomla your joomla menu are unordered list <ul> and items in side the menu are with <li>.You can use following css in your css script file. CSS file with file name centerObj.css for 100X100 object.
 You can use following css in your css script file. CSS file with file name centerObj.css for 100X100 object.
 .centerelement
+{
 width: 100px;
 height: 100px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -50px;
 margin-top: -50px;
+}
 or you can use:
 .centerelement
+{
 margin-left:0px;
 margin-right:0px;
+}
 and import it into your joomla document using JHTML::stylesheet(centerObj, $path);
 and import it into your joomla document using
-−
 JHTML::stylesheet(centerObj, $path);
 $path = path to your document.
+For ordered and unordered List in joomla.Add the below code to your template.css related to joomla template.
 For ordered and unordered List in joomla
-−
 Add the below code to your template.css related to joomla template.
-−
 <div id="navcontainer">
 <ul id="navlist">
@@ Line 49: / Line 29: @@
 </ul>
 </div>
 #navcontainer ul
 {text-align: center;
-−
 text-align: center;
-−
 padding-bottom: 5px;
 padding-top: 5px;
 padding-left: 0;
 margin-top: 0;
 /* cancels gap caused by top padding in Opera 7.54 */
 margin-left: 0;
 background-color: #036;
 color: white;
 width: 100%;
 font-family: Arial,Helvetica,sans-serif;
 line-height: 18px;
 /* fixes Firefox 0.9.3 */
+}
 #navcontainer ul li
+{
 display: inline;
 padding-left: 0;
 padding-right: 0;
 padding-bottom: 5px;
 /* matches link padding except for left and right */
 padding-top: 5px;
+}
@@ Line 100: / Line 57: @@
 #navcontainer ul li a
+{
 padding-left: 10px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-top: 5px;
 color: white;
 text-decoration: none;
 border-right: 1px solid #fff;
+}
 #navcontainer ul li a:hover
+{
 background-color: #369;
 color: white;
+}

← Older revision		Revision as of 10:33, 17 December 2011
Line 1:		Line 1:
	{{cookiejar}}		{{cookiejar}}
		+	You can center any of the object in html document using .css or <center> tag .If you are using Joomla your joomla menu are unordered list <ul> and items in side the menu are with <li>.
		+	You can use following css in your css script file. CSS file with file name centerObj.css for 100X100 object.
		+	.centerelement
		+	{
		+
		+	width: 100px;
		+
		+	height: 100px;
		+
		+	position: absolute;
		+
		+	top: 50%;
		+
		+	left: 50%;
		+
		+	margin-left: -50px;
		+
		+	margin-top: -50px;
		+
		+	}
		+
		+
		+	or you can use:
		+	.centerelement
		+	{
		+
		+	margin-left:0px;
		+
		+	margin-right:0px;
		+	}
		+
		+	and import it into your joomla document using
		+
		+	JHTML::stylesheet(centerObj, $path);
		+	$path = path to your document.
		+
		+	For ordered and unordered List in joomla
		+
		+	Add the below code to your template.css related to joomla template.
		+
		+	<div id="navcontainer">
		+	<ul id="navlist">
		+	<li><a href="#">Item one</a></li>
		+	<li><a href="#">Item two</a></li>
		+	<li><a href="#">Item three</a></li>
		+	<li><a href="#">Item four</a></li>
		+	<li><a href="#">Item five</a></li>
		+	</ul>
		+	</div>
		+
		+
		+
		+	#navcontainer ul
		+	{
		+
		+	text-align: center;
		+
		+	padding-bottom: 5px;
		+
		+	padding-top: 5px;
		+
		+	padding-left: 0;
		+
		+	margin-top: 0;
		+
		+	/* cancels gap caused by top padding in Opera 7.54 */
		+
		+	margin-left: 0;
		+
		+	background-color: #036;
		+
		+	color: white;
		+
		+	width: 100%;
		+
		+	font-family: Arial,Helvetica,sans-serif;
		+
		+	line-height: 18px;
		+
		+	/* fixes Firefox 0.9.3 */
		+	}
		+
		+	#navcontainer ul li
		+	{
		+
		+	display: inline;
		+
		+	padding-left: 0;
		+
		+	padding-right: 0;
		+
		+	padding-bottom: 5px;
		+
		+	/* matches link padding except for left and right */
		+
		+	padding-top: 5px;
		+	}
		+
		+	#navcontainer ul li a
		+	{
		+
		+	padding-left: 10px;
		+
		+	padding-right: 10px;
		+
		+	padding-bottom: 5px;
		+
		+	padding-top: 5px;
		+
		+	color: white;
		+
		+	text-decoration: none;
		+
		+	border-right: 1px solid #fff;
		+	}
		+
		+	#navcontainer ul li a:hover
		+	{
		+
		+	background-color: #369;
		+
		+	color: white;
		+	}