Center the search field and button infront of image

14 Apr 2010, 12:15 PM

#1

muzz

Totally Zenned

Join Date:: Mar 2009
Location:: Australia
Posts:: 604
Plugin Contributions:: 0

Center the search field and button infront of image

Hi there,

I'm trying to centre the top search entry field and button to an background image I have which is roughly 10 px bigger.

This is what I have tried but it is not centering.

#navMainSearch {
float: right;
background-color: #a68236;
background-image: url(../images/search_top.png);
background-repeat: no-repeat;
background-position: 50% 50%;
height:51px;
width: 264px;
padding: 0;
margin: 0;
}

That wasn't the plan!

14 Apr 2010, 1:55 PM

#2

haredo

Totally Zenned

Join Date:: Apr 2006
Location:: Texas
Posts:: 6,189
Plugin Contributions:: 0

Re: Center the search field and button infront of image

Mu,
Can you provide a link or PM the url, so I can view in Firefox using the Add-On called "Firebug".

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.

Zen Cart Certified hosting at myZenCartHost.com.

15 Apr 2010, 12:38 AM

#3

muzz

Totally Zenned

Join Date:: Mar 2009
Location:: Australia
Posts:: 604
Plugin Contributions:: 0

Re: Center the search field and button infront of image

Hi haredo,

My site is not live.

It's being created locally using WAMP so no URL to post.

That wasn't the plan!

15 Apr 2010, 12:40 AM

#4

haredo

Totally Zenned

Join Date:: Apr 2006
Location:: Texas
Posts:: 6,189
Plugin Contributions:: 0

Re: Center the search field and button infront of image

Mu,
Drats, I won't be able to help you out...

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.

Zen Cart Certified hosting at myZenCartHost.com.

15 Apr 2010, 2:05 AM

#5

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,874
Plugin Contributions:: 8

Re: Center the search field and button infront of image

height:51px;
width: 264px;
padding: 0;
margin: 0;
}

Try letting the padding set the size of the element (floated divs shrink to fit their content, at least in modern browsers).

/height:51px;
width: 264px;/
padding: 10px;
margin: 0;
}

Glenn . . . Future Relics Jewelry, NY Faerie Festival
Categories Dressing, Images for Titles, Smart Backgrounds, Additional Img Titles, Flexible Attributes, Ezpages Footer Columns, Model List...

15 Apr 2010, 4:52 AM

#6

muzz

Totally Zenned

Join Date:: Mar 2009
Location:: Australia
Posts:: 604
Plugin Contributions:: 0

Re: Center the search field and button infront of image

Good idea.

Thanks got it displaying how I wanted!

Thanks :)

That wasn't the plan!