center Header Title

[mlapage]

I am looking for an 'easy' way to center the title on a banner and header bar. If you look at the home page http://www.mimirbooks.com/ bottom of center section, you will see the selectible "Top Offers" and the header bar "Mimir Books Online - ...". These are the the two titles to center. I would greatly appreciate any help on this.

header bar code (tpl_main_page):

<div class="bot-banners">
<h3 class="title">Mimir Books Online - Quality at the right price!</h3>
<!-- BOF- BANNER #3 display -->
<?php
if (SHOW_BANNERS_GROUP_SET3 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET3)) {
if ($banner->RecordCount() > 0) {
?>
<div id="bannerThree"><?php echo zen_display_banner('static', $banner);?></div>
<?php
}
}
?>
<!-- EOF- BANNER #3 display -->

banner code (tpl_main_page):

<?php
if($this_is_home_page){
?>
<div class="banners">
<ul class="tabs2">
<li><a href="#tab4">Clearance Zone</a></li>
<li><a href="#tab5">Orders</a></li>
<li class="last"><a href="#tab6">Top Offers</a></li>
</ul>

Thanks
Mike

[ivan999]

Modify this in stylesheet_tm.css (line 683) to center Mimic....

.bot-banners div {
    float: left;
    text-align: center;
    width: 100%;
}

and to center Top offers, give a width to ul.tabs2 li.last and add text-align center in css.

Hope this helps.

[mlapage]

Ivan,

I used tools>developers tool kit to find 'stylesheet_tm.css' - not found. I looked in other '.css' files for '.bot-banners' ref. - none found. However, I did find a '.bot-banners' ref. in 'html_header.php' under '<style type="text/css">'.

Any ideas?

Thanks,
Mike

[mlapage]

Ivan,

Never mind, I manually found 'stylesheet_tm.css' and added the code indicated above - no change.

This is the code found for '.bot-banners':

.bot-banners{
width:525px;
background:url(../images/title1-bg.png) repeat-x left top #3c4046;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
position:relative;
overflow:hidden;
margin-left:1px;
}
.bot-banners div{
float:left;
text-align: center;
width: 100%;
}
.bot-banners h3.title{
color:#f4f8fe;
font-size:13px;
line-height:16px;
padding-left:172px;
}

Any ideas?

Mike

[mlapage]

Ivan,

I noticed when I 'ftp'd' '.css' file from my computer (14,825) to host, the file size did not change in host dir. (14,182) and permission is '0644'. could this be a factor?

[mlapage]

I am looking for an 'easy' way to center the title on a header bar. If you look at the home page http://www.mimirbooks.com/ bottom of center section, you will see the header bar "Mimir Books Online - ...". I have done the steps ivan999 suggested with some success, but as you can see on the home page I'm not quite there.

Here is the up-to-date code for the .bot-banners:

.bot-banners{
width:525px;
background:url(../images/title1-bg.png) repeat-x left top #3c4046;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
position:relative;
overflow:hidden;
margin-left:1px;
}
.bot-banners div{
float:left;
text-align:center;
width: 100%;
}
.bot-banners h3.title{
color:#f4f8fe;
font-size:13px;
line-height:16px;
padding-left:172px;
text-align:center;
}

Does the 'padding-left' somehow control the alignment? I would greatly appreciate any help to center the text.

Mike

[stevesh]

Remove the red part:

.bot-banners h3.title{
color:#f4f8fe;
font-size:13px;
line-height:16px;
padding-left:172px;
text-align:center;
}


Change the red part to 250px, or to taste:

ul.tabs2 li.last{
padding-right:142px;
border-bottom:1px solid #fff;
border-right:none;
width: 100px;
text-align: center;
}

[mlapage]

Just worked it out, deleted the 'padding-left:172px;. Thanks stevesh and I will look at the other.

Thanks for all the help!

Mike