The yellow box at the top works like it should. The one at the bottom does not. The scrolling should stop at the end of the footer, here as black line (and also not extend to the right).
Of course, there could be a way to to this with graphics.
Is there a solution with CSS?
#mainwrapper {
max-width: 1000px;
margin: auto;
padding-top: 100px;
position: relative;
}
.top-ci-colorbox {
position: absolute;
top: -135px;
right: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
.bottom-ci-colorbox {
position: absolute;
bottom: -135px;
left: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
header {
position: fixed;
max-width: 1000px;
top: 0;
}
footer {
position: relative;
z-index: 10;
border-bottom: 1px solid black;
}
<div id="mainwrapper">
<div class="top-ci-colorbox"></div>
<header>Navigation Here</header>
<main>
...
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</main>
<footer>Footer Here. Scrolling should stop at black line</footer>
<div class="bottom-ci-colorbox"></div>
</div>
View on JSFiddle
Please check this code. hope it will help you
#mainwrapper {
max-width: 100%;
margin: auto;
padding-top: 100px;
position: relative;
overflow-y: hidden;
}
#mainwrapper:before,
#mainwrapper:after{
content : "";
transform: rotate(-3.5deg);
position: absolute;
top: -60px;
left: 0;
height: 100px;
right: 0;
width: 100%;
background-color: yellow;
transform: rotate(-3.5deg);
}
#mainwrapper:after{
top: auto;
bottom: -60px;
}
header {
position: fixed;
max-width: 1000px;
top: 0;
}
footer {
position: relative;
z-index: 10;
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="mainwrapper">
<div class="top-ci-colorbox"></div>
<header>Navigation Here</header>
<main>
Is it possible to let the bottom box behave like the top one, so that the scrolling ends after reaching the footer and most part of the box is not beeing displayed. The same with the right scrolling, which is extended by the bottom box (and left scrolling not by the top one).
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</main>
<footer>Footer Here. Scrolling should stop at black line</footer>
<div class="bottom-ci-colorbox"></div>
</div>
</body>
</html>
html,body,#mainwrapper{
height:100%;
}
body{
margin-bottom:0;
}
#mainwrapper {
max-width: 1000px;
margin: auto;
padding-top: 100px;
position: relative;
overflow:hidden;
box-sizing:border-box;
}
main{
height: calc( 100% - 19px );
}
.top-ci-colorbox {
position: absolute;
top: -135px;
right: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
.bottom-ci-colorbox {
position: absolute;
bottom: -135px;
left: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
header {
position: fixed;
max-width: 1000px;
top: 0;
}
footer {
position: relative;
z-index: 10;
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="mainwrapper">
<div class="top-ci-colorbox"></div>
<header>Navigation Here</header>
<main>
Is it possible to let the bottom box behave like the top one, so that the scrolling ends after reaching the footer and most part of the box is not beeing displayed. The same with the right scrolling, which is extended by the bottom box (and left scrolling not by the top one).
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</main>
<footer>Footer Here. Scrolling should stop at black line</footer>
<div class="bottom-ci-colorbox"></div>
</div>
</body>
</html>
Check in Fiddle https://jsfiddle.net/h25d5b8z/28/
First up all you must need to set height 100% to html,body and the main element.If we absolute any item ,we must need to add property overflow:hidden to it's parent element.In this case we need to add overflow:hidden to #main-wrapper.We also need to set height to main tag element
After reading several topics about css overflow problems here on stackoverflow, I found the solution by myself. It is difficult to use overflow on only one axis because of unexpected behaviour.
Insted the #mainwrapper div needs to be wrapped in another div. This div comes with overflow: hidden.
<div style="overflow:hidden;">
<div id="mainwrapper">
...
</div>
</div>
Related
I have a page with a collapsable sidebar (black area). On the right we have the content area. In my example I have a grey square which represents a table. Now I have a div to float on top of this table (red on the picture) and make it fixed to the screen. So it scrolls with the page, but is centered to the content area. See example 1.
Right now it is centered to the viewport, meaning that the sidebar is also taken in account. Which makes the red square look like example 2.
Example 1:
Example 2: (current state)
Does anyone know any CSS tricks to center the fixed div to the content area, and not to the viewport. Maybe using calc or more margin on the left?
Code Pen
Here the code pen which demonstrates example 2
<div class="sidebar"></div>
<div class="content">
<div class="content-body">
<p>Content in here</p>
</div>
</div>
<div class="popup">
<p>This should be centered on content instead of the viewport</p>
</div>
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 250px;
background-color: #000;
}
.content {
width: calc(100% - 250px);
position: absolute;
top: 0;
right: 0;
background-color: #efefef;
}
.content-body {
width: 100%;
height: 2000px; /* to create some scrollable page*/
max-width: 1200px;
margin: 1em auto;
background-color: #afafaf;
}
.popup {
position: fixed;
width: 100%;
max-width: 1200px;
top: auto;
bottom: 0;
left: 0;
right: 0;
background-color: red;
margin: 1em auto;
}
https://codepen.io/finiox/pen/mdmJVwK
If I understood your question correctly, you can just change left: 0 to left: 250px for .popup
If the sidebar has a static width. Which is has in this case. You need to use the transform property and transform it to half the width of the sidebar.
transform: translate(125px, 0);
Optionally you can store the sidebar width in a root variable and use calc to get half the width.
:root {
--sidebar-width: 250px;
}
.popup {
transform: translate(calc(var(--sidebar-width)/2), 0);
}
if the sidebar is not always visible, then add a class (ex: is-sidebar-active) then you can select popup using something like .is-sidebar-active + nextSibling + nextSibling. Then just add left: SIDEBAR_WIDTH into popup.
Example:
:root {
--sidebarWidth: 250px;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: var(--sidebarWidth);
background-color: #000;
}
.content {
width: calc(100% - 250px);
position: absolute;
top: 0;
right: 0;
background-color: #efefef;
}
.content-body {
width: 100%;
height: 2000px; /* to create some scrollable page*/
max-width: 1200px;
margin: 1em auto;
background-color: #afafaf;
}
.popup {
position: fixed;
width: 100%;
max-width: 1200px;
top: auto;
bottom: 0;
left: 0;
right: 0;
background-color: red;
margin: 1em auto;
z-index: 9;
}
.is-sidebar-active + .popup {
width: calc(100% - var(--sidebarWidth));
left: var(--sidebarWidth);
}
<div class="sidebar is-sidebar-active"></div>
<div class="popup">
<p>This should be centered on content instead of the viewport</p>
</div>
<div class="content">
<div class="content-body">
<p>Content in here</p>
</div>
</div>
This code runs as intended on Chrome:
Please hover over the blue ball for animation:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
height: 200px;
border: thin solid #6D6;
overflow: hidden;
}
h2 {
position: absolute;
border-radius: 100%;
background-color: blue;
height:100px;
width: 100px;
transition:all 1s ease-out;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
h2:hover {
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div class='container'>
<h2></h2>
</div>
</body>
</html>
But the ball in the middle expands to the bottom in Firefox, and I have to set top or bottom in order to bring it back to its correct position. Is there is anyway to make it stay in the middle without assigning top and bottom value just like in Chrome?
A nice trick to center block elements in the middle of a relative positioned container, is using top: 50% and transform: translateY(-50%).
It requires IE9+
.container {
position: relative;
width: 100%;
height: 200px;
border: thin solid #6D6;
overflow: hidden;
}
h2 {
position: relative;
border-radius: 100%;
background-color: blue;
height: 300px;
width: 200px;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
<div class='container'>
<h2></h2>
</div>
JSFiddle demo: https://jsfiddle.net/oujab44t/1/
<head>
<style>
.container {
to;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class='container'>
<h2></h2>
</div>
</body>
</html>
I'd like to ask, how to add two images on both sides of a div.
See, I got a main container on my site, and I'd like to add a little decoration on both sides, like a shadow which would foreground the actual content and place less emphasis on the background, y'know?
So, I got something like this:
page.html
...
<body>
<div id="container">
<div id="shadow-left"></div>
<div id="shadow-right"></div>
...
</div>
...
</body>
...
main.css
...
#container {
position: relative;
background: #FFF;
width: 840px;
min-height: 100vh;
margin-left: auto;
margin-right: auto;
}
#shadow-left {
// Gotta do that on the left site too
}
#shadow-right {
position: absolute;
top: 80px; // So there's a little space just for the upper nav
left: 840px;
width: 500px;
height: 100vh;
background: url('/res/img/shadow-right.png') 0 0 no-repeat;
}
...
I imagined it to look like this, but there's just NOTHING. How could I accomplish to do that?
Here is a fiddle where the main content is under-shadowed by whatever color you'd like, you can expand the shadow effect by playing around with the css and I'm sure there are plenty of css-shadow generators online. Hope this is what you're looking for.
HTML
<div id="main"></div>
CSS
#main {
width:60%;
margin-left:auto;
margin-right:auto;
background:green;
height:1000px;
box-shadow: 30px 0 19px -4px lightgreen, -30px 0 19px -4px lightgreen;
}
P.S. Excuse the green..
It seems like for this you can use floats, I hope I am understanding your question correctly.
fiddle: https://jsfiddle.net/L4cjz8p9/
HTML
<body>
<div id="container">
<div id="shadow-left"><img src="http://placehold.it/100x300"></div>
<div id="shadow-right"><img src="http://placehold.it/100x300"></div>
Main content
</div>
</body>
CSS
#shadow-left
{
float:left;
}
#shadow-right
{
float:right;
}
#container {
position: relative;
background: #FFF;
width: 840px;
min-height: 100vh;
margin-left: auto;
margin-right: auto;
}
Here is one way to position things outside e.g. a centered container. You could then fill the "shadows" with a background that repeats only over y or no repeat at all if you only would like to have something on the top of the page but not repeat when you scroll down.
The example here just has a 50px wide box at both sides next to the container.
Fiddle: http://jsfiddle.net/60yjen0a/
HTML:
<div class="container">
<div class="shadow left"></div>
<div class="shadow right"></div>
<div class="content"></div>
</div>
CSS:
.container {
position: relative;
width: 600px;
height: 1000px;
margin: 0 auto;
}
.content {
position: absolute;
width: 100%;
height: 100%;
background: #eee;
}
.shadow {
position: absolute;
height: 100%;
top: 0;
background: #ddd;
width: 50px;
}
.left {
left: -50px;
}
.right {
right: -50px;
}
With absolute position you can use left and right
#shadow-left {
position: absolute;
top: 80px;
left: 0px;
width: 500px;
height: 100vh;
background: YOUR_BACKGROUND_URL_FOR_LEFT_SHADOW;
}
#shadow-right {
position: absolute;
top: 80px;
right: 0px;
width: 500px;
height: 100vh;
background: YOUR_BACKGROUND_URL_FOR_RIGHT_SHADOW;
}
Check this on JSfiddle
i would like to use a website with fixed header/footer and a scrollable div in between.
Only the div in the middle should scroll, no scrollbar for the whole site (that's why body overflow is hidden).
My attempt so far:
#container1 {display:block;padding-top:60px;overflow-y:scroll}
#container2 {display:none;padding-top:60px;overflow-y:scroll}
body{overflow:hidden}
The scrollbars are shown but too much on the right, also they are not scrollable?
PS: Unfortunately the switching between the DIVs don't work at JSFiddle, don't know why...
If the header and footer have explicit heights, it could be achieved simply by positioning the middle DIV absolutely and using top/bottom offsets with the respect to the height of the header/footer.
Then we can add overflow-y: auto to the middle DIV — Example:
#divLinks {
overflow-y: auto;
position: fixed;
top: 25px;
bottom: 40px;
width: 460px;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#divLinks {
overflow-y: auto;
position: absolute;
top: 25px;
bottom: 40px;
left: 0; right: 0;
}
#page{height: 100%;width:480px;margin: 0 auto; position: relative;}
#header{position:absolute;top:0;left: 0;right: 0;z-index:998;height:25px;background:#5f5f5f}
#bottom{position:absolute;bottom:0;left: 0;right: 0;z-index:999;height:40px;background:#5f5f5f}
<div id="page">
<div id="header">Header</div>
<div id="divLinks">
<div id="container1">First<br><br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
<div id="container2"> second<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1</div>
</div>
<div id="bottom">First Page - Second Page</div>
</div>
The easiest way, in my opinion, is to use fixed elements, like this:
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
and
body {
margin: 0;
overflow: hidden;
}
header {
position: fixed;
top: 0;
left: 0;
background-color: red;
width: 100vw;
height: 2em;
}
main {
position: fixed;
top: 2em;
left: 0;
width: 100vw;
height: calc(100vh - 4em);
background-color: green;
y-overflow: auto;
}
footer {
position: fixed;
bottom: 0;
left: 0;
background-color: blue;
width: 100vw;
height: 2em;
}
I am a CSS beginner.
I want a half transparent centered div with the main content. Below it should be a fixed div containing the table of contents.
Below is my attempt on this. This works with a certain browser size. But when the size of the browser window changes, the table of content moves.
I want the table of contents to stay at a fixed distance to the main div.
jsFiddle link
With this window size everything looks ok:
Decreasing the window size moves toc under content div:
html
<html>
<head>
<title>Testpage</title>
<link rel='stylesheet' href='css/testpage.css'>
</head>
<body>
<div id="contenttable">
<h1>Contents</h1>
Content 01<br>
</div>
<div id="content">
some text
</div>
</body>
</html>
css:
#content{
height: 1000px;
width: 320px;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}
#contenttable{
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
left: 6%;
}
#contenttable a{
position: relative;
top: 0px;
left: 66%;
}
#contenttable h1{
position: relative;
top: 0px;
left: 66%;
}
You can use an inner div absolutely positioned inside the fixed TOC, and set its position.
Use CSS3 Calc to elaborate the right position for your main content.
Use opacity for transparency, and avoid setting the height of the main content div for automatic overflow handing.
Demo: http://jsfiddle.net/vMAQz/1/
CSS
#contenttable {
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
}
#innerContent {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100px;
padding: 30px;
}
#content {
padding: 10px;
opacity: 0.8;
width: 320px;
position: relative;
top: 50px;
left: calc(100% - 480px);
background-color: cyan;
}
HTML
<div id="contenttable">
<div id="innerContent">
<h1>Contents</h1>
Content 01
<br/>
</div>
</div>
<div id="content">
some text
</div>
all you need to do is change the width of the content div
#content{
height: 1000px;
width: 30%;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}