[Solved] White space in the header (header_right)

[J. Fernandes PT]

Hi.

There is a white space between my search bar and the Horizontal Menu that I use in my test site.

Been playing with the global.css file in Dreamweaver, have made changes but no luck. The header_right table still sits next to the top of the page,leaving a white space between the search bar and the Menu. The header_logo is fine, with the logo close to the Menu, as it should.

Can anyone please help me with this issue?

Many thanks

PS: see picture.

[nicetazmenia]

Can you be more specific, your screen shot from the Dreamweaver does not help. You need to view the page on a browser and provide the screen shot to get the better idea of the problem you are having.

If you want to have the search box to be on the menu bar you either need to move it there or edit the blocksearch.css file and edit this selector "#header_right #search_block_top" to place it to the location you want it to go and that is if you are using the search module.

[J. Fernandes PT]

Hi.

Thank you for your answer. I did put the Dreamweaver picture so that you can see the structure of that part of the site.

I attached another picture taken from the browser. Any ideas how can I put the search bar closer to the Menu bar?

thanks

[nicetazmenia]

Based on the structure you have it looks like that the search box is inside of the #header_right containter.

You can use a browser developer tool like Firebug if you are using Firefox to see the HTML elements and it CSS selector structure better than the Dreamweaver because you can actually see the actual rendition of the page and with that tool you can select the specific element and edit the CSS file.

From what I can tell, you need to edit the following CSS selector:
1. #header_right = check for the bottom margin (take it out if it has one)
2. #header_right #search_block_top = check for the margin-bottom and delete also, add margin-top to push the container down.

Bottom line here is you need to look for the selector being use in your HTML layout and it should give you the idea which one to adjust and which file to edit (either the CSS or the TPL file.

I hope this is helpful.

[J. Fernandes PT]

Hi.

in #header_right #search_block_top of blocksearch.css I insert this code:

margin-top: 12px;

and it worked.

Thank you. I knew I was very close.

PS: If I open a page in a browser, copy the code and paste it in Dreamweaver for me is much more useful than Firebug. In DW you can see all CSS elements, all the tables, ID's etc and where those parts are in CSS files (it even opens the right css file for you). But Firebug is also great, yes.