PDA

View Full Version : input type background


fattat
06-01-2009, 02:02 PM
#top form{
width:274px;
height:34px;
float:right;
margin:0px 0 0 0;
background:url(images/search_field.jpg) 4px 4px no-repeat;
}
#top form input.search{
display:block;
padding:0px;
margin:10px 0 0 12px;
width:175px;
height:15px;
}
#top form input.btnSearch{
background:url(images/search_icon.jpg) 0 0 no-repeat;
float:left;
height:30px;
width:37px;
display:block;
cursor:pointer;
border:none;
}


<form name="serch" action="#" method="post"><input name="name" type="text" value=" - Enter Keyword - " class="search"/>
<input name="go" type="" class="btnSearch" /></form>


http://img198.imageshack.us/img198/2431/picture3wqi.png (http://img198.imageshack.us/my.php?image=picture3wqi.png)
the picture above is the search field that i want to create..


i divide it to 2 image, that is "search_field.jpg" and "search_icon.jpg"
http://img189.imageshack.us/img189/963/searchfield.jpg (http://img189.imageshack.us/my.php?image=searchfield.jpg)
http://img3.imageshack.us/img3/350/searchicon.jpg (http://img3.imageshack.us/my.php?image=searchicon.jpg)
but when i bring it in dreamweaver , some error happen??
i think is might be the wrong code...
could anyone help me look for it??


here is the outlook browser

http://img189.imageshack.us/img189/2360/picture6k.png (http://img189.imageshack.us/my.php?image=picture6k.png)

davidj
06-01-2009, 02:45 PM
should this not be #top form input.btnSearch{....


#top form input.search{
display:block;
padding:0px;
margin:10px 0 0 12px;
width:175px;
height:15px;
}


also

dont think its important but just FYI...

<form name="serch" //<< typo

fattat
06-01-2009, 02:55 PM
should this not be #top form input.btnSearch{....


#top form input.search{
display:block;
padding:0px;
margin:10px 0 0 12px;
width:175px;
height:15px;
}


also

dont think its important but just FYI...

<form name="serch" //<< typo


that form name="serch" doesnt influent the input class name...

the first input type class name is "search"
second input type class name is "btnSearch"

i sure is not this problem

coloeagle
06-02-2009, 01:25 PM
You have the button image set to float:left - ???
You might also need to adjust your width settings for each.

fattat
06-02-2009, 03:13 PM
You have the button image set to float:left - ???
You might also need to adjust your width settings for each.

yes,there is two image..
and i have set the width and height for both image

coloeagle
06-02-2009, 03:15 PM
Have you tried removing the float:left; ?

fattat
06-02-2009, 05:01 PM
Have you tried removing the float:left; ?

yes..i have try remove the float:left
but still the same problem


and also the submit icon have a problem
when click on the icon, it appear a box that can writing there...
http://img14.imageshack.us/img14/8073/picture2lic.png (http://img14.imageshack.us/my.php?image=picture2lic.png)

coloeagle
06-02-2009, 06:37 PM
Don't have time right now to do a play around myself. Maybe this will help you out. http://blog.reindel.com/2007/08/13/howto-spruce-up-your-search-box-with-css-and-a-background-image/

ajatix.com
06-04-2009, 06:02 PM
Try adding "float:left" style to the input.search class block

fattat
06-06-2009, 07:36 AM
Don't have time right now to do a play around myself. Maybe this will help you out. http://blog.reindel.com/2007/08/13/howto-spruce-up-your-search-box-with-css-and-a-background-image/

thank for sharing the tutorial..
is really good for me