Im making a 1 page website so my menu has link fragments that move you to the correct section of the page.
My issue is that the bottom section has fixed positioning meaning that the link fragment doenst work. Ive added bottom padding to the body so when you scroll down it appears the last section is underneith the rest of the page content. What solutions are there for this?
I could just use JavaScript to scroll down the page when the link is clicked, but im not sure what the impact for screen readers or other usability devises is in doing this.
http://codepen.io/anon/pen/pKulL
<div id="menu">
One
Two
Three
Four
Five
Last
</div>
<div id="one">
One
</div>
<div id="two">
Two
</div>
<div id="three">
Three
</div>
<div id="four">
Four
</div>
<div id="five">
Five
</div>
<div id="last">
Last
</div>
#one, #two, #three, #four, #five {
border: 3px solid red;
background: grey;
width: 100%;
height: 300px;
z-index: 2;
position: relative;
}
#last {
position: fixed;
bottom: 0;
border: 3px solid green;
background: yellow;
z-index:1;
width: 100%;
height: 300px;
}
body {
padding-bottom: 300px;
}
#menu {
position: fixed;
top: 0;
right: 0;
z-index: 3;
background: white;
}
The problem is not that #last is not being linked to, it is that it has a lower z-index. When you link to it, that div remains hidden behind the other divs. You just need to change the z-index when you click on the #last link. You can alternatively use scrollTop to move to the bottom of screen and display the #Last div by moving the others out of the way.
To be clear about position
relative flows the element normally, but allows the position to be set relative to its normal position using the values set on the top, left, right, and bottom properties.
absolute places the element relative to the edge of its most recently positioned parent element. This element will be the body of the document or the element within which it is nested if that element's positioning has been set.
Using your example I have updated it so that clicking on #last will make that div appear.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready( function() {
$("#last-link").click(function() {
//$("#last").css("z-index", "3")
$("html, body").animate({ scrollTop: $(document).height()-$(window).height() }, "fast");
});
$("a:not(#last-link)").click(function() {
$("#last").css("z-index", "1")
});
})
</script>
<style type="text/css" media="all">
#one, #two, #three, #four, #five {
border: 3px solid red;
background: grey;
width: 100%;
height: 300px;
z-index: 2;
position: relative;
}
#last {
position: fixed;
bottom: 0;
border: 3px solid green;
background: yellow;
z-index:1;
width: 100%;
height: 300px;
}
body {
padding-bottom: 300px;
}
#menu {
position: fixed;
top: 0;
right: 0;
z-index: 3;
background: white;
}
</style>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="menu">
One
Two
Three
Four
Five
Last
</div>
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
<div id="five">Five</div>
<div id="last">Last</div>
</body>
</html>
I think ive found a solution. Making the link fragment target statically positioned, and having the div within it fixed positioned seems to work.
You can't make this work with fixed position, because when click the link, html retrieves the current position #last and scroll's the page to that position. Since, your #last div is in visible area, html doesn't scroll all the way down. You gotta have to use js to make it work.
Related
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;
}
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>
Here is the html:
<body>
<div class="ngdialog">
<div class="ngdialog-overlay></div>
<div class="ngdialog-content>
...modal content
</div.
</div>
<body>
The ngdialog div is, as you can guess, an modal (z-index: 10000).
My goal is, by applying some comination of styles (position, float etc.) to the elements to make it so that:
a) When the modal is displayed, have the overlay (grey and opacity; 0.5) cover all other elements in the page.
b) If the modal content is longer than the page, I would like the user to be able to use the main scroll bar to see the bottom/top of the modal. In other words, if the rest of the page is only 100px but the modal is 200px, I would like the scoll bar to allow the user to scroll that extra 100px.
The issue I am having is that when I position ngdialog as absolute, the window won't allow me to scroll to see the rest of the modal (as the absolute element is no longer in the standard element flow).
If I try to use fixed positioning, there is no scroll bar. If I use relative positioning, the other page elements (which the overlay is above) get moved around.
I have tried (what feels like) every combination of absolute, relative, fixed, static, float on all of these elements and I can't get the behavior I am seeking.
Keep in mind that body is position: relative (this can be changed if need be).
Thanks in advance, appreciate all comments.
Edit: Sorry, I had to go to sleep there, here is a fiddle:
https://jsfiddle.net/vpgoy756/1/
WIthout changing your HTML structure, this is what you'd need to do:
* {
/* This was to save typing */
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
position: relative;
width: 100%;
min-height: 100%;
}
.ngdialog {
z-index: 10000;
text-align: center;
overflow: hidden;
}
.ngdialog-overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
background: rgba(0,0,0, .4);
}
.ngdialog-content {
position: absolute;
z-index: 10000;
width: 100%;
height: 100%;
max-height: 100%;
overflow: auto;
}
.panel {
margin-top: 50px;
margin-left: 10%;
margin-right: 10%;
min-height: 500px;
z-index: 10000;
}
.reg-page-block {
width: 200px;
height: 200px;
display: inline-block;
background-color: #0f0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- ^ from your provided fiddle -->
<body>
<div class="ngdialog">
<div class="ngdialog-overlay"></div>
<div class="ngdialog-content">
<div class="panel panel-primary">
<div class="panel-heading">modal</div>
<div class="panel-body">content</div>
</div>
</div>
</div>
<div class="reg-page-block">Regular Page</div>
</body>
Be aware that if both the dialog and content are taller than the viewport, you will get double scrollbars - this may not be desirable but you specifically asked for the dialog to scroll separately from the content.
Try some of this CSS and see if it does the trick. It's hard to provide an exact solution without seeing your current CSS code, but maybe this will work.
Use this HTML structure instead:
<div class="ngdialog-overlay">
<div class="ngdialog-content">CONTENT HERE</div>
</div>
And this CSS code:
.ngdialog-overlay {
display:block;
width:100%;
height:100%;
background:#333333;
background:rgba(0,0,0,0.8);
z-index:10000;
position:fixed;
top:0;
left:0;
overflow: scroll;
}
.ngdialog-content{
text-align: center;
width:100%;
height:100%;
padding-top:30px;
padding-bottom:30px;
/* Optional if you want content vertically centered */
display:table-cell;
vertical-align: middle;
}
The trick is overflow:scroll; and height:100%; - because we have a set height, if the contents become any taller than that they will overflow and scroll. But in this case, when the user tries to scroll it will actually be scrolling the .ngdialog-overlay element and not the window itself.
http://jsfiddle.net/bcole808/6wcsxf3z/1/
In CSS file Add below lines
.modal-dialog {
transform: translateY(50%)!important;
}
You can change 50% to any other value which will solve problem in your Browser
It worked for me
I have a header at the top that holds the following css rule:
position: fixed;
I also have some images that hold (and need to hold) the following css rule:
position: relative;
The problem is that my header always sits at the top of the page as the user scrolls, but when they get to the image (with position:relative) this sits on top of my header. But the header should always be on top. Is there another css rule I can apply to allow this to happen?
That problem might be with z-index. Give your header z-index:999999999 and your problem will be solved.
There is no need to set position as relative or absolute. You can use the following code:
<html>
<head>
<title>Document Edit</title>
</head>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
}
.wrap {
width: 100%;
height: 1500px;
background-color: #DDD;
}
.header {
width: 100%;
height: 60px;
background-color: #004080;
position: fixed;
}
.imgdiv {
width: 400px;
height: 400px;
float: left;
background-color: green;
}
</style>
<body>
<div class="wrap">
<div class="header"></div>
<div class="imgdiv"><img src="error1.png" width="400" height="400"></div>
</div>
</body>
</html>
In your header CSS add z-index property:
with:
z-index:10 // can be any number but should be greater than the z-index of image
in image CSS add:
z-index:5; //should be less than the z-index of header
Just set in CSS z-index: 9999 to the header div.
I am trying to make an overlapping a DIV onto other visually . I am trying
{
position:absolute;
top:-10px;
}
in css, but I found that this top attribute is not working properly in firefox. Dear fellas, how to do that? Please help me with some codes or examples.
thx in advance
Here's an easy way
CSS
.top {
position: relative;
}
.topabs {
position: absolute;
}
HTML
<div class='top'>
<div class='topabs'>
I'm the top div
</div>
</div>
<div>No styles, just frowns :(</div>
The relative positioned div collapses as there are no contents, causing the coordinates 0,0 coordinates of the absolute positioned div to be that of the div underneath.
Fiddle
http://jsfiddle.net/y5SzW/
Try this, I like to use relative position for this kind of thing.
<html>
<head>
<style type="text/css">
body{
background-color: #000;
padding:0;
margin:0;
}
#bottom {
width: 200px;
height: 200px;
border: 5px #fff solid;
background-color:#f00;
margin: 0 auto;
}
.top {
width: 200px;
height:200px;
top: 10px;
left: -100px;
z-index: 10;
background-color: #00f;
color: #333;
border: 5px solid #fff;
position: relative;
}
</style>
</head>
<body>
<div id="bottom">
<div class="top"></div>
</div>
</body>
</head>
I would of course seperate the CSS into it's own file later.
Just use position: relative instead of absolute, or add a negative margin-top: -10px instead.