so I have the following problem: I want to add a sidebar with a lot of content to my webpage. So the sidebar (div) should be scrollable and should also hide upon click.
To the right of the sidebar is my content. The content should always be to the right of the sidebar and the sidebar should never overlay parts of the content.
Here's my css:
div.sidebar {
position: fixed;
float:left;
left:0rem;
top:0rem;
bottom:1.2rem;
width:21rem;
background-color:rgb(110, 110, 110);
z-index:999;
overflow-y:scroll;
}
div.content {
border-width: 0;
margin: 2em;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: transparent;
font-size: 180%;
line-height: 130%;
}
If the css is like that with position:fixed (or absolute) the sidebar is scrollable and the body does not scroll. But the sidebar hides parts of the content.
If I remove the "position:fixed" from the .sidebar the content aligns right of the sidebar but the sidebar is not scrollable anymore (now the whole page has a scrollbar).
Specifying overflow: hidden for the body of the page didn't help. Neither did removing any of the left, top, bottom, float etc. tags. What am I missing?
How can I achieve a sidebar that is scrollable but does not overlay the content. Thanks in advance for any help!
I think I found a solution for you:
Wrap contents of sidebar into second div and add some class attribute - .fixed in my example. Now, we make .fixed div fixed, .sidebar div will take the space, so .content won't be overlapped by .fixed. Remember to set the same width for .fixed and .content, so they take the same space . Now, set width: auto in .content div, so it take all the space and overflow: hidden.
Now, when .sidebar has display: none, fixed will be hidden, and .content will take all their space :D
CSS:
div.sidebar {
/* take space on the left */
float:left;
width:20%;
margin-bottom:100%;
background-color:rgb(0, 0, 0);
}
div.fixed {
/* display fixed menu */
position:fixed;
width:20%;
left:0rem;
top:0rem;
bottom:1.2rem;
z-index:999;
rgb(110, 110, 110)
overflow-y:scroll;
}
div.content {
width:auto; /* take all the space */
overflow:hidden; /* try using without it and see what happens ;) */
border-width: 0;
background-color: transparent;
font-size: 180%;
line-height: 130%;
}
Working example: http://jsfiddle.net/z8dqhrf2/2/
Related
I'm stuck with a footer.
I have this code - https://jsfiddle.net/annaolsh/pLzv5sg5/13/
#footer {
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: orange;
text-align: center;
}
On a small screen the navbar is displayed on the top and footer is on the bottom - that's correct.
But on big screens when navbar is displayed vertically on the left side, footer disappears. Can't figure out how to display the footer. It doesn't need to be sticky: user needs to scroll down and see it (same as on small screens). Footer's width should be 100% of screen size.
Thank you!
In given code snippet positioning is off. There is some work to be done with position of each element on your page. The only node having position set is left menu and it's fixed.
The easiest fix would be to play with following css:
#footer {
position: relative;
clear:both;
padding: 1rem;
background-color: orange;
text-align: center;
}
Remove left, bottom and right. Just add position relative and clear:both.
DEMO:
https://jsfiddle.net/pLzv5sg5/14/
Add footer code inside content wrapper i.e container-fluid
use following CSS code for footer:
#footer {
padding: 1rem;
background-color: orange;
text-align: center;
}
https://jsfiddle.net/rppmvgeo/
My footer is having some odd issues when the screen resolution gets to a certain point - it responds and works with the screen size, but only the upper half of the footer has a background. I have bottom set to 0; and position set to absolute but it just isn't looking good. Any help would be appreciated.
Link to webpage (be sure to play with the responsiveness to see what I'm talking about): http://cardspoiler.com/Cardspoiler/MSoG/Navbar/Mage.html
HTML: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/MSoG/Navbar/Mage.html
CSS: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/Cardspoiler.css
The issue I am seeing is in the .left and .right classes. You have a transform: translateY(25%); attribute on them which is pushing them down past their natural positions. If you want your footer to sit at the bottom of the page and have the same look they do now change your CSS like so:
footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(128,128,128,.3);
text-align: center;
border-top: 1px solid #232526;
}
.left, .right {
display: inline-block;
list-style-type: none;
width: auto;
font-size: 100%;
vertical-align: top;
bottom: 0;
margin-bottom: 0;
padding-bottom: 10px;
}
.right li {
text-align: left;
}
Basically I just removed all of the translate properties from those divs removed the margin-bottom from the uls and adding some padding-bottom to them. With the max-height removed from the footer tag the padding gives some space from the bottom of the page and expands the footer background so it doesn't leave a gap at the bottom.
I have a problem with styling with CSS.
I can't fit the #main to the screen. I have a menu on the left side and i would like to have the main screen from the right next to the menu.
body {
background-color: lightgray;
padding: 30px 100px 0 100px;
}
nav {
line-height:30px;
width:20%;
float:left;
padding:5px;
}
#main{
position: relative;
width: 80%;
float:left;
padding:10px;
}
Here you are the screenshot how it is looking now:
How should I place "Content of the document" (#main) to be next to the nav?
EDIT: I have placed my code here: http://jsfiddle.net/47tjbnrt/
The problem is caused by your adding padding to the width. width is the width of its content and you set one to 80%, the other to 20%, and then add padding on top of that. Padding is the area around the content and, therefore, the width. That is why your second div drops down.
Either remove the padding or reduce the width of your elements.
body {
background-color: lightgray;
padding: 30px 100px 0 100px;
}
header {
text-align: center;
}
nav {
line-height:30px;
width:20%;
float:left;
padding:5px;
}
#main {
width: 70%;
float:left;
padding:10px;
}
I changed the width to 70%, since you have a lot of padding. (Also removed the position: relative from your #main, do you have anything with position: absolute inside the main section?)
Also changed the width to 70%, since you have a lot of padding.
I'm trying to get this effect with CSS (that little grey side stripe thingy):
However, nothing of what I'm doing is working. My code looks like this:
<header class="entry-header">
<div class="entry-title">
<h1>Contact</h1>
</div>
<div class="entry-float"></div>
</header><!-- .entry-header -->
I've tried floating div.entry-title left and padding div.entry-float, changed div.entry-float to <span>, tried using backgrounds on one div only, all of it unsuccessfully.
This must be 100% flexible, as not all headings are the same width. I'd prefer avoiding Javascript/jQuery entirely.
Can anybody assist?
I would do this with a trick where you place the "line" as a CSS3 pseudo element aligned to the center of the container. Then give the title element a background color with padding and place it over the top of the line. This will allow for variable length titles.
body{
background:#FAFAFA;
}
.entry-title{
position:relative;
margin:0 110px;
}
.entry-title:before{
position:absolute;
content:"";
top:50%;
background:#f7f7f7; /* line color */
left:0;
right:0;
height:10px;
margin:-5px 0 0; /* = half the height value */
}
h1{
position: relative;
color: #d9d9d9;
padding:0 20px 0 0; /* increase this number to add more spacing to the right of your title before the line */
background:#fafafa; /* same as background color of container element */
display:inline-block;
}
JSFIDDLE DEMO
There are various ways to achieve this, one of them is to add pseudo element to header, absolutely position it as desired and hide extra with overflow: hidden:
<h1>Content</h1>
h1 {
text-transform: uppercase;
font-size: 1em;
color: grey;
position: relative;
overflow: hidden;
}
h1:after {
content: "";
display: inline-block;
height: 4px;
width: 100%;
background: grey;
position: absolute;
top: 8px;
margin-left: 10px;
}
JSBin.
I am able to set sticky footer on web pages following instructions
http://css-tricks.com/snippets/css/sticky-footer/
It suggests min-height:100%and height not being set
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
However, in one of the page I need to set height:100% in.page-wrap to adjust height of its children. After I set height:100%, my sticky footer does not work and appears in the middle of page.
Is there a way to make sticky footer work with the height set to 100% in .page-wrap??
Remove height:100% element from container-fluid class
.container-fluid {
position: relative;
min-height: 100%;
/*height: 100%;*/ /*Remove the height and it will work fine*/
width: 100%;
border: 1px solid green;
}
DEMO HERE
.container-fluid
{
position:relative;
min-height: 100%;
width:100%;
border:1px solid green;
}
This will put the footer to the bottom of the page. This will work fine.