Horizontal and vertical centering
From Joomla! Documentation
(Difference between revisions)
| Line 1: | Line 1: | ||
{{cookiejar}} | {{cookiejar}} | ||
| − | + | 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 | .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); | |
| − | and import it into your joomla document using | + | |
| − | + | ||
| − | JHTML::stylesheet(centerObj, $path); | + | |
$path = path to your document. | $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"> | <div id="navcontainer"> | ||
<ul id="navlist"> | <ul id="navlist"> | ||
| Line 49: | Line 29: | ||
</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 57: | ||
#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; | ||
} | } | ||
Revision as of 05:36, 17 December 2011
 |
This article is a small, well-defined item that could be completed by someone with a reasonable knowledge of the subject matter and a modest time commitment. If you would like to try writing this article you're welcome to do so.
The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar. ---Thank you. This article was last edited by Praveenkumar31 (talk| contribs) 17 months ago. (Purge) |
- 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.
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; }
