Actions

Difference between revisions of "Horizontal and vertical centering"

From Joomla! Documentation

 
(One intermediate revision by one user not shown)
Line 1: Line 1:
{{cookiejar}}
+
== Using CSS files ==
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.
+
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
 
.centerelement
 
{
 
{
 
 
width: 100px;
 
width: 100px;
 
 
height: 100px;
 
height: 100px;
 
 
position: absolute;
 
position: absolute;
 
 
top: 50%;
 
top: 50%;
 
 
left: 50%;
 
left: 50%;
 
 
margin-left: -50px;
 
margin-left: -50px;
 
 
margin-top: -50px;
 
margin-top: -50px;
 
 
}
 
}
 
 
 
or you can use:
 
or you can use:
 
.centerelement
 
.centerelement
 
{
 
{
 
 
margin-left:0px;
 
margin-left:0px;
 
 
margin-right:0px;
 
margin-right:0px;
 
}
 
}
 +
and import it into your joomla document using JHTML::stylesheet(centerObj, $path);
 +
$path = path to your document.
 +
 +
 +
 +
 +
 +
  
and import it into your joomla document using
 
  
JHTML::stylesheet(centerObj, $path);
 
$path = path to your document.
 
  
For ordered and unordered List in joomla
+
== In joomla sites: ==
  
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">
 
<div id="navcontainer">
 
<ul id="navlist">
 
<ul id="navlist">
Line 49: Line 42:
 
</ul>
 
</ul>
 
</div>
 
</div>
 
 
  
 
#navcontainer ul
 
#navcontainer ul
{
+
{text-align: center;
 
+
text-align: center;
+
 
+
 
padding-bottom: 5px;
 
padding-bottom: 5px;
 
 
padding-top: 5px;
 
padding-top: 5px;
 
 
padding-left: 0;
 
padding-left: 0;
 
 
margin-top: 0;
 
margin-top: 0;
 
 
/* cancels gap caused by top padding in Opera 7.54 */
 
/* cancels gap caused by top padding in Opera 7.54 */
 
 
margin-left: 0;
 
margin-left: 0;
 
 
background-color: #036;
 
background-color: #036;
 
 
color: white;
 
color: white;
 
 
width: 100%;
 
width: 100%;
 
 
font-family: Arial,Helvetica,sans-serif;
 
font-family: Arial,Helvetica,sans-serif;
 
 
line-height: 18px;
 
line-height: 18px;
 
 
/* fixes Firefox 0.9.3 */
 
/* fixes Firefox 0.9.3 */
 
}
 
}
 
 
#navcontainer ul li
 
#navcontainer ul li
 
{
 
{
 
 
display: inline;
 
display: inline;
 
 
padding-left: 0;
 
padding-left: 0;
 
 
padding-right: 0;
 
padding-right: 0;
 
 
padding-bottom: 5px;
 
padding-bottom: 5px;
 
 
/* matches link padding except for left and right */
 
/* matches link padding except for left and right */
 
 
padding-top: 5px;
 
padding-top: 5px;
 
}
 
}
Line 100: Line 70:
 
#navcontainer ul li a
 
#navcontainer ul li a
 
{
 
{
 
 
padding-left: 10px;
 
padding-left: 10px;
 
 
padding-right: 10px;
 
padding-right: 10px;
 
 
padding-bottom: 5px;
 
padding-bottom: 5px;
 
 
padding-top: 5px;
 
padding-top: 5px;
 
 
color: white;
 
color: white;
 
 
text-decoration: none;
 
text-decoration: none;
 
 
border-right: 1px solid #fff;
 
border-right: 1px solid #fff;
 
}
 
}
 
 
#navcontainer ul li a:hover
 
#navcontainer ul li a:hover
 
{
 
{
 
 
background-color: #369;
 
background-color: #369;
 
 
color: white;
 
color: white;
 
}
 
}

Latest revision as of 05:54, 17 December 2011

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

  • and items in side the menu are with
  • .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.

    In joomla sites:

    For ordered and unordered List in joomla.Add the below code to your template.css related to joomla template.

    1. 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 */ }

    1. 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; }

    1. 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; }

    1. navcontainer ul li a:hover

    { background-color: #369; color: white; }