edit: Thanks to you awesome people the webpage finally looks awesome!
I couldn't choose the best answer because all of them helped me a lot :p
here's the result if anyone's interested http://i.imgur.com/RABpT9u.png
I'm trying to make a simple website with a site "logo" on the top, a navbar on the left, content in the center and some footer at the bottom.
At the same time I'm trying to make it responsive, which, obviously isn't a job for me yet :D
I'm pretty new to html and css so any advice would help a ton!
* { box-sizing: border-box;}
body { padding: 0; margin: 0; height:100%; }
header {
height:100%;
border:0.5vw ridge #888;
background:linear-gradient(to right,#123,#368,#48A,#59B,#48A,#368,#123);
text-align: center;
font-size: 1.4vw;
}
header h1,h2 {
color:#DD5;
font-family: "Helvetica";
margin: 0.5vw;
padding-top: 0.5vw;
line-height: 1.5vw;
text-shadow: 0px 0px 0.5vw #000;
}
main {
position: absolute;
display: flex;
width:100%;
max-height:100%;
background-color:#DDD;
border: 2px solid #F0F;
}
nav {
position: relative;
display:block;
overflow:auto;
z-index: 0;
float:left;
height:100%;
background: linear-gradient(90deg,#5BF,#29E);
border:0.5vw ridge #888;
max-width:100%; /*width 100% just makes the navbar all long and ugly*/
}
nav ul { margin:0; padding:0.5vw; list-style-type:none;}
nav li {
display:block;
width:100%;
padding: 1vw 0.5vw 1vw 0.5vw;
margin: 0.5vw auto;
text-align: center;
border:0.2vw outset white;
border-radius:0.5vw;
background:linear-gradient(180deg,#AAA 60%,#777);
}
nav a {
margin:0vw 1vw;
font-family: "Helvetica";
font-weight: bold;
font-size: 1.5vw;
color: #DDD;
line-height: 0.5;
text-decoration:none;
text-shadow: 0px 0px 0.3vw #000;
}
#content {
position: relative;
display: inline;
float:left;
z-index: 0;
max-width:100%;
background-color:grey;
border: 2px solid green;
}
footer {
width:100%;
margin-top:auto;
border: 2px dashed red;
}
<!doctype html>
<html lang="en">
<head>
<title>titlee</title>
<meta charset="UTF-8"/>
<meta name="keywords" content="keyowrdsssss" />
<meta name="description" content="descriptionnn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="icon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>
<main>
<nav>
<ul>
<li>LinkToHome
<li>link1</li>
<li>link2</li>
<li>longlink3</li>
<li>aboutlink</li>
</ul>
</nav>
<center>
<div id="content">
<h1>Content Content Content</h1></br>
<h1>Content Content Content</h1></br>
</div>
</center>
<footer>
<h1>footer</h1>
</footer>
</main>
</body>
</html>
You can try use;
width:100vw;
* { box-sizing: border-box;}
body { padding: 0; margin: 0; height:100%; }
header {
height:100%;
border:0.5vw ridge #888;
background:linear-gradient(to right,#123,#368,#48A,#59B,#48A,#368,#123);
text-align: center;
font-size: 1.4vw;
}
header h1,h2 {
color:#DD5;
font-family: "Helvetica";
margin: 0.5vw;
padding-top: 0.5vw;
line-height: 1.5vw;
text-shadow: 0px 0px 0.5vw #000;
}
main {
position: absolute;
display: flex;
width:100%;
max-height:100%;
background-color:#DDD;
border: 2px solid #F0F;
}
nav {
position: relative;
display:block;
overflow:auto;
z-index: 0;
float:left;
height:100%;
background: linear-gradient(90deg,#5BF,#29E);
border:0.5vw ridge #888;
max-width:100%; /*width 100% just makes the navbar all long and ugly*/
}
nav ul { margin:0; padding:0.5vw; list-style-type:none;}
nav li {
display:block;
width:100%;
padding: 1vw 0.5vw 1vw 0.5vw;
margin: 0.5vw auto;
text-align: center;
border:0.2vw outset white;
border-radius:0.5vw;
background:linear-gradient(180deg,#AAA 60%,#777);
}
nav a {
margin:0vw 1vw;
font-family: "Helvetica";
font-weight: bold;
font-size: 1.5vw;
color: #DDD;
line-height: 0.5;
text-decoration:none;
text-shadow: 0px 0px 0.3vw #000;
}
#content {
position: relative;
display: inline;
float:left;
z-index: 0;
background-color:grey;
border: 2px solid green;
width:86vw;
}
footer {
position: absolute;
width:100%;
border: 2px dashed red;
bottom:0;
}
<!doctype html>
<html lang="en">
<head>
<title>titlee</title>
<meta charset="UTF-8"/>
<meta name="keywords" content="keyowrdsssss" />
<meta name="description" content="descriptionnn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="icon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>
<main>
<nav>
<ul>
<li>LinkToHome
<li>link1</li>
<li>link2</li>
<li>longlink3</li>
<li>aboutlink</li>
</ul>
</nav>
<center>
<div id="content">
<h1>Content Content Content</h1></br>
<h1>Content Content Content</h1></br>
</div>
</center>
</main>
<footer>
<h1>footer</h1>
</footer>
</body>
</html>
I'm not sure if this is exactly what you're looking for, but have you tried using the flex property?
try to have a look here, see if this is what you're looking for https://jsfiddle.net/jg2sjrL5/4/
<div id="container">
<div id="navigation">navigation</div>
<div id="content"></p>content</p></p>content</p></p>content</p>
</p>content</p></div>
</div>
<div id="footer">footer</div>
html, body {width: 100vw, height: 100vh}
#container {
display:flex;
align-items: center;
flex-direction:row;}
#main, #footer {
width: 100vw;
}
#main{
display: flex;
flex-direction: row;
}
#content {
background-color:red;
width: 80vw;
}
#navigation {
background-color:white;
width: 20vw;
}
#footer {
background-color:green;
}
you can eventually set the height of the different elements with vh to make them fit your page
Here's some guidance. Hope it helps.
html {
box-sizing: border-box; /* 1 */
height: 100%; /* 2 */
}
*, *:before, *:after {
box-sizing: inherit; /* 1 */
}
body {
margin: 0; /* 3 */
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
border: 0.5vw ridge #888;
background: linear-gradient(to right, #123, #368, #48A, #59B, #48A, #368, #123);
text-align: center;
font-size: 1.4vw;
}
header h1, h2 {
color: #DD5;
font-family: "Helvetica";
margin: 0.5vw;
padding-top: 0.5vw;
line-height: 1.5vw;
text-shadow: 0px 0px 0.5vw #000;
}
main { /* 4 */
flex: 1; /* consume remaining space in column */
display: flex;
background-color: #DDD;
border: 2px solid #F0F;
}
nav {
background: linear-gradient(90deg, #5BF, #29E);
border: 0.5vw ridge #888;
}
nav ul {
margin: 0;
padding: 0.5vw;
list-style-type: none;
}
nav li {
padding: 1vw 0.5vw 1vw 0.5vw;
margin: 0.5vw auto;
text-align: center;
border: 0.2vw outset white;
border-radius: 0.5vw;
background: linear-gradient(180deg, #AAA 60%, #777);
}
nav a {
margin: 0vw 1vw;
font-family: "Helvetica";
font-weight: bold;
font-size: 1.5vw;
color: #DDD;
line-height: 0.5;
text-decoration: none;
text-shadow: 0px 0px 0.3vw #000;
}
#content {
flex: 1; /* consume remaining space in row */
background-color: grey;
border: 2px solid green;
}
footer {
border: 2px dashed red;
}
<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>
<main>
<nav>
<ul>
<li>LinkToHome</li>
<li>link1</li>
<li>link2</li>
<li>longlink3</li>
<li>aboutlink</li>
</ul>
</nav>
<div id="content">
<h1>Content Content Content</h1>
<h1>Content Content Content</h1>
</div>
</main>
<footer>
<h1>footer</h1>
</footer>
https://css-tricks.com/box-sizing/
https://stackoverflow.com/a/31728799/3597276
https://stackoverflow.com/a/36219088/3597276
https://stackoverflow.com/a/35820454/3597276
Note that in your original code you made use of CSS positioning and floats, and the HTML <center> element. You don't need position: absolute, position: relative or float: left to make this layout work when you have flexbox. And the <center> element is being phased out. You shouldn't use it and you don't need it.
Related
I need my work done soon, but I don't have access to my bigger monitor. I assume the teacher also has a big monitor where he'll look at my work, so it shouldn't be a problem.
But my site only looks normal on 70% and I'm having a big headache trying to make it work so I have to work on 70%.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
}
header {
display: flex;
width: 50%;
height: 8vh;
margin: auto;
align-items: center;
}
.nav-links,
.search-container {
display: flex;
}
nav {
position: relative;
flex: 1;
}
.nav-links {
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link {
color: #ffffff;
font-size: 18px;
text-decoration: none;
}
.search-container {
flex: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
background-color: #c4c4c4;
display: flex;
width: 50%;
height: 30vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
width: 500px;
height: 30px;
margin: 20px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
text-align: justify;
width: 70%;
font-size: 13px;
}
.sideimage {
position: absolute;
right: 640px;
top: 390px;
}
.polygon {
position: absolute;
right: 960px;
bottom: 260px;
width: 0;
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
background-color: #222222;
display: flex;
width: 50%;
height: 29vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.piirkonnad p {
position: absolute;
left: 554px;
bottom: 270px;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
.copyright p {
position: absolute;
right: 803px;
bottom: 24px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
position: absolute;
right: 550px;
bottom: -2px;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
body {
background-color: #000000;
}
</style>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</nav>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance" ;>
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer" ;>
</div>
<div class="polygon"></div>
</div>
</main>
<section>
<div class="piirkonnad">
<p>Piirkonnad</p>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
I've heard about responsive design already, but I can't figure it out. I'm not the greatest at coding and it was hard to achieve what I have so help is appreciated a ton.
Your code has some mistakes on it, you have ; on your img element and your style element should be in the head tag, and the reason why your website is not responsive is because you are using position:absolute, keep your website simple, or if you really want to still use position:absolute, then that div should be contained on another div but set it it to position:relative.
Anyways, I fixed it and now totally responsive, here it is:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
padding-top:20px;
}
header{
display:flex;
justify-content:space-evenly;
width: 50%;
margin: auto;
flex-wrap:wrap;
}
.nav-links{
display: flex;
}
.nav-links{
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link{
color: #ffffff;
font-size: 18px;
padding:10px;
text-decoration: none;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
padding:10px;
background-color: #c4c4c4;
width: 50%;
margin: auto;
}
.search-container{
min-width:30px
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
padding:5px;
margin: 10px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
width: 70%;
font-size: 13px;
}
.polygon {
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
position:relative;
display:flex;
background-color: #222222;
display: flex;
width: 50%;
padding-top:30px;
height: 29vh;
margin: auto;
justify-content:space-evenly;
}
.piirkonnad p {
text-align:center;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
footer{
margin-top:1em;
}
.copyright p {
text-align:center;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
display:flex;
justify-content:center;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background-color: #000000;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
</nav>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance">
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
</div>
</div>
<section>
<div class="piirkonnad">
<div class="polygon"></div>
<p>Piirkonnad</p>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer">
</div>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
</main>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
For make a website responsive you need to avoid px and use %, vw (viewport width) or vh (viewport height).
After in your css you need to declare #media only screen and (max-width: screenSizepx) and inside make the responsive layout for each screen.
Usually i make this with:
#media only screen and (max-width: 1000)
#media only screen and (max-width: 550px)
#media only screen and (max-width: 400px)
When I run my code in the browser, I have this little line of white space at the bottom of the page. I’ve been trying different solutions but can’t seem to find one that works. Below is the home.html page. Maybe someone here can shed some light into the problem.
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="cooper, scooper, dog, pop, pick, up>
<meta name="author" content="primarysnail">
<meta name="viewport" content="width=device-width">
<meta name="description" content="connecting clients in need of dog pick pick up srvice with scoopers who will come to the client and scoop the poop">
<title>CoopersScoopers || Home</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
</head>
<body>
<header> <!-- company name top left; nav bar top right -->
<div class="container">
<div class="branding">
<h1><span>cooper</span>Scoopers</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Contact Us</li>
<li>Find a Scooper</li>
</ul>
</nav>
</div>
</header>
<section class="showcase"> <!-- showcase section; button to find scooper (./find.html) -->
<div class="container">
<h1>Leave the</h1>
<br>
<h1>Poo to the</h1>
<br>
<h1>Professionals.</h1>
<button type="button">Connect With a Scooper Today</button>
</div>
</section>
<section class="info-bar"> <!-- info bar; shows scooper process in 3 sections -->
<div class="container">
<div class="box">
<img src="../images/poop.jpg">
<h3>Connect With a Local Scooper</h3>
</div>
<div class="box">
<img src="../images/location.jpg">
<h3>Mark Your Poo</h3>
</div>
<div class="box">
<img src="../images/calendar.jpg">
<h3>Schedule Future Scoops</h3>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h1>Come Experience the Joy of a Poop-Free Life.</h1>
</section>
</body>
<footer>
<p>Copyright © primarySnail//</p>
</footer>
</html>
Here is the linked style.css file:
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
}
/* global */
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
button {
height: 50px;
background-color: #ffff00;
opacity: 0.8;
border: none;
padding-right: 30px;
padding-left: 30px;
float: left;
margin-top: -20px;
float: right;
}
button a {
text-decoration: none;
color: #4b0082;
font-weight: bold;
font-size: 25px;
}
/* header */
header {
padding-top: 30px;
min-height: 70px;
border-bottom: 4px solid #f0e68c;
background-color: #ffffff;
color: #8a2be2;
font-size: 10px;
}
header a {
text-decoration: none;
}
nav a {
color: #8a2be2;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
header span {
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0px 10px 0px 10px;
}
.branding {
float: left;
}
.branding h1 {
margin: 0;
padding: 0px 10px 0px 10px;
border: 4px solid #8a2be2;
}
header nav {
float: right;
margin-top: 10px;
}
header .current {
border: 1px solid #999;
background-color: #8a2be2;
border-collapse: collapse;
}
header .current a {
color: #ffffff;
font-weight: bold;
}
/* showcase */
.showcase {
background-color: #8a2be2;
color: #ffffff;
text-align: left;
min-height: 200px;
border-bottom: 4px solid #f0e68c;
}
.showcase h1 {
font-size: 55px;
margin-top: 0;
margin-bottom: 0;
padding: 0px;
display: inline-block;
}
/* info bar*/
.info-bar {
margin-top: 20px;
border-bottom: 4px solid #f0e68c;
}
.info-bar .box {
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
.info-bar .box img {
width: 90px;
height: 90px;
}
/* testimonials */
.testimonials {
background-color: #8a2be2;
color: #ffffff;
}
.testimonials h1 {
text-align: center;
}
/* footer */
footer {
background-color: #f0e68c;
margin-top: 0px;
padding: 5px;
text-align: center;
color: black;
opacity: 0.6;
}
I cannot for the life of me figure out why that little line of white space is in there at the very bottom. screenshot
Yes, I have observed white space showing in the bottom. It is because the elements inside body tag is not occupying the full available body size.
elemets heights are as
body- 722
header- 104
.showcase- 251enter code here
.info-bar- 201
.testimonials- ~71
footer- ~62
the white space in the botom is remaining area of viewport. If you make the browser smaller the white space will go away.
To fix this proble you can use below css to the body.
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
/* Add below lines*/
display: flex;
flex-direction: column;
align-items: stretch;
}
So I'm trying to design my very first website using CSS and HTML. But I have run into a bit of an issue.
I'm trying to make a simple sidebar with just a profile picture next to the content container. But, the div pushes down the other div instead of going behind it. I've used position relative and z index but nothing seems to work.
This is how the code looks like now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<div id="sidebar">
<img src="./Img/pepe.png" alt="" />
</div>
<div class="contentbox"></div>
<div class="Wrapper">
<header>
<h1>Welcome To My Site</h1>
<h2>First CSS Site</h2>
</header>
<nav>
<ul class="meny">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
font-family: "Roboto";
}
body {
background-color: #E0F2E9;
}
#sidebar{
border: 2px solid brown;
text-align: right;
margin-top: 50%;
margin-left: 0%
}
.contentbox{
border: solid 2px red;
width: 60vw;
margin: 0 auto;
background-color: white;
height: 100vh;
margin-top: 300px;
}
.Wrapper {
border: 2px solid green;
height: 250px;
background-color: #5B7B7A;
margin: auto;
width: 95vw;
position: absolute;
top: 30px;
right: 30px;
left: 30px;
border-radius: 5px;
}
.meny{
text-align: center;
line-height: 32px;
border: 2px solid purple;
padding: 10px 10px;
}
ul.meny{
margin: 15px 10px;
text-decoration: none;
}
.meny li{
display: inline;
padding: 0px 10px;
}
.meny a{
text-decoration: none;
color: white;
font-size: 1em;
}
.Wrapper h1, h2 {
margin: 10px;
border: 2px solid blue;
display: flex;
text-align: center;
justify-content: center;
text-transform: uppercase;
color: #ffffff;
}
.Wrapper h1 {
padding: 30px;
}
.Wrapper h2 {
padding: 4px;
z-index values are relative and it depend to you, for instance : i write z-index: 50 for my div and z-index : 51 for my another element . Element has z-index 51 comes above div has less value of z-index . i hope this is help .
I am studying CSS and creating a responsive web page. I have started working in a media query. When I maximize the screen, all works as expected, but when I reduce its size, the content that does not fit in the viewport is hidden, and a white space stays in its place. That space can be seen scrolling the screen to side. Why is that space appearing instead the rest of the content? I also don't understand why my content doesn't fit in the screen, because I am using percentage values to elements' width. My code is below:
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html, body, *, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
width: 99.13vw;
}
body{
font-family: 'Open Sans', sans-serif;
margin: 0;
}
h2, h3{
margin-top: 10px;
margin-bottom: 10px;
}
a{
text-decoration: none;
transition: 0.2s linear;
}
header{
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
padding: 10px 30px;
width: 100%;
}
header img{
width: 45px;
}
header h1{
font-family: 'Doppio One', cursive;
margin-left: 10px;
color: rgb(214, 245, 210);
}
nav ul{
display: flex;
list-style: none;
}
nav ul li a{
margin-left: 55px;
}
nav a{
color: rgb(230, 245, 229);
font-size: 17px;
}
nav a:hover{
background-color: rgb(143, 182, 135);
padding: 10px 15px;
margin: 0 -15px 0 40px;
}
nav img{
display: none;
width: 30px;
height: 35px;
}
#firstsection{
background-image: url(Images/coffee-3289259_1280.jpg);
background-size: cover;
height: 900px;
position: relative;
}
#firstsection div{
margin-top: 0;
position: absolute;
left: 100px;
top: 150px;
color: rgb(47, 119, 27);
text-align: center;
}
#firstsection h1{
margin-bottom: 45px;
}
#firstsection div a{
font-weight: bold;
border: 2px solid rgb(47, 119, 27);
padding: 13px 30px;
font-size: 16.5px;
color: rgb(47, 119, 27);
}
#firstsection div a:hover{
color: rgb(133, 163, 131);
border: 2px solid rgb(133, 163, 131);
}
#textboxes{
display: flex;
margin-top: 50px;
flex-wrap: wrap;
}
#textboxes div{
text-align: center;
margin: 15px 60px;
border: 2px solid rgb(93, 158, 76);
padding: 30px 30px;
width: 27%;
}
#middlesection img:first-of-type{
width: 55px;
}
#middlesection h2{
text-align: center;
width: 100%;
}
#lastsection{
text-align: center;
}
#lastsection img{
width: 30%;
margin: 100px auto 0px;
}
#lastsection div{
position: relative;
bottom: 450px;
}
#lastsection div a:visited{
color: blue;
}
footer{
background-color: rgb(93, 158, 76);
padding: 15px;
color: rgb(214, 245, 210);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
footer img{
height: 35px;
width: 35px;
margin-right: 15px;
}
footer div{
text-align: center;
}
#media screen and (max-width: 800px){
#textboxes div{
width: 100%;
}
#lastsection img{
width: 85%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Control you spending and manage your money easily. Your finances by the short hairs." name="description">
<meta content="Bruno M. B. Sdoukos" name="author">
<meta content="finances, managing money, spending control" name="keywords">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png"> <a href="index.html">
<h1>Finances</h1></a>
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact us
</li>
<li>
Register
</li>
<li>
Login
</li>
</ul>
</nav>
</header>
<main>
<section id="firstsection">
<div>
<h1>Manage your money easily, anywhere, anytime.</h1>Get started
</div>
</section>
<section id="middlesection">
<div id="textboxes">
<div>
<img src="Images/icons8-increase-64.png">
<h3>Concrete data</h3>
<p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
</div>
<div>
<img src="Images/icons8-navigation-toolbar-left-filled-50%20(1).png">
<h3>Easy interface</h3>
<p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
</div>
<div>
<img src="Images/icons8-natural-user-interface-2-filled-50.png">
<h3>Fast access</h3>
<p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
</div>
</div>
</section>
<section id="lastsection">
<img src="Images/board-1362851_1280.png">
<div>
<h2>Register now and enjoy<br>
the best of Finances.</h2>Create an account
</div>
</section>
</main>
<footer>
<img src="Images/icons8-fund-accounting-80.png">
<div>
<p>A work of Bruno Sdoukos.</p>
</div>
</footer>
</body>
</html>
Actually it's not hidden. The links in the header just happen to have a color that's close enough to white that the contrast is really low. They're overflowing the right side of the header when the header's content is wider than the viewport.
The simplest solution would be to give flex-wrap:wrap to header, but I recommend using a media query to override the display:flex instead (for better backwards compatibility).
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html,
body,
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 99.13vw;
}
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
h2,
h3 {
margin-top: 10px;
margin-bottom: 10px;
}
a {
text-decoration: none;
transition: 0.2s linear;
}
header {
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
padding: 10px 30px;
width: 100%;
}
#media all and (max-width:56em) {
header {
display: block;
}
header>a,
header>nav {
display: inline-block;
}
}
header img {
width: 45px;
}
header h1 {
font-family: 'Doppio One', cursive;
margin-left: 10px;
color: rgb(214, 245, 210);
}
nav ul {
display: flex;
list-style: none;
}
nav ul li a {
margin-left: 55px;
}
nav a {
color: rgb(230, 245, 229);
font-size: 17px;
}
nav a:hover {
background-color: rgb(143, 182, 135);
padding: 10px 15px;
margin: 0 -15px 0 40px;
}
nav img {
display: none;
width: 30px;
height: 35px;
}
#firstsection {
background-image: url(Images/coffee-3289259_1280.jpg);
background-size: cover;
height: 900px;
position: relative;
}
#firstsection div {
margin-top: 0;
position: absolute;
left: 100px;
top: 150px;
color: rgb(47, 119, 27);
text-align: center;
}
#firstsection h1 {
margin-bottom: 45px;
}
#firstsection div a {
font-weight: bold;
border: 2px solid rgb(47, 119, 27);
padding: 13px 30px;
font-size: 16.5px;
color: rgb(47, 119, 27);
}
#firstsection div a:hover {
color: rgb(133, 163, 131);
border: 2px solid rgb(133, 163, 131);
}
#textboxes {
display: flex;
margin-top: 50px;
flex-wrap: wrap;
}
#textboxes div {
text-align: center;
margin: 15px 60px;
border: 2px solid rgb(93, 158, 76);
padding: 30px 30px;
width: 27%;
}
#middlesection img:first-of-type {
width: 55px;
}
#middlesection h2 {
text-align: center;
width: 100%;
}
#lastsection {
text-align: center;
}
#lastsection img {
width: 30%;
margin: 100px auto 0px;
}
#lastsection div {
position: relative;
bottom: 450px;
}
#lastsection div a:visited {
color: blue;
}
footer {
background-color: rgb(93, 158, 76);
padding: 15px;
color: rgb(214, 245, 210);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
footer img {
height: 35px;
width: 35px;
margin-right: 15px;
}
footer div {
text-align: center;
}
#media screen and (max-width: 800px) {
#textboxes div {
width: 100%;
}
#lastsection img {
width: 85%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Control you spending and manage your money easily. Your finances by the short hairs." name="description">
<meta content="Bruno M. B. Sdoukos" name="author">
<meta content="finances, managing money, spending control" name="keywords">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png">
<a href="index.html">
<h1>Finances</h1>
</a>
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact us
</li>
<li>
Register
</li>
<li>
Login
</li>
</ul>
</nav>
</header>
<main>
<section id="firstsection">
<div>
<h1>Manage your money easily, anywhere, anytime.</h1>Get started
</div>
</section>
<section id="middlesection">
<div id="textboxes">
<div>
<img src="Images/icons8-increase-64.png">
<h3>Concrete data</h3>
<p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
</div>
<div>
<img src="Images/icons8-navigation-toolbar-left-filled-50%20(1).png">
<h3>Easy interface</h3>
<p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
</div>
<div>
<img src="Images/icons8-natural-user-interface-2-filled-50.png">
<h3>Fast access</h3>
<p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
</div>
</div>
</section>
<section id="lastsection">
<img src="Images/board-1362851_1280.png">
<div>
<h2>Register now and enjoy<br> the best of Finances.</h2>Create an account
</div>
</section>
</main>
<footer>
<img src="Images/icons8-fund-accounting-80.png">
<div>
<p>A work of Bruno Sdoukos.</p>
</div>
</footer>
</body>
</html>
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.