Solved

Google search layout help

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

863 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

22 Experts available now in Live!

Get 1:1 Help Now