This page http://alsotoday.com/roemerstrasse/ has a fixed bootstrap navbar, which should stay fixed, so the video in the background can shine through it. When scrolling the content all the way up, it will go beneath the navbar, which is not favourable. Anybody know, how to create an upper margin for the content, so it will scroll only just beneath the navbar without changing the navbar to not-fixed?
Edit 1:
main-area-video and panel_container (meanwhile called main-area) are both height 100%, because each, the video and the tiles should fill a screen.
Something like this ? In this snippet, the articles will not go behind the navbar, and only the content is scrollable. This is how SPA are supposed to work, for instance.
EDIT I added an opacity to the navbar so you can see, nothing is behind it.
body {
margin: 0;
height: 100%;
overflow: hidden;
}
.navbar {
position: fixed;
top: 0;
height: 50px;
line-height: 50px;
font-weight: bold;
font-family: Helvetica;
font-size: 30px;
background: darkcyan;
width: 100%;
padding: 0 20px;
color: white;
opacity: 0.2;
}
.content {
margin-top: 50px;
background: #ddd;
height: calc(100vh - 50px);
overflow: auto;
padding: 12px;
box-sizing: border-box;
}
.article {
height: 200px;
width: 100%;
background: #ccc;
margin: 12px 0;
}
<div class="navbar">Navbar</div>
<div class="content">
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
</div>
Since your page is always at 100% height and the only thing getting scrolled is the content you could just make it absolute instead of fixed.
But since you asked for a solution with a fixed position just add an margin to the content wrapper.
So to be clear: add margin-top: {MENU_HEIGHT}px to the content div, replacing {MENU_HEIGHT} with the actual height of your menu or the desired distance from it.
Related
I have a 2 Side-Cover which has an image side an Title Side.
And i want to make the Title Side move over Image Side when screen Resizes!
something like this site Cover NKWindows
Thanks for Helping
You can use something like this. Place the cover as the container's background and then place the content inside the #title div. That way, when the screen gets smaller, the background will remain untouched and the right-hand content will seem to move over it.
#cover {
background-image: url(http://www.nkwindows.co.nz/assets/HomeSlides/nk-windows-02.jpg);
background-repeat: no-repeat;
width: 100%;
overflow: auto;
position: relative;
height: 180px;
}
#title {
float: right;
font-size: 40px;
padding: 10px;
margin: 0;
width: 250px;
background-color: #E2231A;
color: #fff;
height: 180px;
box-sizing: border-box;
}
<div id="cover">
<div id="title">This is the
<br />moving title</div>
</div>
Fiddle: http://jsfiddle.net/rg3w8kxc/2/
I have a fixed bar on top and an element below it. Since the top bar is fixed, I need to add some padding to the top of the element below it so that the whole height of that element shows. However, when I add something like padding-top:40px for example, it doesn't move the element down; rather it creates space below the element. Same goes with margin.
I feel like I'm missing something obvious. What's the issue here?
Here's my HTML:
<div id="top-bar">
<div class="section-wrap">
Win a [name of phone]!
</div><!-- .section-wrap -->
</div>
<div id="top-section-page">
<div class="section-wrap">
<span>⇦</span> Back to the mix
</div>
</div>
<p>Some text here</p>
Here's my CSS:
#top-bar {
background: #FAFAFA;
height: 60px;
line-height: 60px;
padding: 0 20px;
position: fixed;
width: 100%;
z-index: 999;
}
#top-section-page {
background: url("http://i.imgur.com/KNYV8j2.jpg") repeat center top #69C9CA;
border-bottom: 10px solid #FFF;
line-height: 185px;
margin-bottom: 100px;
}
You can add add the padding-top on the body and then you need a top 0px on the #top-bar
Add this to your css code:
body{
padding-top: 40px;
}
#top-bar {
top: 0px;
}
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;
}
I'm trying to stretch the content of a div the height of the page. I've Googled the problem and so far nothing works. The whole thing is starting to give me a headache. Perhaps someone more experienced could take a look at my code? The full stylesheet is >400 lines, so I'm including what is (hopefully) relevant.
"Wrapper" takes up 100% of the page height, whereas "contentShadow" stretches only to the height of the text in the div "content".
Edit: as far as I can tell, every container has its height set to 100%, which whould make "contentShadow" 100% as well. Right...?
Edit 2: I'm starting to see the problem, but don't know how to solve it. While the following code will keep the footer down, it also means that since .wrapper doesn't have height:100%, "contentShadow" will not stretch. The question then is how I keep my footer down while changing this code:
.wrapper {
min-height: 100%;
height: auto !important;
margin: 0 auto -37px;
}
To this:
.wrapper {
height: 100%;
}
Basic structure of the page:
<div id="body">
<div id="headerWrapper"></div>
<div id="wrapper">
<div id="contentShadow">
<div id="#contentWrapper">
<div id="content">
<!-- contentshadow stretches the height of this content and no further, but SHOULD stretch the height of the entire page -->
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
Css rules relevant to these divs:
html, body {
height: 100%;
}
#headerWrapper {
height: 314px;
width: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -37px;
}
#contentShadow {
min-height: 100%;
width: 994px;
background-image: url(../images/contentShadow.png);
background-repeat: repeat-y;
margin-right: auto;
margin-left: auto;
}
#contentWrapper {
min-height: 100%;
width: 940px;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-top: 17px;
background-color: #EDECEC;
overflow: hidden;
}
#content {
min-height: 100%;
}
.footer, .push, {
height: 37px;
}
.footer {
background: white;
clear: both;
height: 37px;
}
You have really wrong code:
.wrapper matched <div class="wrapper"> not <div id="wrapper">.
<div id="#contentWrapper"> is not correct, you should try <div id="contentWrapper">
height: auto; is the problem. The wrapper needs to be 100% height, not auto...
the height: 100% after height: auto !important doesn't make sens, because of the !important keyword.
Maybe it's the default margins and padding, have you tried this?
body {margin: 0px; padding: 0px; }
I had this issue for the better part of my life, but I just solved it for myself, so I'm sharing, just in case somebody else can benefit.
My HTML/BODY selector is set to height:100%.
My container div within the HTML/BODY selector is set to min-height:800px.
My CONTENT div inside of the CONTAINER div didn't have a height, and I had the issue of the div not stretching to the bottom of the page. When I inspected this div, I noticed that for some reason, it was stretching way below its container div, pushing it up and creating that annoying space at the bottom of the page. Once I placed a height on that inside DIV, the issue went away for me.
I hope this helps.
The contentShadow must have overflow: auto. Try this
body, html { height: 100%; margin: 0; padding: 0; }
#container { width: 100%; height: 100%; overflow: auto; display: block; }
<body>
<div id="container">
This should fill the page!
</div>
</body>
I have a quick question about to how setup my basic fluid layout. I have one 40px high, and 100% wide header bar at the top, this looks great.
Then i have a #left and #right div, each floated respectively. This looks cool. They both have height 100% which works great but the issue is the page then scrolls 40px down, because there is the 40px from the header bar... if i use a fluid layout for the header and then the content box's it would look awful on a tiny or very large resolution.
Any ideas?
Here is my CSS
body
{
background: #ebebeb;
margin: 0;
padding: 0;
min-width: 750px;
max-width: 1500px;
}
#wrap
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#header
{
background: #414141;
height: 40px;
width: 100%;
}
#sidebar
{
width: 30%;
background: #ebebeb;
height: 100%;
float: left;
}
#rightcontent
{
width: 70%;
background: #fff;
height: 100%;
float: right;
}
#footer
{
width: 100%;
background: #414141;
height: 40px;
clear: both;
}
And here is my html page:
<body>
<div id="wrap">
<div id="header">
head
</div>
<div id="sidebar">
side
</div>
<div id="rightcontent">
right
</div>
<div id="footer">
footer
</div>
</div>
</body>
Does that help :)
height: 100%; is a tricky thing for web pages, as you are no doubt keenly aware. Looking at your code in Firefox 3.5.7 the #sidebar and #rightcontent columns only have only the height of about an em — just enough to hold the text you put in them, not the full page length I think you were hoping for. The columns are trying to calculate percent height from the explicit height of their parent, but #wrap also has a %-based height, which causes this to fail (at least in my Firefox).
Now, as you've described it (the columns being the right height, except for an extra 40px scroll) what seems to be happening is that whatever browser you're using is passing the full height of #wrap as 100% of it's parent, which is <body>. So naturally, when your columns are sized to the height of <body>, which also encloses the height of your header and footer, the columns are too tall.
A trick I've used a couple of times to achieve the full page length appearance of columns that scales appropriately to whatever page dimension is to stick a position: fixed; bottom: 0px; <div> tag at the bottom of my page with just enough markup inside it to mimic the structure and relevant CSS of the columns.
Here's what I did to your page to get this effect:
<!--Add this to your HTML-->
<div id='columnfooter'>
<div id='sidecont'></div>
<div id='rightcont'></div>
</div>
/* And modify your CSS like this */
#sidebar, div#sidecont {
width: 30%;
background: #ebebeb;
float: left;
}
#rightcontent, div#rightcont {
width: 70%;
background: #fff;
float: right;
}
div#rightcont, div#sidecont {
height:100%;
}
#footer {
width: 100%;
background: #414141;
height: 40px;
position: relative;
bottom: 0px;
}
div#columnfooter {
position: fixed;
z-index: -25;
bottom: 40px;
height: 100%;
background: #ebebeb;
width: 100%;
}
Yes, using the HTML to form empty background columns this way does kind of mix semantic and stylistic markup — a technical no-no. But the CSS is clearly abstracted from the HTML, and with this code I have full page columns, #footer at the bottom (even when more than a page of content is added to either column above it), and it behaves the same in the latest versions of Firefox, Safari, Opera, Chrome and IE8 at any resolution (tested down to 800x600).
Hope this helps!