I need to create the illusion that an article's content is sliding underneath it's title when scrolling the page. The HTML looks like this:
<div class="wrapper">
<div class="header">
<h1>Title</h1>
</div>
<div class="body">
<p>a lot of content</p>
</div>
</div>
CSS looks like this at this point:
.wrapper{
height: 100vh;
width: 50%;
margin-left: 25%;
margin-top: 100px;
position: relative;
}
.header{
padding: 20px;
background-color: #fff;
position: fixed;
display: block;
box-sizing: border-box;
width: calc(50% - 8px);
z-index: 2;
}
.body{
z-index: 1;
top: 120px;
position: absolute;
padding: 20px;
background-color: #fff;
}
https://jsfiddle.net/joris508/frad472j/
Because there's an image in the background of the real website, I can't just put an element with a higher z-index to the top to hide that part.
I also tried to make the content portion (.body) scrollable itself. That created the right effect visually, but because the background-image on the page has a parallax scroll effect, scrolling the div itself caused problems.
Is there any solution to this problem?
Related
I have a site that has a top navigation bar, a header, a sidebar and a content body next to the sidebar. The header, sidebar, and content body are positioned absolutely so that they don't move when you navigate to other pages that are using the same template. The sidebar and content body have scroll bars. The header and sidebar are always visible even with scrolling. This works great as shown in the demo. But suppose the top navigation changes height. Then the vertical alignment is off. Since this site is using a global top navigation that's used in other sites as well, the top navigation can change at any moment. When it does change, this layout will not be future proof. Is there a way to make this future proof?
What I have currently:
http://codepen.io/codingninja/pen/nKwox
body {
margin: 0;
padding: 0;
}
.content {
/*position: relative;*/
}
.top-nav {
background: #000;
height: 42px;
color: #fff;
}
.header{
position: absolute;
height: 100px;
width: 100%;
background: #ddd;
}
.sidebar {
position: absolute;
top: 142px;
left: 0;
bottom: 0;
background: #aaa;
overflow-y: auto;
overflow-x: hidden;
width: 100px;
}
.body {
position: absolute;
top: 142px;
right: 0;
left: 150px;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
}
What happens when the top nav changes height:
http://codepen.io/codingninja/pen/nICzK
.top-nav {
background: #000;
height: 100px;
color: #fff;
}
Do you mean this:
Css3 has a Calc() Function
Height: Calc( 100% - 100px )
Instead of absolutely positioning everything you can make use of display:table to achieve the layout you want. Using the following html
<div class="table">
<div id="top-nav" class="row">
<div class="cell">top-nav</div>
</div>
<div id="header" class="row">
<div class="cell">header</div>
</div>
<div id="content" class="row">
<div class="cell">
<div class="table">
<div id="side-bar" class="cell">
<div class="overflow">
sidebar
</div>
</div>
<div id="body-content" class="cell">
<div class="overflow">body-content</div>
</div>
</div>
</div>
</div>
</div>
And Css
html,
body,
.table {height:100%; padding:0; margin:0;}
.table {display:table; width:100%;}
.table .row {display:table-row;}
.table .cell {display:table-cell;}
#top-nav {height:42px;}
#header {height:100px;}
#content {height:100%;}
#side-bar {width:100px;}
.overflow {height:100%; overflow:auto;}
Example
You will notice that when your top nav grows, your main content area will shrink. You will also not get into a positioning / z-index nightmare
I found a solution that involves a line of javascript to set top to the calculated height based on the height of the top nav and the header.
$(".sidebar, .body").css('top', topnavheight+100);
I have a div that is positioned absolutely in CSS. That div has overflow:auto so sometimes it shows a scrollbar if it has a lot of content. I need to completely overlay that div with another div, this one semitransparent so as to completely cover the first div.
The problem is that when a scrollbar is shown in the outer div, the overlay div does not cover it.
My HTML
<div id="outer">
<div id="content">
1<br/>2<br/>3<br/>4<br/>5<br/>
6<br/>7<br/>8<br/>9<br/>10<br/>
11<br/>12<br/>13<br/>14<br/>15<br/>
</div>
<div id="overlay">
</div>
</div>
My CSS
div#outer {
overflow: auto;
position: absolute;
top: 60px;
left: 20px;
height: 200px;
width: 200px;
border: 3px solid blue;
}
div#content {
background-color: lightgray;
}
div#overlay {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: yellow;
opacity: 0.8;
z-index: 2;
}
Run this here:
http://jsfiddle.net/pTnXF/4/
Any ideas?
Placing the #overlay inside #content and adding a "position:relative" to #content could work.
http://jsfiddle.net/pTnXF/5/
HTML changes
<div id="outer">
<div id="content">
1<br/>2<br/>3<br/>4<br/>5<br/>
6<br/>7<br/>8<br/>9<br/>10<br/>
11<br/>12<br/>13<br/>14<br/>15<br/>
<div id="overlay">
</div>
</div>
</div>
CSS changes
div#content {
background-color: lightgray;
position: relative;
}
jquery
$("#overlay").css("height",($('#outer')[0].scrollHeight));
I feel like this should be an easy answer but cant figure out how to achieve this effect.
Essentially i'm trying to do this: http://demo.smooththemes.com/theone/
one this site, when you start scrolling the image stays fixed and the content scrolls over top. Any ideas?
Thanks for you help.
example
http://jsfiddle.net/gvMLS/
HTML
<div id="header">
</div>
<div id="content">
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
</div>
CSS
#header {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: #ff0000;
}
#content {
position: absolute;
top: 20px;
bottom: 20px;
width: 100%;
background-color:#fff;
overflow: auto;
}
OK, so what I would like to have happen is what I've set as a background image to display on top of all other elements on the page - set on the right, half on the Content block, half off to the side... currently I have the structure of:
<div id="SideImage">
<div id="Contain">
<div id="Dash"></div>
<div id="content">
<h1>Heading 1</h1>
<p>Content</p>
</div>
<div id="Footer">
<p>Footer Content</p>
</div>
</div>
</div>
CSS looks like the following, z-index isn't working when I use FireBug, If I remove the background color from the Contain css I can see the full image, but I want that SideImage OVER the Contain background, Dash background and footer. The only other thing I can think of is setting a Div above the SideImage Div with a white background color that is only a specific width, and removing the background color from the Contain Div. Any ideas?
#Contain {
background-color: #FFFFFF;
margin: 0 auto;
position: relative;
text-align: left;
width: 850px;
z-index: 1;}
#Dash {
background-image: url("/23456jjsg886635kksjp/EQI/EQIImages/dash.png");
float: none !important;
height: 10px;
position: absolute;
top: 169px;
width: 850px;
z-index: 2;}
#content {
border-left: 2px solid #C5DFF3;
border-right: 2px solid #C5DFF3;
float: left;
position: relative;
width: 846px;
z-index: 3;}
#Footer {
background-color: #C5DFF3;
clear: both;
height: 60px;
padding-top: 5px;
position: relative;
width: 850px;
z-index: 4;}
#SideImage {
background-image: url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png");
background-position: 85% top;
background-repeat: repeat-y;
position: relative;
z-index: 5;}
JSFiddle of code above
Z-index can be a fickle mistress. I usually resort to content rendering order for something like this. Based on the above markup and what you have in mind, I'm leaning toward agreeing that it's not possible to have the background of the containing #SideImage be "on top" of any of its contents. See the diagram in that Smashing link for more information.
If you added the element <div id="SideFill" class="ir"></div> you could make the changes to your css:
#SideImage {
width:100%;
position:relative;
}
#SideFill {
position:absolute;
width:15%;
height:100%;
top:0;
right:0;
background:transparent url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png") repeat-y 0 0;
}
OK this is where I finally ended up for the HTML on the page.
<div id="Contain">
<div id="SideImage" class="ir"> </div>
</div>
For the CSS I ended at
#SideImage {
background: url("/myLink/SideImage.png") repeat-y scroll 0 0 transparent;
height: 100%;
left: 748px;
position: absolute;
top: 0;
width: 100%;
z-index: 30;
}
The background-image property of css is used to put an image at the background of an element. To put an image in the content or to elevate image over content use <img> tag.
You realize you want the background image, which is supposed to be in the BACK, to be in front, right? There's no way of doing it normally in CSS.
You'll need to have an <img> element with the image you want, and have it fixed/absolutely positioned with a high z-index.
Typically with my web-pages I'll have a #wrapper DIV that wraps the entire page and set to something like:
#wrap {position: relative; width: 1000px; display: block; margin: auto;}
My question is, if, inside that I have a banner like so:
#banner {width: 100%; display: block; height: 100px; background :#CCC;}
I then want that banner to go outside the margins of #wrapper and reach the sides of the window, no matter how big the window is.
How can I achieve this?
Here is a JS fiddle of what I can piece together: http://jsfiddle.net/MCms6/
To solve all your issues:
Make a container element for your #banner, so it can follow the flow of your document. Also position it relative to make it the parent to your banner.
Position #banner absolutely and you can stretch it as wide as you want.
UPDATE - DEMO
HTML
<div id="wrapper">
<h1>my content my content my content my content my content my content my content my content </h1>
<div id="bannerHolder">
<div class="banner">
my Banner
</div>
</div>
<h1>more content more content more content more content more content more content more content</h1>
</div>
CSS
#wrapper {
width: 140px;
display: block;
margin: auto;
background: #ccc;
}
#bannerHolder {
background: #aaa;
display: block;
height: 100px;
}
#bannerHolder .banner {
border: 1px solid #f00;
position: absolute;
background: #555;
left: 0;
right: 0;
height: 100px;
}