I am building a personal website, and want to get a dropdown menu working. So far the first part is working, but the second (dropdown in dropdown) isn't.
It is the "Alternate History" line that isn't showing up.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
#links img,
footer img,
li img,
h1 img,
h2 img,
h3 img,
p img,
.dropme img {
height: 1em;
}
footer {
clear: both;
text-align: center;
padding-top: 2em;
}
body {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 1em;
background: #111;
color: #eee;
}
html {
padding-bottom: 500px;
}
dt {
color: orange;
margin-top: 2px;
}
dd {
margin-bottom: 2px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-align: center;
text-shadow: -1px 3px 3px rgba(0, 0, 0, 0.68);
}
h1 {
color: red;
}
h2 {
color: goldenrod;
}
h3 {
color: teal;
}
a {
color: lime;
text-decoration: none;
}
a:hover {
color: red;
}
.menubar li a {
display: block;
}
.menubar {
display: inline-block;
margin: 0;
padding: 0;
zoom: 1;
}
nav {
margin-left: auto;
margin-right: auto;
font-size: large;
text-align: center;
}
.menubar li {
display: block;
float: left;
width: 100px;
min-height: 1.5em;
background: #222;
border: #444 solid 2px;
padding: 3px;
margin: 4px;
}
.menubar li:hover {
background: #000;
}
.menubar a {
text-decoration: none;
}
.menubar li ul {
visibility: hidden;
position: absolute;
padding-top: 10px;
}
.menubar li:hover ul {
visibility: visible;
padding-left: 0;
margin-left: -7px;
}
.menubar li ul li {
float: none;
position: relative;
width: 150px;
text-align: left;
}
code {
color: green;
/* overflow-x: auto; */
}
/* pre { */
/* background: var(--color256); */
/* border: 1px solid var(--color8); */
/* border-radius: 4px; */
/* padding: 5px; */
/* display: block; */
/* align: center; */
/* max-width: 900px; */
/* /1* background: #1d2021; *1/ */
/* } */
<!DOCTYPE html>
<html lang="en">
<head>
<title>Smash Civilization's Homepage</title>
<link rel='stylesheet' type='text/css' href='style.css'>
<meta charset="utf-8" />
</head>
<body>
<nav>
<ul class="menubar">
<h1><big>Smash Civilization</big></h1>
<div id="links">
<div class="cat">
<li>Home</li>
<li>About</li>
<li>Literature
<ul>
<li>Category</li>
<ul>
<li>Alternate History</li>
</ul>
<li>Dewey Decimal</li>
</ul>
<li>Issues</li>
<li>Podcasts</li>
<li>Talks</li>
<li>Vision</li>
</div>
</div>
</ul>
</nav>
</body>
</html>
What do I need to fix to get this working correctly? Any help is most appreciated!
Related
I'm having trouble making a dropdown menu. My dropdown menu just won't show upon hover, but if I change my display from none to block in .submenu ul li, the dropdown is in the right place.
Can anyone please help me?
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: 'montserrat';
}
.container {
height: 80px;
width: 100%;
background: #34495e;
display: block;
float: right;
}
h1.logo {
font-size: 35px;
font-weight: bold;
color: white;
padding: 0 40px;
line-height: 80px;
float: left;
width: auto;
/* border: 1px red solid; */
}
.logo span {
color: #3498db;
}
nav ul {
float: right;
margin-right: 40px;
/* border: 1px red solid; */
}
nav li {
display: inline-block;
margin: 0 5px;
line-height: 80px;
text-align: center;
/* border: 1px red solid; */
}
nav a {
color: white;
font-size: 18px;
text-transform: uppercase;
padding: 7px 10px;
border-radius: 3px;
}
a.active,
a:hover {
border: 1px solid white;
transition: .5s ease-in;
}
nav #icon {
color: white;
font-size: 30px;
line-height: 80px;
float: right;
margin-right: 40px;
cursor: pointer;
background: #34495e;
border: none;
}
#media (min-width: 980px) {
h1.logo {
font-size: 32px;
padding-left: 60px;
}
nav ul {
margin-right: 20px;
}
nav a {
font-size: 17px;
}
nav #icon {
display: none;
}
div button {
display: none;
}
}
#media(max-width:980px) {
nav #icon {
display: block;
}
nav ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2f3640;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s ease-in;
}
.submenu ul {
top: 100%;
}
nav li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav a {
font-size: 20px;
text-align: center;
}
a.active,
a:hover {
border: none;
color: #3498db;
}
#btn1:hover {
border: none;
color: #3498db;
}
#btn2:hover {
border: none;
color: #3498db;
}
#btn3:hover {
border: none;
color: #3498db;
}
nav ul.show {
left: 0;
}
}
body {
background-image: url('../images/workout.jpg');
background-size: cover;
height: calc(100vh-80px);
}
div .connect {
background: #2f364e;
display: inline-block;
width: auto;
height: auto;
}
#btn1 {
background: #2f364e;
padding: .5em .7em;
border: none;
font-size: 20px;
color: white;
margin: 0 5px;
}
#btn2 {
background: #2f364e;
padding: .5em .7em;
border: none;
font-size: 20px;
color: white;
margin: 0 5px;
}
#btn3 {
background: #2f364e;
color: white;
padding: .5em .7em;
border: none;
font-size: 20px;
margin: 0 5px;
}
.submenu ul li {
display: none;
background: #34495e;
border-radius: 6px;
padding: 0 2px;
text-align: center;
opacity: 0.9;
transition: .5s ease-in;
}
.submenu ul {
margin: 0;
padding: 0;
}
.submenu li a {
margin: 0;
padding: .5em;
}
.main-nav li :hover .submenu {
display: block;
}
<header>
<nav class="container">
<h1 class="logo">Fitness Fir<span>st</span></h1>
<nav class="navbar">
<div class="main-nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Services
<div class="submenu">
<ul>
<li>Membership</li>
<li>Coaching</li>
</ul>
</div>
</li>
<li>Timetables</li>
<li>Contact</li>
<div class="connect" class="button">
<button id="btn1"><i class="fa fa-facebook"></i></button>
<button id="btn2"><i class="fa fa-instagram"></i></button>
<button id="btn3"><i class="fa fa-twitter"></i></button>
</div>
</ul>
<button id="icon"><i class="fa fa-bars" style="font-size:36px"></i></button>
</div>
</nav>
</nav>
</header>
Issue
In your CSS file, you have only hidden the li elements in your submenu:
.submenu ul li {
display: none;
background: #34495e;
border-radius: 6px;
padding: 0 2px;
text-align: center;
opacity: 0.9;
transition: .5s ease-in;
}
But here, you're trying to display the .submenu class, rather than the lis inside. In addition, the :hover selector is not attached to the li
.main-nav li :hover .submenu {
display: block;
}
Fix
To fix this we can change the above selector to the below, so that it is now un-hiding the submenu's lis, when you hover over the parent li (Services button)
.main-nav li:hover .submenu li {
display: block;
}
When I open the Chrome Dev Tools and view my web page at different sizes, white space appears on the sides/bottom of the page. When I refresh the page, this extra space goes away.
This also happens when I change the size of the browser as well. The nav and the main stay in place, but the footer moves up from the bottom. Creating empty space.
Is this normal or am I doing something wrong w/ the CSS? Is there something I can do to make sure that all elements stay at their positions no matter what shape the browser changes to?
/* 1440p */
#media only screen and (max-width: 2560px), screen and (max-height: 1440px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 775px; /* changes */
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 775px; /* changes */
padding: 18.05% 0%; /* changes */
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 150px; /* changes */
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 775px; /* changes */
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
text-align: center;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 16px;
margin: 16px 0px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #222831;
margin: 0 auto;
width: 100%;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links li {
display: inline;
padding: 0px 8px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: inline;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
width: 100%;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* 1080p */
#media only screen and (max-width: 1920px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 775px; /* changes */
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 775px; /* changes */
padding: 14.71% 0%;
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 150px; /* changes */
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 775px; /* changes */
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
text-align: center;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 16px;
margin: 16px 0px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #222831;
margin: 0 auto;
width: 100%;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links li {
display: inline;
padding: 0px 8px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: inline;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
width: 100%;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* iPad Pro */
#media only screen and (max-width: 1024px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 775px; /* changes */
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 775px; /* changes */
padding: 49% 0%;
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 150px; /* changes */
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 775px; /* changes */
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
text-align: center;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 16px;
margin: 16px 0px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #222831;
margin: 0 auto;
width: 100%;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links li {
display: inline;
padding: 0px 8px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: inline;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
width: 100%;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* iPad */
#media only screen and (max-width: 768px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 545px; /* changes */
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 545px; /* changes */
padding: 44.6% 0%;
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 106px; /* changes */
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 545px; /* changes */
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
text-align: center;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 16px;
margin: 16px 0px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #222831;
margin: 0 auto;
width: 100%;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links li {
display: inline;
padding: 0px 8px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: inline;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
width: 100%;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* Surface Duo */
#media only screen and (max-width: 450px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 345px; /* changes */
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 345px; /* changes */
padding: 32% 0%;
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 67px; /* changes */
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 345px; /* changes */
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
text-align: center; /* changes */
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 16px;
margin: 16px 0px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #222831;
margin: 0 auto;
width: 100%;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links li {
display: inline; /* added */
padding: 0px 8px; /* added */
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: inline;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
width: 100%;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* Pixel 2, Pixel 2 XL, iPhone 6/7/8 Plus */
#media only screen and (max-width: 414px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 245px;
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 245px;
padding: 32.2% 0%; /* changes */
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 47px;
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 245px;
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 15px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #1e242c;
margin: 0 auto;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: block;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
/* Galaxy Fold, iPhone 5/SE, Moto G4, Galaxy S5, iPhone 6/7/8, iPhone X */
#media only screen and (max-width: 375px) {
body {
font-family: Helvetica;
margin: 0;
text-transform: capitalize;
}
li {
list-style-type: none;
}
nav, main, section, footer {
display: flex;
}
nav {
background-color: #393e46;
text-align: right;
width: 100%;
position: fixed;
top: 0;
}
#nav-container {
margin: 0 auto;
max-width: 245px;
width: 100%;
}
#nav-links li {
display: inline;
}
#nav-links a:link {
color: #e5e5e5;
text-decoration: none;
}
#nav-links a:visited {
color: #e5e5e5;
}
#nav-links a:hover {
color: #32e0c4;
}
main {
text-align: center;
}
#main-container {
margin: 0 auto;
max-width: 245px;
padding: 32.4% 0%;
}
/* controls the 'FGCPEDIA' masthead */
#logo {
color: #ff0000;
font-size: 47px;
margin: 16px 0px 10px;
text-align: center;
}
/* controls the input field */
input {
background-color: #f1f1f1;
border: 1px solid #f4f6ff;
border-radius: 25px;
font-size: 15px;
padding: 20px 0px;
text-align: center;
width: 100%;
}
/* removes the highlight from the form when selected */
input:focus, textarea:focus {
outline: 0;
}
.footer-container {
margin: 0 auto;
max-width: 245px;
}
#pre-footer-1 {
background-color: #222831;
margin: 0 auto;
}
#pre-footer-1-links {
padding-inline-start: 0px;
}
#pre-footer-1-links li {
display: inline;
}
#pre-footer-1-links a:link {
color: #e5e5e5;
font-size: 15px;
text-decoration: none;
}
#pre-footer-1-links a:hover {
color: #32e0c4;
text-decoration: underline;
}
#pre-footer-2 {
background-color: #1e242c;
margin: 0 auto;
}
/* controls the links in the pre-footer */
#pre-footer-2-links {
margin: 0 auto;
padding-inline-start: 0px;
}
#pre-footer-2-links a:link {
color: #e5e5e5;
display: block;
font-size: 15px;
max-width: 100px;
padding: 16px 0px;
text-align: center;
text-decoration: none;
}
#pre-footer-2-links a:visited {
color: #e5e5e5;
}
#pre-footer-2-links a:hover {
color: #32e0c4;
}
footer {
background-color: #222831;
}
/* controls the copyright text */
#copyright {
color: #e5e5e5;
font-size: 12px;
margin: 16px 0px;
text-align: center;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title.com</title>
<link href="css/stylesheet.css" rel="stylesheet">
</head>
<body>
<!-- nav section -->
<nav id="nav">
<div id="nav-container">
<!-- nav links -->
<ul id="nav-links">
<li>
Sign Up |
</li>
<li>
Log In
</li>
</ul>
</div>
</nav>
<!-- main section -->
<main>
<div id="main-container">
<!-- main row 1 -->
<div>
<h1 id="logo">BIG TITLE</h1>
</div>
<!-- main row 2 -->
<div>
<input type="search" placeholder="Search">
</div>
</div>
</main>
<!-- sub footer 1 section -->
<section id="pre-footer-1">
<div class="footer-container">
<!-- browse the dicitionary links -->
<ul id="pre-footer-1-links">
<li>
Browse the Dictionary:
</li>
<li>
a |
</li>
<li>
b |
</li>
<li>
c |
</li>
<li>
d |
</li>
<li>
e |
</li>
<li>
f |
</li>
<li>
g |
</li>
<li>
h |
</li>
<li>
i |
</li>
<li>
j |
</li>
<li>
k |
</li>
<li>
l |
</li>
<li>
m |
</li>
<li>
n |
</li>
<li>
o |
</li>
<li>
p |
</li>
<li>
q |
</li>
<li>
r |
</li>
<li>
s |
</li>
<li>
t |
</li>
<li>
u |
</li>
<li>
v |
</li>
<li>
w |
</li>
<li>
x |
</li>
<li>
y |
</li>
<li>
z
</li>
</ul>
</div>
</section>
<!-- (4) pre-footer 2 section -->
<section id="pre-footer-2">
<div class="footer-container">
<!-- footer row 2 -->
<div>
<ul id="pre-footer-2-links">
<li>
Home
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
Disclaimer
</li>
</ul>
</div>
</div>
</section>
<!-- (5) footer section -->
<footer>
<div class="footer-container">
<p id="copyright">© 2020 copyright</p>
</div>
</footer>
<!-- links to the js code -->
<script src="js/script.js"></script>
</body>
</html>
I see you have margin:0; for body the extra space shouldn't be added.
But try this:
* { margin: 0; height: 100vh;}
I have a navigation bar which is OK, but just underneath that there is a 1px line that I cannot get rid of, it should be flush with the address underneath. This is the code that I have can anyone suggest anything?
There is also some of the html which was so hard formatting on here anyhow they want me to add more text. So it is the address underneath the naviation
address.space {
width: 100%;
background: #FF9900;
font-family: 'Monserrat', sans-serif;
text-align: center;
display: inline-block;
font-size: 1em;
margin-bottom: 20px;
}
/*menu*/
.nav {
background-color: #3333FF;
width: 100%;
height: 40px;
line-height: 40px;
}
.menu {
font-family: Monserrat, sans-serif;
font-size: 20px;
color: white;
list-style-type: none;
padding: 0;
position: relative;
z-index: 1;
}
.menu a {
text-decoration: none;
color: #fff;
line-height: 40px;
height: 40px;
display: block;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 0 20px 0 20px;
width: 13.5%;
height: 40px;
}
.menu li:visited,
.menu li:active,
.active,
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 14px 0 0;
font-size: 20px;
display: none;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
html,
body,
#main,
#firstside,
.firstsidewider,
#second,
.wide {
width: 100%;
font-size: 1em;
}
h1 span {
display: none;
}
label {
cursor: pointer;
display: block;
color: #fff;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu li a {
border-bottom: 1px solid #F4F4F4;
display: block;
background: #3333FF;
margin: -20px;
padding: 0;
}
.active,
.menu li:hover {
color: #fff;
background: 0;
}
#toggle:checked+.menu {
display: block;
}
<header id="banner">
<div class="nav">
<label for="toggle">☰</label><input id="toggle" type="checkbox">
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts
</li>
<li>Members
</li>
<li>Policies
</li>
<li>Links</li>
<li class="active">
Volunteer/li>
</ul>
</div>
</div>
<address class="space">
Meeting Address: YMCA -The Lecture Room 29 Rush Green
Road
4.00pm - 6.00pm</address>
<section id="leftheader">
<h1>Hubb <span>support group</span></h1>
this is my very first question! Is now a couple of days that I am facing a problementer code here with checkbox creating a slide up/down mobile first menu.
The checkbox is working perfectly but what I am unable to do after is letting the menu slide up and done when checkbox is checked.
Any hint or help for the right direction would be greately appreciated!
<!-- === MENUTOGGLE === -->
<input type="checkbox" name="checkbox" id="menuToggle" value="value">
<label for="menuToggle" class="menu-icon">☰</label>
<!-- ==== HEADER ==== -->
<header>
<div id="logo" class="brand">
<h1><img src="images/logo.png" alt="Hello"></h1>
</div>`enter code here`
<nav class="menu">
<ul>
<li>Work</li>
<li>About</li>
<li>Blog </li>
<li>Contact</li>
</ul>
</nav>
</header>
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
.menu {
width: 100%;
position: absolute;
top: 66px;
}
.menu-icon {
float: right;
color: blueviolet;
cursor: pointer;
padding-top: 25px;
padding-right: 30px;
}
#menuToggle {
display: none;
}
#menuToggle:checked + .menu {
position: absolute;
top: -66px;
}
#logo {
float: none;
text-align: left;
padding-top: 7px;
padding-left: 2em;
}
header {
display: block;
background-color: #FFF;
}
nav {
text-align: center;
}
nav ul {
background-color: rgba(255, 255, 255, 0.15);
float: none;
line-height: 3.5em;
margin: 0;
}
nav ul li {
display: block;
list-style-type: none;
}
nav ul li:hover {
background-color: rgba(171, 193, 242, 0.1);
}
nav ul li a {
text-decoration: none;
color: red;
}
nav ul li a:hover {
color: aqua;
}
/*------------ MEDIUM BIG SCREEN -----------------------*/
#media screen and (min-width:600px) {
#logo {
float: left;
}
.menu {
width: 100%;
height: 70px;
position: inherit;
}
.menu-icon {
display: none;
}
header {
height: 70px;
background-color: #FFF;
margin: auto;
width: 100%;
}
nav ul {
background-color: #FFF;
float: right;
padding: 0.55em 3em 0.55em 1.5em;
height: 70px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
background-color: #FFF;
padding-left: 3em;
}
I have modified few lines of your code. Just check below or https://jsfiddle.net/pr7xf32q/, if this is what you expect.
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
.menu {
width: 100%;
position: absolute;
top: 66px;
}
.menu-icon {
float: right;
color: blueviolet;
cursor: pointer;
padding-top: 25px;
padding-right: 30px;
}
.menu {
display: none;
}
#menuToggle:checked ~ header .menu {
display: block;
}
#logo {
float: none;
text-align: left;
padding-top: 7px;
padding-left: 2em;
}
header {
display: block;
background-color: #FFF;
}
nav {
text-align: center;
}
nav ul {
background-color: rgba(255, 255, 255, 0.15);
float: none;
line-height: 3.5em;
margin: 0;
}
nav ul li {
display: block;
list-style-type: none;
}
nav ul li:hover {
background-color: rgba(171, 193, 242, 0.1);
}
nav ul li a {
text-decoration: none;
color: red;
}
nav ul li a:hover {
color: aqua;
}
/*------------ MEDIUM BIG SCREEN -----------------------*/
#media screen and (min-width:600px) {
#logo {
float: left;
}
.menu {
width: 100%;
height: 70px;
position: inherit;
display: block;
}
.menu-icon {
display: none;
}
header {
height: 70px;
background-color: #FFF;
margin: auto;
width: 100%;
}
nav ul {
background-color: #FFF;
float: right;
padding: 0.55em 3em 0.55em 1.5em;
height: 70px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
background-color: #FFF;
padding-left: 3em;
}
<input type="checkbox" name="checkbox" id="menuToggle" value="value">
<label for="menuToggle" class="menu-icon">☰</label>
<!-- ==== HEADER ==== -->
<header>
<div id="logo" class="brand">
<h1><img src="images/logo.png" alt="Hello"></h1>
</div>
<nav class="menu">
<ul>
<li>Work</li>
<li>About</li>
<li>Blog </li>
<li>Contact</li>
</ul>
</nav>
</header>
So here's what I should be getting
But this is what I'm getting
As you can see the yellow section is missing. Here's my working example http://jsfiddle.net/Qk543/ but for some weird reason I cannot replicate it. Here's my code for the defective page.
<div class="wrap">
<div class="foot">
<ul class="styl">
<a id="html" href="#">
<li style="background: #F16529">
WORD
</li>
</a>
<a id="css" href="#">
<li style="background: #2AA9E0">
WORD
</li>
</a>
<a id="php" href="#">
<li style="background: #8892BF">
WORD
</li>
</a>
<a id="js" href="#">
<li style="background: #F0DB4F">
WORD
</li>
</a>
</ul>
</div>
</div>
And the CSS to it...
h1 {
padding: 80px 0 40px;
font-size: 40px;
line-height: 48px;
color: #505762;
}
.search h1 {
padding: 60px 0;
}
.slidey {
overflow: hidden;
padding: 30px 0;
background: #f3f5f8;
border-bottom: 1px solid #e5e8ed;
}
.js-enabled .slidey {
-webkit-transition: margin-top .2s;
-moz-transition: margin-top .2s;
transition: margin-top .2s;
}
.slidey b, .slidey label {
display: block;
font-weight: 500;
padding-bottom: 15px;
font-size: 15px;
font-weight: 500;
}
.slidey form, .slidey aside {
float: left;
width: 50%;
}
.slidey form input {
padding: 20px;
width: 75%;
}
.slidey li {
list-style: none;
}
.slidey a {
display: block;
text-decoration: none;
color: #717985;
}
.slidey a:hover {
color: #414b59;
}
.slidey li span {
float: right;
opacity: .6;
}
#top {
overflow: hidden;
padding: 20px 35px;
background: #fff;
border-bottom: 1px solid rgba(22,36,54,.1);
}
#top a {
float: left;
font-size: 13px;
font-weight: 500;
text-decoration: none;
color: #8895a7;
}
#top #logo:hover, #top ul a:hover, #top ul .active a, .posts .items li:first-child h2 a:hover, p a:hover {
color: #4171b1;
}
#top ul {
list-style: none;
float: right;
}
#top ul li {
float: left;
padding-left: 40px;
}
#top ul a {
display: inline-block;
color: #555f6d;
}
#top ul img {
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
width: 16px;
height: 16px;
opacity: .4;
}
#top ul a:hover img {
opacity: .7;
}
#top ul a.active img {
opacity: 1;
}
/**
* Index page listing, category listing, search page results
*/
.items {
list-style: none;
}
.items > li {
padding: 70px 0 60px;
color: #97aec9;
background: #3c4552;
}
.posts .items > li:first-child {
background: #fff !important;
padding: 110px 0;
}
.items li h1 a, .posts .items > li:first-child h2 a {
color: #3d4551;
}
.items h1 {
padding: 0 0 8px;
}
.items h1 a {
text-decoration: none;
}
.items h2 {
font-size: 32px;
line-height: 41px;
}
.items h2 a {
display: block;
padding-bottom: 12px;
color: #fff;
color: rgba(176,200,236,.8);
text-decoration: none;
}
.items h2 a:hover {
color: #fff;
}
.items .content {
padding: 10px 0 0;
}
.items .content p {
padding-bottom: 15px;
}
/**
* Pagination
*/
.pagination {
overflow: hidden;
padding: 30px 0;
margin-bottom: 50px;
border-top: 1px solid rgba(22,36,54,.1);
border-bottom: 1px solid rgba(22,36,54,.1);
}
.pagination:empty {
display: none;
}
.pagination a {
float: left;
text-decoration: none;
font-size: 13px;
font-weight: 500;
color: #6f7b8b;
}
.pagination a:hover {
color: #3c4857;
}
.pagination a.next {
float: right;
}
/**
* Give some extra space to single-page wrappers
*/
.content.wrap {
padding-bottom: 50px;
}
.content.wrap ul, .content.wrap ol, .items li ul {
padding: 20px 30px;
}
.content.wrap ul ul, .content.wrap ol ol, .items li ul ul {
padding: 0 20px;
}
/**
* Footnotes and straplines
*/
.footnote, .commentlist time, .items footer {
display: block;
padding: 5px 0 15px;
color: #98a2b1;
font-size: 14px;
font-style: italic;
white-space: nowrap;
}
.footnote {
padding: 20px 0 40px;
}
/**
* Comment form
*/
ul.commentlist {
margin-bottom: 40px;
list-style: none;
border-top: 1px solid rgba(22,36,54,.1);
}
ul.commentlist .wrap {
position: relative;
}
ul.commentlist li {
padding: 40px 0;
border-bottom: 1px solid rgba(22,36,54,.1);
}
ul.commentlist time {
font-size: 13px;
}
ul.commentlist h2 {
font-size: 25px;
line-height: 33px;
}
ul.commentlist .counter {
position: absolute;
right: 0;
top: 0;
font-size: 25px;
font-weight: 300;
color: #cdd2da;
}
#comment {
overflow: hidden;
}
#comment label[for] {
display: none;
}
#comment p {
float: left;
width: 48%;
margin-right: 4%;
margin-bottom: 10px;
text-indent: 0;
}
#comment p + p {
margin-right: 0;
}
#comment p.textarea {
float: none;
width: 100%;
}
#comment input, #comment textarea {
width: 100%;
padding: 10px 15px;
font-size: 15px;
font-weight: normal;
border: 1px solid rgba(22,36,54,.2);
border-radius: 4px;
}
#comment input:focus, #comment textarea:focus {
outline: none;
background: #f7f9fc;
}
#comment textarea {
min-height: 150px;
max-height: 800px;
resize: vertical;
}
#comment button {
display: inline-block;
padding: 9px 18px;
background: #4e82ce;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
}
#comment button:hover {
background: #3c6eb7;
}
*{padding:0;margin:0;}
body {
text-align: center;
padding-top: 50px;
font-family: "Helvetica Neue", sans-serif;
}
.foot{
bottom: 0px;
position: fixed;
width:100%;
margin: 0px;
font-weight: 400;
}
.foot li{
opacity: 0.95;
position: relative;
float: left;
list-style: none;
width: 25%;
height: 60px;
text-align: center;
}
.foot a{
font-size: 1.5em;
color: #fff;
height: 75px;
position: relative;
text-indent: 0;
text-decoration: none;
line-height: 60px;
}
.foot li:nth-child(1){
background: #B36C4E;
}
.foot li:nth-child(2){
background: #2AA9E0;
}
.foot li:nth-child(3){
background: #8892BF;
}
.foot li:nth-child(4){
background: #F0DB4F;
}
a:link{text-decoration: none}
a:hover{text-decoration: none}
a:visited{text-decoration: none}
a:active{text-decoration: none}
.content {
padding-right: 5%;
padding-left: 5%;
}
Any ideas?
You're using floats, so there's a good chance your last element is a pixel or so too wide for the container it's in and it's floating to the next line.
Try changing the width to 24% on each element and you'll probably see all four.
If you don't want to play with the width, try adding this to your css:
* {
box-sizing: border-box;
}
That includes any padding/margin in the width so that 25% width will be the true width instead of 25% plus padding/margin.