html - 为什么我的页面包装器在登录后变小了？

Question

注销时，我的页面包装器是非常浅灰色的背景，会扩展 100% 的页面，但是一旦您登录，它就会变小并调整为成员栏的宽度......

在下面测试用户帐户：

http://creatorsparadise.herobo.com/

用户名：测试密码：TEST123

用于注销的 HTML...

<!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>
 <link rel="stylesheet" type="text/css" href="style.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Creator's Paradise - Home</title>
<style type="text/css">
.auto-style1 {
    text-decoration: none;
}
.auto-style2 {
    border-width: 0px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo" style="height: 75px">
<img src="images/logo.png" />
</div>
<div id="links1">
<ul id="topbar">
<li><a href="" class="auto-style1">home</a></li>
<li><a href="" class="auto-style1">forums</a></li>
<li><a href="" class="auto-style1">themes</a></li>
<li><a href="" class="auto-style1">codes</a></li>
<li><a href="" class="auto-style1">learn</a></li>
<li><a href="" class="auto-style1">more</a></li>
</ul>
</div>
<div id="member">
<center><div id="login">
<form action="" method="post">
  <table cellpadding="2" cellspacing="2" style="height: 18px; width: 1000px;">
           <tr>
              <td colspan="2" style="height: 24px"><? if(!isset($_POST['login'])){?>
        <? }else{ echo "".$final_report."";}?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
      <td width="80" style="height: 24px"><a class="userandpass">Username:</a></td>
      <td width="180" style="height: 24px"><input type="text" name="username" size="25" maxlength="25"></td>
      <td style="height: 24px"></td>
      <td width="80" style="height: 24px"><a class="userandpass">Password:</a></td>
      <td width="180" style="height: 24px"><input type="password" name="password" size="25" maxlength="25"></td>
      <td style="height: 24px">&nbsp; &nbsp;</td>
      <td style="height: 24px"><input type="submit" name="login" value="Login" width="25px"/></td>
          </tr>
          <tr>
          <td><br></td>
          </tr>
                  </table>
</form>
</div>
</center>
</div>
</div>
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside">
</div>
<div id="rightside">
<a class="advertise">Partners</a>
<div class="clickable">
    <a href="URL_OF_LINK_TARGET"> </a>
</div>
<div class="clickable1">
    <a href="URL_OF_LINK_TARGET"> </a>
</div>
<div class="clickable2">
    <a href="URL_OF_LINK_TARGET"> </a>
</div>
<div id="vertical_line_1">
</div>
</div>
</div>
</div>
<div id="barone">
</div>
</div>
<div id="footer">
<div id="infooter">
</div>
</div>
<div id="copyright">
<div id="incopyright">
<a class="copy">Copyright © 2013 CreatorsParadise.com</a>
</div>
</div>
</body>
</html>

用于登录的 HTML...

<!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>
 <link rel="stylesheet" type="text/css" href="style.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Creator's Paradise - Home</title>
<style type="text/css">
.auto-style1 {
    text-decoration: none;
}
.auto-style2 {
    border-width: 0px;
}

</style>
</head>
<body>
<div id="header">
<div id="logo" style="height: 75px">
<img src="images/logo.png" />
</div>
<div id="links1">
<ul id="topbar">
<li><a href="" class="auto-style1">home</a></li>
<li><a href="" class="auto-style1">forums</a></li>
<li><a href="" class="auto-style1">themes</a></li>
<li><a href="" class="auto-style1">codes</a></li>
<li><a href="" class="auto-style1">learn</a></li>
<li><a href="" class="auto-style1">more</a></li>
</ul>
</div>
<div id="member">
<ul id="loggedin">
<li><a href="http://creatorsparadise.herobo.com/membersarea.php">Members Area</a></li>
<li><a href="http://creatorsparadise.herobo.com/settings.php">Settings</a></li>
<li><a href="http://creatorsparadise.herobo.com/logout.php">Logout</a></li>
</ul>
</div>
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside">
</div>
<div id="rightside">
<a class="advertise">Partners</a>
<div class="clickable">
    <a href="URL_OF_LINK_TARGET"> </a>
</div>
<div class="clickable1">
    <a href="URL_OF_LINK_TARGET"> </a>
</div>
<div class="clickable2">
    <a href="URL_OF_LINK_TARGET"> </a>
</div>
<div id="vertical_line_1">
</div>
</div>
</div>
</div>
<div id="barone">
</div>
</div>
<div id="footer">
<div id="infooter">
</div>
</div>
<div id="copyright">
<div id="incopyright">
<a class="copy">Copyright © 2013 CreatorsParadise.com</a>
</div>
</div>
</body>
</html>

两者都使用相同的 CSS 文件...

body{
    background:#333333;
    width:100%;
    margin: 0 auto;
}

#header{
    width:1100px;
    height:110px;
    margin:0 auto;
    margin-bottom:20px;
}

#member{
    width:100%;
    height:32px;
    margin:0 auto;
    margin-top:21px;
    border-top:2px solid #999999;
        border-right:2px solid #999999;
    border-left:2px solid #999999;
        background-color:#575757;
}

.userandpass{
    color:white;
    font-family: "Arial";
    font-size:15px;

}

.yep{
    color:white;
        font-family: "Arial";
        text-decoration: none;

}

a{
    color:red;
        font-family: "Arial";
                text-decoration: none;


}

#loggedin{
    float:right;
    margin-right:30px;
    margin-top:5px;
}

#loggedin li{
    display:inline;
    margin-right:20px;
}

#loggedin li a{
    display:inline;
    color:white;
    font-family: "Arial";
    font-size:17px;
}

#loggedin a:hover{
    display:inline;
    color:#6ad5f1;
    font-family: "Arial";
    font-size:17px;
}


#logo{
    margin-left:30px;
    margin-top:25px;
}

#topbar{
    float:right;
    margin-right:30px;
}

#topbar li{
    display:inline;
    margin-right:20px;
}

#topbar li a{
    display:inline;
    color:white;
    font-family: "Berlin Sans FB Demi";
    font-size:22px;
}

#topbar a:hover{
    display:inline;
    color:#6ad5f1;
    font-family: "Berlin Sans FB Demi";
    font-size:22px;
}

#links1{
    width:700px;
    height:60px;
    float:right;
    margin-top:-65px;
}


#wrapper{
    width:100%;
    height:800px;
    background-color:#F8F8F8;
    border-top:2px solid #999999;
    margin: 0 auto;
        border-bottom:1px solid #999999;

}

#barone{
    width:100%;
    height:20px;
background: rgb(214,214,214); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(214,214,214) 86%, rgb(201,201,201) 96%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(86%,rgb(214,214,214)), color-stop(96%,rgb(201,201,201))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* IE10+ */
background: linear-gradient(to bottom,  rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#c9c9c9',GradientType=0 ); /* IE6-9 */
    border-bottom:1px solid #999999;
    margin: 0 auto;

}

#footer{
    width:100%;
    height:250px;
    background-color:#575757;
        border-top:5px solid #999999;
                border-bottom:1px solid #999999;
                margin: 0 auto;


}

#copyright{
    background:#333333;
    width:100%;
    height:4px;
    margin: 0 auto;
}

#incopyright{
    width:1050px;
    height:4px;
    margin:0 auto;
    margin-bottom:20px;
}


.copy{
    text-align:center;
    color:white;
    font-family: "Berlin Sans FB Demi";
    font-size:15px;
margin-left:385px;
}

#core{
    width:1120px;
    height: 780px;
    margin:0 auto;
    margin-top:15px;
    margin-bottom:25px;
}



div.clickable {
    position:relative;
    margin-left:35px;
    margin-top:65px;
}

div.clickable a {
    position:absolute;
    width:150px;
    height:150px;
    text-decoration:none; 
    background:url(images/square_advert_1.png); 
}

div.clickable a:hover {
    position:absolute;
    width:150px;
    height:150px;
    text-decoration:none; 
    background:url(images/square_advert_2.png); 
}

div.clickable1 {
    position:relative;
    margin-left:35px;
    margin-top:290px;
}

