As you can see from the picture, the footer is just slightly elevated from the bottom of the screen, but this only appears on the home page. Every other page in the site the footer appears to be completely on the bottom. What can be the issue here?
.footbar {
background-color: #181818;
height: 50px;
width: 100%;
position: absolute;
overflow: hidden;
}
Simply HTML (in HAML)
%body
....
.footer
.footbar {
background-color: #181818;
height: 50px;
bottom:0px;
width: 100%;
position: absolute;
overflow: hidden;
}
Related
So I'm trying to edit this existing widget on a page. I don't have access to edit the source code, so want to be able to do it entirely in CSS, ideally. Rather than trying to explain, I think it's easier just to paste an image of the desired behaviour - i.e. there is a left section (:before) and right section (:after) - as the splitter moves, then the widths of each pseudo element should change accordingly.
desired result
Here is a JSFiddle of a bare-bones version of the widget's code/structure
https://jsfiddle.net/o0zgyut3/
HTML
<div id='wrapper'>
<div id='splitter' style='left: 50%'></div>
</div>
<input id='slider' type='range' min='0' max='100' value='50'/>
CSS
body, html{
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #222;
}
input{
margin-top: 10px;
}
#wrapper{
width: 500px;
height: 50px;
background: #444;
position: relative;
display: flex;
}
/*left*/
#wrapper::before{
content:'';
width: 50px;
height: 50px;
background: linear-gradient(0deg,#00be1abf,#5fed00b3);
position: absolute;
left: 0px;
}
/*right*/
#wrapper::after{
content:'';
width: 50px;
height: 50px;
background: linear-gradient(0deg,#9f0000ff,#f10000ff);
position: absolute;
right: 0px;
}
#splitter{
position: relative;
transform: translateX(-50%);
background: #ddd;
height: 50px;
width: 10px;
z-index: 99;
}
JS (note that I wouldn't have access to the JS in the real site - the slider in this example below is just to allow changing the splitter position easily while debugging (without having to add the drag functionality)
document.getElementById("slider").addEventListener("change", function(){
document.getElementById("splitter").style.left = this.value + "%";
})
I have tried various approaches (with flex, inline, grid, floats, margins etc) and could get behaviour that was half-way to what I wanted, but never exactly. Also note, that, if it's easier, the real widths don't have to be accurate - it's a purely visual widget, so it's fine to e.g. make the right section 100% width, then only the left section is dynamic and position it above the right by giving it a higher z-index, if that's easier - i.e. if the right section was hard-coded at 100% width, and the left derived an 80% width from the css, it would give the illusion of an 80:20 split (even though it'd technically be 80:100), which is fine
Anyway, I suspect I'm missing something fairly obvious, so if anyone is able to get this working, that'd be awesome. Thanks
It's not possible that you directly access pseudo-elements with JS as when the page loads they're not part of the DOM.
However, you can do something like this create a new style element which will have new CSS for your wrapper
Run snippet below to see it working.
document.getElementById("slider").addEventListener("change", function() {
document.getElementById("splitter").style.left = this.value + "%";
var sytleElement = document.head.appendChild(document.createElement("style"));
sytleElement.innerHTML = "#wrapper:before {width: " + this.value + '%' + " }";
})
body,
html {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #222;
}
input {
margin-top: 10px;
}
#wrapper {
width: 500px;
height: 50px;
background: #444;
position: relative;
display: flex;
}
/*left*/
#wrapper::before {
content: '';
width: 10%;
height: 50px;
background: linear-gradient(0deg, #00be1abf, #5fed00b3);
position: absolute;
left: 0px;
}
/*right*/
#wrapper::after {
content: '';
width: 50px;
height: 50px;
background: linear-gradient(0deg, #9f0000ff, #f10000ff);
position: absolute;
right: 0px;
}
#splitter {
position: relative;
transform: translateX(-50%);
background: #ddd;
height: 50px;
width: 10px;
z-index: 99;
}
<div id='wrapper'>
<div id='splitter' style='left: 10%'></div>
</div>
<input id='slider' type='range' min='0' max='100' value='10' />
I've a fixed side bar on the right side of the page (position: fixed)
But it's contents are not fully visible as it's not scrolling with the page scroll. I could have added overflow-y: scroll in the .sidebar{} css settings. But don't want a separate scroll bar for sidebar. Is there an option to make it scroll with the full page scroll.
Here is my css settings for sidebar :
.sidebar {
text-align: center;
padding: 2rem,1rem;
color: rgba(255,255,255,.5);
background-color: #202020;
top: 0;
bottom: 0;
}
If you want to debug to see what went wrong, here is it running live : https://pagefault.me
Thanks
Based on the answer I suggested in my comment, I was able to work in chrome to arrive at the css below.
1) Add some css to the .sidebar-nav component
nav.sidebar-nav {
position: absolute;
overflow-y: scroll;
top: 100px; /*100px to give some room for the sidebar heading (without this, absolute position will make the nav overlap)*/
left: 15px; /* you can make this zero and add `padding-left: 15px` */
bottom: 15px; /* leave some room for copyright section */
right: -17px; /*this may vary from browser to browser (i suggest using the width of the widest scrollbar, then adjust for padding-right)*/
padding-right: 15px; /*padding to prevent the text from flowing off screen*/
}
2) The .container class becomes
.sidebar .container{
max-width: 38rem;
padding-left: 1rem;
padding-right: 1rem;
margin-left: auto;
margin-right: auto;
height: 100%;
position: relative;
overflow: hidden;
}
3) Make sure the footer bit remains at the bottom after making .sidebar-nav absolute
.sidebar .container > p:last-of-type {
position: absolute;
bottom: -15px;
}
Of course as mentioned in the original solution, you have to test the scrollbar widths in different browsers to arrive at the right width to use in place of right: -17px in step 1.
Use absolute position instead of fixed as you want it to scroll it along with the page.
body {
margin: 0;
padding: 0;
position: relative;
}
main {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 300vh;
background: beige;
}
aside {
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 300vh;
background: black;
color: white;
}
<main></main>
<aside><aside>
A flex box solution without positioning :
body {
margin: 0;
padding: 0;
display: flex;
}
main {
width: 80%;
height: 300vh;
background: beige;
}
aside {
width: 20%;
height: 300vh;
background: black;
color: white;
}
<main></main>
<aside></aside>
Is it possible to move an absolute positioned div outside the parent's borders?
I tried (less) left:calc(~'0%-15px') but does not seem to work :)
.dif-links {
background: pink; width: 25px; height: 100px;
position: absolute; text-align: center;
left:calc(~'0%-15px')
}
I have an article and I would like to maintain the "share" div outisde the article body, this is why I used the absolute position, but now just move it to the left side of parent seems to be complicated...
Here is my pen
Assuming the parent is its containing block (e.g. has position: relative), the easiest way is
position: absolute;
right: 100%;
#wrapper {
position: relative;
background: yellow;
margin: 0 50px;
height: 50px;
}
#inner {
position: absolute;
right: 100%;
border: 2px solid red;
}
<div id="wrapper">
<div id="inner">Foo</div>
</div>
Just set a margin-left of -25px.
i have try like this please check,
.dif-links{
background: pink; width: 25px; height: 100px; position: absolute; text-align: center;left:-15px; top:0;}
.container {
width: #w;
height: calc(~'100% - '#h);
background: yellow;
margin: 0 auto;
border-collapse: collapse;
margin-top: #h;
position:relative;
}
The below css seems to work like you expected. I have not used calc() method but i am sure you can tweak it now to fit your need.
.dif-links {
background: pink;
width: 25px;
height: 100px;
position: absolute;
text-align: center;left:365px;
}
Hope this Helps!
Happy Styling.
I try <iframe> for the content and use position: fixed; for a music player player bar to keep it at the bottom of the page.
Demo: http://jsfiddle.net/ThinkingStiff/vhLeE/
HTML:
<iframe src="http://thinkingstiff.com"></iframe>
<div id="player">music player</div>
CSS:
body {
margin: 0;
height: 100%;
}
iframe {
border: 0;
display: block;
height: 100%;
width: 100%;
}
#player {
background-color: black;
bottom: 0;
color: white;
left: 0;
position: fixed;
height: 30px;
width: 100%;
}
Sadly this doesn't work well for IE or Firefix 9, it simply shows the content in a small height window: http://cl.ly/0y0T2I1R042c3G002H3y
how can I fix this ?
I've seen a similar problem before with things I've worked on, and fortunately the workaround is really simple -- IE and Firefox just need the html height to be set to 100% as well. So update the first element of your style to be:
html, body {
margin: 0;
height: 100%;
}
That should do the trick.
You should also consider dividing iframe and div heights in percentages. If you specify 100% for iframe, div might hide the scrollbars.
you may change it to
iframe {
border: 0;
display: block;
height: 97%;
width: 100%;
}
#player {
background-color: black;
bottom: 0;
color: white;
left: 0;
position: fixed;
height: 3%;
width: 100%;
}
http://jsfiddle.net/vhLeE/3/
For some reason the margin of my content area, 150px top isn't working in internet explorer so that the content is going underneath the header. any help? I know generally fixed is a bit weird in internet explorer, but weirdly this seems to be working, it's just the content is starting off at the top of the page rather than 150px down.
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
overflow-x: auto;
}
body {
background-color: #FBFBFB;
margin:0;
padding:0;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 150px;
background-color: #FBFBFB;
z-index: 100;
}
#sidebar {
position: fixed;
top: 150px;
left: 0;
width: 275px;
height: 100%;
z-index: 100;
}
#content {
width: 837px;
margin-top: 150px;
margin-left: 325px;
overflow: auto;
}
Do you have a link that we can check?
Try "padding-top: 150px" instead, that mostly works unless there is something preventing you from doing that. Otherwise, try the regular tricks with "zoom: 1", "display: block", "position: relative" if they are applicable.