...

View Full Version : Centering Tabs



Garcia
09-15-2007, 04:29 AM
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.



<?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)



<?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.



/*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.

Fang
09-15-2007, 07:27 AM
#navbackground ul {
width:640px !important;width:660px;
margin:auto;
list-style:none;
text-align: center;
}
#navbackground ul li:first-child {margin-left:0;}

Garcia
09-15-2007, 05:35 PM
#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/7267/untitled1hk6.gif

Fang
09-15-2007, 09:33 PM
Which browser?

Garcia
09-15-2007, 09:52 PM
In Firefox. The float: left; is what makes the tabs go into a horizontal row.

Donkey
09-16-2007, 03:50 AM
Hi

You need an extra div:

#center{
width:650px;
margin:auto;
}

added here:

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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum