Multiple fullscreen sections with absolute positioned divs inside - html

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

Related

Anchor carousel navigation HTML to bottom of image using only CSS (without CSS grid)

In the example image, I have navigation. Example code below shows potential markup. If the image and the text below need to move together (slide side to side), how can I anchor the position the navigation using only CSS. I suspect that I'll have to rely on some JavaScript without knowing heights of elements, but I would rather not have to.
To be clear, the navigation here appears to be centered, but they are not. They need to be floated at the bottom of an arbitrary image height.
UPDATE
Example code (see CodePen):
<div class="carousel">
<div class="indices">
<div class="dot"><div class="ghost">Carousel slide 1</div></div>
<div class="dot"><div class="ghost">Carousel slide 2</div></div>
<div class="dot"><div class="ghost">Carousel slide 3</div></div>
</div>
<div class="gutter">
<div class="content">
<div class="img"><img src="https://cdn.pixabay.com/photo/2016/05/25/13/55/horses-1414889_1280.jpg" alt="Horses"></div>
<div class="text">This text content can really be any arbitrary height, so it wouldn’t work to just use negative margins on the navigation, unfortunately.</div>
</div>
<div class="content">
<div class="img"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg" alt="Other Horses"></div>
<div class="text">Also, images can be arbitrary heights.</div>
</div>
<div class="content">
<div class="img"><img src="http://maxpixel.freegreatpicture.com/static/photo/640/Water-Turtle-Nature-Reptile-649667.jpg" alt="Turtles"></div>
<div class="text">Turtles</div>
</div>
</div>
<div class="nav">
<a class="item prev" href="#" aria-label="Previous carousel story"></a>
<a class="item next" href="#" aria-label="Next carousel story"></a>
</div>
</div>
My code is very flexible; I can move things around if need be.
Have you tried to use position: relative and position: absolute (like in this simple example)? You wrap your image slide and bullet navigation in a div where you set the position to relative. Then set the navigation wrapper to absolute position (bottom: 0 to place it at the bottom of the parent div). It will normally stay in place even if the image changes as the height of the parent div will depend on the img height.
.outer-div {
position: relative;
}
.bullet-nav {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%); /* to center nav */
}

CSS - positioning divs

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.

Why is child container affecting parent

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;
}

div stays on top but should move with the site

I´m getting crazy here. I designed a site, scrolling from left to the right, but I can´t get the content for each ¨page¨ scrolling.
Instead the content sticks on top.
Please have a look here
The button (skull with pistons and info text) should stick on the page and move if navigation gets clicked
here is the code:
<div id="section_home" class="section_holder1"><!-- BEGIN SECTION "HOME -->
<div class="container"><!-- BEGIN CONTAINER -->
<div class="section_content"><!-- Begin Section Container -->
<div class="content_container"><!-- Begin Content -->
<div class="logo"></div>
<div class="separator"></div>
<div class="sign1">
<a class="readmore" href="#"></a>
</div>
</div><!-- End Content -->
</div><!-- End Section Container -->
</div><!-- END CONTAINER -->
</div><!-- END SECTION "HOME -->
Any idea what I´m doing wrong here?
Basically you problem is here:
.sign1 a.readmore {
display: block;
width: 65px;
height: 67px;
text-indent: -9999em;
z-index: 999999;
margin: 0 auto;
background-image: url(../img/bg-readmore.png);
position: fixed; /* --> position fixed is not what you're looking for */
top: 48%;
right: 43%;
}
Settins position:fixed does exactly what you see (fixing the element's position relative to the browser window.. it is no longer effected by page structure) you have in the middle all the buttons from all the frames on top of each other.
Try repositioning .sign1 a.readmore using position:absolute

Simple CSS MasterPage layout

I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):