I need to create a div-element, which has 100% width and height for the visible part of the screen. Below this there should be another div-element with variable height, which can only be seen, if the user scrolls down. It is like a one-page website...
JSFiddle: http://jsfiddle.net/sopk6vx3/
#main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#overlay {
display: none;
opacity: 0.8;
width: 100%;
height: 100%;
background-color: #000;
position: fixed;
top: 0;
left: 0;
}
#overlay section {
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
background-color: #FFF;
width: 94%;
height: 90%;
border-radius: 5px;
margin: 2% 3%;
}
<div id="main">
<header>Navigation</header>
<footer>Footer of main-element</footer>
</div>
<div id="tour">
Here is some tour-information about the product
</div>
<div id="overlay">
<section>Main Content</section>
</div>
Via click on a navigation element the #overlay will be fade in to show the content.
So how do I do the correct CSS for the #main and #tour element? As in the fiddle it doesn't work.
And could the overlay-css been optimized?
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>
I'm trying to make a backdrop for a menu that will be used to detect if the user has clicked somewhere other than on the menu and close the menu.
For some reason despite setting
.menu-backdrop {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
The backdrop won't stretch beyond one of the parent divs.
I've distilled the webpage to something simple and stuck it here http://codepen.io/ben_irule/pen/LZWwjL?editors=1100
<!DOCTYPE html>
<html>
<head>
<style>
.app-layout {
height: 100%;
}
.layout {
height: calc(100% - 35px);
display: block;
}
footer {
height: 35px;
background-color: green;
}
.content {
position: relative;
/* attribute of doom*/
transform: translate3D(0, 0, 0);
display: block;
height: 100%;
margin-left: 320px;
margin-right: 280px;
}
.menu-backdrop {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: blue;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="app-layout">
<div class="layout">
<div class="content">
<div class="menu-backdrop"></div>
</div>
</div>
<footer></footer>
</div>
</body>
</html>
I've noted one transform attribute that when disabled stops the parent div from being problematic. However when I disable the equivalent attribute in the full blown app it does not resolve the issue.
I'm interested in understanding what conditions will result in a fixed position element being bound by a parent div.
I've been searching the web all morning but haven't found anything resembling my current issue.
.content {
position: relative;
/* attribute of doom*/
transform: translate3D(0, 0, 0);
display: block;
height: 100%;
margin-left: 320px;
margin-right: 280px;
}
Margin left and margin right is what stopping you to stretch beyond what it is now. Try reducing it.
Here is a better way of doing it. See if this solves your problem. Since you have a specific numbered margin, add those to menu-backdrop.
.menu-backdrop {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin-left: -320px;
margin-right: -280px;
margin-bottom: -32px;
background-color: blue;
}
This will pull the backdrop beyond the width of the containing div. A negative margin usually does the job:
.menu-backdrop {
position: fixed;
margin-left:-30px;
margin-right:-30px;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: blue;
}
Perhaps changing your layout to this:
<body>
<div class="app-layout">
<div class="layout">
<div class="menu-backdrop"></div>
<div class="content">
Need to stretch more!!
</div>
</div>
<footer>Footer</footer>
</div>
</body>
and styling similar to:
.menu-backdrop {
position: fixed;
max-width:750px;
margin:auto;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: blue;
}
I am currently developing a website where the user should be able to scroll horizontally through a landscape with clickable info points on it.
The webite is required to be fully responsive and to ensure this I want to put my landscape image and the info points in a container with the exact equal size of the image.
HTML:
<div id="container-main">
<div id="landscape">
<img class="background" src="image.jpg" />
<div class="point" style="top: 24%; left: 7.5%;"></div>
<div class="point" style="top: 29%; left: 17.7%;"></div>
<div class="point" style="top: 77%; left: 39%;"></div>
<div class="point" style="top: 26%; left: 68%;"></div>
<div class="point" style="top: 70%; left: 80%;"></div>
</div>
</div>
CSS:
html {
height: 100%;
}
body {
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
#container-main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: hidden;
}
#landscape {
position: relative;
display: inline-block;
height: 100%;
}
#landscape > img.background {
height: 100%;
display: block;
}
.point {
position: absolute;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background-color: white;
border-radius: 5px;
cursor: pointer;
}
My CSS works completetly fine until you resize the height of the browser window, then the info points move to wrong places.. however when you refresh the resized website it is working properly again.
Try it: Fiddle (resize the output and then click "run" again.)
In my real project I am setting the container's width to the image's width using javascript but I would love to have a clean CSS solution.
I know there are similar questions around but none of the suggested solutions works out for me.
Thank you in advance!
use vw insted of %
Adjust the code below:
<div id="container-main">
<div id="landscape">
<img class="background" src="image.jpg" />
<div class="point" style="top: 24vw; left: 7.5vw;"></div>
<div class="point" style="top: 29vw; left: 17.7vw;"></div>
<div class="point" style="top: 77vw; left: 39vw;"></div>
<div class="point" style="top: 26vw; left: 68vw;"></div>
<div class="point" style="top: 70vw; left: 80vw;"></div>
</div>
</div>
<style>
html {
height: 100%;
}
body {
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
#container-main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: hidden;
}
#landscape {
position: relative;
display: inline-block;
height: 100%;
}
#landscape > img.background {
height: 100%;
display: block;
}
.point {
position: absolute;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background-color: white;
border-radius: 5px;
cursor: pointer;
}
</style>
.....................Another solution.........................................................
change css:
html {
height: 100%;
}
body {
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
#container-main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: hidden;
}
#landscape {
position: relative;
display: inline-block;
width: 100%;
}
#landscape > img.background {
height: 100%;
display: block;
}
.point {
position: absolute;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background-color: white;
border-radius: 5px;
cursor: pointer;
}
NB: See the responsive coding standard of this site:
First off, never use position:fixed; on css unless you want the div or container to stay at the same place even when you scroll.
Second, i would recommend to use jquery to make a fluid layout. What a fluid layout does is, it keeps the content of the page in the same place even when you resize the website. If you dont want to waste time on writing a long script file, i would personally recommend you to use Dreamweaver. Dreamweaver updated their scripts to give the users easy way to make a fluid layout just by clicking some buttons. It will auto generate the script file and css for you. And if you're a manual coder like myself, than simply use dreamweaver to generate a fluid layout and start coding manually.
Hope this helps :)
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 have to make a layout with a .header and .content like with fixed height (for example 100px) and 100% width.
Then, I have to put a content with dynamical height that cover the void space.
<!-- [...] -->
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
width: 100%;
position: absolute;
}
.header {
position: absolute;
top: 0;
height: 100px;
width: 100%;
background: #0F0;
}
.footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background: #0F0;
}
.content {
position: absolute;
height: 100%;
width: 100%;
background: #F00;
padding: 100px 0;
margin: -100px 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
This layout HAD to permit me to put a header and footer with fixed height, and a content with images that scale dimensions (inside a div.content).
First of all: If you have a unique element, like a page header/footer, please use an id and not a class. A class is used for elements that appear frequently or have something in common that makes it semantically correct to group them, like description texts.
Now your problem. We have to give the html and body a total height of 100% so they won't resize and we can be sure that we will use the whole page.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
You then used a wrapper, but we can omit that. <body> is already a wrapper. The header and footer explain their self.
#header {
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
background: #0F0;
}
#footer {
height: 100px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #0F0;
}
The content is a bit tricky. It needs to be expanded to 100% - 100px at the top - 100px at the bottom. Impossible? No.
#content {
position: absolute;
top: 100px;
bottom: 100px;
left: 0;
right: 0;
overflow: hidden; /* No scrollbars | Make this 'auto' if you want them */
background: #F00;
}
Finished. You can have a look at it on jsFiddle.