Related
I want to achive this kind of design.
So far this is my code (https://codepen.io/aceraven777/pen/BaWeJer)
My code:
body {
background-color: #122026;
color: #fff;
}
.wrapper {
width: 1000px;
margin: auto;
}
.first-part {
border-left: 10px solid white;
border-bottom: 10px solid white;
border-radius: 0 0 0 20px;
margin-bottom: -10px;
padding: 20px;
}
.second-part {
border-right: 10px solid white;
border-top: 10px solid white;
border-radius: 0 20px 0 0;
padding: 20px;
}
<div class="wrapper">
<div class="first-part">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non porttitor sapien, et ultricies elit. Vestibulum iaculis pellentesque ipsum aliquam aliquet. Vestibulum odio urna, scelerisque et efficitur eu, lobortis ac ligula. Duis id nisl posuere,
sodales dui ut, laoreet eros. Nullam malesuada lectus ut nisi dictum, sed iaculis tortor pulvinar. Nunc massa leo, laoreet a nisl dapibus, pretium feugiat nisi. Sed ut lectus at neque lacinia iaculis. Duis justo dui, fermentum et vestibulum sit amet,
pulvinar ac nulla. Donec volutpat mollis ipsum id maximus. Morbi commodo erat ut consequat rhoncus. Vivamus aliquam scelerisque lorem, ac molestie risus euismod et. Cras lacus sapien, luctus a mollis nec, molestie at velit. Etiam fringilla viverra
sem, eu ullamcorper ipsum congue et. Nullam tincidunt varius nulla, id dignissim lacus fringilla in. Vestibulum vitae iaculis lorem. Quisque id odio faucibus, tincidunt metus convallis, cursus nisl. Pellentesque urna sem, volutpat eu tempor eget,
feugiat tincidunt magna. Praesent pellentesque felis ut eros blandit, sed commodo sem dictum. Suspendisse potenti. Donec placerat eu erat eget viverra. Pellentesque condimentum in sem ut dictum. Phasellus venenatis mollis dui, facilisis aliquam turpis
varius non. Maecenas lobortis risus tincidunt erat consectetur, et semper massa tristique. Vivamus quis efficitur dui. Morbi aliquet dictum neque, in pharetra dui eleifend consectetur. Maecenas eu tortor et est efficitur finibus. Suspendisse potenti.
</div>
<div class="second-part">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non porttitor sapien, et ultricies elit. Vestibulum iaculis pellentesque ipsum aliquam aliquet. Vestibulum odio urna, scelerisque et efficitur eu, lobortis ac ligula. Duis id nisl posuere,
sodales dui ut, laoreet eros. Nullam malesuada lectus ut nisi dictum, sed iaculis tortor pulvinar. Nunc massa leo, laoreet a nisl dapibus, pretium feugiat nisi. Sed ut lectus at neque lacinia iaculis. Duis justo dui, fermentum et vestibulum sit amet,
pulvinar ac nulla. Donec volutpat mollis ipsum id maximus. Morbi commodo erat ut consequat rhoncus. Vivamus aliquam scelerisque lorem, ac molestie risus euismod et. Cras lacus sapien, luctus a mollis nec, molestie at velit. Etiam fringilla viverra
sem, eu ullamcorper ipsum congue et. Nullam tincidunt varius nulla, id dignissim lacus fringilla in. Vestibulum vitae iaculis lorem. Quisque id odio faucibus, tincidunt metus convallis, cursus nisl. Pellentesque urna sem, volutpat eu tempor eget,
feugiat tincidunt magna. Praesent pellentesque felis ut eros blandit, sed commodo sem dictum. Suspendisse potenti. Donec placerat eu erat eget viverra. Pellentesque condimentum in sem ut dictum. Phasellus venenatis mollis dui, facilisis aliquam turpis
varius non. Maecenas lobortis risus tincidunt erat consectetur, et semper massa tristique. Vivamus quis efficitur dui. Morbi aliquet dictum neque, in pharetra dui eleifend consectetur. Maecenas eu tortor et est efficitur finibus. Suspendisse potenti.
</div>
</div>
You could achieve this with additional elements that are used as mask.
two small masks with the same background-color like the body for hiding the unwanted part of the horizontal border
and one mask with tranparent background to repaint the rounded border from .first-part because the first mask is covering also the rounded border (not only the unwanted part)
You could also use masks for the little circles.
body {
background-color: #122026;
color: #fff;
}
.wrapper {
width: 1000px;
margin: auto;
}
.first-part {
position: relative;
border-left: 10px solid white;
border-bottom: 10px solid white;
border-radius: 0 0 0 20px;
margin-bottom: -10px;
padding: 20px;
}
.second-part {
position: relative;
border-right: 10px solid white;
border-top: 10px solid white;
border-radius: 0 20px 0 0;
padding: 20px;
}
.mask {
background-color: #122026;
}
#first-mask {
position: absolute;
bottom: -11px;
right: 0;
width: 20px;
height: 12px;
}
#second-mask {
position: absolute;
top: -11px;
left: 0;
width: 20px;
height: 12px;
}
#border-mask {
position: absolute;
top: 0;
left: -10px;
width: 50%;
height: 100%;
border-left: 10px solid white;
border-bottom: 10px solid white;
border-radius: 0 0 0 20px;
z-index: 10;
}
.circle {
background-color: #122026;
position: absolute;
width: 20px;
height: 20px;
border: 10px solid white;
border-radius: 50%;
z-index: 20;
}
#first-circle {
top: 55%;
left: -25px;
}
#second-circle {
top: -25px;
right: 10%;
}
<div class="wrapper">
<div class="first-part">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non porttitor sapien, et ultricies elit. Vestibulum iaculis pellentesque ipsum aliquam aliquet. Vestibulum odio urna, scelerisque et efficitur eu, lobortis ac ligula. Duis id nisl posuere,
sodales dui ut, laoreet eros. Nullam malesuada lectus ut nisi dictum, sed iaculis tortor pulvinar. Nunc massa leo, laoreet a nisl dapibus, pretium feugiat nisi. Sed ut lectus at neque lacinia iaculis. Duis justo dui, fermentum et vestibulum sit amet,
pulvinar ac nulla. Donec volutpat mollis ipsum id maximus. Morbi commodo erat ut consequat rhoncus. Vivamus aliquam scelerisque lorem, ac molestie risus euismod et. Cras lacus sapien, luctus a mollis nec, molestie at velit. Etiam fringilla viverra
sem, eu ullamcorper ipsum congue et. Nullam tincidunt varius nulla, id dignissim lacus fringilla in. Vestibulum vitae iaculis lorem. Quisque id odio faucibus, tincidunt metus convallis, cursus nisl. Pellentesque urna sem, volutpat eu tempor eget,
feugiat tincidunt magna. Praesent pellentesque felis ut eros blandit, sed commodo sem dictum. Suspendisse potenti. Donec placerat eu erat eget viverra. Pellentesque condimentum in sem ut dictum. Phasellus venenatis mollis dui, facilisis aliquam turpis
varius non. Maecenas lobortis risus tincidunt erat consectetur, et semper massa tristique. Vivamus quis efficitur dui. Morbi aliquet dictum neque, in pharetra dui eleifend consectetur. Maecenas eu tortor et est efficitur finibus. Suspendisse potenti.
<div id="first-mask" class="mask"></div>
<div id="border-mask"></div>
<div id="first-circle" class="circle"></div>
</div>
<div class="second-part">
<div id="second-mask" class="mask"></div>
<div id="second-circle" class="circle"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non porttitor sapien, et ultricies elit. Vestibulum iaculis pellentesque ipsum aliquam aliquet. Vestibulum odio urna, scelerisque et efficitur eu, lobortis ac ligula. Duis id nisl posuere,
sodales dui ut, laoreet eros. Nullam malesuada lectus ut nisi dictum, sed iaculis tortor pulvinar. Nunc massa leo, laoreet a nisl dapibus, pretium feugiat nisi. Sed ut lectus at neque lacinia iaculis. Duis justo dui, fermentum et vestibulum sit amet,
pulvinar ac nulla. Donec volutpat mollis ipsum id maximus. Morbi commodo erat ut consequat rhoncus. Vivamus aliquam scelerisque lorem, ac molestie risus euismod et. Cras lacus sapien, luctus a mollis nec, molestie at velit. Etiam fringilla viverra
sem, eu ullamcorper ipsum congue et. Nullam tincidunt varius nulla, id dignissim lacus fringilla in. Vestibulum vitae iaculis lorem. Quisque id odio faucibus, tincidunt metus convallis, cursus nisl. Pellentesque urna sem, volutpat eu tempor eget,
feugiat tincidunt magna. Praesent pellentesque felis ut eros blandit, sed commodo sem dictum. Suspendisse potenti. Donec placerat eu erat eget viverra. Pellentesque condimentum in sem ut dictum. Phasellus venenatis mollis dui, facilisis aliquam turpis
varius non. Maecenas lobortis risus tincidunt erat consectetur, et semper massa tristique. Vivamus quis efficitur dui. Morbi aliquet dictum neque, in pharetra dui eleifend consectetur. Maecenas eu tortor et est efficitur finibus. Suspendisse potenti.
</div>
</div>
#import url('https://fonts.googleapis.com/css?family=Roboto');
html,
body {
background-color: lightgray
}
.header {
position: fixed;
top: 0px;
width: 780px;
background-color: rgb(84, 153, 199);
padding: 40px 0;
}
.container {
background-color: white;
width: 780px;
margin: 0 auto;
padding-top: 120px;
}
.photo {
height: 160px;
}
h1,
.help {
font-family: 'Roboto', sans-serif;
}
h1 {
color: white;
margin: 0 1em;
}
.right {
float: right;
margin-right: 18px;
margin-left: 30px;
}
.figure {
border-bottom: solid #BBBBBB;
border-width: 1px;
margin-left: 214px;
width: 340px;
}
.left {
float: left;
margin-right: 20px;
margin-left: 20px;
height: 160px;
border-style: solid;
border-color: #BBBBBB;
border-width: 1px;
padding: 1px;
}
p {
padding-left: 10px;
padding-right: 10px;
}
div.help {
max-width: 40px;
max-height: 40px;
min-width: 40px;
min-height: 40px;
padding: 20px;
position: absolute;
border-radius: 20px;
background-color: blue;
margin-left: 800px;
margin-top: -1000px;
color: white;
font-size: 40px;
}
.photo-grid {
width: 228px;
}
<body>
<div class="container">
<div class="header">
<h1>Layout i HTML</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis commodo purus, et imperdiet sapien varius vel. Aliquam quis massa at neque fringilla pharetra eu at ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Nam a orci mattis, efficitur arcu ac, porta dolor. Aenean massa metus, dictum ut nibh ut, porttitor gravida tellus. Maecenas ex velit, pharetra quis pulvinar quis, rhoncus et augue. Donec sit
amet ex elit. Sed at nibh in lorem porttitor eleifend id ac justo. Aliquam eget libero facilisis, faucibus libero nec, ornare elit. Nunc accumsan libero vitae justo hendrerit, sed facilisis velit efficitur. Nullam aliquet dolor nibh, vel fringilla
tortor facilisis ut. Curabitur ultrices dapibus purus. Nullam porttitor odio a malesuada accumsan. Duis eget diam metus. Suspendisse potenti.</p>
<div class="right photo">
<img src="img/photo-one.png">
<img src="img/photo-two.png">
</div>
<p>Vestibulum cursus tellus id pulvinar pellentesque. Suspendisse euismod augue sit amet lorem tempus, vitae ornare quam auctor. Sed placerat eleifend nunc, at semper metus hendrerit ut. Suspendisse nulla libero, suscipit quis euismod quis, sagittis
non lectus. Integer convallis quam suscipit, lacinia felis at, molestie quam. Duis sagittis facilisis erat eget semper. Maecenas a odio enim. Morbi at odio egestas, pharetra est eu, tristique mi. Sed sed facilisis sapien, nec molestie nisl. Curabitur
faucibus risus viverra metus ultricies, vitae bibendum sem cursus. Maecenas quis nulla sollicitudin, luctus ex efficitur, fringilla sem.</p>
<p>Nunc rhoncus dolor vel nisi posuere imperdiet. Phasellus auctor turpis in vestibulum sodales. Vestibulum vitae nibh turpis. Sed vel vestibulum ex. Pellentesque ex lacus, venenatis a condimentum nec, venenatis id risus. Nullam mattis blandit tellus
quis dignissim. In ultrices lacinia interdum. Maecenas quam metus, egestas eu augue aliquam, mollis elementum lorem. Sed vel nulla consequat, porta eros non, porttitor enim. Praesent id turpis in ipsum pulvinar ornare. In tincidunt sit amet nulla
sed euismod. Sed scelerisque arcu justo, ac fringilla magna mollis vel. Phasellus ultricies sed ligula ac fringilla. Vestibulum venenatis velit non dui feugiat faucibus. Duis ut ante malesuada, egestas eros non, hendrerit sem. Fusce vehicula ante
at maximus consectetur.</p>
<div class="figure">
<div>
<img src="img/photo-three.png">
<p>Figur 1: Duis placerat quam at lacus facilisis, a semper dolor aliquet.</p>
</div>
</div>
<p>Aenean ut nisl convallis, volutpat ex vulputate, varius eros. Curabitur urna quam, euismod et egestas vel, dictum vel erat. Quisque dictum quis ex id auctor. Mauris efficitur libero neque, id pulvinar odio facilisis sit amet. Fusce eleifend sem eget
ipsum luctus pharetra. Sed efficitur non enim in blandit. Sed lacus quam, molestie nec volutpat quis, tincidunt et eros. Suspendisse id magna dictum, semper metus ac, ultricies nisi. Sed quis euismod nibh, non pulvinar turpis. Curabitur vulputate
massa luctus varius auctor. Aenean rutrum vitae arcu quis placerat. Donec sagittis porta purus, sed posuere lorem imperdiet quis.</p>
<div class="left photo"><img src="img/photo-four.png"></div>
<div class="right photo-grid">
<img src="img/photo-five.png">
<img src="img/photo-six.png">
<img src="img/photo-seven.png">
<img src="img/photo-eight.png">
</div>
<p>Suspendisse vel consequat risus. Phasellus et posuere orci. Suspendisse iaculis pellentesque neque quis luctus. Vestibulum eget sagittis lorem. Vivamus finibus risus venenatis, gravida diam blandit, tristique eros. Interdum et malesuada fames ac ante
ipsum primis in faucibus. Quisque non congue eros. Quisque venenatis blandit enim, quis elementum dolor iaculis at. Mauris ut magna magna. Nulla facilisi.</p>
<p>Fusce lacinia mauris nec nunc malesuada sollicitudin. Maecenas non enim purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare auctor nunc, et commodo elit condimentum ac. Mauris feugiat feugiat tortor ut egestas. Sed pellentesque
dictum nulla sit amet euismod. Fusce lacinia pulvinar fringilla. Duis eget ante blandit, tristique sapien nec, convallis dolor. Morbi elementum ornare neque non faucibus. Quisque aliquet nisl vitae risus euismod, vitae pretium justo porta. Suspendisse
vel tellus dictum, egestas nisl accumsan, scelerisque tellus. Nunc et faucibus mauris. Duis varius magna erat, a ullamcorper magna ullamcorper et.</p>
<div class="help">
<p>?</p>
</div>
</div>
</body>
So I have these as main.css and index.html, it should look like the linked picture but instead it looks like the gyazo, the things I need to do are, border around the 2 pictures on the right, correct the orange figure and fix the questionmark help button.
Image of how its supposed to look
Image of how it currently looks
You can add the CSS class to main.css and the desired output is achieved.
.help p{
margin:0px;
}
#import url('https://fonts.googleapis.com/css?family=Roboto');
html, body {
background-color: lightgray
}
.header{
position: fixed;
top: 0px;
width: 780px;
background-color: rgb(84, 153, 199);
padding: 40px 0;
}
.container {
background-color: white;
width: 780px;
margin: 0 auto;
padding-top: 120px;
}
.photo{
height: 160px;
}
h1, .help {
font-family: 'Roboto', sans-serif;
}
h1 {
color: white;
margin: 0 1em;
}
.right {
float: right;
margin-right: 18px;
margin-left: 30px;
}
.figure {
border-bottom: solid #BBBBBB;
border-width: 1px;
margin-left: 214px;
width: 340px;
}
.left {
float: left;
margin-right: 20px;
margin-left: 20px;
height: 160px;
border-style: solid;
border-color: #BBBBBB;
border-width: 1px;
padding: 1px;
}
p {
padding-left: 10px;
padding-right: 10px;
}
div.help {
max-width: 40px;
max-height: 40px;
min-width: 40px;
min-height: 40px;
padding: 20px;
position: absolute;
border-radius: 20px;
background-color: blue;
margin-left: 800px;
margin-top: -1000px;
color: white;
font-size: 40px;
}
.photo-grid {
width: 228px;
}
.help p{
margin:0px;
}
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title>Lorem Ipsum</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Layout i HTML</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis commodo purus, et imperdiet sapien varius vel. Aliquam quis massa at neque fringilla pharetra eu at ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam a orci mattis, efficitur arcu ac, porta dolor. Aenean massa metus, dictum ut nibh ut, porttitor gravida tellus. Maecenas ex velit, pharetra quis pulvinar quis, rhoncus et augue. Donec sit amet ex elit. Sed at nibh in lorem porttitor eleifend id ac justo. Aliquam eget libero facilisis, faucibus libero nec, ornare elit. Nunc accumsan libero vitae justo hendrerit, sed facilisis velit efficitur. Nullam aliquet dolor nibh, vel fringilla tortor facilisis ut. Curabitur ultrices dapibus purus. Nullam porttitor odio a malesuada accumsan. Duis eget diam metus. Suspendisse potenti.</p>
<div class="right photo">
<img src="img/photo-one.png">
<img src="img/photo-two.png">
</div>
<p>Vestibulum cursus tellus id pulvinar pellentesque. Suspendisse euismod augue sit amet lorem tempus, vitae ornare quam auctor. Sed placerat eleifend nunc, at semper metus hendrerit ut. Suspendisse nulla libero, suscipit quis euismod quis, sagittis non lectus. Integer convallis quam suscipit, lacinia felis at, molestie quam. Duis sagittis facilisis erat eget semper. Maecenas a odio enim. Morbi at odio egestas, pharetra est eu, tristique mi. Sed sed facilisis sapien, nec molestie nisl. Curabitur faucibus risus viverra metus ultricies, vitae bibendum sem cursus. Maecenas quis nulla sollicitudin, luctus ex efficitur, fringilla sem.</p>
<p>Nunc rhoncus dolor vel nisi posuere imperdiet. Phasellus auctor turpis in vestibulum sodales. Vestibulum vitae nibh turpis. Sed vel vestibulum ex. Pellentesque ex lacus, venenatis a condimentum nec, venenatis id risus. Nullam mattis blandit tellus quis dignissim. In ultrices lacinia interdum. Maecenas quam metus, egestas eu augue aliquam, mollis elementum lorem. Sed vel nulla consequat, porta eros non, porttitor enim. Praesent id turpis in ipsum pulvinar ornare. In tincidunt sit amet nulla sed euismod. Sed scelerisque arcu justo, ac fringilla magna mollis vel. Phasellus ultricies sed ligula ac fringilla. Vestibulum venenatis velit non dui feugiat faucibus. Duis ut ante malesuada, egestas eros non, hendrerit sem. Fusce vehicula ante at maximus consectetur.</p>
<div class="figure">
<div>
<img src="img/photo-three.png">
<p>Figur 1: Duis placerat quam at lacus facilisis, a semper dolor aliquet.</p>
</div>
</div>
<p>Aenean ut nisl convallis, volutpat ex vulputate, varius eros. Curabitur urna quam, euismod et egestas vel, dictum vel erat. Quisque dictum quis ex id auctor. Mauris efficitur libero neque, id pulvinar odio facilisis sit amet. Fusce eleifend sem eget ipsum luctus pharetra. Sed efficitur non enim in blandit. Sed lacus quam, molestie nec volutpat quis, tincidunt et eros. Suspendisse id magna dictum, semper metus ac, ultricies nisi. Sed quis euismod nibh, non pulvinar turpis. Curabitur vulputate massa luctus varius auctor. Aenean rutrum vitae arcu quis placerat. Donec sagittis porta purus, sed posuere lorem imperdiet quis.</p>
<div class="left photo"><img src="img/photo-four.png"></div>
<div class="right photo-grid">
<img src="img/photo-five.png">
<img src="img/photo-six.png">
<img src="img/photo-seven.png">
<img src="img/photo-eight.png">
</div>
<p>Suspendisse vel consequat risus. Phasellus et posuere orci. Suspendisse iaculis pellentesque neque quis luctus. Vestibulum eget sagittis lorem. Vivamus finibus risus venenatis, gravida diam blandit, tristique eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque non congue eros. Quisque venenatis blandit enim, quis elementum dolor iaculis at. Mauris ut magna magna. Nulla facilisi.</p>
<p>Fusce lacinia mauris nec nunc malesuada sollicitudin. Maecenas non enim purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare auctor nunc, et commodo elit condimentum ac. Mauris feugiat feugiat tortor ut egestas. Sed pellentesque dictum nulla sit amet euismod. Fusce lacinia pulvinar fringilla. Duis eget ante blandit, tristique sapien nec, convallis dolor. Morbi elementum ornare neque non faucibus. Quisque aliquet nisl vitae risus euismod, vitae pretium justo porta. Suspendisse vel tellus dictum, egestas nisl accumsan, scelerisque tellus. Nunc et faucibus mauris. Duis varius magna erat, a ullamcorper magna ullamcorper et.</p>
<div class="help">
<p>?</p>
</div>
</div>
</body>
</html>
I'm creating a webpage that will have a long list of questions. I'm separating the questions using divs so that I can get the page to jump to the correct section, including the section at the top of the page. The problem is that the header doesn't scroll with the content like it was before I started adding content. Before adding content, the header would scroll as soon as the page started scrolling. Now, it delays until you get to the Service Time Questions radio buttons. I've searched online to see what would cause a delay in scrolling a header, but haven't found any usable results.
Here's my HTML:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="Layout.css">
<meta charset="UTF-8">
<title>Sample Page</title>
</head>
<body>
<div class="header">
<h1>Sample Page</h1>
</div>
<div class="menu">
<ul>
<li>CMS ID & Auditor Name</li>
<li>Service Time Questions</li>
<li>Narrative Questions</li>
<li>Diagram Questions</li>
<li>Photo Questions</li>
<li>Estimatics Questions</li>
</ul>
</div>
<div class="content">
<div id="cmsID" class="subcontent">
<form action="./audit_submitted.php" method="post">
<h3>CMS ID & Auditor Name</h3>
<br/><br/>
<p> Enter CMS ID:
<input type="text" name="cmsID" size="25" maxlength="25" value=""/>
<br/><br/>
Auditor Name:
<input type="text" name="auditorName" size="25" maxlength="25" value=""/>
<br/><br/>
Select Carrier:
<select name="carrierID" required>
<option value="">Select...</option>
<option value = "0">GAIG/AMIG</option>
<option value = "1">Nat Gen</option>
<option value = "2">SoCal AAA</option>
<option value = "3">QBE</option>
</select>
</p>
</form>
<br/><br/><br/>
</div>
<div class="subcontent" id="serviceTime">
<br/>
<h3>Service Time Questions</h3>
<br/><br/>
<input type="radio" name="answer" value="1"> Yes
<input type="radio" name="answer" value="0"> No
<input type="radio" name="answer" value="1"> N/A
<br/><br/>
</div>
<div class="subcontent" id="narrative">
<br/>
<h3>Narrative Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="diagram">
<br/>
<h3>Diagram Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="photos">
<br/>
<h3>Photo Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
<div class="subcontent" id="estimatics">
<br/>
<h3>Estimatics Questions</h3>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non malesuada enim, et viverra dui. Pellentesque vulputate mauris quis nibh posuere molestie. Proin nec sollicitudin urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum eros. Etiam tincidunt ut elit quis maximus. Vivamus consequat tincidunt sapien vel egestas. Sed in pretium odio, eget sodales nunc. Sed eu ultrices augue. Nullam id sollicitudin nisi.
Aenean lorem lorem, vehicula sit amet auctor in, imperdiet ut augue. Integer quis mi sit amet mi luctus hendrerit. Integer eu arcu eget orci pretium mollis a eget odio. Nam at tristique nisi. Sed et ante venenatis, bibendum arcu sed, tempor mauris. Etiam ac massa sed quam tincidunt porta in ac massa. Vestibulum ante diam, interdum gravida rutrum eu, egestas id sem. Pellentesque quis turpis lacus. Morbi sit amet dui eget augue bibendum sodales. In in turpis arcu. Pellentesque non velit lobortis, facilisis mi non, malesuada velit. Fusce sit amet egestas ante, tincidunt pharetra nulla. Vivamus ligula sem, lobortis eu tortor et, mollis tincidunt risus. Sed feugiat lacus at sem sagittis, in interdum diam elementum. In imperdiet tellus fermentum congue ultricies. Praesent metus magna, iaculis eu sodales eget, viverra vel nulla.
Ut ut lorem et massa efficitur sodales. Integer posuere, ipsum fringilla pulvinar efficitur, orci lacus aliquam massa, sed tincidunt ipsum tortor at felis. Duis sollicitudin vulputate rutrum. In nec mauris vel quam eleifend eleifend eget et nulla. Nam ante ante, consectetur non sapien eleifend, tristique vehicula nisi. Fusce vitae massa suscipit sem scelerisque hendrerit. Nunc id turpis vulputate, finibus metus nec, elementum justo.
Proin enim ante, convallis at nulla at, vulputate ultricies orci. Aenean blandit justo a maximus dapibus. Sed ut pellentesque ipsum. Cras interdum luctus augue non sodales. Sed ac interdum erat, in tristique sapien. Sed fermentum quam nec fringilla laoreet. Nulla maximus, velit in porttitor laoreet, erat mauris mattis nibh, ut mollis tortor nisi ac risus. Integer quis massa venenatis, ultrices urna nec, ultrices erat. Nam leo eros, porttitor a scelerisque a, rhoncus sed justo. Nulla sollicitudin, lectus eu dignissim tempor, sapien libero finibus est, eu elementum erat leo vel orci. Aenean molestie lorem sit amet pulvinar euismod. Nunc tempus consequat tellus. Etiam vel risus id quam varius sodales.
Ut quis est a nisl maximus viverra. Quisque lobortis, mi non sodales ornare, massa dolor aliquet enim, non posuere risus tortor ac turpis. Sed at ultrices turpis. Quisque eget sapien dapibus, ullamcorper risus a, scelerisque turpis. Sed hendrerit, arcu non condimentum rutrum, nibh urna condimentum lorem, a molestie nisi nunc sed lorem. Vivamus lobortis augue non nibh cursus consequat. Nam tincidunt, felis ac iaculis condimentum, massa risus fringilla lorem, eget laoreet ipsum nunc sit amet odio.</p>
<br/><br/>
</div>
</div>
<div class="footer">
© Sample Company 2016
</div>
</body>
</html>
And here's my CSS:
html, body {
min-height: 100%;
margin: 0%;
width: 98%;
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
}
*{
margin: 0%;
padding: 0%;
}
.header{
color: #FFFFFF;
background-color: #B31220;
font-size: 2em;
padding: 1% 0% 1% 2%;
text-align: center;
width: 98%;
position: absolute;
}
.header img{
float: left;
width: 102px;
height: 100px;
top: 8%;
background: #B31220;
}
.header h1{
position: relative;
top: 10px;
left: 5px;
}
/*The menu class is fixed to the left hand side of the screen and takes up full
vertical space available. It does however show up behind the header bar.*/
.menu{
width: 12%;
height: 100%;
position: fixed;
padding-top: 20%;
z-index: -1;
background-color: #505050;
color: #FFFFFF;
}
.content{
width: 88%;
height: 100%;
font-size: 1em;
float: right;
padding: 1%;
padding-top: 10%;
padding-bottom: 20%;
position: absolute;
z-index: -1;
margin-left: 10%;
background-color: #F8e8d2;
overflow-y: scroll;
}
.subcontent{
margin: 2%;
}
.footer{
position: fixed;
bottom: 0;
width: 98%;
background-color: #B31220;
color: #FFFFFF;
clear: both;
text-align: center;
padding: .5% 1%;
}
/*Experimental Code*/
ul {
list-style-type: none;
margin: 0%;
padding: 0%;
width: 10%;
background-color: #505050;
height: 100%;
position: fixed;
overflow: auto;
}
li a {
display: block;
color: #FFF;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #B31220;
color: white;
border: 0;
}
Made a few adjustments to your stylesheet. Using fixed and absolutes in the positions was causing most of the problem. Give definite heights to each div makes a difference.
html, body {
min-height: 100%;
margin: 0%;
width: 98%;
font-family: Arial, Helvetica, sans-serif;
}
*{
margin: 0%;
padding: 0%;
}
.header{
color: #FFFFFF;
background-color: #B31220;
font-size: 2em;
padding: 1% 0% 1% 2%;
text-align: center;
width: 98%;
height: 120px;
}
.header img{
float: left;
width: 102px;
height: 100px;
top: 8%;
background: #B31220;
}
.header h1{
position: relative;
top: 10px;
left: 5px;
}
/*The menu class is fixed to the left hand side of the screen and takes up full
vertical space available. It does however show up behind the header bar.*/
.menu{
width: 12%;
height: 500px;
float: left;
background-color: #505050;
color: #FFFFFF;
}
.content{
width: 88%;
height: 500px;
font-size: 1em;
float: left;
background-color: #F8e8d2;
overflow-y: scroll;
}
.subcontent{
margin: 2%;
}
.footer{
bottom: 0;
width: 98%;
background-color: #B31220;
color: #FFFFFF;
clear: both;
text-align: center;
padding: .5% 1%;
}
/*Experimental Code*/
ul {
list-style-type: none;
margin: 0%;
padding-top: 20%;
width: 100%;
background-color: #505050;
overflow: auto;
}
li a {
display: block;
color: #FFF;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #B31220;
color: white;
border: 0;
}
IF YOU MARK THIS DUPLICATE, YOU HAD BETTER GIVE ME A LINK TO THE ANSWER I NEED. OTHERWISE, DON'T BOTHER MARKING IT DUPLICATE, COMMENTING OR A
Just change you CSS in the html, body for overflow-x: hidden to overflow: hidden and add #estimatics{margin-bottom: 200px}
Thanks to Jeff, I was able to track down what was wrong. His answer didn't fix the issue, but it made the root cause more obvious.
I had to change the height: 100%; in .content to min-height: 100%;.
I also added display: inline-block; to the end of .content.
Finally, I had to add background-color: #F8e8d2; to the .subcontent section because the subcontents were causing discoloration on the content div.
These updates fixed it so that the header scrolls when I start scrolling the page, and my jump links work perfectly.
What I need to do is display a staggered set of testimonials on desktop and then when the screen is below 979px switch over to a vertical type of layout. The images and name of the person should be on the top as a header and the testimonial text directly below.
I have included a fiddle here. You can see that when the viewport is wide there is a staggered layout but when you shrink it the layout switches to a more vertical layout for the testimonials where the image was on the left.
What I need is for the testimonials where the image was on the right to look just like the testimonials where the image was on the left. The only way I have been able to do this is to change the order of the testimonials with the image on the right so that the image wrapper is placed above the text wrapper and float the image wrapper to the right. The problem with this is that it breaks the vertical-align: middle of the inline-block elements.
I am wondering if there is a different way to accomplish my vertical layout goal using pure CSS? I know I can easily do it with Javascript but would prefer not to use it if I don't have to.
Here is my code:
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
.about-wrapper .spacer {
height: 75px;
}
.about-wrapper h1.customer-testimonial-header {
text-align: center;
font-size: 2rem;
font-weight: 600;
color: white;
}
.about-wrapper .bubble p {
font-size: 0.9rem;
}
.about-wrapper .bubble {
position: relative;
padding: 35px;
background: #FFFFFF;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border: #cecece solid 1px;
}
.about-wrapper .bubble:after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
z-index: 1;
top: 50%;
border-color: transparent #FFFFFF;
}
.about-wrapper .bubble:before {
content: '';
position: absolute;
border-style: solid;
border-color: transparent #cecece;
display: block;
width: 0;
z-index: 0;
top: 50%;
}
.about-wrapper .bubble-left:after {
border-width: 15px 20px 15px 0;
left: -19px;
}
.about-wrapper .bubble-left:before {
border-width: 15px 20px 15px 0;
left: -21px;
}
.about-wrapper .bubble-right:after {
border-width: 15px 0px 15px 20px;
right: -19px;
}
.about-wrapper .bubble-right:before {
border-width: 15px 0px 15px 20px;
right: -21px;
}
.about-wrapper .left-one-quarter {
width: 34%;
text-align: center;
}
.about-wrapper .right-three-quarter {
width: 65%;
}
.about-wrapper .right-one-quarter {
width: 34%;
text-align: center;
}
.about-wrapper .left-three-quarter {
width: 65%;
}
.about-wrapper .column {
display: inline-block;
vertical-align: middle;
}
.about-wrapper .testimonial-text:before {
content: ' ';
background: url(/skin/frontend/default/sns_nino/images/icons/quotation-start.png);
height: 16px;
width: 20px;
position: absolute;
left: 10px;
}
.about-wrapper .testimonial-text:after {
content: ' ';
background: url(/skin/frontend/default/sns_nino/images/icons/quotation-end.png);
height: 16px;
width: 20px;
position: absolute;
right: 10px;
}
.about-wrapper .testimonial-name-wrapper {
margin-top: 15px;
}
.about-wrapper .about-banner {
position: relative;
}
.about-wrapper .about-banner .banner-text {
font-size: 2.3rem;
position: absolute;
top: 50%;
}
#media (min-width: 768px) and (max-width: 979px) {
.about-wrapper .left-one-quarter {
border-top: 1px solid;
padding: 20px 0 20px 10px;
border-bottom: 1px solid;
float: left;
width: 100%;
text-align: left;
}
.about-wrapper .right-three-quarter {
width: 100%;
}
.about-wrapper .testimonial-image-wrapper {
width: 20%;
display: inline-block;
}
.about-wrapper .testimonial-name-wrapper {
float: none;
display: inline-block;
margin-top: 15px;
}
.about-wrapper .testimonial-name-wrapper > strong {
margin-left: 20px;
vertical-align: middle;
font-weight: 500;
font-size: 1.5rem;
}
.about-wrapper .testimonial-name-wrapper > span {
display: none;
}
.about-wrapper .bubble-left {
border: none;
}
.about-wrapper .bubble:after,
.about-wrapper .bubble:before {
content: none;
}
.about-wrapper .testimonial-text:before,
.about-wrapper .testimonial-text:after {
content: none;
}
}
<div class="about-wrapper">
<div class="testimonial-content">
<div class="left-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
<div class="right-three-quarter column">
<div class="bubble-left bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
</div>
<div class="spacer"> </div>
<div class="testimonial-content">
<div class="left-three-quarter column">
<div class="bubble-right bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
<div class="right-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
</div>
<div class="spacer"> </div>
<div class="testimonial-content">
<div class="left-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
<div class="right-three-quarter column">
<div class="bubble-left bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
</div>
</div>
using flexbox(which has partial support in IE10+) you can achieve this using order and align-self
You just have to take care of the left bubbles and make it right bubbles.
/*new*/
#media (max-width: 979px) {
.testimonial-content {
display: flex
}
.right-three-quarter {
order: -1
}
.about-wrapper .column {
align-self: center
}
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
.about-wrapper .spacer {
height: 75px;
}
.about-wrapper h1.customer-testimonial-header {
text-align: center;
font-size: 2rem;
font-weight: 600;
color: white;
}
.about-wrapper .bubble p {
font-size: 0.9rem;
}
.about-wrapper .bubble {
position: relative;
padding: 35px;
background: #FFFFFF;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border: #cecece solid 1px;
}
.about-wrapper .bubble:after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
z-index: 1;
top: 50%;
border-color: transparent #FFFFFF;
}
.about-wrapper .bubble:before {
content: '';
position: absolute;
border-style: solid;
border-color: transparent #cecece;
display: block;
width: 0;
z-index: 0;
top: 50%;
}
.about-wrapper .bubble-left:after {
border-width: 15px 20px 15px 0;
left: -19px;
}
.about-wrapper .bubble-left:before {
border-width: 15px 20px 15px 0;
left: -21px;
}
.about-wrapper .bubble-right:after {
border-width: 15px 0px 15px 20px;
right: -19px;
}
.about-wrapper .bubble-right:before {
border-width: 15px 0px 15px 20px;
right: -21px;
}
.about-wrapper .left-one-quarter {
width: 34%;
text-align: center;
}
.about-wrapper .right-three-quarter {
width: 65%;
}
.about-wrapper .right-one-quarter {
width: 34%;
text-align: center;
}
.about-wrapper .left-three-quarter {
width: 65%;
}
.about-wrapper .column {
display: inline-block;
vertical-align: middle;
}
.about-wrapper .testimonial-text:before {
content: ' ';
background: url(/skin/frontend/default/sns_nino/images/icons/quotation-start.png);
height: 16px;
width: 20px;
position: absolute;
left: 10px;
}
.about-wrapper .testimonial-text:after {
content: ' ';
background: url(/skin/frontend/default/sns_nino/images/icons/quotation-end.png);
height: 16px;
width: 20px;
position: absolute;
right: 10px;
}
.about-wrapper .testimonial-name-wrapper {
margin-top: 15px;
}
.about-wrapper .about-banner {
position: relative;
}
.about-wrapper .about-banner .banner-text {
font-size: 2.3rem;
position: absolute;
top: 50%;
}
#media (min-width: 768px) and (max-width: 979px) {
.about-wrapper .left-one-quarter {
border-top: 1px solid;
padding: 20px 0 20px 10px;
border-bottom: 1px solid;
float: left;
width: 100%;
text-align: left;
}
.about-wrapper .right-three-quarter {
width: 100%;
}
.about-wrapper .testimonial-image-wrapper {
width: 20%;
display: inline-block;
}
.about-wrapper .testimonial-name-wrapper {
float: none;
display: inline-block;
margin-top: 15px;
}
.about-wrapper .testimonial-name-wrapper > strong {
margin-left: 20px;
vertical-align: middle;
font-weight: 500;
font-size: 1.5rem;
}
.about-wrapper .testimonial-name-wrapper > span {
display: none;
}
.about-wrapper .bubble-left {
border: none;
}
.about-wrapper .bubble:after,
.about-wrapper .bubble:before {
content: none;
}
.about-wrapper .testimonial-text:before,
.about-wrapper .testimonial-text:after {
content: none;
}
}
<div class="about-wrapper">
<div class="testimonial-content">
<div class="left-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
<div class="right-three-quarter column">
<div class="bubble-left bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
</div>
<div class="spacer"> </div>
<div class="testimonial-content">
<div class="left-three-quarter column">
<div class="bubble-right bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
<div class="right-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
</div>
<div class="spacer"> </div>
<div class="testimonial-content">
<div class="left-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
<div class="right-three-quarter column">
<div class="bubble-left bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
</div>
</div>
I recommend using Flex box for this, as answered by dippas.
However, if you insist that you want to present floats in a different order, then you need to rearrange their appearance order in the HTML DOM.
floats sit on the page appear in the order they appear and conforming to other placement rules such as float:left or float:right etc.
So if you want to reorder your floating units then each one needs to be given a tag (probably an id tag) and then a CSS media query for each one to show/hide which floating boxes you want to display at any certain screen size.
You'd need to add lots of display:none / display:block in #media based declarations to "reorder" your floats depending on screen size. This will cause some code repetition and increase your page size...
HTML
<html>
<body>
<div id='largeScreen'>
<div class='floater'>top content</div>
<div class='floater'>middle content</div>
<div class='floater'>bottom content</div>
</div>
<div id='smallScreen'>
<div class='floater'>bottom content</div>
<div class='floater'>top content</div>
<div class='floater'>middle content</div>
</div>
<body>
</html>
CSS
.floater {
float:left;
width:49%;
}
#media (max-width:600px){
#largeScreen {
display:none;
}
#smallScreen {
display:block;
}
}
#media (min-width:601px){
#largeScreen {
display:block;
}
#smallScreen {
display:none;
}
}
But I finish by saying this is a large code burden and repetition to the page layout and data size, and flexbox will only ever increase in availability.
Also here is a good guide to starting out with flexbox if you're not that used to it.
So I have two divs, and am trying to create a parallax effect. So pretty much, when I scroll I want .collapse to be hidden behind .content. My problem here is that when I add position: fixed; to .collapse, the div is completely hidden. But when it isn't set to position: fixed;, it just acts like a div below a div, no parallax effect. Here is a JSFiddle.
HTML
<!-- Collapse -->
<div class="collapse">
<h1 style="position: relative; top: 50%; transform: translateY(-50%);">
Lorem ipsum dolor sit amet.
</h1>
</div>
<!-- Content -->
<div class="content">
<div class="container">
<p>Lorem ipsum dolor sit amet, …</p>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.collapse {
background-image: url('../img/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 400px;
position: fixed;
left: 0;
right: 0;
z-index: -9999;
text-align: center;
}
.collapse h1 {
color: #fff;
font-family: 'Shift', sans-serif;
font-size: 72px;
}
.content {
background-color: #fff;
z-index: 9999;
}
.content h1 {
color: #5a5a5a;
font-size: 24px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 940px;
}
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
Your example code suffers from a number of problems, all of which contribute to the confusion, and correcting one of them will not make much of a difference. That's why each of the comments above, while all valuable, appear not to do much by themselves.
The background picture to collapse, given as '../img/bg.jpg', resolves to 'http://fiddle.jshell.net/obgpkLLq/1/img/bg.jpg', which doesn't exist. As a result,collapse is white on white; invisible.
The z-index in content doesn't work, because content isn't positioned.
Also because content isn't positioned, it starts at the top of the screen, partially behind the nav bar and fully in front of collapse
The nav bar is positioned, but it doesn't have a z-index. This will cause problems later after we've corrected the content positioning.
None of the positioned sections have top properties, which will cause all of them to end up at the top of the window.
All these problems need to be solved before the page looks like you want.
In the snippet, I have simplified the nav bar somewhat, because its CSS was distracting from the main issues. Also, assuming that the nav bar needs to be in front of everything, I changed the z-indexes to 0 for collapse, 1 for content and 2 for the nav bar.
body,
h1,
p {
margin: 0
}
.nav {
margin-bottom: 20px;
margin-left: 0;
background-color: #fff;
height: 60px;
width: 100%;
position: fixed;
box-shadow: 0px 5px 5px #888888;
border-top: 1px solid #ccccff;
z-index:2; /* added */
}
.collapse {
background-image: url('http://lorempixel.com/940/400'); /* changed; needs to change back! */
background-size: cover;
background-repeat: no-repeat;
height: 400px;
position: fixed;
top: 60px; /* added */
left: 0;
right: 0;
z-index: 0; /* changed */
text-align: center;
}
.collapse h1 {
color: #fff;
font-family: 'Shift', sans-serif;
font-size: 72px;
}
.content {
background-color: #fff;
position: relative; /* added */
top: 460px; /* added */
z-index: 1; /* changed */
}
.content h1 {
color: #5a5a5a;
font-size: 24px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 940px;
}
.container {
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
<!-- Navigation -->
<div class="nav">
This is the nav bar
</div>
<!-- Collapse -->
<div class="collapse">
<h1 style="position: relative; top: 50%; transform: translateY(-50%);">Lorem ipsum dolor sit amet.</h1>
</div>
<!-- Content -->
<div class="content">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh lorem, tempor ut vestibulum in, varius id neque. Etiam nisl eros, posuere ac odio at, porta tincidunt ligula. Curabitur id auctor libero. Cras lacinia est ut laoreet egestas. Mauris
volutpat lectus in pellentesque facilisis. Sed lobortis enim eu elit aliquam pellentesque. Mauris ultrices, felis ut dapibus imperdiet, sem sem lobortis arcu, at rhoncus massa mauris a est. Aliquam erat volutpat. Nam ac lorem odio. Pellentesque
sodales, erat nec dictum fermentum, purus turpis sollicitudin arcu, ac imperdiet urna nunc ultrices diam. Nulla imperdiet leo nulla, a iaculis neque blandit venenatis. Morbi ipsum urna, finibus vitae ultrices ut, venenatis in arcu. Nullam et arcu
efficitur, viverra orci id, malesuada elit. Sed purus nisi, mollis at maximus et, mollis ut arcu. Donec id porta ipsum, vel tincidunt odio. In nec egestas ligula, at maximus eros. Ut consectetur consectetur velit, non maximus quam blandit ac. Cras
id vulputate arcu. Donec suscipit luctus est, faucibus iaculis ligula convallis id. Pellentesque nisl quam, interdum et blandit vel, ultrices et metus. Morbi cursus, odio non tempor vehicula, quam justo rhoncus purus, at interdum nisl justo at ante.
Aliquam cursus sit amet diam non maximus. Morbi dolor lorem, fermentum eget suscipit ac, pellentesque ut quam. Cras sit amet mi sagittis, ultricies lectus id, condimentum eros. Etiam mattis ligula nunc, vitae pulvinar urna molestie et. Nulla ex
lorem, viverra sed interdum id, dictum in dui. Nulla pellentesque fermentum urna eget aliquet. Morbi at condimentum augue, id lacinia dui. Etiam non lacus lorem. Duis sit amet nunc iaculis, feugiat lorem in, ultricies orci. Donec ornare quam sed
faucibus vehicula. Integer in felis ac orci congue facilisis quis et urna. Etiam sed tempus mi, eget congue quam. Nullam sodales pellentesque orci ut varius. In semper, erat non tincidunt feugiat, mauris massa hendrerit purus, eget pharetra diam
dolor sit amet purus. Sed id sapien ut nulla luctus maximus a ac lacus. In hac habitasse platea dictumst. Sed fringilla orci sapien, et facilisis velit vulputate in. Cras blandit id lectus eget vehicula. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Praesent egestas elit ac tempus lacinia. Cras efficitur facilisis tortor ut commodo. In porttitor mollis pellentesque. Mauris et tempus turpis. Etiam tincidunt diam eget ornare suscipit. Duis condimentum
velit sollicitudin massa interdum tristique. Cras risus libero, blandit ac ultricies sed, scelerisque sed massa. Nulla eu lobortis tellus. Suspendisse lorem nulla, blandit non pretium maximus, tempus ut urna. Nunc magna augue, iaculis at libero
eu, pellentesque vulputate est. Maecenas facilisis libero in odio fringilla, nec placerat erat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ut turpis venenatis, dapibus ligula ac, ornare lacus.
Etiam gravida orci eu tortor gravida, sit amet gravida eros tincidunt. Duis a turpis in ex faucibus sodales at sit amet tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed blandit tellus tellus,
nec ornare ipsum ornare non. Maecenas sed dictum quam. Nunc tellus eros, feugiat quis porttitor nec, rutrum eu nisl. Aenean vel blandit neque. Nullam congue justo risus, malesuada congue sem ultricies a. Phasellus dictum magna eget est commodo,
a tincidunt erat mollis. Mauris luctus ante vel hendrerit porttitor. Donec egestas, felis quis sodales hendrerit, eros mauris cursus diam, eleifend bibendum justo neque sed lectus. Fusce feugiat eget ligula at elementum. Vestibulum tempus ipsum
ipsum, et dignissim augue commodo vitae. Nam at dolor in elit dignissim semper at fringilla elit. In congue, nunc ut malesuada bibendum, nunc urna varius nunc, vel sollicitudin purus turpis at ligula. Nullam sed ultricies nunc, eu ornare augue.
Nulla sit amet arcu et lorem tristique tincidunt vitae a urna. Praesent nec eros mollis diam vestibulum cursus faucibus eu velit. Phasellus at justo eget diam rutrum porttitor at ut nibh. Fusce tempor nisi ac dapibus congue. Mauris luctus, urna
eget gravida varius, quam eros pellentesque elit, et eleifend ligula elit quis elit. Fusce sed lacus sed justo vulputate tempus. Praesent auctor ornare neque, eget vehicula nisl vehicula in. Nunc urna purus, placerat eu ipsum at, bibendum consequat
ante. Curabitur in pharetra tellus. Sed ac vehicula lectus. Curabitur feugiat massa nec erat viverra rhoncus vitae quis libero. Donec sed purus porttitor orci maximus semper laoreet vel mauris. Duis malesuada scelerisque enim sed facilisis. Mauris
laoreet, urna sit amet pulvinar euismod, massa est commodo nulla, vel volutpat risus enim vitae leo. Donec viverra iaculis odio et tincidunt. Integer eleifend fermentum cursus. Praesent diam velit, aliquam sit amet mauris pretium, dictum scelerisque
felis. Donec fermentum porta libero nec vehicula. Ut vitae porta quam. Aliquam erat volutpat. Nullam a felis nec libero egestas consectetur. Pellentesque sit amet eros vel libero iaculis tempor vel a ex. Morbi eu dolor nec nunc laoreet hendrerit
in vitae ante. Nulla facilisi. Nam condimentum massa sit amet tortor pulvinar venenatis. Morbi gravida quam in turpis convallis, at egestas metus efficitur. Integer porta lectus eu vulputate dictum. Nunc mollis leo aliquam tortor cursus lobortis.
Ut finibus nisl nec feugiat molestie. Mauris urna massa, commodo ut risus id, interdum pellentesque mauris. Sed vulputate maximus varius. Nulla facilisi. Morbi ultricies elit magna, nec egestas nulla egestas id.</p>
</div>
</div>