div.clickable1 a {
    position:absolute;
    width:150px;
    height:150px;
    text-decoration:none; 
    background:url(images/square_advert_1.png); 
}

div.clickable1 a:hover {
    position:absolute;
    width:150px;
    height:150px;
    text-decoration:none; 
    background:url(images/square_advert_2.png); 
}


div.clickable2 {
    position:relative;
    margin-left:35px;
    margin-top:515px;
}

div.clickable2 a {
    position:absolute;
    width:150px;
    height:150px;
    text-decoration:none; 
    background:url(images/square_advert_1.png); 
}

div.clickable2 a:hover {
    position:absolute;
    width:150px;
    height:150px;
    text-decoration:none; 
    background:url(images/square_advert_2.png); 
}



#leftsend{
    width:1080px;
    height:760px;
    margin:0 auto;  
}

#rightside{
    width:220px;
    height:760px;
background:#EBEBEB;
float:right;
border: 1px solid #CFCFCF;
}

#vertical_line_1{
    width:1px;
    height:800px;
    background:#B5B5B5;
    float:right;
    margin-right:240px;
    margin-top:-530px;
}

.advertise{
    font-family: Arial;
    font-size: 18px;
    font-weight: bolder;
color:#838383;
    float:right;
    margin-right:75px;
    margin-top:20px;
        text-decoration: underline;


}

#leftside{
    width:815px;
    height:770px;
    float:left;
}

#premium{
margin-left:50px;
}


#login{
    margin:0 auto;
    margin-bottom:21px;
}

我怀疑你会需要 PHP 但在这里它是为了注销

<? ob_start();session_start();include_once"config.php";
if(isset($_SESSION['username']) || isset($_SESSION['password'])){
    header("Location: http://creatorsparadise.herobo.com/index_logged.php");
}else{
if(isset($_POST['login'])){
$username= trim($_POST['username']);
$password = trim($_POST['password']);
if($username == NULL OR $password == NULL){
$final_report.="<a class='yep'>Please fill out all fields or&nbsp;&nbsp;&nbsp; </a><a href='www.http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$check_user_data = mysql_query("SELECT * FROM `members` WHERE `username` = '$username'") or die(mysql_error());
if(mysql_num_rows($check_user_data) == 0){
$final_report.="<a class='yep'>This username does not exist.&nbsp;&nbsp;&nbsp; </a><a href='http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$get_user_data = mysql_fetch_array($check_user_data);
if($get_user_data['password'] != $password){
$final_report.="<a class='yep'>Your password is incorrect. &nbsp;&nbsp;&nbsp;</a><a href='http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$start_idsess = $_SESSION['username'] = "".$get_user_data['username']."";
$start_passsess = $_SESSION['password'] = "".$get_user_data['password']."";
$final_report.="<a class='yep'>Wait one moment...</a> <meta http-equiv='Refresh' content='2; URL=http://creatorsparadise.herobo.com/index_logged.php'/>";
}}}}}
?>

用于登录的 PHP

<? ob_start(); session_start();include_once"config.php";
if(!isset($_SESSION['username']) || !isset($_SESSION['password'])){
    header("Location: http://http://creatorsparadise.herobo.com/");
}else{
$user_data = "".$_SESSION['username']."";
$fetch_users_data = mysql_fetch_object(mysql_query("SELECT * FROM `members` WHERE `username`='".$user_data."'"));
}
?>

score 0 · Accepted Answer

问题是你没有 close #header，所以#wrapper成为它的孩子而不是兄弟姐妹。

然后，在关闭</div>之前添加<div id="wrapper"><div id="header">

score 0 · Accepted Answer

正如 Oriol 所说，您需要为您的#header 插入一个结束 DIV。

这是您需要关闭#header的地方：

    <div id="member">
        <ul id="loggedin">
            ................
        </ul>
    </div>
</div> /*--------Missing closing div--------*/
<div id="wrapper">
    <div id="core">
        <div id="leftsend">
            <div id="leftside"></div>
            <div id="rightside">

html - 为什么我的页面包装器在登录后变小了？

2 回答 2

Related

Reference