PDA

View Full Version : Google search over image



utnalove
Jul 6th, 2009, 12:14 AM
Hello, the site is www.przepiekna.pl

I would like to put the google search on the header.jpg, and it shouldn't be hiddent by the image.

This is the code of the header:

<div class="Header">


<script type="text/javascript" src="http://www.google.pl/coop/cse/brand?form=cse-search-box&lang=pl"></script>




<center>
<img src="http://www.przepiekna.pl/wp-content/themes/wp_005/images/Header.jpg" style="height:125px;left:0;Position:absolute;top:0;width:998px;" />
</center>


<br />
<div style="float:left;">
<div class="logo">
<!--
<h1 id="name-text" class="logo-name">
<a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>


<div id="slogan-text" class="logo-text">
<?php bloginfo('description'); ?></div>
</div></div> -->
<div style="float:left;margin:40px 10px 0 500px;height:70px;">
<?php echo stripslashes(get_option('wps_home_ad_468')); ?>
</div></div>


Please note that I cannot put the header.jpg in a CSS, because it doesn't work.

Please tell me how I need to edit the
<center>
<img src="http://www.przepiekna.pl/wp-content/themes/wp_005/images/Header.jpg" style="height:125px;left:0;Position:absolute;top:0;width:998px;" />
</center> in order to put my google research code in it.

Thanks

Kodah
Jul 6th, 2009, 02:16 AM
two possible solutions:

1)You should be able to place the google code in a <div> below the image in the read order of the document and position it with the absolute attribute which should place it on top of the image. This should not require the z-index property. Currently the google search is above the image in the read order but, the image is positioned absolute so it is stacking on top of the google search.

2)I have not tried this next possible solution before so I don't know if it will work but, I'm thinking that you may be able to give the google script itself an id or class and not have to put it in a div. You will still have to either move it below the image and use absolute position, or give it a z-index to layer it on top of the image. Like I said, this might not work.

btw, validate your code. 41 errors were found.

utnalove
Jul 6th, 2009, 10:22 AM
well, now it appears... but there is a problem:

cannot click on it and cannot type anything...

I have tried to add the z-index, and with z-index:0 or z-index:1 it works fine, but not in Internet Explorer.


===

Another point --- the errors are caused by the youtube embedded video codes. If I remove the youtube videos, those validation errors disappear.

Kodah
Jul 6th, 2009, 04:38 PM
well, I'm not sure, but I think you may have script conflicts or something. I get the google search in IE6 (haven't tested 7 or 8) and I can interact with it but, it sometimes disappears after it has loaded and once it simply moved off your design to the right and was on top of a box with a grey background but the area below the grey box was the pink body background? This behavior seems to be happening after the page has loaded so, I'm thinking 1) a JavaScript or similar is dynamically overriding your set styles or, 2) the page has not fully loaded, even-though I am getting the "done" indicator in the status bar, and something farther down the page is causing the problem. However, the behavior has not been consistent, but my little bit of testing may not have been consistent either.

Analysis is very difficult due to the read order of your output and the sheer number of div elements on the page.It's a beautiful layout but you might be able to simplify it significantly without loosing design aesthetics. The difficulty in analyzing may be my shortcoming as I have just started using firebug and I'm not proficient with js. Sorry I couldn't be more helpful.
======
Validation: Perhaps a different doctype? I don't have any suggestions for which one.

utnalove
Jul 6th, 2009, 04:47 PM
thank you a lot for your effort...

anybody else knows what can be the problem?