Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Kristen Aldrich 14Kristen Aldrich 14 

How to add space between header (CSS) and body of apex form in Visualforce page?

I'm not a developer but hoping this is a simple code adjustment! We have a Visualforce page where the CSS header overlaps with the first line of the body. I'm pasting my VF page code below. How can I adjust to ensure our logo header doesn't overlap with the body? Thank you!  
<apex:page id="forgotPassword" showHeader="false" controller="ChangePasswordController" standardStylesheets="false" doctype="html-5.0" sidebar="false" title="Forgot Password">
 <apex:form >
 
<html>
  <head>
    <title>Forgot Password</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <link rel="stylesheet"  type="text/css" href="/resource/1512657972000/CSSStyle/CSSStyle/Style/main.css"/>
     <link type="text/css" rel="stylesheet" href="/resource/1512657972000/CSSStyle/CSSStyle/Style/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="/resource/1512657972000/CSSStyle/CSSStyle/Style/customAMC.css"/>
    <script src="//code.jquery.com/jquery.min.js"></script>
 
  </head>  
  <body>
    <div class="body-container">
      <div class="head">
        <h1 class="maintitle">Change Password</h1>
        <p class="maindescription">Please provide your new Password</p>
         <label>Your password must be 8 characters long and a mix of letters and numbers. Please don't use your previous three passwords.</label>
                <br></br>
                <br></br>
      </div>
      <div class="login-form">
      <apex:pageMessages ></apex:pageMessages>
             <!-- <div class="form-group">  
              <apex:outputLabel value="Old Password" for="oldpsw" />              
                <apex:inputSecret required="true" id="oldpsw"  value="{!oldPassword}" style="form-control" />
              </div> -->
              <apex:outputPanel styleClass="form-group" layout="block" rendered="{ !$Site.IsPasswordExpired}" >
                  <apex:outputLabel value="Old Password" for="oldpsw" rendered="{ !$Site.IsPasswordExpired}" />              
                <apex:inputSecret required="true" id="oldpsw"  value="{!oldPassword}" rendered="{ !$Site.IsPasswordExpired}" style="form-control" title="Please use 8 letter password with mix of Alphanumeric Characters"/>
              </apex:outputPanel>

              <div class="form-group">
                <label>New Password</label>
                <apex:inputSecret id="psw" value="{!newPassword}" style="form-control" title="Please use 8 letter password with mix of Alphanumeric Characters"/>
              </div>
              <div class="form-group">
                <label>Verify New Password</label>
                <apex:inputSecret id="vpsw" value="{!verifyNewPassword}" style="form-control" title="Please use 8 letter password with mix of Alphanumeric Characters"/>
              </div>
        <div class="form-group">
        <apex:commandButton id="cpwbtn" action="{!changePassword}" value="{!$Label.site.change_password}" styleclass="btn btn-submit"/>
        </div></div>
    </div>
    <div class="body-container footer">
      <div class="helpcontent footermember">Need Help? Email <a href="mailto:amcinformation@outdoors.org">amcinformation@outdoors.org</a></div>
      <div class="copyright footermember">
         &copy; Copyright 2018 All Rights Reserved. Appalachian Mountain Club, 10 City Square, Boston, MA 02129 
        P: 617-523-0655 F: 617-523-0722 | <a href="#">Privacy Policy</a>
      </div>
    </div>
    <div class="brandbar"></div>
  </body>
</html>
 
 </apex:form>
  
</apex:page>

 
ANUTEJANUTEJ (Salesforce Developers) 
Hi Kristen,

When I try in my org as there are no files I am getting a simple plain HTML webpage can you add an image of the result you are getting to check further.

Output Image I got:

User-added image

Looking forward to your response.

Thanks.