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