I am using zurb foundation and I would like to make a web page that would have a structure and scroll effect like this one. I have an html structured like this:
<html lang="en">
<head>
...
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
...
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div id="app">
<!-- should be below the screen height -->
<div id="drawer">
<div id="magazine-detail">
...
</div>
<div id="magazine-detail-carousel">
...
</div>
</div>
<!-- the background image of the main-section -->
<div id="bg">
</div>
<!-- should take up the screen on the page load and start going below drawer on scroll down, on the z-axis -->
<div id="main-section">
<!-- sticky fixed top-bar -->
<div id="top-bar">
...
</div>
<div id="header">
...
</div>
<div id="carousel">
...
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Since I need a zoom in effect on the background picture I have setup div #bg like this:
#bg {
background-image: url('/img/cover.png');
background-size: cover;
z-index: -1;
animation: zoom 10s;
height: 100vh;
width: 100vw;
position: static;
-webkit-animation-fill-mode: forwards;
}
#keyframes zoom {
0% { transform:scale(1,1); }
100% { transform:scale(1.1,1.1);}
}
Since I saw in the example web page, on inspect in chrome, that the main page content, which in my case will be #drawer, is pushed with margin-top down to the bottom of the screen, I tried with this:
#drawer {
margin-top: 100vh;
position: relative;
z-index: 5;
}
But that is obviously not good, since when I have it like that I can't see the content of the other divs that are above the #drawer, because the margin takes the space with its color. And the margin-top = 100vh doesn't work for one more reason, I can't use jQuery scrollTop, for the divs that are not visible.
As for the main section, which for me in this case is what the #front-slider is in the example page, it needs to be on top of the #bg div, so that the #bg divs background-image serves as the backround of the main-section. I had to make div #bg so that I could have zoomed in effect on the background image, without main-section being scaled as well, when the background image is being zoomed in.
And for the top-bar I just need to be at the top like a sticky top-bar all the time.
I am not sure how to position all that to get the same effect and structure of the page shown as an example, I have tried with every possible css positions but nothing worked.
Updated
I have managed to work it out by using this.
Related
I have created this simple tribute page, with fixed background image.
I wanted to offset the container with the text content (I created a class just for it: .main-content) a bit down with a margin-top: 130px, so it's not glued to the very top of the page.
<body> <!-- applied background-image here -->
<div class="darken"> <!-- dark overlay on the background image -->
<div class="container-fluid">
<div class="container main-content"> <!-- .main-content - has margin-top: 130px; applied -->
<div class="row">
<div class="col-lg-offset-2 col-lg-10"> <!-- Bootstrap centering -->
<h1 class="display-1">St. Pope John Paul II</h1> <!-- just another text below... -->
<h2 class="display-4">Pope of the family</h2>
</div>
</div>
<div class="row">
<div class="col-....... <!-- rest of the text -->
However - a strange thing happened - the
.main-content {
margin-top: 130px;
}
margin seems to affect the body (according to Chrome DevTools...) thus eventually affecting (applying the margin-top to) the div with .darken class!
I want to achieve two things:
Having my text offset from the top of the page
Having .darken class applied to the full viewport
How can I achieve this?
CodePen link
Please try this:
Instead of margin use padding.
.main-content {
padding-top: 130px;
}
I've been trying all sorts of solutions offered here and other places, and none of them seem to work. I'd like to have an image take up the full width of the browser window, no matter the size (height scaled proportionally). But I need to place this image within a smaller container <div>, as it's part of dynamic content (the body of a blog post). I'm using bootstrap, but I don't think this problem is unique to the framework. Code:
<div class="container">
<div id="content" class="col-md-8">
{dynamic content in here}
<!-- still part of blog post -->
<div class="large"><img src...></div>
{more content}
</div>
</div>
CSS:
div.content { width: 70%; }
div.large img { width: 100%; }
If I put <img src="..." class="large"> inside the container div, it will, of course, be the size of that <div>. If I manually set the width of the image to, say, 1900px, it extends far out to the right of the main content, and I have to experiment to find an appropriate negative margin-left to center the image (margin: 0 auto doesn't center it). And of course that only works on a pixel-specific size. As soon as the window size changes, that code breaks.
If I set position: absolute;, the image appears on top of any following content, which isn't the behavior I want. I also tried this javascript using jQuery:
<script>
$("div.large img").css("width", $(window).width);
</script>
As well as a version without jQuery that iterates over the results of document.getElementsByClassName().
None of these approaches seem to give the results I want. Opening and closing the container would be a Bad Idea(tm), as this would break the isolation between the static layout and dynamic content, and so break the whole site if the static part of the layout changes and the blog posts aren't all manually updated.
It works for me with position absolute
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0;
}
div#small{
width: 200px;
background-color: green;
}
div#fullscreen{
position: absolute;
width: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="small">
i am a small div inside your browser window
<div id="fullscreen">
i got the same width as your browser window
</div>
</div>
<div id="small">
i am a small div inside your browser window
</div>
</body>
</html>
I think you'll need to do something like this...
<div class="container">
<div id="content">
<div class="col-md-8 etc..."></div>
{ content in here}
</div>
<!-- still part of blog post -->
<div class="large"><img src...></div>
<div class="col-md-8 etc..."></div>
{more content in here}
</div>
</div>
</div>
Set the .container to 100%, the content to 70% and the .large to 100% too
I'm creating a website and I want each section to take up the full screen. I have:
html, body {
height: 100%;
width: 100%;
margin: 0;
}
and each section has 100% height and width and relative position. Inside the second section, I want to create four divs that take up each corner. They share a class which has height and width 50% and absolute position. I tried to position them individually by selecting each id and giving them top:0 left:0, top:0 right: 0, and so on.
The problem is, the left and right positioning works, but when I try to position the top or bottom, the div will go to the top or bottom of the first section instead of the second. I think it might be an issue with having two 100% divs on top of each other, but I'm not sure. Would really appreciate any advice!
After see your fiddle, i see you wrote wrong the word "position" in class ".work", beside you can add an div clear between two divs ".hero" and ".work", it will work
<!--==== HEADER =============================================-->
<div class="header">
<div class="container">
<ul>
<li>Home</li><!--
--><li>Work</li><!--
--><li>About</li><!--
--><li>Contact</li>
</ul>
</div><!-- container -->
</div><!-- header -->
<!--===== HERO =============================================-->
<div class='hero' data-type="background" data-speed="10">
<div class='name'>
<h1>kdjfkd</h1>
<h2>fdasfdr</h2>
<h2><span >fgafd</span></h2>
</div>
</div><!-- hero -->
<div style="clear:both"></div>
<!-- ============= WORK ================== -->
<div class='work'>
<div class="same2" style="background-color:red; top:0;left:0"></div>
<div class="same2" style="background-color:yellow; top:0;right:0"></div>
<div class="same2" style="background-color:white; bottom:0;left:0"></div>
<div class="same2"style="background-color:green; bottom:0;right:0"></div>
</div>
.work{
height: 100%;
width: 100%;
position: relative;
}
Demo
Edit: not need "clear:both" at all, it still work fine
Why is it that the top half of my website (header-wrapper and menu-wrapper) is responsive, but the bottom (featured-wrapper and footer) isn't?
Recently, I've noticed that this responsive website behaves strangely when the screen is smaller than about 1000px. The header and navigation menu shrink to fit the screen size, but the content wrapper, called #featured-wrapper, and footer don't. The content is cut off, and where they cut off they are replaced with a dark charcoal colored bar that is the same as the footer color. When the website is viewed in a larger browser it centers perfectly.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="header-wrapper">
<div id="header" class="container">
<h1></h1>
<br>
<h2></h2>
</div>
</div>
<div id="menu-wrapper">
<div id="menu">
<ul>
<li>
<!-- content -->
</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="featured-wrapper">
<div class="extra2 container">
<div class="ebox1">
</div>
<div class="title">
<!-- content -->
</div>
</div>
</div>
</div>
<footer>
<div id="copyright" class="container">
<p></p>
</div>
</footer>
</body>
</html>
CSS for #featured-wrapper is:
#featured-wrapper
{
overflow: hidden;
padding: 10em 0em;
background: #FFF;
text-align: center;
}
Your css specifies
.container {
width: 1200px;
...
}
which is used in both the footer and the main content. One possible fix to this is to change it to
.container {
max-width: 1200px;
...
}
so that it will stretch to the width of its parent but will never go larger than 1200px wide.
This occurs because of this css:
overflow: hidden;
This prevents the #featured-wrapper element to show the slide bars:
CSS overflow Property
The overflow property specifies what happens if content overflows an element's box.
hidden The overflow is clipped, and the rest of the content will be invisible
I have a typical bootstrap layout like this
<body>
<div class="container">
...
</div>
<div class="container">
...
</div>
</body>
but I want to do this
<body>
<div class="bg-img">
<div class="container">
...
</div>
<div class="container">
...
</div>
</div>
</body>
The basic background color will be a soilid color but I want a background image for the main content. I would like the background image to scale appropriately with the responsive aspect of the framework.
I basically want to know if this is advisable?
Use just one container and then you can nest your rows into it.
html:
<div class="container">
<div class="row bg-img">
<div class="col-xs3">...</div>
<div class="col-xs3">...</div>
<div class="col-xs3">...</div>
</div>
<div class="row bg-img2">
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>
</div>
css:
.bg-img {
background-image:url('http://placehold.it/200x200');
background-repeat:repeat-x;
background-size: 100%;
}
.bg-img2 {
background-image:url('http://placehold.it/200x200/fc43c');
background-repeat:repeat-x;
background-size: 100%;
}
http://jsfiddle.net/8y9Hr/3
By "scale appropriately", I suppose you mean you have an image of e.g. 1000px wide, and if the window is narrower than 1000px, you want the image to shrink to fit the width of the window.
You can use the CSS background-size property, however this won't work in IE8 and below.
Example which resizes the background image to fit the width of the screen, where image height is calculated automatically while maintaining proportions:
.bg-img {
background: #f00 url('image.png') no-repeat center top;
background-size: 100% auto;
}
You can use media queries to set a different size image to avoid e.g. mobile devices loading a 2000px wide image and resizing it.
Reference: http://www.w3schools.com/cssref/css3_pr_background-size.asp