how can i make the form lie on the center of the bar.

ibnmvungi · 04-21-2012, 05:27 AM



 <!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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

  * {  padding:0; margin:0;} 

   body{padding:5px; font-family: Arial, Helvetica, sans-serif;}

   ul {list-style:none;

    

	margin:0;

	padding:0; 

	position: absolute;

	left:200px;

	top: 118px;

	width: 950px;

	background-color:#98bf21;

	background-position:center;

	height: 33px;

   }

   ul li {float:left; padding-right:1px; position:relative; 

             }

    ul a {display: table-cell; vertical-align:middle ; width: 100px; height:33px; 

	 text-align:center; background:#98bf21; color:#FFF; text-decoration:none; font-weight:bold;}

   ul a:hover{ background:#7A991A;

                     }

    li > ul { display:none; position:absolute; left:0; top:100%;

                   }

 li:hover >ul{ display:block;

             }

 li >ul li{padding:0; padding-top:1px;

                 }

li > ul li >ul{ left:100%;top:0; padding-left:1px;

                             }

  li > ul li >ul li{width:100px

                            ;}

 li:hover >a{background:#7A991A;}

 form.sach{ float:right; top: 20px; }



  </style>

</head>

<body>

   

<ul >

  <li ><a  href="#">HOME</a></li>

  <li  ><a  href="#">SERVICES</a>

    <ul  >

      <li ><a  href="#">Photocop</a></li>

      <li ><a  href="#">Printing</a></li>

      <li ><a  href="#">Scanning</a></li>

      <li ><a  href="#">Internet</a></li>

      <li ><a  href="#">IT</a>

        <ul>

          <li ><a  href="#">Maintain</a></li>

          <li ><a  href="#">Web des</a></li>

          <li ><a  href="#">Network</a></li>

          <li ><a  href="#">Graphics </a></li>

          <li ><a  href="#">Web host</a></li>

        </ul>

      </li>

    </ul>

  </li>

  <li ><a  href="#">ABOUT US </a></li>

  <li ><a  href="#">GALLERY</a></li>

  <li ><a  href="#">CONTACT</a></li>

   <form action="#" method="post"   name="search"  class="sach">

       <input type="text" name="search" value="search here"/> <input type="submit" value="go" />

  </form>



</ul>



</body>

</html>

abduraooft · 04-21-2012, 10:00 AM

like

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* { padding:0; margin:0;}
body{padding:5px; font-family: Arial, Helvetica, sans-serif;}
ul {list-style:none;

margin:118px auto 0 auto;
padding:0;

width: 950px;
background-color:#98bf21;
background-position:center;
height: 33px;
}
ul li {float:left; padding-right:1px; position:relative;
}
ul li li{
float:none;
}
ul ul{
width:6em;
}
ul a {display: table-cell; vertical-align:middle ; width: 100px; height:33px;
text-align:center; background:#98bf21; color:#FFF; text-decoration:none; font-weight:bold;}
ul a:hover{ background:#7A991A;
}
li > ul { display:none; position:absolute; left:0; top:100%;
}
li:hover >ul{ display:block;
}
li >ul li{padding:0; padding-top:1px;
}
li > ul li >ul{ left:100%;top:0; padding-left:1px;
}
li > ul li >ul li{width:100px
;}
li:hover >a{background:#7A991A;}
form.sach{ padding:5px;}

</style>
</head>
<body>

<ul >
<li ><a href="#">HOME</a></li>
<li ><a href="#">SERVICES</a>
<ul >
<li ><a href="#">Photocop</a></li>
<li ><a href="#">Printing</a></li>
<li ><a href="#">Scanning</a></li>
<li ><a href="#">Internet</a></li>
<li ><a href="#">IT</a>
<ul>
<li ><a href="#">Maintain</a></li>
<li ><a href="#">Web des</a></li>
<li ><a href="#">Network</a></li>
<li ><a href="#">Graphics </a></li>
<li ><a href="#">Web host</a></li>
</ul>
</li>
</ul>
</li>
<li ><a href="#">ABOUT US </a></li>
<li ><a href="#">GALLERY</a></li>
<li ><a href="#">CONTACT</a></li>
<li>
	<form action="#" method="post" name="search" class="sach">
	<input type="text" name="search" value="search here"/> <input type="submit" value="go" />
	</form>
</li>
</ul>

</body>
</html>

?