2016-11-10 245 views
-1

我的頁面中有一個div「infcont或welcome」,每次刷新頁面時都會改變位置。 它在兩個位置之間擺動。 該頁面已經用PHP(會話腳本)編寫在html中,並且包含了CSS頁面。 我不知道問題出在css頁面還是在php腳本中。 PHPPHP或CSS,div在刷新時移動

<link href="stile.css?1500" rel="stylesheet" type="text/css"> 
<!-- Embed Google font --> 
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'> 
</head> 
<?php 
    session_start(); 
?> 

HTML

<section id="slider"> 
 
    <div id="sfondoc"> 
 
    <div class="infcont"> 
 
    <div class="welcome"> 
 
    <h1>Benvenuti!</h1> 
 
    <div class="login"> 
 
<form method="post" id="form" action="login.php"> 
 
<div class="divw"> 
 
<ul class="form-style-1"> 
 
<li> 
 
<input type="text" id="username" name="username" class="field-dividedww" value="" maxlength="20" placeholder=" username" /> 
 
</li> 
 
<li> 
 
<input type="password" id="psw" name="psw" class="field-dividedwp" value=""/ maxlength="20" placeholder=" password" /> 
 
    </li> 
 
<li> 
 
<input type="submit" id="loginsub" value="LOGIN" /> 
 
</li> 
 
</ul> 
 
</div> 
 
</form> 
 
    </div> 
 
    </div> 
 
<div class="news"> 
 
<h1>News</h1> 
 
<div id="news1"> 
 
</div> 
 
<div id="news2"> 
 
</div> 
 
<div id="news3"> 
 
</div> 
 
<div id="news4"> 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 
    </section>

CSS

.infcont { 
 
    position:relative; 
 
    top: 130px; 
 
    left: 20px; 
 
    width:100%; 
 
    height: 100%; 
 
} 
 

 
.infcont .welcome { 
 
    display:inline-block; 
 
    vertical-align:top; 
 
    margin: 0 auto; 
 
    align:left; 
 
    width: 45%; 
 
    min-height: 48%; 
 
    background: #032322; 
 
    opacity: 0.9; 
 
} 
 

 
.infcont .news { 
 
    display:inline-block; 
 
    vertical-align:top; 
 
    margin: 0 auto; 
 
    min-height: 60%; 
 
    width: 35%; 
 
    background: #032322; 
 
    opacity: 0.9; 
 
} 
 

 
.infcont .news h1 
 
{ 
 
    display:block; 
 
    text-align: left; 
 
    font-family: Raleway_Thin; 
 
    font-size: 15px; 
 
    color:white; 
 
    padding: 0px 0px 0px 10px ; 
 
} 
 

 
.infcont .welcome h1 { 
 
    display:block; 
 
    text-align: center; 
 
    font-family: Raleway_Thin; 
 
    font-size: 30px; 
 
    color:white; 
 
} 
 

 
.infcont .welcome h2 { 
 
    display:block; 
 
    text-align: center; 
 
    font-family: Raleway_Thin; 
 
    font-size: 15px; 
 
    color:white; 
 
} 
 

 
.infcont .welcome .login { 
 
    display:block; 
 
    position:relative; 
 
    left:12%; 
 
    margin 0 auto; 
 
    width:70%; 
 
    height: 200px; 
 
    background:#d46a43; 
 
} 
 

 

 
.infcont .welcome .login .divw { 
 
    display:block; 
 
    position:relative; 
 
    top: 40px; 
 
    left:50px; 
 
    width:80%; 
 
} 
 

 
.infcont .welcome .login .divw .form-style-1 .field-dividedww, .field-dividedwp{ 
 
    width: 100%; 
 
    height: 33px; 
 
    background:#f2f2f2; 
 
} 
 

 
#loginsub { 
 
    position:relative; 
 
    width: 100%; 
 
    background: #032322; 
 
} 
 

 
#loginsub:hover { 
 
    position:relative; 
 
    width: 100%; 
 
    background: #0e1d17; 
 
}

+1

這將有助於獲取代碼樣本。 – rtrigoso

回答

0
.logged_out { 
    margin-right: 22px; 
    position: relative; 
} 

.button { 
    position: absolute; 
    top: 0; 
    right:0; 
} 

鏈接: - HTML button moving on page refresh?

+0

對不起,我不明白爲什麼,以及哪一點是錯誤。 – Emperon