Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Apr 2008
    Posts
    12
    Member #
    16667
    Hi guys, I am so frustrated. I hope you can help me. I've been working on this the whole weekend and couldn't figure it out yet. I spent over 8 hours doing research online and I still couldn't figure it out, so I really hope you can help me.

    OK, here's the deal: I wanted to create a contact form, but not a regular one (I know how to create one of those already.) I want to have one of those really cute forms with an image on as a background, but I am having problems. Here's the code:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #apDiv1 {
        left:290px;
        top:19px;
        width:650px;
        z-index:1;
    }
    #name {
        position:absolute;
        left:296px;
        top:90px;
        width:267px;
        height:40px;
        z-index:1;
    }
    #email {
        position:absolute;
        left:296px;
        top:135px;
        width:267px;
        height:40px;
        z-index:2;
    }
    #phone {
        position:absolute;
        left:296px;
        top:180px;
        width:267px;
        height:40px;
        z-index:3;
    }
    #message {
        position:absolute;
        left:40px;
        top:272px;
        width:581px;
        z-index:4;
        text-align: center;
    }
    #button {
        position:absolute;
        left:166px;
        top:486px;
        width:317px;
        height:108px;
        z-index:5;
        text-align: center;
    }
    .fieldfontsize {
        font-size: 24px;
    }
    -->
    </style>
    </head>
    
    <body>
    <form>
    <div id="name">
      <input name="Name" type="text" class="fieldfontsize" id="Name" size="24" />
    </div>
    <div id="email">
      <input name="Email" type="text" class="fieldfontsize" id="Email" size="24" />
    </div>
    <div id="phone">
      <input name="Phone" type="text" class="fieldfontsize" id="Phone" size="24" />
    </div>
    <div id="message">
      <textarea name="Message" cols="50" rows="6" class="fieldfontsize" id="Message"></textarea>
    </div>
    <div id="button"><img src="http://www.theoutsourcingcompany.com/tryarg/images/button.jpg" width="285" height="110" /></div>
    <div id="apDiv1"><img src="http://www.theoutsourcingcompany.com/tryarg/images/form.jpg" width="650" height="608" /></div>
    </form>
    </body>
    </html>
    Now, my questions are:

    1) Am I doing the right thing by using APdivs or I should use a table instead?

    2) The field for the message looks OK in Dreamweaver and it's out of the box in Firefox. Check it out: http://www.theoutsourcingcompany.com...es/problem.jpg

    3) Should I use absolute positioning? Or fixed, relative, static? I would love to put the text fields relative to the APdiv that contains the whole thing. How do I do this? When I use static positioning no matter what left and top values I assign to it, it just won't move. Same thing for fixed. And I think I understand the concept of relative, but it is relative to where an element is supposed to be. Where are they supposed to be???

    4) I want to center the main APdiv, but I can't... I do text-align=center but it still stays on the right.

    5) When I tried to use regular div tags instead of APdivs, I assign left and top values, I see everything layed out great in Dreamweaver, and then when I click F12 to see it in Firefox, all the layers do whatever they want and they go all over the page. See http://www.theoutsourcingcompany.com...s/problem2.jpg

    6) If someone has sample HTML code that works and shows how to create a form overlapping an image, I would be thankful to you forever.

    I told my boss that I was going to have this ready by tomorrow (Monday) and I would really appreciate some help. If someone is online and you want to IM, that'd be awesome.

    Thank you so much for your help, you are really taking some headache away from me.

    Zeke

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Here's my shot at it"

    http://www.catpin.com/form

    View the HTML source.

    I tried to pick CSS tags that are most compatible between browsers.
    Also, forced the form to be centered on all browsers.

    Absolute and Relative positioning is a problem between browsers.
    It is frustrating making things look the same on all browsers.

    As of Monday evening, I never did look at my example on FF ... only IE6.0


  4. #3
    Junior Member
    Join Date
    Apr 2008
    Posts
    12
    Member #
    16667
    Thank you, thank you, thank you. You made my day. Works great on FF too. You're great.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:14 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com