Dreamweaver Web Design help

[Jeff]

Here is my problem: I have a header image that I would like to place javascript code on top of (Google search application).

I used AP Div, and that works -- sort of. The Google search moves depending on the browser window size. Is there any way I can insert code on top of an image and have it stay there?

If you'd like to see what I am working on, you can look here.

http://premier.amdusers.com/PremierIndext.html

This is for a school project. Thanks for any help!

[vaughan]

File not found error from that link Jeff.

[Jeff]

Link fixed.

[AMDave]

Insert a new blank row above the images at the top of Table_01
Then select and cut your div class...form.../ form section from the table lower down
Now insert it into the new row you just made.
Save it.
Refresh your browser.
Works a treat for me and it should for you.
I emailed you the re-cut code.

[Jeff]

Dave,

I think I may have not been clear. I want to put the search bar on top of an image. I used AP Div, and it works great on my computer with my resolution.

Here is what happens on my wife's computer:



Here is what it looks like on my computer:



The problem I'm having is coming up with a solution on how to make the Google Search bar appear in the same spot that it is on my computer for everyone's computer. AP Div will not work, because depending on someone's resolution, the Absolute position will change.

Any ideas?

[NeoGen]

Jeff... this is totally out of my field of knowledge, I don't have a clue on web design, but I noticed something that your search box stays exactly on the same spot on the screen when you resize the IE window. It's fixed on specific X,Y coordinates, which is not good if you want to support multiple resolutions. (that's why you see well on your monitor but bad on others)

Isn't there a way to kind of anchor the position of the search box with the position of the image? Making one drag the other in case the resolution changes? If you resize the IE window everything adjusts and centers accordingly, except your search box.

[Jeff]

Jorge,

You've hit the nail on the head. That is my exact dilemma. I am unsure if there is a way to accomplish this. I figured someone here may know. I spent several hours fooling around with it.

My head is hurting and I'm going to bed for the night!

Jeff

[Ototero]

You need relative positioning.

Declare a style called "p1" in your code.

<style type="text/css">
.p1 { position: relative; left:  50px; top: -80px; z-index: 3; }
</style>

Then use it like this:

<img class=p1 src=graphics/stu.jpg width="150" height="150"></img>

It need not be an image, but anying, just put a class=p1 in it and will be positioned 50px and -80px relative.

Change the 50 and -80 to any numbers you like. The z-index allows the position to be on top or under.

Take a look at the source for http://www.geocities.com/ototero/n-tri.html.

I've hidden some links under an image. If you keep things in a table, they tend to stay where you put them!

[Jeff]

Thanks so much. That seems to be working. Though now I have another problem.

White bars!


http://premier.amdusers.com/test/index_F.html

Any ideas???

[Bok]

try changing

<td height="62" colspan="2" background="images/SEARCHBAR.jpg"><div class =p1><form action="http://www.google.com/cse" id="cse-search-box">

t

<td height="75" colspan="2" background="images/SEARCHBAR.jpg"><div class =p1><form action="http://www.google.com/cse" id="cse-search-box">

That might fix the first bar.

If you install Firebug as an addon to Firefox, you can change things on the fly to see how they look. It makes stuff like this MUCH easier to debug

Bok