Actions

Difference between revisions of "Horizontal and vertical centering"

From Joomla! Documentation

m (New page: {{cookiejar}})
 
Line 1: Line 1:
 
{{cookiejar}}
 
{{cookiejar}}
 +
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.
 +
.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.
 +
 +
<div id="navcontainer">
 +
<ul id="navlist">
 +
<li><a href="#">Item one</a></li>
 +
<li><a href="#">Item two</a></li>
 +
<li><a href="#">Item three</a></li>
 +
<li><a href="#">Item four</a></li>
 +
<li><a href="#">Item five</a></li>
 +
</ul>
 +
</div>
 +
 +
 +
 +
#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;
 +
}

Revision as of 04:33, 17 December 2011

You can center any of the object in html document using .css or

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.

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