Jump to content

Image Placement Stopping Site Functionality


mistados
 Share

Recommended Posts

Hi everyone, I need some help. I have designed my own search bar and menu graphics and am in the process of adding them to my site. I have placed the menu with success, however when i place my search bar graphic the search functionality is lost. The way i am doing things is like this, i am using an existing wordpress theme and for the menu i simply overlayed my image over the themes image and then deleted the original graphic, i have done the same with the search bar graphic and this is the problem. It may help if i show my website and the theme i am using. My website:http://www.proaudioheadz.com The original theme:http://www.yootheme.com/demo/wordpress (You need to select Quantum from the dropdown) The code i have used on the search bar is this: HTML:

<a class="sbar"></a>

CSS:

.sbar {display: block; position: absolute;left: 5px;top:95px;width: 362px;height: 75px;background: url("http://www.proaudioheadz.com/media/images/search-bar.png");}

Im hoping someone here is able to advise me as to where i have gone wrong and how i can correct the issue. I would ask the theme developer forums but my membership expired. I hope i posted in the correct forum, i thought this more of a CSS matter than HTML Many thanks.

Link to comment
Share on other sites

try Removing the quotation marks around the background url and use Apostrophe.
Apostrophes, quotes or even nothing at all don't make a difference for the url() function. Personally, I think it's best not to put any kind of quotation mark. But no CSS could affect the functionality of a search bar. I think you should drop the absolute positioning. If you use absolute position to place something ontop of a link, or form element, then the element will be behind and not be clickable.
Link to comment
Share on other sites

Hi Ingolme, Thanks for your reply, shall i change absolute to relative? Edit: I changed it to relative and the image position changed, the original graphic is now visible above my graphic but strangley the search function still will not work.

Edited by mustard
Link to comment
Share on other sites

Don't use absolute or relative. Positioning isn't the way to work with page layout. What exactly are you trying to do? Edit: This thing is full of absolute and relative positioning. I can't even begin to find a decent fix for it.

Edited by Ingolme
Link to comment
Share on other sites

Do you see the search area in my site at the top right? Im wanting to place my graphic (now below it) over the top of it and have the search function work, as it stands the search function isnt even working and i have no idea why..:(

Link to comment
Share on other sites

I just looked through your site. All this positining and empty elements are a big problem. If you want to give a background image to something, put a background image on the specific element you're trying to style. Don't put it on somewhere else and then move it around the place.You're using empty <a> elements all over the header to put backgrounds around the place. When coding HTML properly, you shouldn't have more elements than what's necessary to contain the actual content.

Link to comment
Share on other sites

Just clear it all and start with something simple.

<div id="search">  <!-- Search bar goes here --></div><div id="menu">  <!-- Menu goes here --></div>

And the CSS:

#search {  /* Change width and height values to match the image */  float: right;  width: 400px;  height: 100px;  background: url(file.png) no-repeat top left;}

Link to comment
Share on other sites

Not to sure whats happened, my images have vanished now.. In Text widget:

<div id="search">  <!-- Search bar goes here --></div><div id="menu">  <!-- Menu goes here --></div>

CSS:

#search {  /* Change width and height values to match the image */  float: right;  width: 362px;  height: 75px;  background: url("http://www.proaudioheadz.com/media/images/search-bar.png) no-repeat top left;}

On a plus, the search function is working..

Edited by mustard
Link to comment
Share on other sites

Ok, ive done that but now the images are doubled up! i have the images displayed twice?

#search {  /* Change width and height values to match the image */  float: right;  width: 362px;  height: 75px;  background: url("http://www.proaudioheadz.com/media/images/search-bar.png") no-repeat top left;}#menu {  /* Change width and height values to match the image */  float: left;  width: 557px;  height: 75px;  background: url("http://www.proaudioheadz.com/media/images/menu-bg.png") no-repeat top left;}

Link to comment
Share on other sites

Thanks, i removed the HTML from the text widget. As it stands my menu items do not fit in the image, should i move the actual menu to the right, or should i move the menu image to the left? also, how would i move the search field to sit inside my graphic? Thanks for all your help guys, i really appreciate your time and patience..

Link to comment
Share on other sites

Thanks, i tried adjusting some settings to move the menu image up a bit but no changes were reflected..

#menu {  /* Change width and height values to match the image */  left:400px;  top:-50px;  width: 557px;  height: 75px;  background: url("http://www.proaudioheadz.com/media/images/menu-bg.png") no-repeat top left;}

Link to comment
Share on other sites

Ok, now i need to position my search textarea into my graphic, im not to sure what code i need to use to position that?

Edited by mustard
Link to comment
Share on other sites

Thank you very much everyone, you have been extremely helpful and patient.. :Happy: One more question if i may concerning my menu. How may i change how far the drop down or 2nd level menu drops down? at the moment its sitting slightly in the main menu, i would like it to finish a little lower down, and the same for the search results box that drops down also the speed at which it scrolls down at to be a little faster.

Edited by mustard
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...