Horizontal and vertical centering
| Line 1: | Line 1: | ||
| − | + | == 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. | 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 | ||
| Line 19: | Line 20: | ||
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. | $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. | 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"> | ||
Latest revision as of 05:54, 17 December 2011
[edit] 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.
[edit] In joomla sites:
For ordered and unordered List in joomla.Add the below code to your template.css related to joomla template.
- 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; }
