Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

CSS - Position “search” button next to the field
 
Michel_sys82
Jr. Member
 
Total Posts:  25
Joined:  2012-12-08
 

Hello, smile

I’m using the theme “Grayscale” and I am placing some elements in the “header” of the store. What happens is that I am unable to position the “search_btn.gif” button, which I’ve customized and saved with the same name as the original button next to the “Search” field. I have attached a picture depicting my doubt. Below is an excerpt from the css file “skin.css” template “Grayscale” in the “/ * Header * /” I’m manipulating:

/*Form-search*/
#search_mini_form {
    displayblock;
    
margin0px 0px 0px 0px;
    
padding0;
    
positionrelative;
    
floatleft;
    
width500px;
    
clearboth;
}
.header .form-search {
    width
400px;
    
height50px;
    
margin0px 0px 0px 0px;
    
padding0;
    
positionrelative;
    
floatleft;
    
right0;
}
.header .form-search label {
    display
none;
}
.header .form-search input.input-text {
    width
400px;
    
height32px;
    
backgroundurl(../images/search_input.gifno-repeat 0 0;
    
margin0px 0px 0px 4px !important;
    
padding0px 0px 0px 7px;
    
floatleft;
    
positionrelative;
    
border0;
    
color#cecece;
    
font:18px ArialHelveticasans-serif;
}
.header .form-search input.input-text:focus {
    color
#6f6f6f;
}
.header .form-search button.button {
    float
right;
    
positionrelative;
    
width50px;
    
height50px;
    
displayblock;
    
margin5px;
    
margin-left:0px;
    
padding0;
    
backgroundurl(../images/search_btn.gifno-repeat 0 0;
}
.header .form-search button.button:hover {
    opacity
0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.header .form-search button.button span {
    display
none;
}
/*header links*/
.header .quick-access {
    padding
35px 50px 50px 50px;
    
margin-top30px;
    
width550px;
    
height:60px;
    
positionrelative;
}

Thanks a lot! smile

Image Attachments
01.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
kmHelms
Sr. Member
 
Total Posts:  227
Joined:  2012-03-05
 

if you haven’t got this solved yet, can you post or send me a link?

 
Magento Community Magento Community
Magento Community
Magento Community
 
louise100
Sr. Member
 
Avatar
Total Posts:  168
Joined:  2009-01-26
UK
 

Hi,

I\’m not sure if you have figured this out… but I think the problem is that your container doesn\’t have enough width for both the search box and the button to fit in… hence why it drops below.

.header .form-search has a width of 400px

.header .form-search input.input-text has a width of 400px so there is no space for your button.

So, you can either
1) increase the width of the .header .form-search so its around 460px

or

2) you can decrease the size of the .header .form-search input.input-text so it\’s around 340px

Hope this helps!
grin

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top