mistados Posted October 8, 2011 Share Posted October 8, 2011 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 More sharing options...
eTianbun Posted October 8, 2011 Share Posted October 8, 2011 try Removing the quotation marks around the background url and use Apostrophe. Link to comment Share on other sites More sharing options...
Ingolme Posted October 8, 2011 Share Posted October 8, 2011 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 More sharing options...
mistados Posted October 8, 2011 Author Share Posted October 8, 2011 Hi, Thanks for your reply, sadly that change had no effect.. Link to comment Share on other sites More sharing options...
mistados Posted October 8, 2011 Author Share Posted October 8, 2011 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. Link to comment Share on other sites More sharing options...
Ingolme Posted October 8, 2011 Share Posted October 8, 2011 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. Link to comment Share on other sites More sharing options...
mistados Posted October 8, 2011 Author Share Posted October 8, 2011 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 More sharing options...
Ingolme Posted October 8, 2011 Share Posted October 8, 2011 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 More sharing options...
mistados Posted October 8, 2011 Author Share Posted October 8, 2011 I see, i don't know how to do that, i thought i was doing it right.. I added the HTML inside a text widget directly.. Link to comment Share on other sites More sharing options...
Ingolme Posted October 8, 2011 Share Posted October 8, 2011 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 More sharing options...
mistados Posted October 8, 2011 Author Share Posted October 8, 2011 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.. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 8, 2011 Share Posted October 8, 2011 If you use double quotes or single quotes, there must be one at start, and at the end, and they should not be mixed.background: url("http://www.proaudioheadz.com/media/images/search-bar.png") no-repeat top left; Link to comment Share on other sites More sharing options...
mistados Posted October 8, 2011 Author Share Posted October 8, 2011 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 More sharing options...
dsonesuk Posted October 8, 2011 Share Posted October 8, 2011 You have TWO elements with id="menu" and id="search" references, one in id="banner" container, the other in class="grid-block" container, these should be unique within a page, that is why you are getting duplicates of these background images. Link to comment Share on other sites More sharing options...
mistados Posted October 8, 2011 Author Share Posted October 8, 2011 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 More sharing options...
dsonesuk Posted October 8, 2011 Share Posted October 8, 2011 You need identify which element you want to move, and then in most cases adjustment of margin, padding should enable you to place it to the required position. Link to comment Share on other sites More sharing options...
mistados Posted October 8, 2011 Author Share Posted October 8, 2011 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 More sharing options...
dsonesuk Posted October 8, 2011 Share Posted October 8, 2011 I told you to use margins and padding, the reason left: and top: don't do anything is because they only work when position: absolute;, position: relative; or position: fixed; are used for the that specific element. Link to comment Share on other sites More sharing options...
mistados Posted October 9, 2011 Author Share Posted October 9, 2011 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 9, 2011 Share Posted October 9, 2011 Find the code for #searchbox and add/adjust the margins. #searchbox { height: 31px; padding: 0 30px; width: 90px;} Link to comment Share on other sites More sharing options...
mistados Posted October 9, 2011 Author Share Posted October 9, 2011 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.