Here is my website http://randomawesomeness.tk/ and i want to get rid of the whitespace below the footer .and i dont want the scrolling thing to show up.
Try to add the following CSS for your footer.
position: fixed;
Position your footer relative to the viewport, which means it always stays in the same place even if the page is scrolled.
bottom: 0;
Keep the footer at bottom of viewport
width: 100%;
Make the footer large as the viewport.
footer {
position: fixed;
bottom: 0;
width: 100%;
font-size: 20px;
background: #29EE55;
color: white;
margin: -20px -23px 0px -20px;
text-align: center;
}
Try this
body {
font-family: "Lobster",cursive;
margin: 0;
padding: 0;
text-align: center;
}
You can try following :-
body{
margin:0;
}
And on you footer following;
footer{
position: fixed;
bottom: 0;
width: 100;
margin:0;
}
Related
I have this CSS, where I want the footer div displayed after all content on the page. At this moment it doesnt show on the page, when I have the height of the page set to "auto", but if I set a height of any sorts or min-height it shows up till that height as it should. Can I do this, or do I have to set a manual height on each page? The CSS looks like this:
body
{
position: absolute;
top: 0;
left: 0;
right: 0;
height: auto;
background-image: url("background.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
/* Dette er css til vores footer div boks */
div.footer
{
position: absolute;
bottom: 0;
height: 250px;
left: 0;
right: 0;
padding: 1%;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
line-height: 200%;
border: 1px solid black;
}
I have tried using flexbox, containers and grids, but it only seems to work, if I insert a manual height of the body.
Try this example:
.my-contnet element has min-height of 100% to take the full height of the page.
This way the footer is always displayed at the bottom of the page regardless of the amount of content on the page.
The content will fill the remaining space above the footer.
html,
body {
height: 100%;
margin: 0;
}
.my-contnet {
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
What about this?
div.header {
position: relative;
display: flex;
justify-content: center;
align-items: normal;
}
video.header {
position: relative;
width: 100%;
filter: brightness(60%);
left: 50%;
top: 50%;
transform: translate(-50%,0%);
}
div.headline {
position: absolute;
left: 50%;
border-radius: 50px;
transform: translate(-50%,150%);
}
h1.headline {
font-size: 500%;
text-align: center;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}
div.about {
position: relative;
background-color: rgba(255, 255, 255, 0.9);
border: solid black 2px;
border-radius: 40px;
padding: 2%;
display: flex;
align-items: flex-start;
margin-bottom: 280px;
}
table.text {
width: 60%;
padding-bottom: 1%;
}
table.img {
padding-top: 5%;
}
div.footer {
position:fixed;
}
The absolute positioning of your elements was causing the footer visibility problems.
Also, if you don't want the footer to be displayed at all times, just replace the fixed position in my example with relative - the footer will only be showing once your visitors scroll down to it. If you do that, however, be sure to remove the margin-bottom: 280px; rule from div.about selector.
Please note that these were just some quick fixes - I have not considered whether your site will look good (enough) on various resolutions (mobile, tablets, 4:3, etc).
You might want to look up some boilerplates, for example, the ones Bootstrap offers.
For me, this code works great.
Please pay attention to the link I sent you in the comments.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
html, body {
/* IE 10-11 didn't like using min-height */
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
background-color: lightblue;
}
.footer {
flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
</div>
<footer class="footer">
Footer
</footer>
</body>
</html>
Im trying to create a fixed header with variable height. I'll explain myself, say you get into the site and the header is visible, and it is 40px of height. once you scroll down the header is now 30px, and it is fixed. How can I achieve this? I know I am supposed to write some code but I have no idea on where to start. I know how to make a fixed header but dont know how to implement the variable height feature. Any advice or code snippets are very welcome.
I think this code can help you.
window.onscroll = function() {
var header = document.getElementsByTagName('header')
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
header[0].classList.add('header-scroll');
} else {
if (header[0].classList.contains("header-scroll")) {
header[0].classList.remove('header-scroll');
}
}
}
.container {
height: 200vh;
padding-top: 40px;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: green;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
height: 40px;
transition: all .3s ease;
}
.header-scroll {
height: 30px;
}
<div class="container">
<header>
</header>
<p>Scroll me</p>
</div>
You can do it with pure CSS by nesting position: sticky; elements and give the navbar as position a top: -10px
You set the <nav> to the fixed height of 40px
Then you use nav { position: sticky; top: -10px; }. That will allow the navbar to scroll 10px off the viewport leaving it's height at 30px visible.
To have the content such as links or text not to leave the viewport, you can wrap them inside another element and apply also display: sticky; to it. Now use top: 0; to prevent those elements from leaving the viewport.
nav {
position: sticky;
top: -10px;
height: 40px;
background-color: red;
}
nav > div {
position: sticky;
top: 0;
}
/* for scrolling purpose only */
body {
min-height: 500vh;
margin: 0;
}
/* if you want the text vertically centered */
nav {
display: flex;
align-items: center;
}
nav > div {
display: flex;
align-items: center;
height: 30px;
}
<nav>
<div>Test</div>
</nav>
I need to make a lightbox for pictures on this portfolio website. I have everything hooked up so the image goes to the original size when being clicked on, like a simple lightbox. But the problem I'm having is that the background behind the modal only goes down to the bottom of the viewport instead of going all the way to the bottom of the page. Let me know if theres any additional information I can provide.
Lightbox Problem
#overlay {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}
#overlay img {
border-radius: 4px solid white;
margin-top: 10%;
}
#overlay p {
color: white;
}
Change position to fixed like this:
#overlay {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
text-align: center;
}
I am experiencing an issue when I start scrolling down and reach the point when the sticky nav becomes visible, it seems to create a duplicate of the background from header and makes header jump, but it is supposed to move to the next section. Is it CSS or JS related issue?
Please see entire included code:
https://codepen.io/pipistrellonetopier/pen/yXLGjo
CSS code
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.65);
z-index: 9999;
}
.sticky .main-nav { margin-top: 22px; }
.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
padding: 14px 0;
color: #f0f0f0;
font-size: 100%;
}
.sticky .logo {
display: block;
height: 29px;
margin: 15px 0;
}
Thank you
Peter
Give the following hyperlink display:inline-block and it will stop jumping:
<img src="resources/css/img/app-store-btn.svg" alt="App Store Button">
I would like to make certain elements of my page have more fluid transitions as they size down. If you look here:
http://abezieleniec.com/SIDWeb/
You can see that when you size down to tablet and phone size the first blue bar snaps to different positions to meet with the main logo. This was obviously done with media queries but I'm wondering if there is a way to make it more fluid with percentages? I'm assuming this would require some JS...
Any ideas are welcome!
Thanks
It's not too hard a process as it happens! It's something I had to use for the website here: http://flourishworld.co.uk/
The key is to use :before with "margin-top: xx%":
.element:before {
margin-top: 50%;
position: relative;
content: "";
display: block;
}
From looking at your site...it may be easier to just present some altered code. First I changed your markup (this may not work for you)
<div id="home" class="jumbotrontop animated fadeIn">
<div class="biglogo" style="opacity: 1;">
<img src="images/biglogofull.png">
</div>
</div>
Using the code idea above:
#home:before {
margin-top: 55%;
position: relative;
content: "";
display: block;
}
But for this to work you need some amended CSS code for other elements...
.jumbotrontop {
font-size: 21px;
height: 100%;
line-height: 2.1428571435;
color: inherit;
width: 100%;
background-size: cover;
z-index: 1;
}
.biglogo {
width: 80%;
display: block;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
margin-bottom: 130px;
opacity: 1;
position: absolute;
z-index: 100;
top: 0;
position: relative;
display: table;
}
.jumbotrontop img {
width: 100%;
height: auto;
margin: auto;
max-width: 740px;
display: block;
}
#home:after {
background-color: #eeeeee;
background-image: url(../images/background1.jpg);
display: block;
position: fixed;
top: 0;
left: 0;
content: "";
bottom: 0;
right: 0;
z-index: 1;
background-size: cover;
}
What this does is it takes your top element and takes it's height away, it's contents are positioned absolutely so it doesn't take up space. The :before element then adds a responsive height that will shrink as the width of the page shrinks. In doing so we had to change the logo markup around so that it stayed in a central location and continued to shrink as the window did.
Hope this helps! No JS, all CSS.