So I'm creating this website for a student project and my content on the top of the page is disappearing under the fixed nav bar I made.
How do I make it so the content area starts under the nav bar and doesn't end up under it?
(Temporarily fixed with <br> tags)
See code below:
HTML and CSS (The About page I'm working on)
#font-face {
font-family: "Roboto Light";
src: url(font/Roboto-Light.ttf)
}
#font-face {
font-family: "Roboto Regular";
src: url(font/Roboto-Regular.ttf);
}
#font-face {
font-family: "Roboto Medium Italic";
src: url(font/Roboto-MediumItalic.ttf);
}
#media (max-width:1200px) {
.indexsIMG img {
display: none !important;
}
}
body {
margin: 0 0;
padding: 0 0;
font-family: "Roboto Light";
background-color: #3aafa9;
}
.topbox {
font-size: 25px;
}
.topbox ul {
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3aafa9;
max-width: 100%;
}
.flex-navbar {
display: flex;
justify-content: center;
margin-right: 15%;
font-family: "Roboto Light";
}
.leftbox {
margin-left: 5%;
font-family: "Roboto Medium Italic";
color: #171717;
}
.flex-navbar .active {
color: #171717;
}
.topbox li a {
display: block;
color: #feffff;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 1em;
float: left;
text-align: center;
}
.flex-navbar li a:hover {
color: #2b7a78;
}
.indexClickbox{
background-color: #2b7a78;
}
.index{
display: flex;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
}
.index h1{
font-size: 8rem;
}
.index p{
font-size: 2rem;
}
.indexOpphavIMG{
font-size: 1rem;
}
.indexTXT{
width: 50%;
float: right;
padding-left: 2%;
}
.index img{
max-width: 100%;
border-radius: 10px;
}
.indexIMG{
width: 50%;
float: left;
padding-top: 7%;
}
.index button{
width: auto;
margin-left: 5%;
background-color:#2b7a78;
border: none;
font-weight: 500;
font-size: 3rem;
color: #3aafa9;
border-radius: 4px;
}
.index button:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
cursor: pointer;
}
.index a:link{
text-decoration: none;
}
.container {
display: block;
width: 0 auto;
text-align: center;
}
.box {
display: inline-block;
text-align: center;
padding: 0 5%;
}
.footer{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Stylesheet.css">
</head>
<body>
<nav class="topbox">
<ul>
<li class="leftbox"><a class="active" href="index.html">INOVA</a></li>
<div class="flex-navbar">
<li><a class="active" href="about.html">About</a></li>
<li>Innovation Camps</li>
<li>Contact</li>
</div>
</ul>
</nav>
<br>
<br>
<div class="container">
<div class="box">
<h1>About Inova</h1>
</div>
</div>
<footer>
<div class="footer">
<p></p>
</div>
</footer>
</body>
</html>
By adding padding to the top of the body, you can push the main content down so that it isn't below the fixed navbar:
#font-face {
font-family: "Roboto Light";
src: url(font/Roboto-Light.ttf)
}
#font-face {
font-family: "Roboto Regular";
src: url(font/Roboto-Regular.ttf);
}
#font-face {
font-family: "Roboto Medium Italic";
src: url(font/Roboto-MediumItalic.ttf);
}
#media (max-width:1200px) {
.indexsIMG img {
display: none !important;
}
}
body {
margin: 0 0;
padding: 80px 0 0;
font-family: "Roboto Light";
background-color: #3aafa9;
}
.topbox {
font-size: 25px;
}
.topbox ul {
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3aafa9;
max-width: 100%;
background-color: rgba(0, 0, 0, .2);
}
.flex-navbar {
display: flex;
justify-content: center;
margin-right: 15%;
font-family: "Roboto Light";
}
.leftbox {
margin-left: 5%;
font-family: "Roboto Medium Italic";
color: #171717;
}
.flex-navbar .active {
color: #171717;
}
.topbox li a {
display: block;
color: #feffff;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 1em;
float: left;
text-align: center;
}
.flex-navbar li a:hover {
color: #2b7a78;
}
.indexClickbox {
background-color: #2b7a78;
}
.index {
display: flex;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
}
.index h1 {
font-size: 8rem;
}
.index p {
font-size: 2rem;
}
.indexOpphavIMG {
font-size: 1rem;
}
.indexTXT {
width: 50%;
float: right;
padding-left: 2%;
}
.index img {
max-width: 100%;
border-radius: 10px;
}
.indexIMG {
width: 50%;
float: left;
padding-top: 7%;
}
.index button {
width: auto;
margin-left: 5%;
background-color: #2b7a78;
border: none;
font-weight: 500;
font-size: 3rem;
color: #3aafa9;
border-radius: 4px;
}
.index button:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
cursor: pointer;
}
.index a:link {
text-decoration: none;
}
.container {
display: block;
width: 0 auto;
text-align: center;
}
.box {
display: inline-block;
text-align: center;
padding: 0 5%;
}
.footer {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Stylesheet.css">
</head>
<body>
<nav class="topbox">
<ul>
<li class="leftbox"><a class="active" href="index.html">INOVA</a></li>
<div class="flex-navbar">
<li><a class="active" href="about.html">About</a></li>
<li>Innovation Camps</li>
<li>Contact</li>
</div>
</ul>
</nav>
<div class="container">
<div class="box">
<h1>About Inova</h1>
</div>
</div>
<footer>
<div class="footer">
<p></p>
</div>
</footer>
</body>
</html>
The easiest way in my opinion is replacing position: fixed with position: sticky and also move this property to .topbox because it is the element, that you want to keep at the top of viewport.
Keep in mind that position: sticky has smaller browser support,
body {
margin: 0 0;
padding: 0 0;
font-family: "Roboto Light";
background-color: #3aafa9;
}
.topbox {
font-size: 25px;
top: 0;
position: sticky;
}
.topbox ul { width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3aafa9;
max-width: 100%;
}
.flex-navbar {
display: flex;
justify-content: center;
margin-right: 15%;
font-family: "Roboto Light";
}
.leftbox {
margin-left: 5%;
font-family: "Roboto Medium Italic";
color: #171717;
}
.flex-navbar .active {
color: #171717;
}
.topbox li a {
display: block;
color: #feffff;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 1em;
float: left;
text-align: center;
}
.flex-navbar li a:hover {
color: #2b7a78;
}
.indexClickbox {
background-color: #2b7a78;
}
.index {
display: flex;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
}
.index h1 {
font-size: 8rem;
}
.index p {
font-size: 2rem;
}
.indexOpphavIMG {
font-size: 1rem;
}
.indexTXT {
width: 50%;
float: right;
padding-left: 2%;
}
.index img {
max-width: 100%;
border-radius: 10px;
}
.indexIMG {
width: 50%;
float: left;
padding-top: 7%;
}
.index button {
width: auto;
margin-left: 5%;
background-color: #2b7a78;
border: none;
font-weight: 500;
font-size: 3rem;
color: #3aafa9;
border-radius: 4px;
}
.index button:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
cursor: pointer;
}
.index a:link {
text-decoration: none;
}
.container {
display: block;
width: 0 auto;
text-align: center;
}
.box {
display: inline-block;
text-align: center;
padding: 0 5%;
}
.footer {
}
<body>
<nav class="topbox">
<ul>
<li class="leftbox"><a class="active" href="index.html">INOVA</a></li>
<div class="flex-navbar">
<li><a class="active" href="about.html">About</a></li>
<li>Innovation Camps</li>
<li>Contact</li>
</div>
</ul>
</nav>
<div class="container">
<div class="box">
<h1>About Inova</h1>
</div>
</div>
<footer>
<div class="footer">
<p></p>
</div>
</footer>
</body>
Related
I am trying to make a dropdown menu at the top of my page; however, I am unable to properly align the edges of the two list item elements.
Picture of the problem:
This is my code:
#font-face {
font-family: "Chivo Mono";
src: url("Resource/Fonts/ChivoMono-Black.ttf") format("ttf");
font-weight: normal;
font-style: normal;
}
* {
box-sizing: border-box;
font-family: 'Trebuchet MS';
color: #777;
}
html,
body {
margin: 0;
padding: 0;
}
.emails {
height: 100px;
width: 250px;
}
.nav li {
display: inline-block;
}
.header {
background-color: #A7C7E7;
background-size: cover;
padding-bottom: 40px;
margin-bottom: 20px;
}
.nav a {
display: inline-block;
padding: 1em;
color: white;
text-decoration: none;
}
.nav a:hover {
background-color: rgba(255, 150, 190, 1);
}
.main-nav {
text-align: center;
font-size: 1.7em;
border-bottom: 3px solid rgba(255, 150, 190, 1);
}
.main-nav li {
padding: 0 5%;
}
.page-name {
text-align: center;
margin: 0;
font-size: 4em;
font-family: "Chivo Mono";
font-weight: normal;
color: rgba(255, 150, 150, 1);
}
.footer {
background-color: #A7C7E7;
margin: 50px 0px;
padding: 50px 0px;
border: white;
}
.footer h1 {
padding: 0px 0px;
}
.footer textarea {
margin-top: 2em;
width: 400px;
height: 200px;
}
.body-text {
max-width: 900px;
margin: 0 auto;
padding: 0 1.5em;
}
.footer {
text-align: center;
margin-top: 10em;
margin-bottom: 0em;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.email-button {
padding: 1em;
}
.article-title h2 {
text-align: center;
color: Black;
}
.coming-soon {
color: white;
}
.nav li {
color: white;
}
.email-button button {
background-color: rgba(255, 150, 190, 1);
color: white;
padding: 7px 20px;
font-size: 1.3em;
border-radius: 10px;
border: 0px;
transition-duration: 0.9s;
}
.button:hover {
background-color: white;
color: #A7C7E7;
}
.dropdown ul li a {
font-size: .6em;
}
.dropdown ul a {
display: inline-block;
background-color: rgba(255, 150, 190, 1);
text-align: center;
}
p {
text-align: center;
}
<header class="header">
<nav class="nav main-nav">
<ul>
<li>Home</li>
<li class="dropdown"><a>Rules</a>
<ul>
<li>Bus</li>
</ul>
</li>
</ul>
</nav>
<div>
<h1 class="page-name">About</h1>
</div>
</header>
<section class="body-text">
<div>
<p text>To be writen...
<p>
</div>
</section>
I have tried messing with the paddings and margins, as well as display types.
Try to adjust it with position as below:
nav .dropdown {
position: relative;
}
nav .dropdown ul {
position: absolute;
}
nav > ul .dropdown > ul,
nav > ul .dropdown > ul li {
padding-left:0;
}
Here is the doc for position if you want to know more.
DEMO
#font-face {
font-family: "Chivo Mono";
src: url("Resource/Fonts/ChivoMono-Black.ttf") format("ttf");
font-weight: normal;
font-style: normal;
}
* {
box-sizing: border-box;
font-family: 'Trebuchet MS';
color: #777;
}
html,
body {
margin: 0;
padding:0;
}
p {
text-align:center;
}
.emails {
height:100px;
width:250px;
}
.nav li {
display: inline-block;
}
.header {
background-color:#A7C7E7;
background-size: cover;
padding-bottom: 40px;
margin-bottom: 20px
}
.nav a {
display: inline-block;
padding:1em;
color: white;
text-decoration: none;
}
.nav a:hover {
background-color: rgba(255, 150, 190, 1);
}
.main-nav {
text-align: center;
font-size: 1.7em;
border-bottom: 3px solid rgba(255, 150, 190, 1);
}
.main-nav li {
padding: 0 5%;
}
.page-name {
text-align: center;
margin: 0;
font-size: 4em;
font-family: "Chivo Mono";
font-weight: normal;
color: rgba(255, 150, 150, 1);
}
.footer {
background-color: #A7C7E7;
margin: 50px 0px;
padding: 50px 0px;
border: white;
}
.footer h1 {
padding: 0px 0px;
}
.footer textarea {
margin-top: 2em;
width: 400px;
height: 200px;
}
.body-text {
max-width: 900px;
margin: 0 auto;
padding: 0 1.5em;
}
.footer {
text-align: center;
margin-top: 10em;
margin-bottom: 0em;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.email-button {
padding: 1em;
}
.article-title h2 {
text-align: center;
color: Black;
}
.coming-soon {
color: white;
}
.nav li {
color: white;
}
.email-button button {
background-color: rgba(255, 150, 190, 1);
color: white;
padding: 7px 20px;
font-size: 1.3em;
border-radius: 10px;
border: 0px;
transition-duration: 0.9s;
}
.button:hover {
background-color: white;
color: #A7C7E7;
}
.dropdown ul li a {
font-size: .6em;
}
.dropdown ul a{
display: inline-block;
background-color: rgba(255, 150, 190, 1);
text-align: center;
}
nav .dropdown {
position: relative;
}
nav > ul .dropdown > ul {
position: absolute;
}
nav > ul .dropdown > ul,
nav > ul .dropdown > ul li{
padding-left:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="zuckymuckyboi" />
<title>Home</title>
<link rel="stylesheet" href="Resources\styles.css">
<style></style>
</head>
<body>
<header class="header">
<nav class="nav main-nav">
<ul>
<li>Home</li>
<li class="dropdown"><a>Rules</a>
<ul>
<li>Bus</li>
</ul>
</li>
</ul>
</nav>
<div>
<h1 class="page-name">About</h1>
</div>
</header>
<section class="body-text">
<div>
<p text>To be writen...<p>
</div>
</section>
</body>
This is really just a hack to get what you are trying to do:
<li style="padding-right:119px;">Bus</li>
Using inline css styling you can add a padding to the specific element you want to adjust.
In this case, you can see padding-right:119px aligns the elements to the left side.
If you want the elements to align on the opposite side, you can similarly use padding-left and adjust in the same manner.
#font-face {
font-family: "Chivo Mono";
src: url("Resource/Fonts/ChivoMono-Black.ttf") format("ttf");
font-weight: normal;
font-style: normal;
}
* {
box-sizing: border-box;
font-family: 'Trebuchet MS';
color: #777;
}
html, body {
margin: 0;
padding:0;
}
.emails {
height:100px; width:250px;
}
.nav li {
display: inline-block;
}
.header {
background-color:#A7C7E7;
background-size: cover;
padding-bottom: 40px;
margin-bottom: 20px
}
.nav a {
display: inline-block;
padding:1em;
color: white;
text-decoration: none;
}
.nav a:hover {
background-color: rgba(255, 150, 190, 1);
}
.main-nav {
text-align: center;
font-size: 1.7em;
border-bottom: 3px solid rgba(255, 150, 190, 1)
}
.main-nav li {
padding: 0 5%;
}
.page-name {
text-align: center;
margin: 0;
font-size: 4em;
font-family: "Chivo Mono";
font-weight: normal;
color: rgba(255, 150, 150, 1);
}
.footer {
background-color: #A7C7E7;
margin: 50px 0px;
padding: 50px 0px;
border: white;
}
.footer h1 {
padding: 0px 0px
}
.footer textarea {
margin-top: 2em;
width: 400px;
height: 200px;
}
.body-text {
max-width: 900px;
margin: 0 auto;
padding: 0 1.5em
}
.footer {
text-align: center;
margin-top: 10em;
margin-bottom: 0em;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.email-button {
padding: 1em;
}
.article-title h2 {
text-align: center;
color: Black;
}
.coming-soon {
color: white;
}
.nav li {
color: white;
}
.email-button button {
background-color: rgba(255, 150, 190, 1);
color: white;
padding: 7px 20px;
font-size: 1.3em;
border-radius: 10px;
border: 0px;
transition-duration: 0.9s;
}
.button:hover {
background-color: white;
color: #A7C7E7;
}
.dropdown ul li a {
font-size: .6em;
}
.dropdown ul a{
display: inline-block;
background-color: rgba(255, 150, 190, 1);
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="zuckymuckyboi" />
<title>Home</title>
<link rel="stylesheet" href="Resources\styles.css">
<style>
p {
text-align:center;
}
</style>
</head>
<body>
<header class="header">
<nav class="nav main-nav">
<ul>
<li>Home</li>
<li class="dropdown"><a>Rules</a>
<ul>
<li style="padding-right:119px;">Bus</li>
</ul>
</li>
</ul>
</nav>
<div>
<h1 class="page-name">About</h1>
</div>
</header>
<section class="body-text">
<div>
<p text>To be writen...<p>
</div>
</section>
</body>
I've tried having it be an unordered list item without it being a paragraph element, I've tried putting it in a div as well. For some reason I'm just unable to get those to be stacked with the smaller "test" under the bigger TestTest. Seems to work in the rest of the page if I have it as a separate div, just not sure of the reason why it's not working in the footer.
Here is my HTML and CSS:
body {
background-color: #414141;
/* background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden; */
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 0px;
font-family: Arial;
}
#font-face {
font-family: ubuntu-medium;
src: url(/fonts/ubuntu-medium.ttf);
}
#media (max-width: 7680px) {
body {
background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden;
}
}
#media (max-width: 800px) {
body {
background: url(/images/mobilebackground.jpg) no-repeat center center fixed;
}
}
#NavSection {
margin-top: 3%;
}
#MainNav {
position: left;
margin-left: 11%;
}
#Menu li {
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#Menu a:hover {
text-decoration-color: #414141;
text-underline-offset: 0.12em;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 4px;
box-shadow: 0px 13px 4px -3px rgba(65, 65, 65, 0.616);
}
hr {
margin: 0px;
border: 2px solid red;
width: auto;
}
a {
color: #414141;
text-decoration: none;
}
a:active {
color: #ff0000;
}
#SiteTitle {
margin-left: 0.5%;
}
#TestTest {
font-family: Impact;
font-weight: normal;
font-size: 30px;
color: #ffffff;
text-decoration: underline;
text-decoration-color: #414141;
text-decoration-thickness: 2px;
text-underline-offset: 0.08em;
}
#Japan {
color: red;
}
ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#SecondNav {
float: right;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
font-size: 15px;
margin-right: 11%;
}
#SecondMenu a:hover {
text-decoration: overline 4px solid #414141;
box-shadow: 0px -13px 4px -3px rgba(65, 65, 65, 0.616);
}
#SecondMenu li {
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#ContentDiv {
width: 70%;
height: 40%;
position: absolute;
top: 30%;
left: 15%;
transform: translateX(0%);
background-color: rgba(255, 0, 0, 0.4);
}
#ContentSection {
width: 90%;
height: 70%;
position: absolute;
top: 15%;
left: 5%;
background-color: rgba(255, 255, 255, 0.9);
}
#Content {
margin: 3%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 7%;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
}
#FooterTitle {
float: right;
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
float: right;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div id="NavSection">
<div id="TopNav">
<nav id="MainNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<hr />
<div id="SecondNavSection">
<nav id="SecondNav">
<ul id="SecondMenu">
<li>Archives</li>
<li>Categories</li>
</ul>
</nav>
</div>
<div id="SiteTitle">
<h1 id="TestTest">Test<span id="Japan">Test</span></h1>
</div>
</div>
<div id="ContentDiv">
<main id="ContentSection">
<div id="Content">
<p>Content goes here.</p>
</div>
</main>
</div>
<footer>
<p id="FooterTitle">Test <span id="FooterJapan">Test</span></p>
<p id="FooterCaption">Test</p>
</footer>
</body>
</html>
You should not be using float for FooterTitle and FooterCaption -- So remove the float:right;
Then you can add text-align:right; to the <footer> CSS
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 7%;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
text-align:right;
}
#FooterTitle {
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
The rest .. Like height and getting everything to show in the footer I trust you can do :) -- Personally, I think height:7%; is a bad idea .. Better to give it a static height height, or a height that statically will change inside media queries. --
OR You could scrap the text align right to get it to align left but still float right like:
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
}
#FooterTitle {
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
#footer-right-content{
float:right;
text-align:left;
width:100px;
}
HTML
<footer>
<div id="footer-right-content">
<p id="FooterTitle">Test <span id="FooterJapan">Test</span></p>
<p id="FooterCaption">Test</p>
</div>
</footer>
I'm trying to create a small website and want to place an image (logo, square, svg) in the navbar. I want the logo to fit the navbar but it simply just won't scale no matter what I try.
I've tried floating a div with the image to the left and the navbar to the right but it still won't scale. It's really frustrating.
Here's an image of the problem:
Here's my code (sorry it's messy):
#import url('https://fonts.googleapis.com/css?family=Montserrat');
.heading {
display: inline-block;
font-family: "Montserrat";
font-weight: lighter;
text-align: left;
margin-left: 20vw;
line-height: 30vw;
}
body {
width: 100%;
margin: auto;
font-family: 'Montserrat', sans-serif;
background-color: white;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin-top: 30px;
flex-flow: row wrap;
margin-top: -10vw;
}
img {
margin: 9px;
transition: filter 0.2s;
filter: brightness(100%);
display: inline-block;
min-height: 100px;
height: 50vh;
}
img:hover {
filter: brightness(80%);
}
.responsive:hover {}
header {
position: relative;
height: 50vh;
background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
margin-top: -20px;
transform: skewY(-5deg);
transform-origin: top left;
}
.fullwidth {
width: 100%;
}
.headertitle {
margin-top: -36vh;
margin-left: 12vw;
position: absolute;
font-size: calc(13px + 2.5vw);
color: white;
font-family: 'Montserrat';
font-weight: lighter;
}
/* navbar */
nav {
background: rgb(52, 52, 52);
position: relative;
z-index: 1;
height: calc(18px + 6vh);
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.065);
overflow: auto;
width: 100vw;
}
nav ul {
margin: 0;
padding: 0;
text-align: left;
margin-left: 1.2vw;
}
nav ul li {
display: inline-block;
list-style: none;
font-size: 1.2em;
padding: 1vh;
}
.navul a {
text-decoration: none;
color: white;
line-height: 5.5vh;
height: 5.5vh;
font-size: calc(15px + 0.25vh + 0.15vw);
}
.navuul a:visited,
a:link,
a:active {
text-decoration: none;
color: white;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.navuul a:hover {
text-decoration: none;
color: grey;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.submit {
float: right;
margin-right: 1.5vw;
}
.submit a {
color: white;
border-radius: 5px;
}
.navimg img {
max-width: 100%;
max-height: 20%;
}
.navimgdiv {
height: 1.5vh;
}
/* navbar end */
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="pgallerystyles.css">
<title> Photo Gallery </title>
<link rel="shortcut icon" href="logo.ico">
</head>
<body>
<div class="fullwidth">
</div>
<nav>
<ul class="navul">
<li>
<div class="navimgdiv"><img class="navimg" src="logo.svg"></div>Lumastock</li>
<li>Photos</li>
<li>Featured</li>
<li>Contact</li>
<li>Pricing</li>
<li>Assesment Requirements</li>
<li class="submit">Submit a photo</li>
</ul>
</nav>
<header>
</header>
<h1 class="headertitle">Image Gallery</h1>
Thanks!
Simply use the logo outside of the list. I have added max-width for logo image. Optionally padding and margin you can customize based on your requirement. I hope this solution will be helpful.
.heading {
display: inline-block;
font-family: "Montserrat";
font-weight: lighter;
text-align: left;
margin-left: 20vw;
line-height: 30vw;
}
body {
width: 100%;
margin: auto;
font-family: 'Montserrat', sans-serif;
background-color: white;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin-top: 30px;
flex-flow: row wrap;
margin-top: -10vw;
}
img {
/* margin: 9px;
transition: filter 0.2s;
filter: brightness(100%);
display: inline-block;
min-height: 100px;
height: 50vh; */
max-width: 100%;
}
img:hover {
filter: brightness(80%);
}
.responsive:hover {}
header {
position: relative;
height: 50vh;
background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
margin-top: -20px;
transform: skewY(-5deg);
transform-origin: top left;
}
.fullwidth {
width: 100%;
}
.headertitle {
margin-top: -36vh;
margin-left: 12vw;
position: absolute;
font-size: calc(13px + 2.5vw);
color: white;
font-family: 'Montserrat';
font-weight: lighter;
}
/* navbar */
nav {
background: rgb(52, 52, 52);
position: relative;
z-index: 1;
height: calc(40px + 6vh);
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.065);
overflow: auto;
width: 100vw;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
text-align: left;
margin-left: 1.2vw;
}
nav ul li {
display: inline-block;
list-style: none;
font-size: 1.2em;
padding: 1vh;
}
.navul a {
text-decoration: none;
color: white;
line-height: 5.5vh;
height: 5.5vh;
font-size: calc(15px + 0.25vh + 0.15vw);
}
.navuul a:visited,
a:link,
a:active {
text-decoration: none;
color: white;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.navuul a:hover {
text-decoration: none;
color: grey;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.submit {
float: right;
margin-right: 1.5vw;
}
.submit a {
color: white;
border-radius: 5px;
}
.navimgdiv img {
max-width: 50px;
}
.navimgdiv {
padding: 5px 0;
}
<div class="fullwidth"></div>
<nav>
<a class="navimgdiv"><img src="https://cdn.worldvectorlogo.com/logos/react.svg"></a>
<ul class="navul">
<li>Lumastock</li>
<li>Photos</li>
<li>Featured</li>
<li>Contact</li>
<li>Pricing</li>
<li>Assesment Requirements</li>
<li class="submit">Submit a photo</li>
</ul>
</nav>
<header></header>
<h1 class="headertitle">Image Gallery</h1>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<!--<meta name="viewport" content="width=960">
<meta name="viewport" content="width=480">-->
<title>Habitat for Humanity Restore | Home</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="headimg">
<h2 class="slogan1">HOME IMPROVEMENT & FURNITURE OUTLET</h2>
<h3 class="slogan2"> A clean, happy place to find treasures</h3>
</div>
</header>
<!--
<div class="socialmedia"><img src="images/facebook-14.png" width="40" height="52" alt="FacebookSM">
<img src="images/Pinterest-icon.png" width="40" height="52" alt="PinterestLogo">
<img src="images/twitter-icon.png" width="40" height="52" alt="TwitterLogo"></div>
-->
</div>
<div id="nav">
<ul>
<li>SHOP</li>
<li>DONATE</li>
<li>VOLUNTEER</li>
<li>CONTACT US</li>
</ul>
</div>
<!-- Tony please fix text shadows, sidebar shadows and nagivation effects -->
<div id="sidebarleft">
<ul class="sidebartextleft">
<li class="pleftsidebar">ABOUT US</li>
<li class="pleftsidebar">REPURPOSED </li>
<li class="pleftsidebar">DONATE</li>
<li class="pleftsidebar">VOLUNTEER</li>
<li class="pleftsidebar">UNITED WAY </li>
<li class="pleftsidebar">NEWSLETTER</li>
<li class="pleftsidebar">EMAIL US</li>
<li class="pleftsidebar">SEND US PHOTOS</li>
<li class="pleftsidebar">MAP TO RESTORE</li>
<li class="pleftsidebar">DIRECTIONS</li>
</ul>
<!--<p>CONTACT US </p>-->
<div class="sidebartextleftsmall">
Restore Facility<br/>
200 South Larkin<br/>
Joliet, IL. 60436<br/>
P: 815-714-7100<br/>
E: info#restorejoliet.org
</div>
</div>
<!--</div>-->
<div id="sidebarright">
<div class="sidebartextright">
<p>FEATURED THIS WEEK:</p>
</div>
<div class="rightsidebarimg">
<div class="featuredimg">
<img src="images/furniture for sale.jpg" width="265" height="457" alt="furniture for sale">
</div>
</div>
<div class="sidebartextrightsmall"><span>Save our contact info to your smartphone</span>
<img src="images/scancode.jpg" width="125" height="126" alt="Habitat Restore Contact Information Smartphone Code">
</div>
</div>
<div id="content">
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="images/restorelocationtext.png" alt="Will County Habitat For Restore Location">
</figure>
<figure>
<img src="images/slider2.jpg" alt="Worker setting up bookshelf">
</figure>
<figure>
<img src="images/slider3.jpg" alt="Warehouse selection">
</figure>
<figure>
<img src="images/slider4.JPG" alt="More Ware Selection Tables and fans">
</figure>
<figure>
<img src="images/slider5.JPG" alt="Household furniture warehouse selection">
</figure>
</figure>
</div>
<div id="box">
<img src="images/habitatBox1.png" alt="Shop for repurposed materials" class="center" />
<img src="images/habitatBox2.png" alt="Donate Heart" class="center" />
<img src="images/habitatBox3.png" alt="Shop for repurposed materials" class="center" />
</div>
</div>
<div id="sidebarbottom">
<ul class="sidebartextleft">
<li class="pleftsidebar">ABOUT US</li>
<li class="pleftsidebar">REPURPOSED</li>
<li class="pleftsidebar">DONATE</li>
<li class="pleftsidebar">VOLUNTEER</li>
<li class="pleftsidebar">UNITED WAY</li>
<li class="pleftsidebar">NEWSLETTER</li>
<li class="pleftsidebar">EMAIL US</li>
<li class="pleftsidebar">SEND US PHOTOS</li>
<li class="pleftsidebar">MAP TO RESTORE</li>
<li class="pleftsidebar">DIRECTIONS</li>
</ul>
</div>
<div id="footer">2015 Will County Habitat for Humanity ReStore. All Rights Reserved.</div>
</div>
</body>
</html>
I'm having an issue in which my content section suddenly stops before reaching the footer causing a black underlay to show up, I've looked into editing the wrapper size and height of the content container but cannot figure out what the issue may be, please help me out
This below image is what the page is complete page should look like
CSS
#media only screen and (min-width: 960px) {
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
height: 106px;
background-color: #d9e6ef;
}
#wrapper {
width: 100%;
}
#nav {
height: 52px;
background-color: #51b948;
}
#nav ul {
padding: 7px;
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#nav ul li {
display: inline-block;
list-style-type: none;
margin: 0 15px;
}
#nav ul li a {
display: inline-block;
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color: #F4E9E9;
text-decoration: none;
background-color: #406718;
padding: 5px;
border: thin solid #030303;
width: 170px;
}
.socialmedia {
float: right;
margin-right: 45px;
padding: 8px 8px 0;
}
a {
text-decoration: none;
}
a:visited {
color:#FFF !important;
}
#sidebarleft {
float: left;
width: 20%;
height: 784px;
background-color: #005596;
}
#sidebarright {
float: right;
width: 20%;
height: 784px;
background-color: #005596;
}
#sidebarbottom {
display: none;
}
.sidebartextleft {
font-family: Arial, Helvetica, sans-serif;
padding-top: 30px;
margin-left: 25px;
font-size: 20px;
color: #FFF;
font-weight: bolder;
height: 368px;
font-style: normal;
}
.sidebartextright {
position: relative;
font-family: Arial, Helvetica, sans-serif;
padding: 15px 0 20px 5px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 20px;
height: 30px;
font-style: normal;
}
.sidebartextlefthead {
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 22px;
padding-bottom: 20px;
font-weight: bold;
}
.pleftsidebar {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #d5b89a;
padding-top: 4px;
padding-bottom: 3px;
width: 80%
}
#content {
width: 60%;
height: 768px;
float: left;
}
#footer {
width: 100%;
padding-top: 10px;
bottom: 0;
text-align: center;
background-color: #dbf1da;
font-weight: bold;
color: #000;
}
.rightsidebarimg {
text-align: center;
padding: 0 15px;
}
.sidebartextrightsmall {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
font-size: 20px;
width: 90%;
height: 200px;
font-style: normal;
margin: 60px auto 0;
}
.sidebartextrightsmall span {
display: block;
padding-bottom: 20px;
}
.sidebartextrightsmall img {
max-width: 125px;
height: auto;
text-align: center;
}
.sidebartextleftsmall {
margin: 200px 1px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #c7b199;
font-size: 17px;
font-weight: normal;
width: 100%;
height: auto;
font-style: normal;
}
.featuredimg img {
width: 100%;
height: auto;
}
#box {
text-align: center;
}
img.center {
display: inline-block;
width: 30%;
padding: 0 8px;
}
.headimg {
height: 106px;
margin-left: 100px;
display: inline-block;
background: url(images/head.png) no-repeat;
}
h2.slogan1 {
padding: 53px 0 0 220px ;
font-weight: bold;
font-size: 24px;
}
h3.slogan2 {
padding-left: 220px ;
font-style: italic;
font-weight: bold;
font-size: 20px;
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0;
background: #101010;
}
div#captioned-gallery {
width: 90%;
overflow: hidden;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
margin: 40px auto;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
padding: .6rem;
}
/* Bracket below closes desktop media query */
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
height: 106px;
background-color: #d9e6ef;
}
#wrapper {
width: 100%;
}
#header {
height: 106px;
background-color: #d9e6ef;
}
#nav {
height: 52px;
background-color: #51b948;
}
#nav ul {
padding: 9px;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#nav ul li {
display: inline-block;
list-style-type: none;
margin: 0 15px;
}
#nav ul li a {
display: inline-block;
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color: #F4E9E9;
text-decoration: none;
background-color: #406718;
padding: 5px;
border: thin solid #030303;
width: 140px;
}
.socialmedia {
float: right;
margin-right: 45px;
padding: 8px 8px 0;
}
#sidebarleft {
float: left;
width: 25%;
height: 784px;
background-color: #005596;
}
#sidebarright {
display: none;
}
#sidebarbottom {
display: none;
}
.sidebartextleft {
font-family: Arial, Helvetica, sans-serif;
padding-top: 30px;
margin-left: 25px;
font-size: 20px;
color: #FFF;
font-weight: bolder;
height: 368px;
font-style: normal;
}
.sidebartextright {
position: relative;
font-family: Arial, Helvetica, sans-serif;
padding: 15px 0 20px 5px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 20px;
height: 30px;
font-style: normal;
}
.sidebartextlefthead {
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 22px;
padding-bottom: 20px;
font-weight: bold;
}
.pleftsidebar {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #d5b89a;
padding-top: 4px;
padding-bottom: 3px;
width: 80%
}
#content {
width: 75%;
height: 768px;
float: left;
}
#footer {
width: 100%;
padding-top: 10px;
bottom: 0;
text-align: center;
background-color: #dbf1da;
font-weight: bold;
color: #000;
}
.rightsidebarimg {
text-align: center;
padding: 0 15px;
}
.sidebartextrightsmall {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
font-size: 20px;
width: 90%;
height: 200px;
font-style: normal;
margin: 60px auto 0;
}
.sidebartextrightsmall span {
display: block;
padding-bottom: 20px;
}
.sidebartextrightsmall img {
max-width: 125px;
height: auto;
text-align: center;
}
.sidebartextleftsmall {
margin: 200px 1px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #c7b199;
font-size: 17px;
font-weight: normal;
width: 100%;
height: auto;
font-style: normal;
}
.featuredimg img {
width: 100%;
height: auto;
}
#box {
text-align: center;
}
img.center {
display: inline-block;
width: 30%;
padding: 0 8px;
}
.headimg {
height: 106px;
margin-left: 40px;
background: url(images/head.png) no-repeat;
}
h2.slogan1 {
padding: 53px 0 0 220px ;
font-weight: bold;
font-size: 22px;
}
h3.slogan2 {
padding-left: 220px ;
font-style: italic;
font-weight: bold;
font-size: 18px;
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0;
background: #101010;
}
div#captioned-gallery {
width: 90%;
overflow: hidden;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
margin: 40px auto;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
padding: .6rem;
}
/* Bracket below closes tablet media query */
}
#media only screen and (min-width: 320px) and (max-width: 767px) {
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
height: 106px;
background-color: #d9e6ef;
}
#wrapper {
width: 100%;
}
#nav {
background-color: #51b948;
}
#nav ul {
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#nav ul li {
display: block;
list-style-type: none;
border-bottom: 2px dotted white;
}
#nav ul li:last-child {
border-bottom: none;
}
#nav ul li a {
display: block;
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color: #F4E9E9;
padding: 20px;
}
#nav ul li a:link {
text-decoration: none;
}
#nav ul li a:visited {
color: #F4E9E9;
}
#nav ul li a:hover {
background: #51b948;
}
#nav ul li a:active {
background: #406718;
}
.socialmedia {
float: right;
margin-right: 45px;
padding: 8px 8px 0;
}
#sidebarleft {
display: none;
float: left;
width: 25%;
height: 784px;
background: #005596;
}
#sidebarright {
display: none;
}
#sidebarbottom {
width: 100%;
background: #005596;
text-align: center;
}
#sidebarbottom ul li a {
display: block;
padding: 15px;
border-bottom: 3px solid #fff;
}
#sidebarbottom ul li a:link {
text-decoration: none;
}
#sidebarbottom ul li a:visited {
color: #fff;
}
#sidebarbottom ul li a:hover {
background: #005596;
}
#sidebarbottom ul li a:active {
background: #d9e6ef;
}
.sidebartextleft {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFF;
font-weight: bolder;
font-style: normal;
}
.sidebartextright {
position: relative;
font-family: Arial, Helvetica, sans-serif;
padding: 15px 0 20px 5px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 20px;
height: 30px;
font-style: normal;
}
.sidebartextlefthead {
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 22px;
padding-bottom: 20px;
font-weight: bold;
}
#content {
width: 100%;
background: #dbf1da;
padding: 0;
margin: 0;
}
#footer {
width: 100%;
padding-top: 10px;
bottom: 0;
text-align: center;
background-color: #dbf1da;
font-weight: bold;
color: #000;
}
.rightsidebarimg {
text-align: center;
padding: 0 15px;
}
.sidebartextrightsmall {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
font-size: 20px;
width: 90%;
height: 200px;
font-style: normal;
margin: 60px auto 0;
}
.sidebartextrightsmall span {
display: block;
padding-bottom: 20px;
}
.sidebartextrightsmall img {
max-width: 125px;
height: auto;
text-align: center;
}
.sidebartextleftsmall {
margin: 200px 1px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #c7b199;
font-size: 17px;
font-weight: normal;
width: 100%;
height: auto;
font-style: normal;
}
.featuredimg img {
width: 100%;
height: auto;
}
#box {
text-align: center;
}
img.center {
display: inline-block;
width: 33%;
margin: 0;
background: #42603C;
}
img.center:first-child {
float: left;
}
img.center:last-child {
float: right;
}
.headimg {
height: 106px;
margin: 0 auto;
padding: 0 auto;
text-align: center;
background: url(images/head.png) no-repeat center;
}
h2.slogan1 {
display: none;
/*
padding: 35px 0 0 220px ;
font-weight: bold;
font-size: 20px;
*/
}
h3.slogan2 {
display: none;
/*
padding-left: 220px ;
font-style: italic;
font-weight: bold;
font-size: 16px;
*/
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0;
background: #101010;
}
div#captioned-gallery {
width: 100%;
overflow: hidden;
margin: 0 auto;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
padding: .6rem;
}
/* Bracket below closes phone media query */
}
You are closing one div more then you open div (tags). Count them and then look, which div should close at which point. You could for example search for all div> to get all open and closing div tags. One tip: take a look at the sourcecode in the browser, at least Firefox highlights wrong html syntax (too manny or to few tags or not matching tags) which makes it easy to find them.
Edit:
You close your content div after this div <div id="box">....</div>
I have a problem with my responsive menu and I can't figure out where is it.
It's hard to explain so go to my website http://untruste.altervista.org/home.html
Now resize the windows since you get the responsive version, open the menu and the close it.
Resize the window since you get the desktop version, as u can see the menu disappeared! (If you refresh the page it comes back)
desktopstyle:
header {
padding-bottom: 2%;
border-radius: 10px;
width: 70%;
margin: auto;
}
#headerTitle h1{
display: block;
}
#headerTitle {
padding-top: 1%;
text-align: center;
line-height: 1.8em;
}
header img {
display: block;
margin: 2%;
width:7em;
}
header h1 {
width: 80%;
margin: auto;
font-size: 1.8em;
letter-spacing: -0.04em;
}
header h2 {
width: 50%;
margin: auto;
text-align: center;
font-size: 1.5em;
letter-spacing: -0.06em;
}
#menu {
display: block;
width: 80%;
margin: auto;
border:none
}
#menu ul li {
display: inline-block;
width:auto;
margin-left:auto;
margin-right: auto;
padding:2px;
border: none;
font-size: 0.9em;
}
#selected {
background: #00715f;
padding:0 1em;
color: #ffffff !important;
border-radius: 10px;
}
article {
width: 70%;
padding-top: 1%;
border-radius: 10px;
font-size: 0.9em;
}
article a {
color: #004040
}
article h1 {
padding: 7px 7px 7px 30px;
width:auto;
margin-left: -30px;
margin-right: 30%;
text-align: left;
}
article h2 {
margin-left: -30px;
margin-right: 60%;
}
.articleText {
width:70%;
margin:auto;
}
#linkmap {
display: none;
}
iframe {
display: block;
border: none;
}
footer {
width:70%;
margin: auto;
border-radius: 10px;
font-size: 0.9em;
font-family: Times, serif;
}
mobilestyle
body {
}
header {
}
footer {
font-size: 0.7em;
}
#headerTitle h1{
display: none;
}
.icon {
margin-right:10px;
font-size:2em
}
.icon::after
{
content:'≡';
}
.icon-close::after
{
margin-right:10px;
font-size:2em;
content:'×';
font-weight: normal;
font-style: normal;
}
#headerTitle {
padding-top: 5px;
}
header img {
display:none
}
header h1 {
font-size: 1.4em;
letter-spacing: -0.04em;
}
header h2 {
font-size: 1.1em;
}
#menu {
border-bottom: 1em solid #00715f;
}
#menu ul li {
display: block;
height:2em;
width:100%;
margin-left:-3.5%;
font-size:1.2em
}
.menu_button {
display: block;
text-decoration: none;
text-align: right;
box-shadow:0 1px 1px rgba(0,0,0,0.15);
background: #00715f;
color: #ececec;
}
#selected {
background: #00715f;
padding:0 5em;
color: #ffffff !important;
border-radius: 10px;
}
article {
width: 100%;
font-size: 0.8em;
}
article h1 {
width:100%;
margin-right: 20%;
padding:7px 0 7px 0;
text-align: center;
}
article h2 {
margin-right: 10%;
}
.articleText {
width:90%;
margin:auto
}
#linkmap{
display: block;
border: none;
}
iframe {
display: none;
}
style:
body {
background:#004040;
color: #005b4d;
text-align: center;
font-family: "Georgia", "Times", serif;
}
a {
color: #00715f;
}
a:hover {
font-style: italic;
}
header {
background: white;
width: 100%;
height:auto
}
header h1,h2 {
display: block;
font-weight: normal;
}
footer {
background-color: #ffffff;
width: 100%;
padding: 2% 0;
}
#menu ul li {
list-style: none;
text-align: center;
}
#menu ul li a {
text-decoration: none;
color: #005b4d;
}
article {
background: white;
text-align: justify !important;
padding-bottom: 1%;
margin: 5% auto;
}
article h1 {
background: #00715f;
color: #fff;
width:100%;
margin-right: 20%;
text-shadow: 0 1px 0 #403232;
font-weight: normal;
text-align: center;
}
article h2 {
background: #00715f;
color:#fff;
padding: 7px 7px 7px 30px;
font-weight: normal;
font-size: 1.2em;
}
This the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" media= "(min-width: 240px) and (max-width:1023px)" type="text/css"
href="css/mobilestyle.css">
<link rel="stylesheet" media="(min-width:1024px)" type="text/css" href="css/desktopstyle.css">
<meta name="viewport" content="width=device-width">
<link rel="icon" href="favicon.ico">
<script src="jquery-1.11.3.js" type="text/javascript"></script>
<script src="script.js"></script>
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>ArteLab Responsive</title>
</head>
<body>
<header>
<img style="float:left" src="logos/artelab.png" alt="logo_artelab">
<img style="float: right" src="logos/insubria.png" alt="logo_insubria">
<div id="headerTitle">
<h1>Applied Recognition Technology Laboratory</h1>
<h2>Department of Theoretical and Applied Science</h2>
</div>
<a class="menu_button" href="#"><span class="icon">≡</span> </a>
<div id='menu'>
<nav>
<ul>
<li>LINK1</li>
<li>lINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
<li><a id="selected" href="link">LINK6</a></li>
</ul>
</nav>
</div>
</header>
and this is the script I use to open the menu in the responsive version
jQuery(document).ready(function() {
$('.menu_button').click(function() {
$("#menu").slideToggle();
$(this).find('span').toggleClass('icon icon-close');
});
});
You can try this:
In your desktop styles just do :
#menu {
display: block!important;
}
Your slideToggle() to the menu is causing it to have display:none in the style attribute. So we just overwrite that in desktop.