Solved

Google search layout help

Posted on 2011-09-12
3
216 Views
Last Modified: 2012-05-12
Hello,

I have problems getting the google custom search to display the layout to my desire.

As you can see from photos when i try to use the custom search, the result will shift the contents of the site.

 That's how it looks under normal conditions Issues with Google search changing the display layout
What i want is that when i use custom search, i would like to just overlapped on top of everything, instead of shifting and moving my contents. But i don't know how to do it as i ran out of ideas.

I attached the code with it, if anyone could help me, that would be good.

Thanks you!
site-code.zip
0
Comment
Question by:Gerson008
  • 2
3 Comments
 
LVL 18

Accepted Solution

by:
Rartemass earned 100 total points
ID: 36527213
You will need to apply a Z index to the elements. This controls what elements appear over the top of others.
http://www.w3schools.com/cssref/pr_pos_z-index.asp

With z-index the higher the number, the more on top it will be. So in the above, the search would need a higher z-index than the page content. You can only use z-index on positioned elements.
0
 

Assisted Solution

by:Gerson008
Gerson008 earned 0 total points
ID: 36528876
The problem with the z-index is that it'll moved the content to the bottom layer and i was unable to select anything.

So at the end i played around with the CSS file and setting the search output as position absolute and it appears to solve the problem at this stage.

0
 

Author Closing Comment

by:Gerson008
ID: 36555758
Didn't really solve my problem except it did lead me to look up some info provided.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now