it's my first time here, I'm looking for a way to do a kind of floating header in HTML or CSS.
I mean you know that kind of websites when you scroll down a part of the page follow you.
Just like this :
https://codepen.io/freeCodeCamp/full/YqLyXB
Blockquote
ea
Hope the question isn't asking anywhere else, It's hard to find out a response in english since I can barely explain it my french!
Thank's if you take time to answer.
position: fixed; will create a header that is "fixed" to the top of the window viewport and will float over the rest of the site's content.
body {
height: 500vh;
background: url('http://www.platonphoto.com/photos/72-1057-a.jpg') top center no-repeat;
background-size: cover;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: black;
color: white;
padding: 1em;
}
<header>header</header>
What you are looking for is position: fixed.
It is one of the positioning available for a HTML element which allows you to take a certain element out of the normal flow of your document and make it fixed at a certain place. Then it won't scroll as you scroll the image.
Related
Apologies for the bad HTML here, I'm not very good at it. When trying to make a HTML page for a friend's Discord bot, something weird started happening when trying to get the background div (class of background) behind the body. Simple enough, I just set a z-index of -1. This causes issues with the Discord bot listing website, though, as it sends that background behind everything and means that it's hidden. "No problem, I'll just set the z-indexes to be 765 and 766 right?" Wrong. I've tried it on the Discord bot website and codepen.io, any time I use a non-negative index on main it brings it to the front. I could make the indexes for background and body 0 and 999, background will still be in front. Does anyone know what I can do to fix this?
Relevant CSS:
body {
margin: 0;
overflow-x: hidden;
position: absolute;
z-index: 999;
}
.background {
background: url(URL);
width: 100vw;
background-size: 100% 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
Relevant HTML:
<body>
*things*
</body>
<div class="background"></div>
What about this?
body {
background-image: url(https://placehold.it/1000);
background-size: cover;
}
I think there might be some confusion with how the elements work. I think you're making it a step more complicated. Is that so?
Within my body tag I have a header and div#content element. My aim was to create a fixed header and then push the content of the content element out from under it using a margin-top attribute. However when I did this the header also moved down as though it were joined to the content. I fixed this by adding a position: absolute to the content. The trouble is I cant explain to myself why it worked. It just did. I am using Firefox on Ubuntu.
This is the header css:
header {
position: fixed;
top: 0px,
left: 0px;
margin: 0px;
background-color: #3F51B5;
font-family: sans-serif;
color: #FFFFFF;
width: 100%;
z-index: 1;
}
This is the content css:
#content {
position: absolute;
margin-top: 100px;
}
Here is the codepen.
Please educate me someone :)
Several observations:
position: absolute; didn't really fix it. Check out this codepen for a demonstration. Notice the fair amount of content I added after your divs and how they don't display correctly? This is because:
You had a typo on your first css element. Here's a codepen demonstrating a fix: http://codepen.io/anon/pen/YwvBJy You wrote , instead of ;. You didn't close the top: ; attribute so your browser tried to fix it by using the #content margin-top.
Bad syntax-- used a , instead of ; on line 3
header {
position: fixed;
top: 0px,
left: 0px;
so the attributes top and left are wrecked.
You used a comma instead of a semicolon here
head { top 0px }
Please replace the comma with smemicolon than you dont need position: absolute .
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.
I would like to have my social profile buttons scroll just like its done on 9gag. Their 2 ads on the right hand side stay in a fixed position once you scroll to a certain point. I would like to do the same. Can someone help me with this?
Thanks alot guys.
You could add position: fixed to the element once the scroll offset reached a certain point.
Define this CSS then add id="media_icons" to the element you want fixed. Change the style according to your needs.
#media_icons {
clear: both;
height: 34px;
margin-right: 33px;
margin-top: 32px;
position: fixed;
right: 0;
top: 0;
width: 148px;
}
OK, So i've used to common "push" method with the footer to ensure that it stays to the bottom of the page... However, there is now an unnecessary gap between the container and the footer which means that there is always a scroll down, even if there is no content to push it down. I would hope that if there was no content, the footer would just stick nicely to the bottom of the website.
Has anyone else found this and been able to tackle it?
Thanks in advance :)
This can be done with just a few lines of CSS. Assuming that you are using the <footer> element, apply the following styling properties:
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
And that's it!
I use
#footer {
position: relative;
left: 0px;
bottom: 0px;
height: 150px; // whatever height you want
width: 100%;
}
works for me