I have seen a lot of similar topics; however I do not seem to get the css code right.
Layout of my page: has a background image. Then I want to create a white page in the middle with different blocks () starting with navigation at the top, header,content.
Im not getting the navigation bar to display at the top of the page (without space between the top of the browser and the bar) there is a small gap in between). Furthermore I want my content to always fill the screen until 'just' above the lower part of the browser.
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href ="css/main.css">
</head>
<body>
<div class="wrapper">
<div class="nav">
<ul>
<li>Home</li>
<li>Education</li>
<li>Experience</li>
<li>More</li>
<li>Contact</li>
</ul>
</div>
<div class="header">
</div>
<div class="maincontent">
</div>
</div>
</body>
</html>
CSS
html, body {
height: 100%;
margin: 0;
}
body {
background-image: url("bgimg.png");
background-repeat: repeat;
}
.wrapper{
width: 960px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0 auto;
position: relative;
top: 0px;
background-color: white;
}
.nav {
background-color: white;
width: 100%;
height: 40px;
font-family: "Sans-serif", Verdana;
}
.nav li {
float: left;
list-style: none;
float: left;
display: inline;
text-align: center;
width: 20%;
line-height: 40px;
}
.nav a {
display: block;
width: 100px;
}
.header {
background-color: #F7D358;
width: 960px;
height: 100px;
position: relative;
top: 0px;
}
.maincontent {
background-color: white;
height: 100%;
margin: 0;
padding:0;
}
Easiest way in this case is to set:
.nav ul {
margin: 0;
}
I recommend you (highly) to use CSS RESET STYLE to avoid these problems.
Example: http://meyerweb.com/eric/tools/css/reset/
Related
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 2 years ago.
Trying to make the footer in my html css website stick down but nothing works. I've tried changing the position to absolute and fixed and setting bottom: 0 and doing everything but nothing works. Also, is there a better way to make my logo aligned in the middle? Heres my css:
.footer{
background-color: #d62929;
clear: both;
width: 100%vw;
display:block;
overflow: hidden;
padding-top:10px;
padding-bottom: 10px;
min-height: 100%vw;
}
.contact{
margin-left: 30px;
margin: 0 auto;
display:block;
float: left;
padding-right: 50px;
}
.info{
margin-left: 30px;
margin: 0 auto;
padding-left: 30px;
display:block;
float: left;
padding-right: 50px;
}
.account{
margin-left: 30px;
margin: 0 auto;
padding-left: 30px;
display:block;
float: left;
padding-right: 50px;
}
a{
text-decoration:none;
color: black;
font-family: times new roman;
font-size: 18px;
text-align: center;
}
ul{
list-style: none;
text-align: left;
}
.logo_footer{
float: left;
padding: 40px 0;
margin-left: 20px;
margin-right: 40px;
}
h1{
color: white;
font-size: 24;
}
li{
padding: 5px;
}
Heres my html for the footer:
<div>
<footer class="footer">
<img src="{{url_for('static', filename='Logo.png')}}" style="height:108px;width:100px;" class="logo_footer" alt="logo"></a>
<div class="contact">
<h1>Contact us</h1>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Telegram</li>
</ul>
</div>
<div class="info">
<h1>Information</h1>
<ul>
<li>About Us</li>
<li> Contact Us</li>
<li>Return Policy</li>
<li>Delivery</li>
</ul>
</div>
<div class="account">
<h1>Account</h1>
<ul>
<li>Log in</li>
<li> Register</li>
<li> My cart</li>
</ul>
</div>
</footer>
</div>
You can make position:fixed; instead of position:absolute; This will make it fixed to the bottom. if there are any other div or something that's causing an overlay issue, use z-index:5;
I used postion:relative on wrapper div and postion: sticky on footer.
.sectionWrapper {
position: relative;
}
.header {
height: 10vh;
width: 100%;
background: red;
}
.body {
height: 100vh;
width: 100%;
background: blue;
border: 1px solid black;
}
.footer {
height: 20vh;
width: 100%;
background-color: green;
position: sticky;
bottom: 0%;
}
<div class="sectionWrapper">
<section class="header">Header</section>
<section class="body">Body 1</section>
<section class="body">Body 2</section>
<section class="body">Body 3</section>
<section class="footer">footer</section>
</div>
There are multiple ways for that.
Min-height:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.footer {
position: relative;
min-height: 100%;
Margin-top, here you do need to specify footer height:
* {
margin: 0;
padding: 0;
}
html,
body,
.footer {
height: 100%;
}
.footer__content {
box-sizing: border-box;
This the best, because the height of the footer doesn't matter:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.footer {
display: table;
height: 100%;
This way is a bit different from others because it uses CSS calc() function, and you need to know exact footer height:
* {
margin: 0;
padding: 0;
}
.footer__content {
min-height: calc(100vh - 80px);
}
This is the most correct way, however it works only in modern browsers, as in the 3rd example, the height doesn't matter:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.footer {
display: flex;
flex-direction: column;
In my project, I am using this to solve same task, it's the easiest solution that I found in Internet:
body {
position: relative;
min-height: 100vh;
}
.footer {
position: absolute;
bottom: 0px;
}
Here is important to use min-height property in body and not the height one, because actual height of your page can be more that user's screen size.
This solution makes your footer to snap not to screen bottom, but to page bottom.
So adding a sticky element seems simple enough but the problem I'm having is adding it to my website. I've done it separate from my website project, however when I try to add code to my existing project is doesn't work.
My current website is smooth-scrolling, single-page. Basically you click on the links and it will smooth-scroll to the corresponding section on my website. When I tried to add sticky elements they just stay to the top or bottom of the page.
What I want: I want the sticky image to be fixed at the top part of the about me section to the left. As you scroll past it I want it to stick to the footer of the view on the left.
Here is the code to my current website without sticky element:
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lily+Script+One&display=swap" rel="stylesheet">
<link href="./resources/css/index.css" type="text/css" rel="stylesheet" />
</head>
<body>
<nav>
<!--ordered list inside navigation menu-->
<ul>
<!--li = list item a = hyperlink href = link's destination-->
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
<li>CV</li>
<li>Contact</li>
</ul>
</nav>
<div id="home">
<h2>This Is The Home Section</h2>
</div>
<div id="aboutme">
<h1>This Is The About Me Section</h1>
</div>
<div id="projects">
<h1>This Is The Projects Section</h1>
</div>
<div id="cv">
<h1>This Is The CV Section</h1>
</div>
<div id="contact">
<h1>This Is The Contact Section</h1>
</div>
<script src="https://unpkg.com/smoothscroll-polyfill/dist/smoothscroll.min.js"></script>
<script src="https://unpkg.com/smoothscroll-anchor-polyfill"></script>
</body>
</html>
CSS:
html {
--scroll-behavior: smooth;
scroll-behavior: smooth;
margin: 0;
}
body {
margin: 0;
font-family: 'Lily Script One', cursive;
}
/*css for the navigation blocks*/
nav {
text-align: center;
/*https://www.w3schools.com/css/css_overflow.asp hidden property*/
overflow: hidden;
/*https://www.w3schools.com/css/css_positioning.asp position property*/
top: 0;
width: 100%;
height: 10%;
}
/*css for the ordered list of pages*/
ul {
/*https://www.w3schools.com/css/css_padding.asp padding property*/
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
text-align: center;
/*background-image: url("../Images/test.png");*/
border-spacing: 60px 10px;
}
/*each list item*/
li {
display: table-cell;
position: relative;
}
/*hyperlinks*/
a {
padding: 20px;
display: inline-block;
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.15em;
position:relative;
}
a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #fff;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
#home {
height: 1000px;
background: #adc0ae;
/*https://www.w3schools.com/cssref/pr_class_display.asp display*/
display: inline-block;
width: 100%;
}
#aboutme {
height: 1000px;
background: #a1b7a3;
display: inline-block;
width: 100%;
}
#projects {
height: 1000px;
background: #95ae97;
display: inline-block;
width: 100%;
}
#cv {
height: 1000px;
background: #8aa68c;
display: inline-block;
width: 100%;
}
#contact {
height: 1000px;
background: #7c957e;
display: inline-block;
width: 100%;
}
h1{
margin: 100px;
text-align:center;
padding: 0;
}
h2 {
margin: 100px;
text-align: center;
padding: 0;
font-family: 'Lily Script One', cursive;
}
Any tips or links to good quality tutorials would be appreciated as well. I usually program with c# or python, just now getting into html, css, and javascript.
You can apply position: sticky to that image element but keep in mind sticky elements are relative to their parent.
I suggest you play around with it for a bit longer til you get the hang of it.
I have a little problem that I could work around but it annoys me that I don't understand it. Maybe you can help. I have a header with a nav bar inside which is floated to the right. Now when I add margin-top to the nav and set it equal to say 10% it is not sizing relative the the parents height. Instead it appears much further down the page. Heres my code:
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
header {
background-color: yellow;
height: 10%;
width: 100%;
overflow: hidden;
}
header img {
float: left;
}
nav {
float: right;
background-color: grey;
width: 30%;
text-align: center;
margin-top: 1%;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline;
}
<header>
<img src="" alt="Reece Barrett's" height="" width="" />
<nav>
<ul>
<li>About Me
</li>
<!--
-->
<li>Porfolio
</li>
<!--
-->
<li>Contact
</li>
</ul>
</nav>
</header>
If you want header to be auto height, Use min-height instead of using height, also remove overflow:hidden otherwise this will hide overflowed content.
header {
background-color: yellow;
min-height: 10%;
width: 100%;
overflow: hidden;
}
For more info https://developer.mozilla.org/en/docs/Web/CSS/min-height
You can use min-height: 10%
heres the fiddle: https://jsfiddle.net/a4sg5b72/
I would approach it using the positioning absolute & relative.
Codepen: http://codepen.io/rezasan/pen/YGmVGo
header {
background-color: yellow;
height: 10%;
width: 100%;
position:relative;
}
header img {
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
}
nav {
background-color: grey;
width: 30%;
text-align: center;
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
}
You can try this:
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 1000px;
}
header{
background-color: yellow;
height: 10%;
width: 100%;
}
header img{
float: left;
}
nav{
float: right;
background-color: grey;
width: 30%;
text-align: center;
margin-top: 10%;
}
nav ul{
list-style-type: none;
}
nav ul li{
display: inline;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home Page</title>
</head>
<body>
<header>
<img src="" alt="Reece Barrett's" height="" width="" />
<nav>
<ul>
<li>About Me</li>
<li>Porfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
It's because overflow: hidden of Head
I'm trying to create a webpage that will have a fixed sidebar and scrollable content. It does work if I don't have a header div. If I scroll page I have some empty space that previously was a header (i marked it with red color). I'd like my sidebar to cover the empty space after I scroll through header div.
Here's my HTML Code - how can I fix this?
<!doctype html>
<head>
<link rel="stylesheet" href="style.css"type=" text/css"/>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="navigation">
<ul>
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</div>
<div id="content">
<div id="abcd">
</div>
</div>
</body>
CSS
#page
{
position:relative;
width:100%;
height:3000px;
background-color:yellow;
}
#header
{
background-color: blue;
width:100%;
height:150px;
}
#navigation
{
background-color: red;
width:10%;
height:3000px;
float:left;
}
#content
{
float:left;
background-color: green;
width:90%;
overflow: auto;
height:1000px;
}
body
{
margin: 0;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a
{
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
You have to place your navigation div in outermost part i.e. in body(not in any other div).
I have tested this and its now working fine.
Your new code should be
<html>
<head>
<link rel="stylesheet" href="style.css" type=" text/css" />
</head>
<body>
<div id="navigation">
<ul>
<li>home</li>
<li>news</li>
<li>contact</li>
<li>about</li>
</ul>
</div>
<div id="page">
<div id="header">
</div>
<div id="content">
<div id="abcd">
</div>
</div>
</div>
</body>
</html>
And your modified css:-
#page {
position: relative;
width: 100%;
height: 3000px;
background-color: yellow;
}
#header {
background-color: blue;
width: 100%;
height: 150px;
display: block;
}
#navigation
{
background-color: red;
width:10%;
height:100%;
float:left;
position: absolute;
z-index:1;
}
#content {
float: left;
background-color: green;
width: 90%;
overflow: auto;
height: 1000px;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
In css I have changed the navigation's height to 100% and its z-index to 1.
Also you didn't close the div tag with class "page".
Reference:- w3 css sidenav
Please try this:
#navigation {
background-color: red;
width: 10%;
height: 3000px;
float: left;
position: absolute;
z-index: 99999;
left: 0;
top: 0;
}
I want the footer of this page to stick to the bottom, below all content, but not fixed in the screen. The problem is that when the body has more than 100% of height, the footer stay in the middle of the screen, and not in the bottom.
I've seen a lot of tutorials on how to achieve this, using "position: absolute" + "bottom: 0" and stuff, but everything failed.
Check it out:
<html>
<head>
<meta charset="iso-8859-1" />
<link rel="stylesheet" type="text/css" href="index.css" />
<link href='https://fonts.googleapis.com/css?family=Arvo|Open+Sans|Ubuntu+Roboto' rel='stylesheet' type='text/css'>
<title>Matheus's Page</title>
</head>
<body>
<div id="wrapper">
<header>
<div class="title-div">
<h1>Title</h1>
</div>
<nav>
<ul>
<li>
<h3>Home</h3>
</li>
<li>
<h3>Articles</h3>
</li>
<li>
<h3>Perfil</h3>
</li>
<li>
<h3>Settings</h3>
</li>
</ul>
</nav>
</header>
<div id="body">
<p>Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste </p>
</div>
<footer>
<p>Footer</p>
</footer>
<div>
</body>
</html>
CSS:
body {
font-family: 'Arvo', serif;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
}
header {
position: absolute;
float: top;
width: 100%;
height: 8%;
background-color: #424242;
color: #FFD740;
}
.title-div {
position: absolute;
height: 100%;
margin: auto 5%;
padding-right: 3%;
border-right: solid 2px #FFD740;
}
header nav {
position: absolute;
width: 75%;
left: 15%;
}
header ul {
list-style: none outside none;
}
header ul li {
display: inline-block;
margin: auto 2% auto 0;
}
#body {
padding: 10px;
padding-top: 8%;
padding-bottom: 15%; /* Height of the footer */
}
footer {
position: absolute;
width: 100%;
height: 15%;
right: 0;
bottom: 0;
left: 0;
color: #FFD740;
background-color: #424242;
clear: both;
}
Link to printscreen of the result:
The accepted answer might be a bit outdated since we have Flexbox now. Give the container a min-height: 100vh and the footer a margin-top: auto so you don't have to deal with absolute positioning and fixed heights.
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
background-color: #FFCCCC;
}
.content {
background-color: #CCFFCC;
}
.footer {
background-color: #CCCCFF;
margin-top: auto;
}
<div class="container">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
I think this might help you.
Just showing you the way how to achieve what you want.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
background: #ededed;
padding: 10px;
}
#content {
padding-bottom: 100px;
/* Height of the footer element */
}
#footer {
background: #ffab62;
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
}
<div id="wrapper">
<div id="header">
</div>
<!-- #header -->
<div id="content">
</div>
<!-- #content -->
<div id="footer">
</div>
<!-- #footer -->
</div>
<!-- #wrapper -->
Make sure the value for 'padding-bottom' on #content is equal to or greater than the height of #footer.
Update:
JSFiddle Demo to play around.
I'm using Bootstrap 4 and this worked for me link.
I did this way in the CSS file (base.css):
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
footer{
padding: 3em;
margin-top: auto;
}
And I've linked the css file in the html (base.html):
<head>
<link rel="stylesheet" type="text/css" href="'<path to css>'"/>
</head>
This is what worked for me:
When I tried bottom 0 and right 0, there was some annoying bottom margin below the footer which would not go away.
I fixed it with top: 100% and position absolute:
body{
height: 100%;
width: 100%;
position: relative;
}
footer{
background-image: linear-gradient(to right, #c10f3f, #010168);
padding: 1em;
width: 100%;
top: 100%;
position: absolute;
}
You may try this styling;
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
padding-bottom: 100px;
}
header {
position: absolute;
float: top;
width: 100%;
height: 8%;
background-color: #424242;
color: #FFD740;
}
.title-div {
position: absolute;
height: 100%;
margin: auto 5%;
padding-right: 3%;
border-right: solid 2px #FFD740;
}
header nav {
position: absolute;
width: 75%;
left: 15%;
}
header ul {
list-style: none outside none;
}
header ul li{
display: inline-block;
margin: auto 2% auto 0;
}
footer {
height: 100px;
padding-top: 15px;
padding-left: 15px;
color: #FFD740;
background-color: #424242;
}
Here is a demo
the answer posted by #divy3993 works but sometimes making footer absolute keeps it stranded on the middle of the page. Atleast that's what had happened to me. So I made a small change, I'll post it below
#footer {
background: #ffab62;
width: 100%;
height: 100px;
position: relative; //make relative instead of absolute
bottom: 0;
left: 0;
}
Try this:
css:
#footer
{
position: relative;
background-size: cover;
background-position: 50% 50%;
background-color: #ffab62;
}
html:
<doctype HTML>
<HTML>
<head>
</head>
<body>
<div id = footer></div>
</body>
</HTML>
I'm using bootstrap 4 and mdboostrap and I had the same problem.
the inline style worked for me:
<footer class="page-footer lighten-5"
style="position: relative; bottom:0; width: 100% !important;" >
....
</footer>
Your first mistakes are just using absolute position on everything and min-height on many stuff you don't need.
For starter just remove all absolute stuff and put min-height only in div named "body" after that footer will be glued to the #body by default, after that your footer won't be flying around where ever it wants.
Best way to use absolute in divs is:
- when you already have existing div with relative position, and then you put another div with an absolute position inside of a div with a relative position.
Also, play only with pixel values if you start going with % you will get lost like you already did.
position: fixed
Use this to set position to Fixed.