This is the actual output
How to remove the highlighted section in red, in the actual output?
This is my expected output
JSFiddle Demo link
Example,
.wizard ul
{
list-style: none outside none;
padding: 0;
margin: 0;
width: 4000px;
}
.wizard ul li
{
float: left;
margin: 0;
padding: 0 20px 0 30px;
line-height: 35px;
position: relative;
background: #f5f5f5;
color: #d0d0d0;
font-size: 12px;
cursor: default;
-webkit-transition: all .218s ease;
-moz-transition: all .218s ease;
-o-transition: all .218s ease;
transition: all .218s ease;
}
.wizard ul li .chevron
{
border: 24px solid transparent;
border-left: 14px solid #d4d4d4;
border-right: 0;
border-width: 18px 0 17px 14px;
display: block;
position: absolute;
right: -14px;
top: 0;
z-index: 1;
}
.wizard ul li .chevron:before
{
border: 24px solid transparent;
border-left: 14px solid #f5f5f5;
border-right: 0;
content: "";
display: block;
position: absolute;
right: 1px;
top: -24px;
-webkit-transition: all .218s ease;
-moz-transition: all .218s ease;
-o-transition: all .218s ease;
transition: all .218s ease;
}
.wizard ul li.complete
{
background: #f5f5f5;
color: #444;
}
.wizard ul li.complete:before
{
display: block;
content: "";
position: absolute;
bottom: 0;
left: 0;
right: -1px;
height: 2px;
max-height: 2px;
overflow: hidden;
z-index: 10000;
}
.wizard ul li.complete:hover
{
background: #eee;
cursor: pointer;
}
.wizard ul li.complete:hover .chevron:before
{
border-left: 20px solid #eee;
}
.wizard ul li.complete .chevron:before
{
border-left: 20px solid #f5f5f5;
}
.wizard ul li.active
{
background: #428bca;
color: #262626;
}
.wizard ul li.active:before
{
display: block;
content: "";
position: absolute;
bottom: 0;
left: 0;
right: -1px;
height: 2px;
max-height: 2px;
overflow: hidden;
z-index: 10000;
}
.wizard ul li.active .chevron:before
{
border-left: 14px solid #428bca;
}
.wizard ul li .badge
{
margin-right: 8px;
}
.wizard ul li:first-child
{
-webkit-border-radius: 2px 0 0 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 2px 0 0 0;
-moz-background-clip: padding;
border-radius: 2px 0 0 0;
background-clip: padding-box;
padding-left: 20px;
}
/**/
</style>
<div data-target="#simplewizardinwidget-steps" class="wizard" id="simplewizardinwidget">
<ul class="steps">
<li class="complete" data-target="#simplewizardinwidgetstep1">Personal Information<span class="chevron"></span></li>
<li data-target="#simplewizardinwidgetstep2" class="complete">Qualification<span class="chevron"></span></li>
<li data-target="#simplewizardinwidgetstep3" class="active">Profile<span class="chevron"></span></li>
<li data-target="#simplewizardinwidgetstep2" class="complete">Qualification1<span class="chevron"></span></li>
<li data-target="#simplewizardinwidgetstep2" class="complete">Qualification2<span class="chevron"></span></li>
</ul>
</div>
kindly assist me to achieve this..
Html Part
add overflow: hidden; to .wizard ul
.wizard ul
{ overflow: hidden;
list-style: none outside none;
padding: 0;
margin: 0;
width: 4000px;
}
.wizard ul li
{
float: left;
margin: 0;
padding: 0 20px 0 30px;
line-height: 35px;
position: relative;
background: #f5f5f5;
color: #d0d0d0;
font-size: 12px;
cursor: default;
-webkit-transition: all .218s ease;
-moz-transition: all .218s ease;
-o-transition: all .218s ease;
transition: all .218s ease;
}
.wizard ul li .chevron
{
border: 24px solid transparent;
border-left: 14px solid #d4d4d4;
border-right: 0;
border-width: 18px 0 17px 14px;
display: block;
position: absolute;
right: -14px;
top: 0;
z-index: 1;
}
.wizard ul li .chevron:before
{
border: 24px solid transparent;
border-left: 14px solid #f5f5f5;
border-right: 0;
content: "";
display: block;
position: absolute;
right: 1px;
top: -24px;
-webkit-transition: all .218s ease;
-moz-transition: all .218s ease;
-o-transition: all .218s ease;
transition: all .218s ease;
}
.wizard ul li.complete
{
background: #f5f5f5;
color: #444;
}
.wizard ul li.complete:before
{
display: block;
content: "";
position: absolute;
bottom: 0;
left: 0;
right: -1px;
height: 2px;
max-height: 2px;
overflow: hidden;
z-index: 10000;
}
.wizard ul li.complete:hover
{
background: #eee;
cursor: pointer;
}
.wizard ul li.complete:hover .chevron:before
{
border-left: 20px solid #eee;
}
.wizard ul li.complete .chevron:before
{
border-left: 20px solid #f5f5f5;
}
.wizard ul li.active
{
background: #428bca;
color: #262626;
}
.wizard ul li.active:before
{
display: block;
content: "";
position: absolute;
bottom: 0;
left: 0;
right: -1px;
height: 2px;
max-height: 2px;
overflow: hidden;
z-index: 10000;
}
.wizard ul li.active .chevron:before
{
border-left: 14px solid #428bca;
}
.wizard ul li .badge
{
margin-right: 8px;
}
.wizard ul li:first-child
{
-webkit-border-radius: 2px 0 0 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 2px 0 0 0;
-moz-background-clip: padding;
border-radius: 2px 0 0 0;
background-clip: padding-box;
padding-left: 20px;
}
<br/>
<br/>
<div data-target="#simplewizardinwidget-steps" class="wizard" id="simplewizardinwidget">
<ul class="steps">
<li class="complete" data-target="#simplewizardinwidgetstep1">Personal Information<span class="chevron"></span></li>
<li data-target="#simplewizardinwidgetstep2" class="complete">Qualification<span class="chevron"></span></li>
<li data-target="#simplewizardinwidgetstep3" class="active">Profile<span class="chevron"></span></li>
<li data-target="#simplewizardinwidgetstep2" class="complete">Qualification1<span class="chevron"></span></li>
<li data-target="#simplewizardinwidgetstep2" class="complete">Qualification2<span class="chevron"></span></li>
</ul>
</div>
Related
Ive been trying to put in this image but the issue i'm getting here is that the image keeps on passing the footer and I cant seem to solve it. Please help me out. The image size for the "batmanshop" is width=890 and height=2000.
Here is the CSS code and below is the HTML code
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/background.png);
margin: 0;
padding: 0;
color: #000;
}
IMG.titleImage {
margin-left: 300px;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
word-wrap: break-word;
}
a img {
border: none;
}
a:link {
color: black;
}
a:visited {
color: #6E6C64;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
height:100%;
background-color: #FFF;
margin: 0 auto;
}
.header {
background-image:url(images/headerbg.png);
height:140px;
}
.content {
width:100%;
height:100%;
background-color: white;
}
.footer {
padding: 10px 0;
background-color: #F1F8E0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
//Navigation Bar
.nav, .nav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
}
.nav {
/* Layout & positioning */
position: relative;
margin: auto; /* Centering the menu */
height: 46px;
width: 960px;
text-align: center;
/* Background & effects */
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
background: #65c0bb;
background-image:url(images/navImage.png);
}
.nav>li {
margin: 0;
line-height: 1;
padding: 0;
display: inline;
position: relative;
margin: 0 12px;
}
.nav::after, .nav::before {
content: "";
display: block;
position: absolute;
top: 6px;
height: 0px;
width: 0px;
border: 23px solid #65c0bb;
z-index: -1;
}
/* The left ribbon */
.nav::before {
border-left-color: transparent;
left: -30px;
}
/* The right ribbon */
.nav::after {
border-right-color: transparent;
right: -30px;
}
.nav>li>a {
display: inline-block;
padding: 15px 20px;
position: relative;
font-family: 'Oswald', sans-serif;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-o-transition: color .3s linear;
-ms-transition: color .3s linear;
transition: color .3s linear;
}
.nav>li>a:hover, .nav>li:hover>a {
color: #eae8a5;
}
.nav>li>a::after {
content: "";
height: 15px;
width: 15px;
position: absolute;
right: -20px;
top: 16px;
display: block;
}
.nav>li:last-child>a::after {
display: none;
}
.nav ul {
position: absolute;
left: -9999px;
padding-top: 10px;
border-bottom: 1px solid #ccc;
opacity: 0;
-webkit-transition: opacity .3s linear;
-moz-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
-ms-transition: opacity .3s linear;
}
.nav>li:hover>ul {
left: 0;
opacity: 1;
top: 30px;
}
.nav ul li:hover>ul {
left: 150px;
opacity: 1;
top: -11px;
padding-left: 12px;
border-bottom: 0;
box-shadow: none;
}
.nav ul li {
display: block;
position: relative;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 150px;
text-align: justify;
z-index: 9;
background: #eee;
box-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
}
.nav ul li a {
font-family: "Oswald", sans-serif;
font-size: 14px;
text-decoration: none;
display: block;
padding: 7px 12px 7px 20px;
color: #65c0bb;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-ms-transition: color .3s linear;
-o-transition: color .3s linear;
}
.nav ul li:hover>a, .nav ul li a:hover {
color: #4db6b0;
}
.nav ul li:hover {
background: #f7f7f7;
}
.nav ul ul li:last-child {
border-bottom: 1px solid #ccc;
}
.nav ul ul li {
box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
}
.nav ul::after, .nav ul::before {
content: "";
display: block;
z-index: 1;
position: absolute;
height: 9px;
width: 9px;
}
.nav>li>ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 5px;
left: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.nav>li>ul::before {
height: 1px;
width: 12px;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 10px;
left: 24px;
z-index: 99;
}
.nav ul ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 20px;
left: 8px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
.nav ul ul::before {
height: 10px;
width: 1px;
background: #eee;
z-index: 99;
top: 20px;
left: 12px;
}
.titleImage2 {
margin-left: 250px;
}
.birthdayDream {
padding-right: 15px;
padding-left: 15px;
float: right;
}
p1 {
display: block;
margin-top: 30px;
padding-right: 15px;
padding-left: 15px;
}
form {
margin-left: auto;
margin-right: auto;s
display:inline-block;
width:600px;
}
input {
float:right;
margin-right: 50px;
clear:both;
}
input2 {
float:left;
}
.row {
margin-left: 200px;
}
.batmanImage {
margin-left: 180px;
}
.batmanshop {
height:auto;
margin: 0 auto;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
<title>Birthday Planner - Home</title>
</head>
<body>
<div class="container">
<div class="header">
</div>
<ul class="nav">
<li>
Home
</li>
<li>
Themes
<ul>
<li>Boys Party Theme</li>
<li>Girls Party Theme</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
<li>Sign Up</li>
</ul>
<div class="content">
<br/>
<IMG class="batmanImage">
<img src="images/batmantitle.jpg" name="Title" width="600" height="206">
</IMG>
<p>All you need to do is select the desired theme and provide us the necessary details. We will do the rest. The items listed below are what will be provided when you order this theme. Don't need to worry about anything else. Just a click of a button and we will get our team to handle the rest for you.
</p>
<IMG class="batmanshop">
<img src="images/batmanshop.jpg" name="Title">
</IMG>
</div>
<div class="footer">
<div class="navigationbar">
<ul class="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Terms and Conditions
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Whatever you want to achieve, you can not do that :
<IMG class="batmanshop">
<img src="images/batmanshop.jpg" name="Title">
</IMG>
I replaced that by: <img class="batmanshop" src="images/batmanshop.jpg" name="Title" />
Anyway, even with your code, I do not see the image passing over the footer.
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/background.png);
margin: 0;
padding: 0;
color: #000;
}
IMG.titleImage {
margin-left: 300px;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
word-wrap: break-word;
}
a img {
border: none;
}
a:link {
color: black;
}
a:visited {
color: #6E6C64;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
height:100%;
background-color: #FFF;
margin: 0 auto;
}
.header {
background-image:url(images/headerbg.png);
height:140px;
}
.content {
width:100%;
height:100%;
background-color: white;
}
.footer {
padding: 10px 0;
background-color: #F1F8E0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
//Navigation Bar
.nav, .nav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
}
.nav {
/* Layout & positioning */
position: relative;
margin: auto; /* Centering the menu */
height: 46px;
width: 960px;
text-align: center;
/* Background & effects */
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
background: #65c0bb;
background-image:url(images/navImage.png);
}
.nav>li {
margin: 0;
line-height: 1;
padding: 0;
display: inline;
position: relative;
margin: 0 12px;
}
.nav::after, .nav::before {
content: "";
display: block;
position: absolute;
top: 6px;
height: 0px;
width: 0px;
border: 23px solid #65c0bb;
z-index: -1;
}
/* The left ribbon */
.nav::before {
border-left-color: transparent;
left: -30px;
}
/* The right ribbon */
.nav::after {
border-right-color: transparent;
right: -30px;
}
.nav>li>a {
display: inline-block;
padding: 15px 20px;
position: relative;
font-family: 'Oswald', sans-serif;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-o-transition: color .3s linear;
-ms-transition: color .3s linear;
transition: color .3s linear;
}
.nav>li>a:hover, .nav>li:hover>a {
color: #eae8a5;
}
.nav>li>a::after {
content: "";
height: 15px;
width: 15px;
position: absolute;
right: -20px;
top: 16px;
display: block;
}
.nav>li:last-child>a::after {
display: none;
}
.nav ul {
position: absolute;
left: -9999px;
padding-top: 10px;
border-bottom: 1px solid #ccc;
opacity: 0;
-webkit-transition: opacity .3s linear;
-moz-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
-ms-transition: opacity .3s linear;
}
.nav>li:hover>ul {
left: 0;
opacity: 1;
top: 30px;
}
.nav ul li:hover>ul {
left: 150px;
opacity: 1;
top: -11px;
padding-left: 12px;
border-bottom: 0;
box-shadow: none;
}
.nav ul li {
display: block;
position: relative;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 150px;
text-align: justify;
z-index: 9;
background: #eee;
box-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
}
.nav ul li a {
font-family: "Oswald", sans-serif;
font-size: 14px;
text-decoration: none;
display: block;
padding: 7px 12px 7px 20px;
color: #65c0bb;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-ms-transition: color .3s linear;
-o-transition: color .3s linear;
}
.nav ul li:hover>a, .nav ul li a:hover {
color: #4db6b0;
}
.nav ul li:hover {
background: #f7f7f7;
}
.nav ul ul li:last-child {
border-bottom: 1px solid #ccc;
}
.nav ul ul li {
box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
}
.nav ul::after, .nav ul::before {
content: "";
display: block;
z-index: 1;
position: absolute;
height: 9px;
width: 9px;
}
.nav>li>ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 5px;
left: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.nav>li>ul::before {
height: 1px;
width: 12px;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 10px;
left: 24px;
z-index: 99;
}
.nav ul ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 20px;
left: 8px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
.nav ul ul::before {
height: 10px;
width: 1px;
background: #eee;
z-index: 99;
top: 20px;
left: 12px;
}
.titleImage2 {
margin-left: 250px;
}
.birthdayDream {
padding-right: 15px;
padding-left: 15px;
float: right;
}
p1 {
display: block;
margin-top: 30px;
padding-right: 15px;
padding-left: 15px;
}
form {
margin-left: auto;
margin-right: auto;s
display:inline-block;
width:600px;
}
input {
float:right;
margin-right: 50px;
clear:both;
}
input2 {
float:left;
}
.row {
margin-left: 200px;
}
.batmanImage {
margin-left: 180px;
}
.batmanshop {
height:auto;
margin: 0 auto;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
<title>Birthday Planner - Home</title>
</head>
<body>
<div class="container">
<div class="header">
</div>
<ul class="nav">
<li>
Home
</li>
<li>
Themes
<ul>
<li>Boys Party Theme</li>
<li>Girls Party Theme</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
<li>Sign Up</li>
</ul>
<div class="content">
<br/>
<IMG class="batmanImage">
<img src="images/batmantitle.jpg" name="Title" width="600" height="206">
</IMG>
<p>All you need to do is select the desired theme and provide us the necessary details. We will do the rest. The items listed below are what will be provided when you order this theme. Don't need to worry about anything else. Just a click of a button and we will get our team to handle the rest for you.
</p>
<img class="batmanshop" src="http://placehold.it/890x2000&text=Batmanshop" name="Title" />
</div>
<div class="footer">
<div class="navigationbar">
<ul class="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Terms and Conditions
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I would like to have the display for maximized window as shown when browser is minimized. However it does not work it is supposed to be. I hope any of who can help me. Please.
This are the pictures.
Maximized picture : http://imgur.com/qdAKJiJ
Minimized picture : http://imgur.com/MRdiGPm
I hope you can understand my question. I want my middle part of this web in white color even when the browser is full page as shown it is minimized.
Please help me, really need help.
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">Log Out</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>
Your screen shots show a different effect from the code snippet in your question: in the snippet, the main block becomes pink when you make the window narrower instead of white.
So I'm not sure if the webpage has the same code as the snippet, but to solve the problem in the snippet, you need an extra } to close the media query.
Judging by the indentation, the missing } should be inserted in line 469 of the css.
Solved snippet:
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">Log Out</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>
I have this nested menu, where everything works fine expect from the third hierarchy level.
I have the code and the result here: http://jsfiddle.net/wvsL9/
If you hover the menu: "PRODUKTER" and then "PRIVAT", you see the problem with the width is not "auto".
I am really stuck here, and I have tried a lot of variations.
Can you find out why it doesn't work as I want?
Thanks in advance
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0.9em;
font-family:'Helvetica Neue For BBC W01 Bd';
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
display: inline-block;
position: relative;
}
#menu li:last-child {
border: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu a {
display: inline-block;
padding: 50px 8px;
color: #000;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
#menu li:hover > a {
background: #000;
color: #fff;
}
#menu li.current-menu-item a{
background: #000;
color: #FFF;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
width: 100%;
top: 120px;
left: 0;
z-index: 1;
background: #000;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul li {
position: static;
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding-top: 10px;
padding-bottom: 10px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: #fff;
}
#menu ul a:hover {
background-color: #f60c0c;
}
#menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
}
#menu ul ul {
top: 0;
left: 100%;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
}
#menu ul ul li{
display: block;
width: auto;
float: none;
}
#menu ul ul li a{
display: block;
padding: 10px 50px;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
You can work with width: auto; on the correct element. Just add this:
#menu ul ul {
width: auto;
}
JSFiddle example
Add this css
#menu .sub-menu{width:auto; min-width:100%;}
Here is example
http://jsfiddle.net/wvsL9/3/
I am attempting to create a CSS3 hover menu that transitions out and shows sub menus below it. The problem I am having is that I can't position the submenus below each other. Currently, I have this effect - http://jsfiddle.net/7pz3g/1/
Here is the HTML markup -
<nav id="navbar">
<ul class="iconContainer">
<li>
<i class="fa fa-home fa-lg"></i>
<ul id="wrapperFirst" class="extMenu">
<li><h3>Testing</h3></li>
<li>SubMenu
<ul id="wrapperSecond" class="subMenu">
<li><h3>ORGANIZATIONS</h3></li>
<li>Reddit</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
CSS MarkUp -
li {
list-style: none;
}
#navbar {
background-color: #333333;
position: fixed;
text-align: center;
left: 0;
top: 0;
height: 100%;
z-index: 100;
width: 60px;
display: table;
}
#navbar .iconContainer li {
color: white;
padding: 0 2%;
border-bottom: 1px solid rgba(255, 255, 255, .2);
cursor: pointer;
height: 60px;
}
#navbar .iconContainer li:first-child {
border-top: 1px solid rgba(255, 255, 255, .2);
}
#navbar i {
text-decoration: none;
color: white;
line-height: 60px;
font-size: 1.5em;
text-shadow: 1px 1px 1px #000;
width: 60px;
opacity: .5;
}
#navbar .iconContainer {
padding: 0;
margin: 0;
display: table-cell;
vertical-align: middle;
z-index: 510;
}
#navbar li:hover i {
background-color: #222222;
opacity: 1;
}
#navbar li:hover #wrapperFirst.extMenu {
left: 60px;
}
#wrapperFirst.extMenu {
background-color: #222;
height: 100%;
left: -1000px;
position: fixed;
top: 0;
bottom: 0;
width: 250px;
padding: 0px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#wrapperFirst.extMenu .raq {
text-align: right;
float: right;
color: #75A4C7;
}
#wrapperFirst.extMenu li:hover #wrapperSecond.subMenu {
left: 311px;
}
#wrapperFirst.extMenu li {
padding: 10px 20px;
text-align: left;
height: auto;
text-decoration: none;
line-height: 40px;
font-size: 1em;
text-shadow: 1px 1px 1px #000;
color: white;
opacity: 1;
border-bottom: 1px solid rgba(255, 255, 255, .2);
cursor: pointer;
}
#wrapperFirst.extMenu li:first-child {
border-top: 1px solid rgba(255, 255, 255, .2);
}
#wrapperSecond.subMenu {
display:table-cell;
background-color: #222;
height: 100%;
left: -1000px;
position: fixed;
top: 0;
bottom: 0;
width: 600px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#wrapperSecond.subMenu h3 {
text-align: center;
}
#wrapperSecond.subMenu .subtitle {
font-family: 'SourceSansProRegular';
font-size: .6em;
}
#wrapperSecond.subMenu li a {
text-decoration: none;
color: #75A4C7;
line-height: 40px;
font-size: 1em;
text-shadow: 1px 1px 1px #000;
}
#wrapperSecond.subMenu li {
padding: 10px 20px;
text-align: left;
height: auto;
text-decoration: none;
line-height: 40px;
font-size: 1em;
text-shadow: 1px 1px 1px #000;
color: white;
opacity: 1;
border-bottom: 1px solid rgba(255, 255, 255, .2);
cursor: pointer;
}
#wrapperSecond.subMenu li {
opacity: 1;
}
#wrapperSecond.subMenu {
width: 600px;
opacity: 1;
}
#wrapperSecond.subMenu h3 {
text-align: center;
}
#wrapperSecond.subMenu .subtitle {
font-family: 'SourceSansProRegular';
font-size: .6em;
}
#wrapperSecond.subMenu li a {
text-decoration: none;
color: #75A4C7;
line-height: 40px;
font-size: 1em;
text-shadow: 1px 1px 1px #000;
}
I would like to have each submenu transition below their root menus, but yet still stay on top of the other elements on the page. Any ideas? Thanks!!!
http://jsfiddle.net/ypzcG/
#wrapperSecond.subMenu li {
opacity: 1;
position: relative;
margin-top: 70px;
}
The title says it all, I want to remove the search icon from the menu bar and replace it simple with the word "Search"
My style.css looks like this:
.site-header .search-field {
background-color: transparent;
/*background-image: url(images/search-icon.png);*/
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
z-index: 1000;
}
And nowhere else in any file can I find a link to the search-icon.png image.
The last screenshot shows that the search box has dropped down. How can I position it in line horizontally with the other menu items, as far off to the right as the menu will allow?
The CSS used to produce the nag-menu is:
/**
* 4.2 Navigation
* ----------------------------------------------------------------------------
*/
.main-navigation {
z-index: 1000;
clear: both;
margin: 0 auto;
/*max-width: 1920px;*/
max-width: 1080px;
min-height: 45px;
position: relative;
}
ul.nav-menu,
div.nav-menu > ul {
margin: 0;
padding: 0 40px 0 0;
}
.nav-menu li {
display: inline-block;
position: relative;
}
.nav-menu li a {
color: #3c3c3c;
display: block;
font-size: 15px;
/*line-height: 1;*/
/*padding: 15px 20px;*/
text-decoration: none;
}
.nav-menu li:hover > a,
.nav-menu li a:hover {
/*background-color: #220e10;*/
/*background-color: #333333;*/
color: #666;
}
.nav-menu .sub-menu,
.nav-menu .children {
/*background-color: #220e10;*/
background-color: #ffffff;
/*border: 2px solid #f7f5e7;*/
border: 2px solid #ffffff;
border-top: 0;
display: none;
padding: 0;
position: absolute;
left: -2px;
z-index: 1000;
box-shadow: 0 0 8px rgba(0,0,0,.3);
top: 100%;
}
.nav-menu .sub-menu ul,
.nav-menu .children ul {
border-left: 0;
left: 100%;
top: 0;
}
ul.nav-menu ul a,
.nav-menu ul ul a {
color: #3c3c3c;
margin: 0;
width: 200px;
}
ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover {
/*background-color: #db572f;*/
}
ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul {
display: block;
}
.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
/*background-color: #666;*/
color: #666;
/*font-style: italic;*/
}
/* Arrow underneath */
/*
.nav-menu .current_page_item > a:after,
.nav-menu .current_page_ancestor > a:after,
.nav-menu .current-menu-item > a:after,
.nav-menu .current-menu-ancestor > a:after {
width: 0;
height: 0;
position: absolute;
content:"";
display:block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #666;
left: 50%;
margin-left: -6px;
}
*/
.menu-toggle {
display: none;
}
/* Navbar */
.navbar {
/*background-color: #f7f5e7;*/
/*background-color: #fff;*/
margin: 0 auto;
max-width: 1600px;
width: 100%;
}
.site-header .search-form {
position: absolute;
right: 20px;
}
.site-header .search-field {
background-color: transparent;
/*background-image: url(images/search-icon.png);*/
/*background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;*/
border: none;
cursor: pointer;
/*height: 37px;*/
margin: 0 auto;
/*padding: 0 0 0 34px;*/
position: relative;
/*-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;*/
/*width: 0;*/
width: 120px;
min-height: 45px;
z-index: 1000;
}
.site-header .search-field:focus {
/*background-color: #fff;*/
/*border: 2px solid #c3c0ab;*/
/*border: 1px solid #666666;*/
cursor: text;
outline: 0;
color: #666666;
/*width: 230px;*/
}
EDIT:
All you honestly have to do is change the width to about >100px and remove the background-img. That will show the placeholder text and when you click on it, it'll launch the animation like before.