Horizontal and vertical centering

From Joomla! Documentation
(Difference between revisions)
Jump to: navigation, search
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 05:33, 17 December 2011

Quill icon.png
 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) 16 months ago. (Purge)
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; }

Retrieved from "http://docs.joomla.org/index.php?title=Horizontal_and_vertical_centering&oldid=63630"
Personal tools
Namespaces

Variants
Actions
Navigation
Joomla! Sites
Toolbox