CODEWITHSUNDEEP
htmlcss
evan
evan

Reputation: 964

Form inputs showing behind image

The form/input keeps showing up behind the img #iphone. I tried adjusting z-index and changing position to relative. The z-index is correct on JSfiddle: jsfiddle.net/3uLUj, but not on my site or locally: evanwknight.com/United-Redesign Thanks!

<div id="form">
    <form action="index.php" method="post">
       <input type="text" name="name" placeholder="enter first and last name" >
       <br />
       <input type="image" value="Submit" src="submit-1.gif" id="submit"/>
    </form>
</div>

#iphone {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -350px; /* Half the height */
    margin-left: -266px; /* Half the width */
    z-index: -100;
}
#form {
    position: absolute;
    z-index: 9999;
} 
input {
    position: absolute;
    text-align: center;
    font-size: 30px;
    width: 200px;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 5px solid #cccccc;
    padding: 15px;
    background: rgba(255,255,255,0.5);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px; /* future proofing */
    -khtml-border-radius: 2px; /* for old Konqueror browsers */
    z-index: 9999;
}

Upvotes: 0

Views: 120

Answers (4)

Praveen
Praveen

Reputation: 56501

On inspecting your site, the problem seems to be in margin-top

enter image description here

#form {
text-align: center;
margin-top: -500px;  //remove this will fix your problem
color: #193485;
font-family: Arial;
}

Updates: Not sure, since the height if the div is small compared to the margin-top:300px. It get hidden. Try this

enter image description here

Upvotes: 0

Brian Kiremu
Brian Kiremu

Reputation: 4484

I've looked at your site and if I'm understanding you correctly you want the form to appear inside the iPhone and on top of the image. If so, try replacing your the relevant style declarations in your style.css file with these:

#form {
    text-align: center;
    color: #193485;
    font-family: Arial;
}


#iphone {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -350px; /* Half the height */
    margin-left: -266px; /* Half the width */
    z-index: -100;
}

#plain {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px; /* Half the height */
    margin-left: -177px; /* Half the width */
    z-index: 100;
}

#form {
    position: absolute;
    z-index: 9999;
    height: 600px;
    width: 354px;
    top: 50%;  left: 50%;  margin-top: -200px;  margin-left: -177px;  
}

input {
    text-align: center;
    font-size: 30px;
    width: 200px;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 5px solid #cccccc;
    padding: 15px;
    background: rgba(255,255,255,0.5);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px; /* future proofing */
    -khtml-border-radius: 2px; /* for old Konqueror browsers */
    z-index: 9999;
}

You can test is out on this fiddle

Upvotes: 1

Piyush Arya
Piyush Arya

Reputation: 169

Kindly have a look at the js fiddle demo . Are you looking for this ?

Js Fiddle Demo

<div id="form">
    <form action="index.php" method="post">
        <input type="text" name="name" placeholder="enter first and last name"/>
       <br />
       <input type="image" value="Submit" src="submit-1.gif" id="submit"/>
    </form>
</div>


#iphone {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -350px; /* Half the height */
    margin-left: -266px; /* Half the width */
    z-index: -100;
}
#form {
    position: absolute;
    z-index: 9999;
} 
input {
    position: relative;
    text-align: center;
    font-size: 30px;
    width: 200px;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 5px solid #cccccc;
    padding: 15px;
    background: rgba(255,255,255,0.5);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px; /* future proofing */
    -khtml-border-radius: 2px; /* for old Konqueror browsers */
    z-index: 9999;

}

Upvotes: 0

lukeupup
lukeupup

Reputation: 105

In your page evanwknight.com/United-Redesign:

  1. div#form has margin-top: -500px, therefore it is out of the screen (style.css: line 21)

  2. input#submit has display: none. (style.css: line 99)

Upvotes: 0

Related Questions