Solved

Google search layout help

Posted on 2011-09-12
3
226 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

U.S. Department of Agriculture and Acronis Access

With the new era of mobile computing, smartphones and tablets, wireless communications and cloud services, the USDA sought to take advantage of a mobilized workforce and the blurring lines between personal and corporate computing resources.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

810 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