3
こんにちは、私たちはユニプロジェクトに取り組んでいます。私はデザインに問題があります。クライアントからの要件として直線勾配を使用する必要があります。通常のページでは正常に動作しますが、「フォームをデータをテーブルに送信する」フォームを使用するページで使用すると、画面が複数の部分に分割されます。ときに2時には時々。ここリニアグラデーションCSSを使用しているときに背景画面が分割される
は、問題の画像 the problem screenshot
は、それはここでは、このshould be like this image
のような他のページの背景
のように少ないように見えるべきであるである私のCSSコードは
@charset "utf-8";
/* CSS Document */
body,ol,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,fieldset,legend,input,textarea,select{background-color:none; list-style:none; margin:0; padding:0;}
body {background:linear-gradient(to bottom, #86090F 0%, #EA3C22 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); font-family:Roboto,sans-serif; font-weight:300;}
a{display:block; text-decoration:none;}
a:hover{text-decoration:none;}
img{border:none; vertical-align:middle;}
.clear{overflow:hidden; display:block; height:0; font-size:0; line-height:0; clear:both;}
.fl{float:left;width:100%;}
.fr{float:right;width:100%;}
.logout{
display: inline-block;
padding: 15px 25px;
font-size: 24px;
width: 6%;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #63513D;
border: none;
border-radius: 15px;
float:left;
margin-top: 15px;
}
.button {
display: inline-block;
padding: 15px 25px;
font-size: 15px;
width: 15%;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #63513D;
background-color: #D6D2C2;
border: none;
border-radius: 15px;
margin-top: 15px;
}
.button:hover {background-color: #EAE8E0;}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
} \t \t \t
.container{
\t width:70%;
\t \t \t margin:0 auto;
\t \t \t font-size: 150%;
\t \t \t
\t }
header{
width:100%;
\t \t \t margin:0 auto;
\t \t \t height:85px;
\t \t \t border-bottom:2px solid #404040;
\t \t \t background-color:rgb(245, 242, 228);
}
\t b
.img{
\t width:150px;
\t border-right:1px solid #333;
\t height:85px;
\t margin-left:2%;
\t \t }
\t \t \t
.content1{ width:50%;
\t \t \t height:20%;
\t
font-size: 20px;
\t \t \t text-align: left;
margin:0 auto;
\t \t }
\t \t
.content1 h3{
font: blone 14px Arial;
\t \t \t text-align:center;
\t \t \t margin-left:5px;
\t \t \t }
.content1 table{
\t width:100%;
\t \t \t \t
\t \t \t \t border-bottom:1px solid #999;
\t \t \t \t border-right:1px solid #999;
\t \t \t \t border-left:none;
\t \t \t \t border-top:none;
\t \t \t \t margin-top:10px;
\t \t \t \t margin-left:5px;
\t \t \t \t background-color: rgb(245, 242, 228);
\t \t \t \t }
.content1 table td{
\t width:200px;
\t \t \t \t text-align:left;
\t \t \t \t border-left:1px solid #999;
border-top:1px solid #999;
\t \t \t \t border-right:none;
\t \t \t \t border-bottom:none;
\t \t \t \t height:25px;
\t \t \t \t font: 20px Impact, Arial;
\t \t \t \t line-height: 95%;
}
.content1 table tr{
border:none;
\t \t \t \t
\t \t \t \t
}
.box{
\t width:1050px;
\t margin:0 auto;
\t margin-top:15px;
\t }
.content2{
width:490px;
float:left;
\t \t
\t \t
\t \t }
.content2 h3{
font:blone 14px Arial;
\t \t \t text-align: center;
\t \t \t }
.lyb_box{
width:100%;
\t \t margin-top:15px;
\t \t height:400px;
\t \t border:1px solid #000;
\t \t margin-left:1px;
\t \t background-color: rgb(245, 242, 228); \t
\t \t }
.lyb_box_nr{
float:left;
\t \t width:90%;
\t \t margin-top:20px;
\t \t }
.lyb_box_nr p{
font:normal 14px Arial;
\t \t \t float:left;
\t \t \t width:100%;
\t \t \t margin-left:7px;
\t \t \t
\t \t \t
\t }
.lyb_box_nr input{
width:100%;
\t \t \t \t float:left;
\t \t \t \t margin-left:10px;
\t \t \t \t height:30px;
\t \t \t \t border:1px solid #CCC;
}
.lyb_box_nr select{
width:100%;
\t \t \t \t float:left;
\t \t \t \t margin-left:20px;
\t \t \t \t height:30px;
\t \t \t \t border:1px solid #CCC;
}
article{
\t width:40%;
\t \t border:2px solid #404040;
\t \t float:right;
}
.search{
\t float:left;
\t width:150px;
\t border-radius:3px;
\t margin-top:20px;
\t color:#000;
\t text-align:center;
\t height:25px;
\t margin-left:330px;
\t }
\t
.content3{
float:right;
\t \t width:500px;
\t \t height:400px;
\t \t border:1px solid #404040;
\t \t margin-top:31px;
\t \t
}
.content4{
float:center;
\t \t width:500px;
\t \t height:400px;
\t \t border:1px solid #404040;
\t \t margin-left:700px;
\t \t
\t \t }
\t \t
#nav{
\t color: red;
\t text-align: center;
\t text-transform: uppercase;
\t line-height: 2.8;
\t word-spacing: 10px;
width: 80%;
margin: -50px auto;
height: 46px;
border-radius: 8px;
border: 1px solid #cbcbcb;
border-bottom: 4px solid #adadad;
\t margin-right:0px;
\t
}
#nav a{
display: block;
width: 30%;
height: 46px;
line-height: 40px;
float: left;
border-bottom: 4px solid #adadad;
text-align: center;
text-decoration: none;
color: black;
\t
}
#nav a:active{
\t color:green;
background-color: white;
\t }
#nav a:hover{
border-bottom: 4px solid red;
color: red;
}
footer{
clear: both;
font-weight: bold;
font-size: 25px;
color: #86090F; \t
margin: 0 px auto;
position: absolute;
bottom: 0px;
width: 100%;
\t background-color:#2D251A
\t
}
#footer a:hover{text-decoration:underline;background-color:withe;}
#footer a, #footer a:visited {color:#fff; text-decoration:none;}
#legal {background-color:white; clear:both; list-style-type:none; overflow:hidden; padding:20px 120px 20px 24px;} \t
li.first {padding-left:45%;}
li:not(#flag) {float:left; padding-right:25px;list-style-type:none;}
#k{
\t padding-left:40%;
\t \t width:500px;
\t \t height:400px;
\t \t border:0 px solid #404040;
\t \t margin-top:-10px;
\t
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<? include("header.html"); ?>
</head>
<body>
\t \t \t \t <h4><?php echo $e; ?><h4>
<div>
<form name="form1" action="" method="post" enctype="multipart/form-data">
<section class="content1">
\t \t \t \t \t <table border="1">
\t \t \t \t \t \t <tr>
<td>
<label>
User Name</label>
</td>
<td>
<input type="text" name="username" style="width:200px;" required />
</td>
</tr>
\t \t \t \t \t \t <tr>
<td>
<label>
Password</label>
</td>
<td>
<input type="text" name="password" style="width:200px;" required />
</td>
</tr>
\t \t \t \t \t \t <tr>
<td>
<label>
Name</label>
</td>
<td>
<input type="text" name="name" style="width:200px;" required />
</td>
</tr>
<tr>
<td>
<label>
Email</label>
</td>
<td>
<input type="text" name="email" style="width:200px;" required />
</td>
</tr>
\t \t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t \t
\t \t \t \t \t \t <tr>
<td>
<label>
Campus</label>
</td>
<td>
<input type="text" name="campus" style="width:200px;" required />
</td>
</tr>
\t \t \t \t \t \t
\t \t \t \t \t \t <tr>
<td>
<label>
</label>
</td>
<td>
<input name="submit" type="submit" value="Submit" />
</td>
</tr>
\t \t \t \t \t \t
</table>
\t \t \t \t \t </section>
\t \t \t \t \t
</form>
\t \t \t \t \t <div clear="both"></div>
\t \t \t \t \t <a href="index.php" class="button">Back to management</a><br/>
</body>
</html>私は本当に長い時間この問題に悩まされています。何がここに間違っていますか？
私はこのラインが、その動作していない本体{背景追加：直線勾配（下に、＃86090F 0％、＃EA3C22 100％）を繰り返しスクロール0 RGBA（0、0を0,0）;フォントファミリ：Roboto、sans-serif;フォントウェイト：300;分 - 高さ：100％; – Gurminder
@Gurminderもあなたのhtmlにそれを加えますか？ 'html、 本文{ min-height：100％; } ' –
メインhtmlページ
でこれを追加しましたが、動作しません。 – Gurminder