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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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


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



  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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>
    ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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