Search code examples
htmlformsheaderfixed

Making a form fixed


I am trying to create a fixed header, with 'Welcome' and the following form (well it is actually only the beginning of a form). Welcome stays fixed, because the CSS style page tells all the headings to stay fixed. However my program won't let me put part of the form in a header. I can't figure out of to make this part of the form stay fixed too.

<h1>Welcome</h1>


 <form action="website.php" method="POST">
      <strong>Name:</strong>
        <input type="text" name="user"/>
         <strong>Gender<FONT COLOR="#FF0000">*</FONT></strong>
         <select name="Gender[]" double="double">
           <option value="Female">Female</option>
           <option value="Male">Male</option>
         </select></div>

Solution

  • <div class="fixed">
        <h1>Welcome</h1>
    </div>
    
    <div class="form">
        <form action="website.php" method="POST">
           <strong>Name:</strong>
           <input type="text" name="user"/>
           <strong>Gender<FONT COLOR="#FF0000">*</FONT></strong>
           <select name="Gender[]" double="double">
               <option value="Female">Female</option>
               <option value="Male">Male</option>
           </select>
       </form>
    </div>
    

    And the CSS

    .fixed
    {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        margin:0 auto;
    }
    
    .form
    {
        margin: 80px auto;
        width: 200px;
        line-height: 40px;
    }
    
    input, select
    {
        width: 120px;
    }
    

    Fiddle is here