aligning controls

[jlbantang]

hi, how would you design a search box to position control properly.

            <div id="search_div"   style=" height:74px; background-image : url(Images/search_box.jpg); background-repeat: no-repeat;">                
                <ul class="search_box" style="margin-left:70px;">
                    <li><asp:DropDownList ID="DropDownList1" runat="server" Width="120px" BackColor="Transparent" CssClass="obj_nolayout">
                                <asp:ListItem>Delivery No</asp:ListItem>
                                <asp:ListItem>LPO No</asp:ListItem>
                                <asp:ListItem>Supplier</asp:ListItem>
                                <asp:ListItem>LPO Details</asp:ListItem>
                                </asp:DropDownList></li>
                    <li ><asp:TextBox ID="TextBox1" runat="server" Width="314px" BackColor="Transparent" BorderColor="Gray"></asp:TextBox></li>
                   <li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li>
                    <li> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/search_go.jpg" /></li>
                </ul>                
            </div>

thanks.

[brin351]

If the rounded corner black background image was a fixed size (didn't need to stretch) then I'd do something like the following. Please excuse mistakes I'm doing it on the fly but it should be enough to demonstrate. You may need another nested div to hold the controls, I'd try to do it without though.

<style>

#search_div{
height:74px; 
width:400px;
background-image : url(Images/search_box.jpg); background-repeat: no-repeat;
padding:5px 10px 5px 10px;   /*create the space to show the background image*/
}

#search_div img{
height:30px; /*images and controls in div need to be the same height*/
float:left;
}
#search_div select{ /*the drop down control - you could use #id if needed*/
height:30px; 
width:100px;
float:left;
}

#search_div input{ /*the textbox control - #id if needed*/
height:30px; 
width:100px;
float:left;
}
<style>

<div id="search_div">

   <img src="url to the magnifying glass image">

   <asp:DropDownList ID="DropDownList1" runat="server" Width="120px" BackColor="Transparent" CssClass="obj_nolayout">
                                <asp:ListItem>Delivery No</asp:ListItem>
                                <asp:ListItem>LPO No</asp:ListItem>
                                <asp:ListItem>Supplier</asp:ListItem>
                                <asp:ListItem>LPO Details</asp:ListItem>
                                </asp:DropDownList>

   <asp:TextBox ID="TextBox1" runat="server">
   <asp:ImageButton ID="ImageButton1" runat="server">
</div>

[jlbantang]

hey, This my first attempt to create search box though and i do not have enough idea how mix the box properly.

what you suggest is to take out search image, asp controls and submit button separately? currently the design was one search image except the asp control (with green arrow controls).

i see your point when i play around with the codes. the bottom lines seems to play with padding and yes the height of controls.

[brin351]

Yes that's it. You just need to line up the images,controls inside the div. The "float:left; on the controls may not be needed, leaving them "inline" could do it. Also you might need to set padding:0; margin:0; on the controls or add a bit of margin to the right on them for spacing ( margin:0 0 0 10px; ) . Lastly getting the width of everything right taking into account margins etc. If the div is 400px - 10px left + 10px right padding = 380px make the control widths add up to this or slightly less.

[gep13]

For more information about how to use "float", you might want to take a look at the following:

http://css.maxdesign.com.au/floatutorial/

It is a very detailed explanation of how this can be used.

Gary