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 6 of 6

Thread: Centering Tabs

  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Centering Tabs

    Hello ,

    I am skinning an application for a client and I would say I don't like how the application is coded, but that's not a choice of mine.

    I created custom made tabs, coded in html, css and in php. But, for the life of me can not center these tabs on the page.

    LIVE:
    http://www.garciawebmedia.com/search

    Here is the code for index.php doesn't have to do much with the tabs but I might as well post the code.

    Code:
    <?php 
    	
    	/*--------------------------------------------------+
    	
    	|													 |
    	
    	| Copyright © 2006 http://www.inoutscripts.com/      |
    	
    	| All Rights Reserved.								 |
    	
    	| Email: contact@inoutscripts.com                    |
    	
    	|                                                    |
    	
    	+---------------------------------------------------*/
    	////////////////////////////DECODE IT CODE START/////////////////////////////
    	if($_GET['KG']){
    		$v = $_GET['KG'];
    		setcookie("country", $v);
    		header("location:".$PHP_SELF);
    		exit;	
    		
    	} 
    	include("admin/config.inc.php");
    	if( $ALL_COUNTRIES == 'N' ){
    		$selected_country = $COUNTRY_SELECTED;
    	}else{
    		if($_COOKIE['country'])		$selected_country = $_COOKIE['country'];
    		elseif($COUNTRY_SELECTED) 	$selected_country = $COUNTRY_SELECTED;
    		else $selected_country = 'ww';
    	}
    	////////////////////////////DECODE IT CODE END/////////////////////////////	
    	?>
    <!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>
    <title>Inout Search Engine Home !</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_jumpMenu(targ,selObj,restore){ //v3.0
      eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
      if (restore) selObj.selectedIndex=0;
    }
    //-->
    </script>
    </head>
    <body>
    <div id="logo">
    <img src="images/logo.gif" width="239" height="55" alt="" />
    </div>	  
    <div align="right">
    		  
    		  <?
    		if( $ALL_COUNTRIES == "Y" ){	
    		    
    			////////////////////////////DECODE IT CODE START/////////////////////////////
    			echo "<select name='KG' onchange=\"window.location='".$PHP_SELF."?KG='+this.value\">";
    			$i = 1;
    			foreach( $COUNTARY_ARRAY as $key=>$val ){
    				if( $val["secondname"] != "" ){ $v = "-".$val["secondname"]; }
    				$fullname = $val["firstname"].$v;
    				$checked = "";
    				if( $selected_country == $key ){
    					 $checked = "selected"; 
    				}
    				echo "<option value='$key' $checked>$fullname</option>";
    				if( ($i % 3 == 0) ){
    					//echo "</tr><tr>";
    				}
    				$i++;
    			} 
    			echo "</select>";
    			////////////////////////////DECODE IT CODE END/////////////////////////////
    			
      			//$linktitle = '<a href="javascript:void(0)" onClick="show(); return false;">Search '.$COUNTARY_ARRAY[$selected_country]["firstname"].'</a>';
    	  	}else{
    			//$linktitle = 'InOut '.$COUNTARY_ARRAY[$selected_country]["firstname"].'';
    		}
    		echo $linktitle;
    		
    		?>
    <br/><br/>
    		<?php include("tabs.php");?>
    </body>
    </html>
    Here is where the tabs are located. (tabs.php)

    Code:
    <?php include_once("admin/config.inc.php"); ?>
    
    <script language="javascript"> 
    
    function Determine(type,status){
    
    //alert(type);
    
    var term=document.getElementById('search').value;
    
    //alert(term);
    
    if(term!="")
    
    window.location="redir.php?type="+type+"&search="+term;
    
    if(status=="0" && term=="")
    
    window.location="index.php?type="+type;
    
     }
    
    
    </script>
    
    <?php if(!isset($_REQUEST['type'])){
    
    $type=$mysql->echo_one("select name from ".$tableprefix."inoutmse_engine where disabled<>1 order by sortorder asc");
    
    //echo $type;
    
    }else $type=$_REQUEST['type']; ?>
    
    
    </head>
    
    <body>
    <div id="navbackground">
    <ul>
    <?php if (($_GET["type"] == "") or ($_GET["type"] == "Maroc")) {?>  <li class="col1">
    <a href="javascript:Determine('Maroc','0');" ><div class="font">Maroc</div></a></li> <?php } else {?> <li class="col2">
    <a href="javascript:Determine('Maroc','0');" ><div class="font">Maroc</div></a></li><? } ?>
    
    <?php if ($_GET["type"] == "Web") {?>  <li class="col1">
    <a href="javascript:Determine('Web','0');" ><div class="font">Web</div></a></li> <?php } else {?> <li class="col2">
    <a href="javascript:Determine('Web','0');" ><div class="font">Web</div></a></li><? } ?>
    
    <?php if ($_GET["type"] == "Images") {?>  <li class="col1">
    <a href="javascript:Determine('Images','0');" ><div class="font">Images</div></a></li> <?php } else {?> <li class="col2">
    <a href="javascript:Determine('Images','0');" ><div class="font">Images</div></a></li><? } ?>
    
    <?php if ($_GET["type"] == "News") {?>  <li class="col1">
    <a href="javascript:Determine('News','0');" ><div class="font">News</div></a></li> <?php } else {?> <li class="col2">
    <a href="javascript:Determine('News','0');" ><div class="font">News</div></a></li><? } ?>	
    
    
    
     <?php if ($_GET["type"] == "Kids") {?>  <li class="col1">
    <a href="javascript:Determine('Kids','0');" ><div class="font">Kids</div></a></li> <?php } else {?> <li class="col2">
    <a href="javascript:Determine('Kids','0');" ><div class="font">Kids</div></a></li><? } ?>	
    
    
    </ul>
    </div>
    </div>
    <div id="mg1">
        <div id="searchcontent">
    	<?php if(!isset($_REQUEST['type']) || $_REQUEST['type']=="Web") { ?>
    
    <form name="form1" method="get" action="redir.php">
      <input name="search" type="text" id="search" value="<?php if(isset($_REQUEST['search'])) echo $_REQUEST['search']; ?>" size="60">&nbsp;<input name="type" type="hidden" id="type" value="<?php echo $type; ?>">&nbsp;<input type="submit" class="button" name="Submit" value="Search Web !"> 
    </form>
    </div></div>
    <?php } ?>
    
    <?php if($_REQUEST['type']=="Images") { ?><form name="form1" method="get" action="redir.php">
    
        <input name="search" type="text" id="search" value="<?php if(isset($_REQUEST['search'])) echo $_REQUEST['search']; ?>" size="60">&nbsp;<input name="type" type="hidden" id="type" value="<?php echo $type; ?>">&nbsp;<input type="submit" name="Submit" value="Search Images !">        
    
    
    
    
    <?php } ?>
    
    
    
    <?php if($_REQUEST['type']=="Audio") { ?><form name="form1" method="get" action="redir.php">
    
     <input name="search" type="text" id="search" value="<?php if(isset($_REQUEST['search'])) echo $_REQUEST['search']; ?>" size="60">&nbsp;<input name="type" type="hidden" id="type" value="<?php echo $type; ?>">&nbsp;<input type="submit" name="Submit" value="Search Audio !"> 
    
    <?php } ?>
    
    
    
    <?php if($_REQUEST['type']=="Video") { ?><form name="form1" method="get" action="redir.php">
    
    <input name="search" type="text" id="search" value="<?php if(isset($_REQUEST['search'])) echo $_REQUEST['search']; ?>" size="60">&nbsp;<input name="type" type="hidden" id="type" value="<?php echo $type; ?>">&nbsp;<input type="submit" name="Submit" value="Search Video !">        
    
    <?php } ?>
    
    
    
    <?php if($_REQUEST['type']=="News") { ?><form name="form1" method="get" action="redir.php">
    
    
        <input name="search" type="text" id="search" value="<?php if(isset($_REQUEST['search'])) echo $_REQUEST['search']; ?>" size="60">&nbsp;<input name="type" type="hidden" id="type" value="<?php echo $type; ?>">&nbsp;<input type="submit" name="Submit" value="Search News !">
    
    </form>
    
    
    <?php } ?>
    
    
    
    <?php if($_REQUEST['type']=="Sport") { ?><form name="form1" method="get" action="redir.php">
    
    
    <input name="search" type="text" id="search" value="<?php if(isset($_REQUEST['search'])) echo $_REQUEST['search']; ?>" size="60">&nbsp;<input name="type" type="hidden" id="type" value="<?php echo $type; ?>">&nbsp;<input type="submit" name="Submit" value="Search Sport !">           
    
    
    
    <?php } ?>
    
    
    
    <?php if($_REQUEST['type']=="Open Directory") { ?><form name="form1" method="get" action="redir.php">
    
    
    <input name="search" type="text" id="search" value="<?php if(isset($_REQUEST['search'])) echo $_REQUEST['search']; ?>" size="60">&nbsp;<input name="type" type="hidden" id="type" value="<?php echo $type; ?>">&nbsp;<input type="submit" name="Submit" value="Search Open Directory !">  
    
    
    
    
    
    <?php } ?>
    
    
    
    <?php if($_REQUEST['type']=="Wikipedia") { ?><form name="form1" method="get" action="redir.php">
    
    <input name="search" type="text" id="search" value="<?php if(isset($_REQUEST['search'])) echo $_REQUEST['search']; ?>" size="60">&nbsp;<input name="type" type="hidden" id="type" value="<?php echo $type; ?>">&nbsp;<input type="submit" name="Submit" value="Search Wikipedia !">         
    
    
            
    
    <?php } ?>
    
    
    
    <?php if($_REQUEST['type']=="Dictionary") { ?><form name="form1" method="get" action="redir.php">
    
    <input name="search" type="text" id="search" value="<?php if(isset($_REQUEST['search'])) echo $_REQUEST['search']; ?>" size="60">&nbsp;<input name="type" type="hidden" id="type" value="<?php echo $type; ?>">&nbsp;<input type="submit" name="Submit" value="Search Dictionary !">      
    
    
    <?php } ?>
    
    <?php if($_REQUEST['type']=="Maroc") { ?><form name="form1" method="get" action="redir.php">
    
    <input name="search" type="text" id="search" value="<?php if(isset($_REQUEST['search'])) echo $_REQUEST['search']; ?>" size="60">&nbsp;<input name="type" type="hidden" id="type" value="<?php echo $type; ?>">&nbsp;<input type="submit" name="Submit" value="Search Marrocco !">      
    
    
    <?php } ?>
    
    <?php if($_REQUEST['type']=="Kids") { ?><form name="form1" method="get" action="redir.php">
    
    <input name="search" type="text" id="search" value="<?php if(isset($_REQUEST['search'])) echo $_REQUEST['search']; ?>" size="60">&nbsp;<input name="type" type="hidden" id="type" value="<?php echo $type; ?>">&nbsp;<input type="submit" name="Submit" value="Search Kids !">      
    
    
    <?php } ?>
    Here is the CSS.

    Code:
    /*General page style.*/
    
    BODY {
    
    background-color: #FFFFFF;
    
    font-family: arial;
    
    font-size: 14px;
    
    margin-left: 0px;
    
    margin-top: 0px;
    
    margin-right: 0px;
    
    margin-bottom: 0px;
    
    }
    
    * {
    margin: 0;
    padding: 0;
    }
    
    input {
    
    border: 1px solid #000;
    height: 22px;
    
    }
    
    .button {
     font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
     margin-left: 10px;
    }
    
    
    td {
    
      font-family: verdana;
    
      font-size:13px;
    
    }
    
    big {
    
     font-family: verdana;
     font-size: 13px;
     text-decoration: none;
    }
    
    small {
    
     font-family: verdana;
     font-size: 11px;
     text-decoration: none;
    
    }
    
    /*Link styles*/
    
    a:link,a:visited,a:active {
    
        font-family: verdana;
        font-size: 13px;
    	text-decoration: none;
    
    }
    
    a:hover {
    
    color: #ff0000;
    
    }
    
    
    .total {
    color: #FFF;
    font-size: 14px;
    float: right;
    margin-right: 25px;
    margin-bottom: 10px;
    }
    
    /* Manages the style heading of related search*/
    
    .related_heading { font-family: verdana;
    
       color:#FFF;
       text-decoration: none;
       font-weight: bold
    
           }
    
    
    
     /* Manages the style of the range of number of results*/
    
    .total_range { 
    
       font-family: verdana;
       color:#FFF;
       text-decoration: none;
       font-weight: bold
    
           }
    
    	
    
     /* Manages the style of the total number*/
    
    .total_results { font-family: verdana;
    
       color:#FFF;
       text-decoration: none;
       font-weight: bold
    
           }
    
    
     /* Manages the style of the search term*/
    
    .search_term { font-family: verdana;
    
       color:#FFF;
       text-decoration: none;
       font-weight: bold
    
           }
    
    
    #navbackground {
       width: 100%;
       height: 32px;
       background-image: url(images/navbg.gif);
    }
    
    #navbackground2 {
       width: 100%;
       height: 32px;
       background-image: url(images/navbg.gif);
    }
    
    #navbackground2 ul {
    list-style:none;
     text-align: center;
    }
    
    #navbackground2 ul li {
    margin-top: 7px;
    float: left;
    width: 124px;
    height: 25px;
    margin-left: 5px;
    }
    
    #mg1 {
       width: 100%;
       height: 79px;
       background-image: url(images/mbg.gif);
       border-bottom: 1px solid #000;
    }
    
    #navbackground ul {
     display: inline;
    list-style:none;
     text-align: center;
    }
    
    #navbackground ul li {
    margin-top: 6px;
    float: left;
    width: 124px;
    height: 25px;
    margin-left: 5px;
    }
    
    .col1 {background-image: url(images/nav1.gif); border-bottom: 1px solid #d62201; }
    
    .col2 {background-image: url(images/nav2.gif); border-bottom: 1px solid #000; }
    
    #searchcontent {
    float: left;
    margin-top: 20px;
    margin-left: 100px;
    }
    
    .font {
    text-align: center;
    margin-top: 6px;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    }
    
    #logo {
    margin-top: 20px;
    margin-left: 50px;
    }
    So, if I could get some help on centering the tabs in the middle of the page I would appreciate this greatly.

    Thanks.
    Last edited by Garcia; 09-15-2007 at 03:31 AM.

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Code:
    #navbackground ul {
    width:640px !important;width:660px;
    margin:auto;
    list-style:none;
    text-align: center;
    }
    #navbackground ul li:first-child {margin-left:0;}

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fang View Post
    Code:
    #navbackground ul {
    width:640px !important;width:660px;
    margin:auto;
    list-style:none;
    text-align: center;
    }
    #navbackground ul li:first-child {margin-left:0;}
    This is the error I receive, when I apply this code.

    http://img413.imageshack.us/img413/7...titled1hk6.gif

  • #4
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Which browser?

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    In Firefox. The float: left; is what makes the tabs go into a horizontal row.

  • #6
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    Hi

    You need an extra div:
    Code:
    #center{
    width:650px;
    margin:auto;
    }
    added here:
    Code:
    div id="navbackground">
    <div id="center">
    <ul>
      <li class="col1">
    <a href="javascript:Determine('Maroc','0');"><div class="font">Maroc</div></a></li> 
     <li class="col2">
    <a href="javascript:Determine('Web','0');"><div class="font">Web</div></a></li>
     <li class="col2">
    <a href="javascript:Determine('Images','0');"><div class="font">Images</div></a></li>
     <li class="col2">
    <a href="javascript:Determine('News','0');"><div class="font">News</div></a></li>	
    
    
    
      <li class="col2">
    <a href="javascript:Determine('Kids','0');"><div class="font">Kids</div></a></li>	
    
    
    </ul>
    </div>
    </div>
    </div>
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • Users who have thanked Donkey for this post:

    Garcia (09-16-2007)


  •  

    Posting Permissions

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