我希望在浏览器最小化时显示最大化窗口的显示。但它应该是不行的。我希望任何能帮助我的人。请。 这是图片。 最大化图片：http://imgur.com/qdAKJiJ 最小化图片：http://imgur.com/MRdiGPm 我希望你能理解我的问题。我希望这个网络的中间部分是白色的，即使浏览器是整页，如图所示它是最小化的。 请帮助我，真的需要帮助。
body {
font: 100% Lucida Sans;
margin: 50px;
width: 1200px;
line-height: 26px;
background-image: url("pink ribbon simple.jpg");
background-size: auto;
background-repeat: no-repeat
}
.main {
position: relative;
padding: 0px;
}
/**************************WELCOME*******************************/
#video { background-color: #f1f1f1;
width: 800px ;
margin:0 auto;
text-align: center;
padding: 50px;
border-style: outset;
border-color: #993366;
border-width: 8px; }
#option div { background: #f1f1f1;
color: black;
padding: 15px;
width: 300px;
margin: 5px; }
.opt { text-align: center; }
.opt div { display: inline-block;
text-align: center; }
/**************************BUTTON*******************************/
.button
{
display: inline-block;
margin-top: 2em;
padding: 0.8em 2em;
background: #8B317D;
line-height: 1.8em;
letter-spacing: 1px;
text-decoration: none;
font-size: 1em;
color: #FFF;
}
.button:before
{
display: inline-block;
background: #ccc;
margin-right: 1em;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 20px;
text-align: center;
color: #272925;
}
.button-small
{
}
/**************************HEADER*******************************/
#header {
border: 8px solid #993366;
background-color: #f1f1f1;
padding: 15px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 35px;
margin-left: 0px;
position: relative;
text-align: center;
text-color: #993366;
}
/**************************SIGN UP*******************************/
#signUp {
background-color: #f1f1f1;
width: 60% ;
margin:0 auto;
text-align: center;
padding: 50px;
border-style: outset;
border-color: #993366;
border-width: 8px;
}
/**************************LOGIN*******************************/
#login {
background-color: #f1f1f1;
width: 60% ;
margin:0 auto;
text-align: center;
padding: 50px;
border-style: outset;
border-color: #993366;
border-width: 8px;
}
/**************************MENU*******************************/
#cssmenu {
position: relative;
height: 44px;
background: #993366;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 35px;
margin-left: 0px;
}
#cssmenu ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
#cssmenu > ul {
position: relative;
display: block;
background: #993366;
width: 100%;
z-index: 500;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu > ul > li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
#cssmenu > ul > #menu-button {
display: none;
}
#cssmenu ul li a {
display: block;
font-family: Helvetica, sans-serif;
text-decoration: none;
}
#cssmenu > ul > li > a {
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
color: #fff;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu li.has-sub::after {
display: block;
content: "";
position: absolute;
width: 0;
height: 0;
}
#cssmenu > ul > li.has-sub::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #993366;
}
#cssmenu > ul > li:hover::after {
border-top-color: #ffffff;
}
#indicatorContainer {
position: absolute;
height: 12px;
width: 100%;
bottom: 0px;
overflow: hidden;
z-index: -1;
}
#pIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #993366;
z-index: -2;
-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-ms-transition: left .25s ease;
-o-transition: left .25s ease;
transition: left .25s ease;
}
#cIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #993366;
top: -12px;
right: 100%;
z-index: -2;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}
#cssmenu ul ul ul {
top: 37px;
padding-left: 5px;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
opacity: 1;
}
#cssmenu ul ul li:hover > ul {
left: 170px;
top: 0;
opacity: 1;
}
#cssmenu.align-right ul ul li:hover > ul {
left: auto;
right: 170px;
top: 0;
opacity: 1;
padding-right: 5px;
}
#cssmenu ul ul li a {
width: 130px;
border-bottom: 1px solid #eeeeee;
padding: 10px 20px;
font-size: 12px;
color: #993366;
background: #ffffff;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu ul ul li:hover > a {
background: #f2f2f2;
color: #8c9195;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
border-bottom: 0;
}
#cssmenu > ul > li > ul::after {
content: '';
border: 6px solid transparent;
width: 0;
height: 0;
border-bottom-color: #993366;
position: absolute;
top: -12px;
left: 30px;
}
#cssmenu.align-right > ul > li > ul::after {
left: auto;
right: 30px;
}
#cssmenu ul ul li.has-sub::after {
border: 4px solid transparent;
border-left-color: #993366;
right: 10px;
top: 12px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub::after {
border-left-color: transparent;
border-right-color: #993366;
right: auto;
left: 10px;
}
#cssmenu ul ul li.has-sub:hover::after {
border-left-color: #ffffff;
right: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#cssmenu.align-right ul ul li.has-sub:hover::after {
border-right-color: #ffffff;
border-left-color: transparent;
left: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: auto;
}
#cssmenu.align-center ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: none;
}
#cssmenu ul {
width: auto;
}
#cssmenu .submenuArrow,
#cssmenu #indicatorContainer {
display: none;
}
#cssmenu > ul {
height: auto;
display: block;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu li,
#cssmenu > ul > li {
display: none;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu ul > li:hover > ul,
#cssmenu ul ul > li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul > li:hover > ul,
#cssmenu.align-right ul ul > li:hover > ul {
position: relative;
left: auto;
top: auto;
opacity: 1;
padding-left: 0;
padding-right: 0;
right: auto;
}
#cssmenu ul .has-sub::after {
display: none;
}
#cssmenu ul li a {
padding: 12px 20px;
}
#cssmenu ul ul li a {
border: 0;
background: none;
width: auto;
padding: 8px 35px;
}
#cssmenu.align-right ul ul li a {
text-align: left;
}
#cssmenu ul ul li:hover > a {
background: none;
color: #8c9195;
}
#cssmenu ul ul ul a {
padding: 8px 50px;
}
#cssmenu ul ul ul ul a {
padding: 8px 65px;
}
#cssmenu ul ul ul ul ul a {
padding: 8px 80px;
}
#cssmenu ul ul ul ul ul ul a {
padding: 8px 95px;
}
#cssmenu > ul > #menu-button {
display: block;
cursor: pointer;
}
#cssmenu #menu-button > a {
padding: 14px 20px;
}
#cssmenu ul.open li,
#cssmenu > ul.open > li {
display: block;
}
#cssmenu > ul.open > li#menu-button > a {
color: #fff;
border-bottom: 1px solid rgba(150, 150, 150, 0.1);
}
#cssmenu ul ul::after {
display: none;
}
#cssmenu #menu-button::after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #7a8189;
border-bottom: 2px solid #7a8189;
right: 20px;
top: 15px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #7a8189;
right: 20px;
top: 25px;
}
#cssmenu ul.open #menu-button::after,
#cssmenu ul.open #menu-button::before {
border-color: #fff;
}
/**************************FORM*******************************/
form {
display: inline-block;
text-align: center;
}
#button {
align: right
border: 8px solid #993366;
}
/**************************MIDDLE*******************************/
.middle {
width: 100%;
position: relative;
margin: 0 auto;
background-color: white;
}
.middle:after {
display: table;
clear: both;
content: '';
}
.container {
width: 100%;
float: left;
overflow: hidden;
background-color: #FF99CC;
}
.content {
padding: 10 320px 0 0;
}
/**************************AWARENESS*******************************/
#awareness {
background-color: #FFF;
width: 60% ;
margin:0 40px;
text-align: center;
padding: 50px;
border-style: solid;
border-color: #993366;
border-width: 8px;
}
#awareness p {
text-align: left;
}
#awareness h3 {
color: #198D83;
text-align: left;
}
/**************************FOOTER*******************************/
.footer {
border: 8px solid #993366;
background-color: #f1f1f1;
text-align: center;
padding: 5px;
margin: 10px 0px 0px 0px;
font-size: 70%;
line-height: 10px;
}
p.explanation { text-align: left; }
#header h1 { color: #E20765; }
#signUp h2, #header h1, #header p { text-align: center; }
#header h1,{ margin: 0;
padding: 0; }<?php
include 'protectedPage.php';
?>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="regLog.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>PINK RIBBON</title>
<body>
<div class="main">
<div id="header">
<h1>JOIN OUR COMMUNITY NOW</h1>
<p>PINK RIBBON COMMUNITY PAGE</p>
</div>
<div id='cssmenu'>
<ul>
<li><a href='main.php'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Assesment Tests</span></a>
<ul>
<li class='last'><a href='#'><span>Risk Assesment Test</span></a></li>
<li class='last'><a href='#'><span>Symptom Test</span></a></li>
<li class='last'><a href='#'><span>Stage Test</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='awareness.php'><span>The Awareness</span></a>
<ul>
<li class='last'><a href='#'><span>About Breast Cancer</span></a></li>
<li class='last'><a href='#'><span>Breast Self Examination</span></a></li>
<li class='last'><a href='#'><span>Symptoms</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Types and Treatment</span></a>
<ul>
<li class='last'><a href='#'><span>Type of Treatment</span></a></li>
<li class='last'><a href='#'><span>Recovery Process</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Lifestyle</span></a>
<ul>
<li class='last'><a href='#'><span>Eat Healthy</span></a></li>
<li class='last'><a href='#'><span>Get Active</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Coping With Cancer</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Join and Share</span></a>
<ul>
<li><a href='#'><span>List of Forum</span></a></li>
<li class='last'><a href='#'><span>Cancer Survivor</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>What Should Us Do</span></a>
<ul>
<li><a href='#'><span>Self Support</span></a></li>
<li><a href='#'><span>Family Support</span></a></li>
<li class='last'><a href='#'><span>Public Support</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='last'><a href='#'><span>Contact Us</span></a></li>
</ul>
</div>
</div>
<br><br>
<div class="middle">
<div class="container">
<main class="content">
<div id="forum">
hi!<?php echo $loginSession;?> <b id="logout"><a href="logout.php">Log Out</a></b>
<p>Forum is bla bla bla bla</p>
<br><br>
<h2>JOIN FORUM</h2>
<br>
<h3>Share your experience of coping with cancer</h3>
<p>Alex said: <b>We need to be patient</b></p>
</div>
</main>
</div>
</div>
<div class="footer">
<strong>COPYRIGHT OF PINK RIBBON INFO4999 SECTION 1</strong>
</div>
</body>
</head>
</html>
答案 0 :(得分：0)
您的屏幕截图显示与您的问题中的代码段不同的效果：在代码段中，当您使窗口变窄而不是白色时，主程序段会变为粉红色。
所以我不确定该网页是否与代码段具有相同的代码，但为了解决代码段中的问题，您需要额外的}来关闭媒体查询。
根据缩进判断，缺失}应该插入到CSS的第469行。
已解决的片段：
body {
font: 100% Lucida Sans;
margin: 50px;
width: 1200px;
line-height: 26px;
background-image: url("pink ribbon simple.jpg");
background-size: auto;
background-repeat: no-repeat
}
.main {
position: relative;
padding: 0px;
}
/**************************WELCOME*******************************/
#video { background-color: #f1f1f1;
width: 800px ;
margin:0 auto;
text-align: center;
padding: 50px;
border-style: outset;
border-color: #993366;
border-width: 8px; }
#option div { background: #f1f1f1;
color: black;
padding: 15px;
width: 300px;
margin: 5px; }
.opt { text-align: center; }
.opt div { display: inline-block;
text-align: center; }
/**************************BUTTON*******************************/
.button
{
display: inline-block;
margin-top: 2em;
padding: 0.8em 2em;
background: #8B317D;
line-height: 1.8em;
letter-spacing: 1px;
text-decoration: none;
font-size: 1em;
color: #FFF;
}
.button:before
{
display: inline-block;
background: #ccc;
margin-right: 1em;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 20px;
text-align: center;
color: #272925;
}
.button-small
{
}
/**************************HEADER*******************************/
#header {
border: 8px solid #993366;
background-color: #f1f1f1;
padding: 15px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 35px;
margin-left: 0px;
position: relative;
text-align: center;
text-color: #993366;
}
/**************************SIGN UP*******************************/
#signUp {
background-color: #f1f1f1;
width: 60% ;
margin:0 auto;
text-align: center;
padding: 50px;
border-style: outset;
border-color: #993366;
border-width: 8px;
}
/**************************LOGIN*******************************/
#login {
background-color: #f1f1f1;
width: 60% ;
margin:0 auto;
text-align: center;
padding: 50px;
border-style: outset;
border-color: #993366;
border-width: 8px;
}
/**************************MENU*******************************/
#cssmenu {
position: relative;
height: 44px;
background: #993366;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 35px;
margin-left: 0px;
}
#cssmenu ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
#cssmenu > ul {
position: relative;
display: block;
background: #993366;
width: 100%;
z-index: 500;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu > ul > li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
#cssmenu > ul > #menu-button {
display: none;
}
#cssmenu ul li a {
display: block;
font-family: Helvetica, sans-serif;
text-decoration: none;
}
#cssmenu > ul > li > a {
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
color: #fff;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu li.has-sub::after {
display: block;
content: "";
position: absolute;
width: 0;
height: 0;
}
#cssmenu > ul > li.has-sub::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #993366;
}
#cssmenu > ul > li:hover::after {
border-top-color: #ffffff;
}
#indicatorContainer {
position: absolute;
height: 12px;
width: 100%;
bottom: 0px;
overflow: hidden;
z-index: -1;
}
#pIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #993366;
z-index: -2;
-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-ms-transition: left .25s ease;
-o-transition: left .25s ease;
transition: left .25s ease;
}
#cIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #993366;
top: -12px;
right: 100%;
z-index: -2;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}
#cssmenu ul ul ul {
top: 37px;
padding-left: 5px;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
opacity: 1;
}
#cssmenu ul ul li:hover > ul {
left: 170px;
top: 0;
opacity: 1;
}
#cssmenu.align-right ul ul li:hover > ul {
left: auto;
right: 170px;
top: 0;
opacity: 1;
padding-right: 5px;
}
#cssmenu ul ul li a {
width: 130px;
border-bottom: 1px solid #eeeeee;
padding: 10px 20px;
font-size: 12px;
color: #993366;
background: #ffffff;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu ul ul li:hover > a {
background: #f2f2f2;
color: #8c9195;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
border-bottom: 0;
}
#cssmenu > ul > li > ul::after {
content: '';
border: 6px solid transparent;
width: 0;
height: 0;
border-bottom-color: #993366;
position: absolute;
top: -12px;
left: 30px;
}
#cssmenu.align-right > ul > li > ul::after {
left: auto;
right: 30px;
}
#cssmenu ul ul li.has-sub::after {
border: 4px solid transparent;
border-left-color: #993366;
right: 10px;
top: 12px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub::after {
border-left-color: transparent;
border-right-color: #993366;
right: auto;
left: 10px;
}
#cssmenu ul ul li.has-sub:hover::after {
border-left-color: #ffffff;
right: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#cssmenu.align-right ul ul li.has-sub:hover::after {
border-right-color: #ffffff;
border-left-color: transparent;
left: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: auto;
}
#cssmenu.align-center ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: none;
}
#cssmenu ul {
width: auto;
}
#cssmenu .submenuArrow,
#cssmenu #indicatorContainer {
display: none;
}
#cssmenu > ul {
height: auto;
display: block;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu li,
#cssmenu > ul > li {
display: none;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu ul > li:hover > ul,
#cssmenu ul ul > li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul > li:hover > ul,
#cssmenu.align-right ul ul > li:hover > ul {
position: relative;
left: auto;
top: auto;
opacity: 1;
padding-left: 0;
padding-right: 0;
right: auto;
}
#cssmenu ul .has-sub::after {
display: none;
}
#cssmenu ul li a {
padding: 12px 20px;
}
#cssmenu ul ul li a {
border: 0;
background: none;
width: auto;
padding: 8px 35px;
}
#cssmenu.align-right ul ul li a {
text-align: left;
}
#cssmenu ul ul li:hover > a {
background: none;
color: #8c9195;
}
#cssmenu ul ul ul a {
padding: 8px 50px;
}
#cssmenu ul ul ul ul a {
padding: 8px 65px;
}
#cssmenu ul ul ul ul ul a {
padding: 8px 80px;
}
#cssmenu ul ul ul ul ul ul a {
padding: 8px 95px;
}
#cssmenu > ul > #menu-button {
display: block;
cursor: pointer;
}
#cssmenu #menu-button > a {
padding: 14px 20px;
}
#cssmenu ul.open li,
#cssmenu > ul.open > li {
display: block;
}
#cssmenu > ul.open > li#menu-button > a {
color: #fff;
border-bottom: 1px solid rgba(150, 150, 150, 0.1);
}
#cssmenu ul ul::after {
display: none;
}
#cssmenu #menu-button::after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #7a8189;
border-bottom: 2px solid #7a8189;
right: 20px;
top: 15px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #7a8189;
right: 20px;
top: 25px;
}
#cssmenu ul.open #menu-button::after,
#cssmenu ul.open #menu-button::before {
border-color: #fff;
}
}
/**************************FORM*******************************/
form {
display: inline-block;
text-align: center;
}
#button {
align: right
border: 8px solid #993366;
}
/**************************MIDDLE*******************************/
.middle {
width: 100%;
position: relative;
margin: 0 auto;
background-color: white;
}
.middle:after {
display: table;
clear: both;
content: '';
}
.container {
width: 100%;
float: left;
overflow: hidden;
background-color: #FF99CC;
}
.content {
padding: 10 320px 0 0;
}
/**************************AWARENESS*******************************/
#awareness {
background-color: #FFF;
width: 60% ;
margin:0 40px;
text-align: center;
padding: 50px;
border-style: solid;
border-color: #993366;
border-width: 8px;
}
#awareness p {
text-align: left;
}
#awareness h3 {
color: #198D83;
text-align: left;
}
/**************************FOOTER*******************************/
.footer {
border: 8px solid #993366;
background-color: #f1f1f1;
text-align: center;
padding: 5px;
margin: 10px 0px 0px 0px;
font-size: 70%;
line-height: 10px;
}
p.explanation { text-align: left; }
#header h1 { color: #E20765; }
#signUp h2, #header h1, #header p { text-align: center; }
#header h1,{ margin: 0;
padding: 0; }<?php
include 'protectedPage.php';
?>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="regLog.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>PINK RIBBON</title>
<body>
<div class="main">
<div id="header">
<h1>JOIN OUR COMMUNITY NOW</h1>
<p>PINK RIBBON COMMUNITY PAGE</p>
</div>
<div id='cssmenu'>
<ul>
<li><a href='main.php'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Assesment Tests</span></a>
<ul>
<li class='last'><a href='#'><span>Risk Assesment Test</span></a></li>
<li class='last'><a href='#'><span>Symptom Test</span></a></li>
<li class='last'><a href='#'><span>Stage Test</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='awareness.php'><span>The Awareness</span></a>
<ul>
<li class='last'><a href='#'><span>About Breast Cancer</span></a></li>
<li class='last'><a href='#'><span>Breast Self Examination</span></a></li>
<li class='last'><a href='#'><span>Symptoms</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Types and Treatment</span></a>
<ul>
<li class='last'><a href='#'><span>Type of Treatment</span></a></li>
<li class='last'><a href='#'><span>Recovery Process</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Lifestyle</span></a>
<ul>
<li class='last'><a href='#'><span>Eat Healthy</span></a></li>
<li class='last'><a href='#'><span>Get Active</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Coping With Cancer</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Join and Share</span></a>
<ul>
<li><a href='#'><span>List of Forum</span></a></li>
<li class='last'><a href='#'><span>Cancer Survivor</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>What Should Us Do</span></a>
<ul>
<li><a href='#'><span>Self Support</span></a></li>
<li><a href='#'><span>Family Support</span></a></li>
<li class='last'><a href='#'><span>Public Support</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='last'><a href='#'><span>Contact Us</span></a></li>
</ul>
</div>
</div>
<br><br>
<div class="middle">
<div class="container">
<main class="content">
<div id="forum">
hi!<?php echo $loginSession;?> <b id="logout"><a href="logout.php">Log Out</a></b>
<p>Forum is bla bla bla bla</p>
<br><br>
<h2>JOIN FORUM</h2>
<br>
<h3>Share your experience of coping with cancer</h3>
<p>Alex said: <b>We need to be patient</b></p>
</div>
</main>
</div>
</div>
<div class="footer">
<strong>COPYRIGHT OF PINK RIBBON INFO4999 SECTION 1</strong>
</div>
</body>
</head>
</html>