CODEWITHSUNDEEP
htmlcssstylessubmitpadding
Navjot Singh
Navjot Singh

Reputation: 47

why I cant position my submit button in alignment with other details

I am trying to position my button in alignment with other details above it. I am using padding-left to change its position to left by 10px so as to make its position parallel to above details . Also, I have used position command for button but still it is not working. How can I do that. I have used position and padding-left attribute in div class of function as well as in style tab of paragraph but there is no output. Somehow when is write position-right:30px in div class="submit1" it literally shifts the button to right according to position set in px.

<html>
      <head>
        <meta charset="utf-8" />
        <meta name="Navjot Singh" content="" /><!-- TODO: enter your name as the content attribute value -->
        <meta name="Practical 1" content="Practical 1" />
        <title>"Contact us"</title>
        <style type="text/css">
           Body{ font-family: arial; padding: 60px ; font-size: 14px;}
           P{padding: 10px;}
           h1{ font-family: 'Times New Roman', Times, serif; font-size: 36px;
               font-weight: bold;  }
           h2{font-size: 16px; font-weight: normal;}
           #message {margin-top:3px; margin-bottom:3px; padding:3px;}
           #submit input {background-color: #1565c0; color: #fff ; 
            font-weight: bold; padding-top:10px; padding-bottom: 10px;
            padding-right: 25px; padding-left: 25px;}
          
            
            
        </style>
      </head>
      <body>
    
        <img src = "phone12.png"  width="300" height="auto" align="right"/> 
        <h1>Contact us</h1>
        <h2>Fill out the following form to get in touch</h2>
        <p>
            <div style="padding-bottom:20px;">
              Name <br />
             <input type="text" name="required" placeholder="required" size="70" maxlength="70" 
             style="font-size:10pt;height:23pt" /> <br />
            </div>
          
            <div style="padding-bottom:20px;">
            Phone Number <br />
             <input type="text" name="required" size="70" maxlength="30" 
             style="font-size:10pt;height:23pt"  /> 
            </div>
            
    
             <div style="padding-bottom:20px;">
            Email <br />
             <input type="text" name="required" size="70" maxlength="30" 
             style="font-size:10pt;height:23pt" placeholder="required"/> 
             </div>
    
             <div style="padding-bottom:20px;">
            Subject <br />
             <input type="text" name="required" size="70" maxlength="30"
              style="font-size:10pt;height:23pt" > 
             </div>
    
             <div id="message">
            Message <br />
             <input type="text" name="required" width="500px" size="70" maxlength="0" 
              style="font-size:10pt;height:60pt" placeholder="required"  > 
             </div>
    
             <div class="submit1" style ="position:-10px;">
            <p id="submit"> 
             <input  type="submit"  value="SUBMIT"  
             style="font-size:10pt;height:30pt"   /> 
             </p>
    
            <p>
              By contacting us,you agree to your information being collected 
              in accordance with our <a href="privacy-policy.html"> Privacy Policy 
              </P>
            </div>
           </p>
          
            
    
      </body>
      </html>

Upvotes: 1

Views: 35

Answers (1)

Crystal
Crystal

Reputation: 1992

Do you mean something like this? I edited some of your code. you don't have a closing a for your link. You dont need to put p inside all your div you can add margin instead of padding. Let me know if this is what you are looking for.

<html>
      <head>
        <meta charset="utf-8" />
        <meta name="Navjot Singh" content="" /><!-- TODO: enter your name as the content attribute value -->
        <meta name="Practical 1" content="Practical 1" />
        <title>"Contact us"</title>
        <style type="text/css">
           Body{ font-family: arial; padding: 60px ; font-size: 14px;}
           P{padding: 10px 0px;}
           h1{ font-family: 'Times New Roman', Times, serif; font-size: 36px;
               font-weight: bold;  }
           h2{font-size: 16px; font-weight: normal;}
           #message {margin-top:3px; margin-bottom:3px; padding:3px;}
           #submit input {background-color: #1565c0; color: #fff ; 
            font-weight: bold; padding:10px 25px; margin-left: 3px;margin-top:15px;
          }
          
            
            
        </style>
      </head>
      <body>
    
        <img src = "phone12.png"  width="300" height="auto" align="right"/> 
        <h1>Contact us</h1>
        <h2>Fill out the following form to get in touch</h2>
        
            <div style="padding-bottom:20px;">
              Name <br />
             <input type="text" name="required" placeholder="required" size="70" maxlength="70" 
             style="font-size:10pt;height:23pt" /> <br />
            </div>
          
            <div style="padding-bottom:20px;">
            Phone Number <br />
             <input type="text" name="required" size="70" maxlength="30" 
             style="font-size:10pt;height:23pt"  /> 
            </div>
            
    
             <div style="padding-bottom:20px;">
            Email <br />
             <input type="text" name="required" size="70" maxlength="30" 
             style="font-size:10pt;height:23pt" placeholder="required"/> 
             </div>
    
             <div style="padding-bottom:20px;">
            Subject <br />
             <input type="text" name="required" size="70" maxlength="30"
              style="font-size:10pt;height:23pt" > 
             </div>
    
             <div id="message">
            Message <br />
             <input type="text" name="required" width="500px" size="70" maxlength="0" 
              style="font-size:10pt;height:60pt" placeholder="required"  > 
             </div>
    
             <div class="submit1" >
            <div id="submit"> 
             <input  type="submit"  value="SUBMIT"  
             style="font-size:10pt;height:30pt"   /> 
             </div>
    
            <p>
              By contacting us,you agree to your information being collected 
              in accordance with our <a href="privacy-policy.html"> Privacy Policy </a>
              </p>
            </div>
           
          
            
    
      </body>
      </html>

Upvotes: 1

Related Questions