i'm new to webdesign and i have a little problem. I have a header(at the top), a navigation(at the left) and then the main content. I have set my header and navigation to position: abosulute so it won't scroll with the page. Now I wanna make it that the maincontent doesn't go over the header when you scroll. How can i do this?
image of the site
Here is the fiddle to get the desired layout... Header and sidebar position: absolute;
Fiddle: http://jsfiddle.net/FTtzc/1/
Demo: http://jsfiddle.net/FTtzc/1/embedded/result/
Put the main content in a container of its own and give that container a scrollbar.
Give your Header a Backgroundcolor and z-index: 2; and your content gets z-index: 1;
for further reference on z-index http://www.w3schools.com/cssref/pr_pos_z-index.asp
You can put your content in another absolutely positioned div, and then allow it to have a scrollbar with overflow: auto (scrollbar hidden when not necesssary) or overflow: scroll (scrollbar always visible).
Here is a fiddle to demonstrate: http://jsfiddle.net/YYmA9/1/
Related
Please anybody help spend 3 days on this but still stuck. I created a section on my site where am playing video-based scroll position to section but when you scroll to the first section or back to the last section from the bottom side video frame jumps.
actually, I don't know how I make position fixed element to top:0 inside relative container currently I have video frame position: absolute which is top:0 and correct but when I scroll am changing position:absolute to position fixed but that can't work with top:0 because fixed element can't work to the relative container so am adding top:35%
please watch the video here
https://www.loom.com/share/c29a3cadb3dc4420a59baaae072c1cec
and here is the site link
https://qa.modulos.ai/product-overview/
Okay I found your solution!
Remove everything that you have, and remove those classes not-sticky-top and sticky not-sticky-bottom
And your main problem is that body has overflow: hidden; which you must remove so that sticky can work, like this link says
Change your css like this:
body {
overflow-x: visible;
}
.sticky {
position: sticky !important;
top: 100px; // This is important so that the video doesn't go under the header, you can fine tune it afterwords
max-width: 100%;
}
.video-side {
position: relative;
}
Don't forget to remove over-flow: hidden on body and remove all those JS triggers and all other classes on the video element
I have a sticky header within header i have auto suggestion when i scroll the page then autosuggestion is also scrolling.
I wantenter image description here auto suggestion also stick with header
Try this css on auto suggestion parent div
.ClassName {
position: sticky;
top: 0;
}
I have what seemed like a simple issue but cant quite figure this one out. I am using bootstrap version 3 to create my base layout. I have a footer that needed to be at the bottom of the page so i made it position: absolute; bottom: 0; and worked fine if I zoom out. When the content start getting lengthy it creates the vertical scroll bar and when scrolling the DIV floats around instead of staying at the bottom.
I tried giving the container a position: relative; but dosent seem to do anything. Would anyone have any ideas?
Heres an example of my layout, if you resize the preview section to force the vertical scroll bar you will see that when you scroll the DIV floats around instead of staying in place.
https://jsfiddle.net/DTcHh/10301/
try with fixed
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
js fiddle example
non-fixed, see the below:
your problem is (from what I gather) the footer is floating dependent on the content and and you want it to stay put where you call it.
.footerElement {
// base styles all styles
display: inline-block; // add this, does as you imagine
}
"Displays an element as an inline-level block container. The inside of
this block is formatted as block-level box, and the element itself is
formatted as an inline-level box" -W3schools
scrollbar, see the below:
As for the element that has a scrollbar resolving.
.elementwithScrollbar {
// base styles all styles
overflow:hidden; // or use overflow-y:hidden; or x
}
fixed, see the below:
If you want it to be fixed; adding position: fixed; and the value coordinates should all you have to do there. (ie. position:fixed; and where you want it)
"Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page." -MDN
Using fixed only anchors it to the bottom of the screen regardless of which part of the page you are viewing. I think you want to have the footer at the bottom of the page rather than constantly sitting at the bottom of the screen.
To fix, amend your spelling mistake here:
.contrainer-fluid { <-- should be container
position: relative;
}
I have a position:fixed; navigation bar. Whenever I go to mypage.html#myid, the navigation bar overlaps some of the content of myid. How can I move the entire page down a bit so that the navigation bar isn't covering the content?
P.S. I tried body{padding-top:50px;}
You can't use margin-top on the myid div? Your main content should be inside a div and this div should be inside the body then myid div can push down from the body to allow enough space for the fixed nav bar.
Some code would help...
There is a bit hacky solution needed.
#myID:before {
display: block;
content: " ";
margin-top: -285px; /* navigation height */
height: 285px; /* navigation height */
visibility: hidden;
}
The logic is to add hidden element before the #myID content so browser will give it a hidden space. Giving minus valie as margin-top will prevent it to give phsyical space.
Please have a look at here for detail: http://css-tricks.com/hash-tag-links-padding/
I've set jQuery's accordion ui widget to fill space and resize on demand. Whenever the resize takes place, the accordion cuts through the page footer, which I've 'fixed' to the bottom of the page. I've also tried setting the footer to: #footer {position: absolute; bottom: 0; } but on resize the footer moves nearly to the middle of the page. Does anyone have any ideas/suggestions on how I can handle the resize so the newly sized accordion does NOT pass through the footer?
Try make a container and set its CSS to
overflow:auto;
Or try set the container to:
display: table;
and the #footer:
display: table-row;
Add the following CSS in the same div. (which is resizable).
overflow:auto;