Horizontal and vertical centering
From Joomla! Documentation
(Difference between revisions)
| (One intermediate revision by one user not shown) | |||
| Line 1: | Line 1: | ||
| − | + | == Using CSS files == | |
| − | + | ||
| − | 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. | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| − | |||
| − | |||
| − | |||
| − | + | == In joomla sites: == | |
| − | |||
| + | 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
[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; }
