Need help with putting search box all together

  • Karolis
  • Novice
  • Novice
  • Karolis
  • Posts: 19

Post 3+ Months Ago

Main problem that button for search box doesn't stay together at the line and size with search function where people type text to search.

Please someone correct me out as much is possible.

Attached files for modification and so on. Please help me out on this one. :)

Attachments:
menu.zip

(984 Bytes) Downloaded 35 times


Attachments:
menu.jpg
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

As far as the space there is no need for floats getting rid of float right on the button and putting the button and input field on one line will get rid of that space as far as the height you just need to play around with some attributes to get that correct. I don't have that much time to play with that today but here is a revised version of your code

HTML Code: [ Select ]
<!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>Stilish CSS3 search box - demo</title>
<style>
#searchbox{
   position:relative;
   float:left;
   margin-top:0px;
   margin-left:2px;
}
 
/*Search box*/
/*-------------------------------------*/
 
.cf:before, .cf:after{
   content:"";
   display:table;
}
 
.cf:after{
   clear:both;
}
 
.cf{
   zoom:1;
}
 
/*Whole search box backround and border radius*/   
 
.form-wrapper {
   width: 230px;
   background: #444;
   background: rgba(0,0,0,.2);
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   -moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
   -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
   box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
   padding-bottom: 4px;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 3px;
}
 
/* Search button decoration */
.form-wrapper button {
   margin-top:0px;
   border: 0;
   cursor: pointer;
   height: 25px;
   width: 80px;
   font: bold 10px 'lucida sans', 'trebuchet MS', 'Tahoma';
   color: #E6D4C3;
   text-transform: uppercase;
   background: #8a8a8a;
   -moz-border-radius: 0 3px 3px 0;
   -webkit-border-radius: 0 3px 3px 0;
   border-radius: 0 3px 3px 0;
   text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
   padding-bottom: 2px;
   padding-left: 5px;
   padding-right: 0;
   padding-top: 5px;
}  
 
.form-wrapper input {
   height:19px;
}
 
/** Button Hover **/
.form-wrapper button:hover{      
   background: #e54040;
}  
 
.form-wrapper button::-moz-focus-inner {
   border: 0;
   padding: 0;
}
 
</style>
</head>
 
<body>
<div id="searchbox">
<form class="form-wrapper cf">
   <input type="text" placeholder="Search here..." required><button type="submit">Search</button>
</form>
</div>
 
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Stilish CSS3 search box - demo</title>
  5. <style>
  6. #searchbox{
  7.    position:relative;
  8.    float:left;
  9.    margin-top:0px;
  10.    margin-left:2px;
  11. }
  12.  
  13. /*Search box*/
  14. /*-------------------------------------*/
  15.  
  16. .cf:before, .cf:after{
  17.    content:"";
  18.    display:table;
  19. }
  20.  
  21. .cf:after{
  22.    clear:both;
  23. }
  24.  
  25. .cf{
  26.    zoom:1;
  27. }
  28.  
  29. /*Whole search box backround and border radius*/   
  30.  
  31. .form-wrapper {
  32.    width: 230px;
  33.    background: #444;
  34.    background: rgba(0,0,0,.2);
  35.    -moz-border-radius: 10px;
  36.    -webkit-border-radius: 10px;
  37.    border-radius: 10px;
  38.    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
  39.    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
  40.    box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
  41.    padding-bottom: 4px;
  42.    padding-left: 10px;
  43.    padding-right: 10px;
  44.    padding-top: 3px;
  45. }
  46.  
  47. /* Search button decoration */
  48. .form-wrapper button {
  49.    margin-top:0px;
  50.    border: 0;
  51.    cursor: pointer;
  52.    height: 25px;
  53.    width: 80px;
  54.    font: bold 10px 'lucida sans', 'trebuchet MS', 'Tahoma';
  55.    color: #E6D4C3;
  56.    text-transform: uppercase;
  57.    background: #8a8a8a;
  58.    -moz-border-radius: 0 3px 3px 0;
  59.    -webkit-border-radius: 0 3px 3px 0;
  60.    border-radius: 0 3px 3px 0;
  61.    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
  62.    padding-bottom: 2px;
  63.    padding-left: 5px;
  64.    padding-right: 0;
  65.    padding-top: 5px;
  66. }  
  67.  
  68. .form-wrapper input {
  69.    height:19px;
  70. }
  71.  
  72. /** Button Hover **/
  73. .form-wrapper button:hover{      
  74.    background: #e54040;
  75. }  
  76.  
  77. .form-wrapper button::-moz-focus-inner {
  78.    border: 0;
  79.    padding: 0;
  80. }
  81.  
  82. </style>
  83. </head>
  84.  
  85. <body>
  86. <div id="searchbox">
  87. <form class="form-wrapper cf">
  88.    <input type="text" placeholder="Search here..." required><button type="submit">Search</button>
  89. </form>
  90. </div>
  91.  
  92. </body>
  93. </html>
  94.  

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 80 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.