Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Dreamweaver Web Design help

  1. #1
    Join Date
    Jul 2003
    Posts
    1,524

    Dreamweaver Web Design help

    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!
    Last edited by Jeff; 09-24-2008 at 02:51 AM. Reason: Fixed link

  2. #2
    Join Date
    Jul 2003
    Location
    Sydney, Australia
    Posts
    5,654
    File not found error from that link Jeff.


  3. #3
    Join Date
    Jul 2003
    Posts
    1,524
    Link fixed.

  4. #4
    AMDave's Avatar
    AMDave is offline Seeker of the exit clause Moderator
    Site Admin
    Join Date
    Jun 2004
    Location
    Deep in a while loop
    Posts
    9,631
    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.
    Last edited by AMDave; 09-24-2008 at 06:39 AM.
    . . . . . ___
    . . . . . . .\___/\______
    . . . . . . . \__AMD___\\__
    ---------------------------------------------

  5. #5
    Join Date
    Jul 2003
    Posts
    1,524
    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?

  6. #6
    NeoGen's Avatar
    NeoGen is offline AMD Users Alchemist Moderator
    Site Admin
    Join Date
    Oct 2003
    Location
    North Little Rock, AR (USA)
    Posts
    8,451
    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.

  7. #7
    Join Date
    Jul 2003
    Posts
    1,524
    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

  8. #8
    Join Date
    May 2004
    Location
    Kent, UK
    Posts
    3,511
    You need relative positioning.

    Declare a style called "p1" in your code.

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


    Code:
    <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!
    Last edited by Ototero; 09-30-2008 at 07:04 PM.
    Darkness isn't there, but you can't see through it

  9. #9
    Join Date
    Jul 2003
    Posts
    1,524
    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???

  10. #10
    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
    Last edited by Bok; 10-01-2008 at 02:37 PM.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •