Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts

    How to center the buttons

    I would like to center the buttons of the header (the black ones on the top), because as you can see, now they are aligned to the left.

    I have tried to wrap parts of the php with div align center, but nothing. I have tried to change the float:left to right of the CSS, but no go.

    Any idea on what I have to edit?

    Many many thanks!


    The page is www.security-exchange.net/news


    This is the header code:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php ?> <?php wp_title(); ?></title>
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <script type="text/javascript" language="javascript" src="<?php bloginfo('template_directory'); ?>/tabber.js"></script>
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_head(); ?>
    </head>
    <body>




        <div id="MainMenu">

            <ul id="tab">
            <li class="<?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ?>current_page_item<?php } else { ?>page_item<?php ?>"><a href="<?php echo get_settings('home'); ?>"><span>Home</span></a></li>
            <?php
            $pitems 
    wp_list_pages('exclude=1423&sort_column=menu_order&depth=1&title_li=&echo=0');
            
    $pitems preg_replace('/(<a[^>]*>)/','$1<span>',$pitems);
            
    $pitems str_replace('</a>''</span></a>'$pitems);
            echo 
    $pitems;
            
    ?>

               
    <li class="rsslink"><a href="http://www.security-exchange.net"target="_blank">Forum</a></li>
           

    <li class="rsslink"><a href="<?php bloginfo('rss2_url'); ?>">{RSS}</a></li>
        </ul>




        </div><!--MainMenu-->



    <div id="wrapper">
    <div id="wrapper_top"><!-- --></div>
            <div id="header">
            <div id="logo">
            <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
            <h2><?php bloginfo('description'); ?></h2>
            </div>
            <?php include (TEMPLATEPATH '/searchform.php'); ?>
            <br clear="all" />
            </div><!--header-->


    and this is the CSS in question:

    Code:
    /**************BODY*****************/
    
    
    
    * {margin:0; padding:0;}
    
    /*OLD BACKGROUND */
    
    /* body {font:13px Arial; background:url(images/bg.jpg);} */
    
    /* NEW BACKGROUND ADDED BY SERGIO */
    
    body {
    
    	font: 13px Arial;
    
    	background-color: #f8f8ff;
    
    }
    
    
    
    /* END - NEW BACKGROUND ADDED BY SERGIO */
    
    
    
    #wrapper_top {background:url(images/top.gif) no-repeat bottom; height:9px;}
    
    
    
    #wrapper {width:893px; margin:35px auto; background:url(images/wrapper.gif) repeat-y; position:relative;}
    
    
    
    #angelbg {background:url(images/angelbg.gif) no-repeat; width:50px; height:42px; position:absolute; bottom:10px; right:10px; display:block;}
    
    
    
    #wrapper_bottom {background:url(images/bottom.gif) no-repeat top; height:10px;}
    
    
    
    
    
    
    
    /**************LINKS*****************/
    
    
    
    a, a:link, a:visited {text-decoration:none; color:#000000;}
    
    
    
    
    
    
    
    /**************NAVIGATION*****************/
    
    
    
    #MainMenu{background:#FFFFFF url("images/bmid_108.gif");border:0;height:54px;margin:0;}
    
    
    
    #tab{margin:0;top:0; text-transform:uppercase;}
    
    
    
    #tab ul{float:left;list-style:none;margin:0;padding:0;}
    
    
    #tab li{display:inline;float:left;margin:0 1px 0 0;padding:0;}
    
    
    
    #tab a{background:url("images/bright_108.gif") no-repeat right top;border:0;display:block;float:left;margin:0;padding:0;text-decoration:none;}
    
    
    
    #tab a span{background:url("images/bleft_108.gif") no-repeat left top;color:#FFFFFF;display:block;font-family: Georgia, "Times New Roman", Times, serif;font-size:11;line-height:54px;padding:0 25px 0 25px; font-weight:bold;}
    
    
    
    #tab a:hover,#tab li.current_page_item a{background-position:right bottom;}
    
    
    
    #tab a:hover span,#tab li.current_page_item a span{background-position:left bottom;color:#E7E7E7;font-style:normal;text-decoration:none;}
    
    
    
    #tab li.rsslink a { color:#ff6600;font:18px Georgia, Times, serif; line-height:54px;padding:0 25px 0 25px;}
    
    
    
    
    
    
    
    /**************HEADER*****************/
    
    
    
    #header {padding-bottom:10px; height:70px;}
    
    
    
    #logo {padding:15px 10px 10px 33px; width:400px; float:left;}
    
    
    /* #logo h1 a {color: #333; font-family:Georgia, "Times New Roman", Times, serif; font-size:22px; text-transform:uppercase; border-bottom:1px dotted #333333;} */
    #logo h1 a {color: red; font-family:Georgia, "Times New Roman", Times, serif; font-size:25px; text-transform:uppercase; border-bottom:1px dotted #333333;}
    
    
    
    #logo h1 a:hover {color:#000;}
    
    
    
    #logo h2 {font-size:11px; font-weight:bold; text-transform: lowercase; margin:5px 0px 0px 2px; color:#999999;}
    
    
    
    
    
    
    
    /**************SEARCH*****************/
    
    
    
    #topsearch {width:278px; height:30px; background:url(images/search.gif) no-repeat; float:right; margin:10px 0 0 0; padding-right:42px;}
    
    
    
    #ls {border:0; padding:6px 5px 5px 5px; width:200px; margin-left:40px; font:13px Arial; color: #999999; text-transform:lowercase;}
    
    
    
    h2.archive {margin:10px; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; color:#666;}
    
    
    
    .noresults {text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; margin-top:30px;}
    
    
    
    
    
    
    
    /**************RECENT POST*****************/
    
    
    
    #entry { padding:0 0 0 20px; width:550px; float:left;}
    
    
    
    .recent {width:500px; background:#FFFFFF url(images/post_top.gif) top no-repeat; padding:10px 15px 10px 15px; text-align:justify;}
    
    
    
    .recent h2 {font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif;  margin:15px 0 15px 0; font-size:22px;}
    
    
    
    .recent h2 a {color: #333;}
    
    
    
    .recent h2 a:hover {color:#FF6600;}
    
    
    
    .info {height:50px; border-bottom:1px solid #CCCCCC;}
    
    
    
    .info2 {height:30px; border-bottom:1px solid #CCCCCC;}
    
    
    
    .latest {float:left;}
    
    
    
    h3.title {font-size:18px;color: #999999;font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif;}
    
    
    
    .date {color:#999999; padding:3px 0 5px 2px;} 
    
    
    
    .post {line-height:20px;}
    
    
    
    .post p {margin:0 0 15px 0;}
    
    
    
    html>body #entry ul { margin-left: 0px; padding: 0 0 0 30px; list-style: none; padding-left: 10px; text-indent: -10px; } 
    
    
    
    html>body #entry li { margin: 7px 0 8px 10px; }
    
    
    
    #entry ul li:before{ content: "\00BB \0020"; }
    
    
    
    #entry img {margin:0 10px 10px 10px;}
    
    
    
    .comcount {float:right; padding:5px 5px 5px 20px; background:url(images/comments.gif) left no-repeat; font-size:12px; text-transform:uppercase;}
    
    
    
    .comcount a {color: #666666; font-weight:bold;}
    
    
    
    .comcount a:hover {text-decoration:underline;}
    
    
    
    .content {color:#666666;}
    
    
    
    .readmore {display:block; display:inline; margin:0 0 0 5px; color:#333; font-size:12px; }
    
    
    
    .readmore:hover {text-decoration:underline;}
    
    
    
    .recentbottom {height:5px; background: url(images/post_bottom.gif) no-repeat; margin:0 0 15px 0px;}
    
    
    
    .meta {margin:15px 0 10px 0; font-size:11px; font-weight:bold;}
    
    
    
    .meta a {color:#666666;}
    
    
    
    .meta a:hover {text-decoration:underline;}
    
    
    
    .cats {background:url(images/folder.gif) no-repeat left; padding:0 0 0 20px; font-size:12px;}
    
    
    
    .tags {background:url(images/maximize.gif) no-repeat left; padding:0 0 0 20px; font-size:12px;}
    
    
    
    #banner {margin:auto; margin:0 0 10px 30px;}
    
    
    
    
    
    
    
    /****************COMMENTS*********************/
    
    
    
    #commentform h2 {margin:10px 5px 10px 5px; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; color:#333333; background:url(images/comments.gif) left no-repeat; padding-left:20px;}
    
    
    
    #comments {margin:15px 5px 15px 5px; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; color:#333333;}
    
    
    
    
    
    
    
    ol.commentlist{margin:0;padding:0; width:96%;}
    
    
    
    .commentlist li{list-style:none;margin-bottom:14px; margin-left:5px;}
    
    
    
    .commentlist cite{ background-color:#FFFFFF; border:1px solid #ccc; border-bottom:0; color: #666666;display:block;font-style:normal;padding:7px;font-size:11px; line-height:18px;}
    
    
    
    .commentlist a:link, .commentlist a:visited{color: #333333;}
    
    
    
    .commentlist a:hover, .commentlist a:active{color: #000000;}
    
    
    
    .commentlist cite img{border:1px solid #aab59a;float:left;margin-right:9px;padding:1px;}
    
    
    
    .commentlist .author{font-family: Georgia, "Times New Roman", Times, serif;text-decoration:underline;font-size:13px; font-weight:bold;}
    
    
    
    .commentlist .time{background:url(images/time.gif) no-repeat;padding-left:20px; padding-bottom:1px; line-height:20px;}
    
    
    
    .commenttext{background-color: #F2F2F2; color:#666;padding:10px; border:1px solid #ccc; border-top:0; line-height:20px;}
    
    
    
    
    
    
    
    #author, #email, #url {width:12em;font-size:13px; color:#666666;padding:3px; margin:5px; border:1px solid #cccccc; background:#FFFFFF url(images/bloglight.gif) top left no-repeat;}
    
    
    
    #submit{font:bold 1em Tahoma;margin:5px;padding:2px;}
    
    
    
    #respond{padding-top:20px;padding-bottom:10px; font-weight:lighter;}
    
    
    
    #comment{width:95%;font:13px Tahoma;color:#666666;margin:5px; border:1px solid #cccccc;}
    
    
    
    /**************SIDEBAR*****************/
    
    
    
    .about {margin-bottom:10px; padding-bottom:10px; color: #666;}
    
    
    
    h1.abouttitle {font-size:16px; font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; margin-bottom:10px; color:#000000; background:url(images/angel.gif) left no-repeat; padding-left:50px; height:21px;}
    
    
    
    .abouttext { border-top:1px dotted #666; padding-top:10px;}
    
    
    
    .rsstext { border-top:1px dotted #666; padding-top:10px;}
    
    
    
    .rsstext a { background:url(images/rss.gif) left no-repeat; padding-left:20px;}
    
    
    
    #sidebar {width:290px; float:left; position:relative;}
    
    
    
    #sidebar a {color:#333;}
    
    
    
    #sidebar a:hover {text-decoration:underline;}
    
    
    
    #ads li {display:inline; margin:0px 20px 20px 0px; float:left;}
    
    
    
    
    
    
    
    #sidebar1{ width:130px; float:left; padding:5px 5px 5px 0;}
    
    
    
    #sidebar1 h2{ font-size:14px; color:#333333; text-transform:uppercase; font-family:Georgia, "Times New Roman", Times, serif; padding-bottom:5px;border-bottom:1px dotted #666;}
    
    
    
    #sidebar1 ul{list-style-type:none;}
    
    
    
    #sidebar1 ul li{list-style-type:none;margin-top:20px; }
    
    
    
    #sidebar1 ul li ul{font-style:normal;margin-top:10px;padding:0px;}
    
    
    
    #sidebar1 ul li ul li{border:0; background:url(images/file.gif) no-repeat; margin:0 0px 5px;padding:0 0 5px 20px; font-size:12px;}
    
    
    
    #sidebar1 p{padding:0 5px;}
    
    
    
    
    
    
    
    #sidebar2{ width:130px; float:left; padding:5px;}
    
    
    
    #sidebar2 h2{ font-size:14px;  color:#333333; text-transform:uppercase; font-family:Georgia, "Times New Roman", Times, serif; padding-bottom:5px;border-bottom:1px dotted #666;}
    
    
    
    #sidebar2 ul{list-style-type:none;}
    
    
    
    #sidebar2 ul li{list-style-type:none;margin-left:10px;margin-top:20px;}
    
    
    
    #sidebar2 ul li ul{font-style:normal;none;margin-top:10px;padding:0px;}
    
    
    
    #sidebar2 ul li ul li{border:0;background:url(images/file.gif) no-repeat;margin:0 0px 5px;padding:0 0 5px 20px;  font-size:12px;}
    
    
    
    #sidebar2 p{padding:0 5px;}
    
    
    
    
    
    
    
    /**************TABBER*****************/
    
    
    
    #domtab {height:12px;}
    
    
    
    .tabberlive .tabbertabhide { display:none; }
    
    
    
    .tabber { }
    
    
    
    .tabberlive { }
    
    
    
    ul.tabbernav {line-height:28px; height:28px; }
    
    
    
    ul.tabbernav li { display: inline; line-height:28px; height:28px; }
    
    
    
    ul.tabbernav li a { padding:6px;margin-right:5px; background: #F0F0F0; border:none; color: #666666;}
    
    
    
    ul.tabbernav li a:link {color:#666666;}
    
    
    
    ul.tabbernav li a:visited {color:#666666; }
    
    
    
    ul.tabbernav li a:hover { color: #000; background: #fff;}
    
    
    
    ul.tabbernav li.tabberactive a { background: #fff; }
    
    
    
    ul.tabbernav li.tabberactive a:hover { color: #333; background: #F0F0F0; }
    
    
    
    .tabberlive .tabbertab { padding:20px 10px 10px 10px; border-top:0; background:#fff; }
    
    
    
    .tabberlive .tabbertab h2 { display:none; }
    
    
    
    .tabberlive .tabbertab h3 { display:none; }
    
    
    
    .tabbertab p { padding-bottom:10px;}
    
    
    
    .tabbertab ul { }
    
    
    
    .tabbertab ul li { padding:5px 0 6px 0; }
    
    
    
    .tabbertab ul li { list-style:none; background:url(images/file.gif) no-repeat 0 5px; padding-left:20px; color: #666;} 
    
    
    
    .tabbertab ul li a { border:none;}
    
    
    
    .tabbertab ul li a:hover {text-decoration:underline;}
    
    
    
    
    
    
    
    /**************FOOTER*****************/
    
    
    
    .footer p {font-size:10px; text-transform:uppercase; padding:10px 10px 10px 20px; color:#999; font-weight:bold;}
    
    
    
    .footer a {color:#666666;}
    
    
    
    .footer a:hover {text-decoration:underline; color:#333333;}
    
    
    
    
    
    
    
    /****************GALLERY*********************/
    
    
    
    .gallery {text-align:center;}
    
    
    
    .gallery img {padding:1px; height:100px; width:100px; border:1px solid #333;}
    
    
    
    .gallery a:hover {background-color:#ffffff;}
    
    
    
    .attachment {text-align:center;}
    
    
    
    .attachment img { padding:1px; border:1px solid #333;}
    
    
    
    .attachment a:hover {background-color:#FFFFFF;}
    
    
    
    .imgnav {text-align:center;}
    
    
    
    .imgleft {float:left;}
    
    
    
    .imgleft a:hover {background-color:#FFFFFF;}
    
    
    
    .imgleft img{ padding:1px; border:1px solid #333; height:100px; width:100px;}
    
    
    
    .imgright {float:right;}
    
    
    
    .imgright a:hover {background-color:#FFFFFF;}
    
    
    
    .imgright img{ padding:1px; border:1px solid #333; height:100px; width:100px;}
    
    
    
    
    
    
    
    /****************MISC*****************/
    
    
    
    acronym, abbr, span.caps { cursor: help; }
    
    
    
    acronym, abbr { border-bottom: 1px dashed #999; }
    
    
    
    blockquote { margin: 15px 30px 15px 10px; padding-left: 20px; border-left: 5px solid #ddd; }
    
    
    
    blockquote cite { margin: 5px 0 0; display: block; }
    
    
    
    .center { text-align: center; }
    
    
    
    hr { display: none; }
    
    
    
    a img { border: none; }
    
    
    
    .alignright{float:right;  padding:20px 20px 20px 0;}
    
    
    
    .alignright a { padding:0 20px 0 20px; background:url(images/arrow_forward.gif) right no-repeat; color:#666666; text-transform:uppercase; font-size:12px; font-weight:bold;}
    
    
    
    .alignright a:hover {color:#000000;}
    
    
    
    .alignleft{float:left;  padding:20px 0 20px 0; }
    
    
    
    .alignleft a {color:#666666;  padding:0 20px 0 20px; background:url(images/arrow_back.gif) left no-repeat;text-transform:uppercase; font-size:12px; font-weight:bold; }
    
    
    
    .alignleft a:hover {color:#000000;}
    
    
    
    pre {border: solid 1px #9a9a9a;color: blue;margin: 10px;padding:10px;background: #f3f2ed}
    
    
    
    code {font-size:1.0em;color: #000}

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,703
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there utnalove,

    try changing this...
    Code:
    
    #tab{margin:0;top:0; text-transform:uppercase;}
    
    ...to this...
    Code:
    
    #tab{
        margin:0 auto;
        padding:0; 
        width:444px; 
        list-style:none;
        text-transform:uppercase;
     }
    
    ...and removing this...
    Code:
    
    #tab ul{float:left;list-style:none;margin:0;padding:0;}
    
    coothead

  • Users who have thanked coothead for this post:

    utnalove (11-04-2008)

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    yes!! it works, thank you

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,703
    Thanks
    0
    Thanked 233 Times in 228 Posts
    No problem, you're very welcome.

  • #5
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Hello,

    as you can see now in the site, I added a page and the last two buttons of the header went in the second line. Why they didn't stay in the same line?

    How can I repair it?

    For your information, the page that I added is: "contact us", if you want I can delete it, so that you can see that everything will be back to normality.

    Thank you

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,703
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there utnalove,

    as you have added "contact us" to the navigation then you need to increase the width of the ul element that contains it.

    It seems that you would need to add at least 148px to the width value here...
    Code:
    
    #tab{
        margin:0 auto;
        padding:0; 
        width:444px;  /* try changing this to about  592px or a little more */
        list-style:none;
        text-transform:uppercase;
     }
    
    coothead

  • #7
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    I changed it to 999px, but nothing changes... even if I put it 0px.

    Now it is like this:

    PHP Code:
    #MainMenu{background:#FFFFFF url("images/bmid_108.gif");border:0;height:54px;margin:0;}


    /* OLD CODE --  http://www.codingforums.com/showthread.php?t=151453
    #tab{margin:0;top:0; text-transform:uppercase;}
    */

    /* NEW CODE */ 
    #tab{
        
    margin:0 auto;
        
    padding:0
        
    width:999px;
        list-
    style:none;
        
    text-transform:uppercase;
     }

     
    /* END NEW CODE */


    /* DELETED CODE
    #tab ul{float:left;list-style:none;margin:0;padding:0;}
    */




    #tab li{display:inline;float:left;margin:0 1px 0 0;padding:0;}



    #tab a{background:url("images/bright_108.gif") no-repeat right top;border:0;display:block;float:left;margin:0;padding:0;text-decoration:none;}



    #tab a span{background:url("images/bleft_108.gif") no-repeat left top;color:#FFFFFF;display:block;font-family: Georgia, "Times New Roman", Times, serif;font-size:11;line-height:54px;padding:0 25px 0 25px; font-weight:bold;}



    #tab a:hover,#tab li.current_page_item a{background-position:right bottom;}



    #tab a:hover span,#tab li.current_page_item a span{background-position:left bottom;color:#E7E7E7;font-style:normal;text-decoration:none;}





    #tab li.rsslink a { color:#ff6600;font:18px Georgia, Times, serif; line-height:54px;padding:0 25px 0 25px;} 

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,703
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there utnalove,
    but nothing changes...
    I have looked at your page in IE6, IE7, Firefox 3.0.10, Opera 9.64 and Safari 3.1 and your navigation is now
    on one line but with a setting of 999px it is no longer centered, 592px is approximately the value to use.
    If you are not seeing this, then I would suggest that you clear your cache.

    coothead

  • #9
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    thank you, you are always great!

    i refreshed many times and I couldn't get it... I needed to do a ctrl+f5 clearing the cache.

    THANK YOU

  • #10
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,703
    Thanks
    0
    Thanked 233 Times in 228 Posts
    No problem, you're welcome.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •