PDA

View Full Version : Search Box question


teresamar2
01-08-2011, 03:10 AM
I finally got my search box figured out, except for one small problem. I want the hour glass top to be even with the top of the search box, not above it. Since I'm just learning, I welcome all comments, good and bad. Website addy is www.ttjewelry.net (http://www.ttjewelry.net). Here's my CSS code for the search box:

#searchwrapper {
position: absolute; /*important*/
width: 198px; /*follow your image's size*/
height: 68px;/*follow your image's size*/
background-repeat: no-repeat; /*important*/
padding: 0px;
top-margin: 0px;
left: 691px;
top: 165px;
}
#searchbox[type="text"] {
position: absolute;
float: left;
display: block;
top: 175px;
width: 150px;
height: 30px;
padding: 3px 10px 6px 10px;
border: 2px solid #ccc;
}
#searchbox_submit [input[type="submit"] {
position: absolute;
float: left;
top: 175px;
width: 47px;
height: 50px;
background: url(../mag_glass.png);
cursor:pointer;
border: none;
}

gentleone
01-08-2011, 10:18 AM
Don't use the absolute positioning for the form elements in the first place... they don't belong there. The left floats will line them up next to each other (which I told you in your previous thread) and then use 'margin-top: value' to position them how you want instead of 'top: 175px'.

gentleone
01-08-2011, 10:24 AM
Oh and btw... these don't make sense anyway

#searchbox[type="text"]

#searchbox_submit [input[type="submit"]

should be

#searchwrapper input[type="text"]

#searchwrapper input[type="submit"]

teresamar2
01-09-2011, 10:45 PM
I think it's right this time. Thank you for your help. Here's the revised code.

#searchwrapper {
position: absolute; /*important*/
width: 195px; /*follow your image's size*/
height: 45px;/*follow your image's size*/
background-repeat: no-repeat; /*important*/
left: 700px;
top: 160px;
}
#searchwrapper input[type="text"] {
float: left;
display: block;
width: 140px;
height: 25px;
}
#searchwrapper input[type="submit"] {
float: left;
display: inline;
vertical-align: top;
width: 45px;
height: 42px;
background: url(../mag_glass.png);
}

gentleone
01-09-2011, 10:53 PM
good stuff ;)