html - 我怎样才能阻止我的表格与我的标题重叠

问题描述

<?php
// Start the session
session_start();
?>
<html>
    <head>
        <title>Student Registeration</title>
        <link rel="stylesheet" src="text/css" >
        <style>
    .login-box
    {
        width:280px;
        position:relative;
        top:30%;
        left:50%;
        transform: translate(-50%,-50%);
        color:black;    
    }
     h1
     {
         margin: 0; 
         float:left;
         font-size:38px;
         border-bottom: 6px solid gold;
         margin-bottom: 40px;
         padding:0 0 20px;
         text-align:center;
     }
    .login-box p
     {
         margin: 0;
         padding: 0;
         font-size: 18px;   
    }
    .login-box input
    {
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
        margin: 8px 0;
        padding:9px 0;  
    }
    .login-box input\[type="text"\], input\[type="password"\], input\[type="email"\]
     {
         border: none;
         outline: none;
         border-bottom: 1px solid gold;
         background: none;
         color:gold;
         font-size: 16px;
         width:100%;
         float:left;    
     }
    .button
         {
             font-family: century gothic;
             border: none;
             color: white;
             padding: 15px 30px;
             text-align: center;
             text-decoration: none;
             display: inline-block;
             font-size: 16px;
             margin: 10px 2px;
             cursor: pointer;
             border-radius: 19px;
             background-image: linear-gradient(to right, gold , black);
         }
        </style>
    </head>
    <body>
        <?php
            include'header.php';
        ?>
        <div class="login-box">
            <form method="post" action="authen.php" <?php echo $_SERVER\['PHP_SELF'\]; ?>>
                        <h1>Create Account</h1>
                        <p><b>Full Name : </b></p>
                                    <input type="text" class="textarea" id="fname" name=" fname" placeholder="Full Name" style="width:100%;" name="fname" pattern="\[A-Za-z \]+" required >
                            <p><b>Email :</b></p> 
                                    <input type="email" class="textarea" id="email" placeholder="Email" style="width:100%;" name="email" pattern="\[a-z0-9._%+-\]+@\[a-z0-9.-\]+\.\[a-z\]{2,}$" required>
                            <p><b>Username :</b></p>
                                    <input type="text" id="user" class="textarea" placeholder="Username" style="width:100%;" name="user" pattern="\[A-Za-z0-9\]{5,}" required>
                            <p><b>Phone :</b></p>
                                    <input type="text" id="phno" class="textarea" placeholder="Phone Number" style="width:100%;" name="phno" pattern="\[0-9\]{10}" required>
                            <p><b>Password :</b></p>
                                    <input type="password" id="pass" placeholder="Password" class="textarea" style="width:100%;" name="pass" pattern="\[A-Za-z0-9\]{6,}" required>
                            <p><b>Confirm Password :</b></p>
                                    <input type="password" id="cpass" class="textarea" placeholder="Confirm Password" style="width:100%;" name="cpass" pattern="\[A-Za-z0-9\]{6,}" required>
                            <p><b>Choose the following:</b></p>
                            <input type="radio" class="textarea" id="pfaculty" name="Faculty" value="Permanent faculty"  required >Permanent Faculty
                            <input type="radio" class="textarea" id="vfaculty" name="Faculty" value="Visiting faculty" required >Visiting Faculty
                            <input type="submit" name="submit" class="Button"id="btn" value="Submit">
            </form>
        </div>
    </body>
</html>

header.css

/*Index CSS*/
body{
    color:#008080;
    font-family:Century Gothic;
    position: relative;
}

/*Naavigation Bar*/
div{
    height:70px;
}
a{
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;  
}
#Name{
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 2px 5px;
    font-size: 30px;
    margin-top:12px;

}
.header {
    overflow: hidden;
    background-color: black;
    position: fixed;
    width: 100%;
    top: 0;
}
.links{
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    margin-top:10px;
    text-decoration: none;
    padding: 14px 16px;
    font-size: 20px;
}
.links:hover {
    background-color: white;
    color: #008080;
    border-radius: 10px;
    transition: 0.2s;
}

.header .icon {
    display: none;
}
@media screen and (max-width: 600px) {
    .links.icon {
        float: right;
        display: block;
    }
}
@media screen and (max-width: 600px) {
    .header.responsive {
        position: relative;
    }

    .header.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

] 1 ] 1

在这段代码中，我的表单与标题重叠当我在页面中向下滚动时，它会滚动表单并重叠标题。正如我给出的图片，您可以看到我的表单与我的标题重叠，这是不应该发生的。它不应该与标题交叉，这就是问题所在。而且我的单选按钮文本也没有以正确的格式出现我已经尝试了很多东西但它没有发生。所以请任何人都可以解决这个错误。

标签： htmlcss

html - 我怎样才能阻止我的表格与我的标题重叠

问题描述

解决方案

推荐阅读