I am struggling with in-page links and fixed header.
I have a sticky header (position fixed) of 50px. This allows me to have the header always visible even if scrolling down in the page.
In my page, I have then a menu with links to other sections in the page.
I used href with IDs target.
Problem is that when I click on the link, the page positions the target at the very top of the page, where the header hides my target section for 50px.
The code below shows the issue
<html>
<head>
<style>
.header {
position: fixed;
top: 0px;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
background-color: red;
height: 50px;
}
.container1 {
content: none;
height: 200px;
background-color: green;
}
.container2 {
content: none;
height: 800px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container1"></div>
<div class="container2">
block1
<div id="block1">Some text</div>
</div>
</body>
This is just how anchors work.
To achieve your goal, try giving the target a padding of your header height. That will fix it.
#block1 {
padding: 60px 0;
}
Related
I'm trying to get my footer displayed at the bottom of the page. Usually it's just position: fixed and bottom: 0. However I want my footer positioned inside a container (section element), so when the size of my sidebar at the left changes, I want my footer be also moved to the right or left.
I thought I could get use of position: sticky instead of width, but when there's not enough content inside of section element, it is displayed at the bottom of the section, but not at the bottom of the page.
Is there a pure CSS solution for this or have I add some javascript?
body {
margin: 0;
}
.page-body {
display: grid;
grid-template-columns: 7rem calc(100vw - 7rem);
}
.sidebar {
background-color: yellow;
}
section {
position: relative;
width: 100%;
min-height: 100vh;
background-color: green;
}
.content {
padding-top: 400px;
}
footer {
position: -webkit-sticky;
position: sticky;
bottom: 10px;
background-color: blue;
z-index: 999;
padding: 0;
}
<html>
<head>
</head>
<body>
<div class="page-body">
<div class="sidebar">
</div>
<section>
<div>
<div class="content">
Content
</div>
</div>
<footer>
Footer
</footer>
</section>
</div>
</body>
</html>
Remove the padding-top on the .content class add height 100vh to it and remove the bottom:10px on footer can solve your problem
.content {
height:100vh;
}
I am trying to make a drop down menu that slides from header.
I have a header and inside it I have some div with border-bottom 1px line and background-color. Inside this div I would like to place logo, searchbox some links and a user profile button. When this button is clicked I would like to drop down menu below this button. Unfortunately this dropdown menu appears in front of header and not slides from behind of header (obscuring the header background and bottom-border line). I have tried solution like below (it is simplified version).
header {
position: relative;
z-index: 5;
}
.dropdown {
background-color: yellow;
width: 100px;
height: 100px;
position: absolute;
z-index: 1;
}
.background {
position: absolute;
background-color: #ccca;
border-bottom: 1px solid black;
width: 100%;
height: 50px;
z-index: 2;
}
<header>
<div class="background">
<div class="dropdown">
</div>
</div>
</header>
I have tried many z-index configurations and none of them seems to work.
1. div.background with z-index 2, div.dropdown with z-index 1 or even -1
2. div.background without z-index and position, div.dropdown with z-index -1 (here dropdown was behind header but menu links stopped working and menu was also behind main content of webpage)
How can I make my div.dropdown to slide from behind the header bar with background and border bottom line? Isn't it possible to have this div.dropdown inside header div tree as the descendant element.
This is possible with a negative z-index; however, it doesn't work with a parent element that has a non-auto z-index. Set the .background element to have a z-index:auto (or just take it off. auto is the default). It's OK (and recommended imo) to have an ancestor element with a positive z-index to avoid your negative z-indexed element dropping below the <html> or <body> elements. In this case, you do (header has a z-index of 5), so it's fine.
<html>
<head>
<style type="text/css">
header {
position:relative;
z-index:5;
}
.dropdown {
background-color: yellow;
width: 100px;
height: 100px;
position: absolute;
z-index: -1;
}
.background {
position: absolute;
background-color:#ccca;
border-bottom: 1px solid black;
width: 100%;
height: 50px;
z-index: auto;
}
</style>
</head>
<body>
<header>
<div class="background">
<div class="dropdown">
</div>
</div>
</header>
</body>
</html>
z-index is based on elements at the same level in the DOM, in other words, elements with the same parent.
Since your class="dropdown" element is a child of the class="background" element it can never be below its parent.
Child elements cannot be displayed under their parent. Make the two divs seperate elements like this.
header {
position:relative;
z-index:5;
}
.dropdown {
background-color: yellow;
width: 100px;
height: 100px;
position: absolute;
z-index: 1;
}
.background {
position: absolute;
background-color:#ccca;
border-bottom: 1px solid black;
width: 100%;
height: 50px;
z-index: 2;
}
<html>
<head>
</head>
<body>
<header>
<div class="background"></div>
<div class="dropdown"></div>
</header>
</body>
</html>
This is a sample HTML page:
<html>
<body>
<div class="content">
</div>
<footer> </footer>
</body>
</html>
This is my style sheet:
html {
height: 100%;
}
body {
position: relative;
margin: 0;
height: 100%;
}
.content {
width: 8cm;
position: absolute;
background-color: #ff0;
height: 15cm;
}
footer {
position: absolute;
bottom: 0;
background-color: #f00;
width: 100%;
}
This is how it looks like:
My problem is that I want the red footer to be at the bottom of the page (not the bottom of the viewport), assuming that the .content is of an variable height actually. Is that possible without JavaScript?
This Fiddle shows a footer that is always either at the lowest point on the page or on the bottom of the viewport.
The DIV is positioned at the bottom of the viewport when the content does not fill the page, and stays below the content when the content gets taller than the viewport.
To accomplish this, use a min-height on the body like this:
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
footer {
position: absolute;
bottom: 0;
}
Tested in Safari 8.0.3.
I have a navigation bar under a header div tag
and a slideshow div afterwards ... as the code shows
<div class="header">
<div id="navbar">
content
</div>
</div>
<div class="container">
<div class="slideshow" id="slideshow">
slideshow content
</div>
</div>
the header and navbar have a fixed position to stay on top of the page when scrolling , the problem is when I scroll my "slideshow" appears on top of the navbar but the rest of the page content does not, how can I fix this ?
CSS styles
.slideshow {
position: relative;
margin-bottom: 10px;
padding: 50px 0 0 0 ;
}
Different CSS sheet for header and navbar
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
}
#ime-nav {
position: fixed;
width: 100%;
z-index: 10000;
background:#FF9900;
}
apparently I just needed to add a z-index to the header, completely overlooked it
.header {
background: #2f3036;
height: 51px;
position:fixed;
width: 100%;
z-index: 1;
}
Im trying to get a footer to stick to the bottom of my webpage but it floats only half way up. I've looked at a few examples and I cant see what im doing wrong. Any assistance would be greatly appreciated. My simplified code is shown below.
<html>
<head>
</head>
<body>
<div id = "wrapper">
<!--Wrapper div for the main content-->
</div>
<!--Footer container-->
<div class="footer">
</div>
</body>
</html>
--CSS--
body
{
height: 100%;
margin: 0;
padding:0;
background-color: #1A1F2B;
min-width: 960px;
}
#wrapper{
min-height: 100%;
}
.footer{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
display: block;
background-color: #232A3B;
}
If you want it to be at the bottom of the document:
.footer {
position: absolute;
bottom: 0;
}
If you want it to be at the bottom of the viewport:
.footer {
position: fixed;
bottom: 0;
}
If you'd like the footer div to be on the bottom of the page and span the entire width this would work:
.footer {
position: absolute;
bottom:0;
height: 150px;
width: 100%;
background-color: #232A3B;
}
HTML5 also supports the <footer> Tag which may make it easier for bots to process the information on your webpage. To change that just use footer { instead of .footer { and change the HTML markup.