I want to create four elements on the left side where the text is out of the view. with hover on one element only this should slide in, but all elements slides in.
I didn't have an idea at this point. Why do all elements slide in?
<div class="fixed-icons">
<div class="fixed-icons__item fixed-icons__item--booking">
<span>booking</span>
</div>
<div class="fixed-icons__item fixed-icons__item--voucher">
<span>voucher</span>
</div>
<div class="fixed-icons__item fixed-icons__item--phone">
<span>phone</span>
</div>
<div class="fixed-icons__item fixed-icons__item--eye">
<span>eye</span>
</div>
</div>
SCSS
.fixed-icons {
position: fixed;
top:40%;
right:0;
.fixed-icons__item {
border: 1px solid white;
background-color: #004576;
color: white;
padding: 0.25rem;
margin: 0.25rem;
cursor: pointer;
margin-right:-50px;
transition: 1s;
&:hover {
transition: 1s;
margin-right:0;
}
}
}
codepen demo
Here's the solution.
Animating the margin property caused some weird results - replaced it with transform.
.fixed-icons {
position: fixed;
top:40%;
right:0;
.fixed-icons__item {
border: 1px solid white;
background-color: #004576;
color: white;
padding: 0.25rem;
margin: 0.25rem;
cursor: pointer;
margin-right:-50px;
transition: 1s;
&:hover {
transition: 1s;
transform: translateX(-49px);
}
}
}
Here's the solution.
Animating the `margin` property caused some weird results - replaced it with `transform`.
<div class="fixed-icons">
<div class="fixed-icons__item fixed-icons__item--booking">
<span>booking</span>
</div>
<div class="fixed-icons__item fixed-icons__item--voucher">
<span>voucher</span>
</div>
<div class="fixed-icons__item fixed-icons__item--phone">
<span>phone</span>
</div>
<div class="fixed-icons__item fixed-icons__item--eye">
<span>eye</span>
</div>
</div>
Codepen Link
try this, i have edited your css
.fixed-icons {
position: fixed;
top: 40%;
right: 0;
}
.fixed-icons .fixed-icons__item {
border: 1px solid white;
background-color: #004576;
color: white;
padding: 0.25rem;
margin: 0.25rem;
cursor: pointer;
margin-right: -50px;
transition: 1s;
}
.fixed-icons .fixed-icons__item:hover {
transition: 1s;
transform: translateX(-49px);
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Create a New Pen</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="fixed-icons">
<div class="fixed-icons__item fixed-icons__item--booking">
<span>booking</span>
</div>
<div class="fixed-icons__item fixed-icons__item--voucher">
<span>voucher</span>
</div>
<div class="fixed-icons__item fixed-icons__item--phone">
<span>phone</span>
</div>
<div class="fixed-icons__item fixed-icons__item--eye">
<span>eye</span>
</div>
</div>
</body>
</html>
try this, i dint understand your question exactly but as i understood i have done this, try this may be this will help you out
#import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: "entypo", sans-serif;
}
a {
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
padding: 20px 50px;
background:white;
}
#sticky-social {
left: 0;
position: fixed;
top: 50px;
}
#sticky-social a {
background: #333;
color: #fff;
display: block;
height: 35px;
font: 16px "Open Sans", sans-serif;
line-height: 35px;
position: relative;
text-align: center;
width: 35px;
}
#sticky-social a:hover span {
left: 100%;
}
#sticky-social a span {
line-height: 35px;
left: -120px;
position: absolute;
text-align:center;
width:120px;
}
#sticky-social a[class*="facebook"],
#sticky-social a[class*="facebook"]:hover,
#sticky-social a[class*="facebook"] span { background: #3b5998; }
#sticky-social a[class*="twitter"],
#sticky-social a[class*="twitter"]:hover,
#sticky-social a[class*="twitter"] span { background: #00aced; }
#sticky-social a[class*="gplus"],
#sticky-social a[class*="gplus"]:hover,
#sticky-social a[class*="gplus"] span { background: #dd4b39; }
#sticky-social a[class*="linkedin"],
#sticky-social a[class*="linkedin"]:hover,
#sticky-social a[class*="linkedin"] span { background: #007bb6; }
#sticky-social a[class*="instagrem"],
#sticky-social a[class*="instagrem"]:hover,
#sticky-social a[class*="instagrem"] span { background: #517fa4; }
#sticky-social a[class*="stumbleupon"],
#sticky-social a[class*="stumbleupon"]:hover,
#sticky-social a[class*="stumbleupon"] span { background: #eb4924; }
#sticky-social a[class*="pinterest"],
#sticky-social a[class*="pinterest"]:hover,
#sticky-social a[class*="pinterest"] span { background: #cc2127; }
#sticky-social a[class*="flickr"],
#sticky-social a[class*="flickr"]:hover,
#sticky-social a[class*="flickr"] span { background: #ff0084; }
#sticky-social a[class*="tumblr"],
#sticky-social a[class*="tumblr"]:hover,
#sticky-social a[class*="tumblr"] span { background: #32506d; }
<div class="container">
<h1>Social Sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
<p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum.</p>
<p>Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
<p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum.</p>
<p>Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac</p>
</div>
<aside id="sticky-social">
<ul>
<li><span>Facebook</span></li>
<li><span>Twitter</span></li>
<li><span>Google+</span></li>
<li><span>LinkedIn</span></li>
<li><span>Instagram</span></li>
<li><span>StumbleUpon</span></li>
<li><span>Pinterest</span></li>
<li><span>Flickr</span></li>
<li><span>Tumblr</span></li>
</ul>
</aside>
the direction of container causes this problem and you must set width length for the items.
try this code:
.fixed-icons {
position: fixed;
top:40%;
right:0;
.fixed-icons__item {
border: 1px solid white;
background-color: #004576;
color: white;
padding: 0.25rem;
margin: 0.25rem;
cursor: pointer;
margin-right:-50px;
transition: 1s;
width:80px;
&:hover {
transition: 1s;
margin-right:0;
}
}
}
<div style="direction:rtl;">
<div class="fixed-icons">
<div class="fixed-icons__item fixed-icons__item--booking">
<span>booking</span>
</div>
<div class="fixed-icons__item fixed-icons__item--voucher">
<span>voucher</span>
</div>
<div class="fixed-icons__item fixed-icons__item--phone">
<span>phone</span>
</div>
<div class="fixed-icons__item fixed-icons__item--eye">
<span>eye</span>
</div>
</div>
</div>
Related
I'm recreating this website for a project and I'm having trouble with getting the logo, search and nav items (BOARDS, NEWS, Q&A) to stay in the same line. For some reason all three of these elements are taking up their own line and I'm unable to figure out why that is happening. Please advice.
NOTE
You will need to view the page in full screen as the Header is not currently responsive.
.header {
display: block;
flex-direction: column;
font-family: "Roboto Condensed", "Helvetica Neue", "HelveticaNeue", Arial,
sans-serif;
font-size: 14px;
}
.header__container a {
background: url(https://gamefaqs.gamespot.com/a/images/site/logo_v13.png)
no-repeat left center;
display: block;
height: 50px;
overflow: hidden;
margin: 0 0;
text-indent: 110%;
width: 100%;
background-size: contain;
}
.header__console div {
padding: 0 300px;
margin: 4px 0;
}
.header__console {
border: 1px solid black;
background-color: #28398a;
color: #fff;
}
.header span {
padding: 0 5px;
}
.header__container {
border: 1px solid black;
background-color: #3951c6;
color: #fff;
}
.header__container div {
padding: 0 300px;
margin: 4px 0;
}
.header__container-item {
font-size: 15px;
}
.header__container input[type="text"] {
padding: 6px;
margin-top: 8px;
font-size: 16px;
border: none;
border-radius: 300px;
background-color: #f5f5f5;
}
.header__footer {
border: 1px solid #28398a;
}
<div class="header">
<div class="header__console">
<div>
<span>PC</span>
<span>PS4</span>
<span>PS5</span>
<span>Switch</span>
<span>Xbox One</span>
<span>Xbox Series</span>
<span>More Systems ▼</span>
</div>
</div>
<div class="header__container">
<div class="header__container-logo">
GameFAQs
</div>
<div class="header__container-search">
<input type="text" placeholder="Search Game Titles" name="search" />
</div>
<div class="header__container-nav">
<span class="header__container-item">BOARDS</span>
<span class="header__container-item">NEWS</span>
<span class="header__container-item">Q&A</span>
</div>
</div>
<div className="header__footer"></div>
</div>
I'd say your trouble is this:
.header__container div {
padding: 0 300px;
}
Surely you don’t always want 300 pixels of padding on both sides of your content? You need your website to work on screens of different widths, so your design needs to be more flexible than that. This article provides a good explanation.
p {
background: #e7e7f2;
padding: 5px 5vw;
}
#media (min-width: 750px) {
p {
padding: 5px 10vw;
}
}
#media (min-width: 1250px) {
p {
padding: 5px 15vw;
}
}
#media (min-width: 1750px) {
p {
padding: 5px 20vw;
}
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus metus sed viverra feugiat. Donec nec orci ut lacus pellentesque tristique. Mauris quis malesuada mi. Phasellus lorem nunc, fringilla efficitur ipsum at, gravida dictum dolor. Integer arcu risus, aliquam quis dictum non, lobortis quis nisl. Suspendisse interdum orci vel lacus aliquet tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed ut gravida mi, quis pharetra nulla.
</p>
<p>
Etiam ac sapien sapien. Curabitur volutpat elit lorem, ut imperdiet leo molestie eget. Aliquam feugiat ipsum id tincidunt dapibus. Nulla interdum ut nunc id consequat. Nam metus diam, rhoncus non luctus vel, aliquam nec ante. Nullam hendrerit lacinia lobortis. Nulla facilisi. Sed gravida tortor vel commodo ultricies. Etiam sagittis mollis nulla finibus dictum. Etiam efficitur orci et lectus lobortis, et mollis purus venenatis. Sed venenatis pretium pharetra. Quisque et tristique libero. Pellentesque vel purus odio. Nam nisl leo, sagittis nec pretium vel, pulvinar a dui. Nullam dui risus, ornare convallis tempus eu, congue quis ex. Vestibulum eu magna sed tellus convallis vulputate.
</p>
<p>
Cras lorem tellus, aliquet at auctor vel, fringilla ut odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse consectetur massa sit amet enim tempus dictum. Nam dictum faucibus sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent euismod metus lorem. Suspendisse sollicitudin justo eget volutpat luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ultrices massa at nisl finibus fringilla. Morbi eu est eu nunc varius fermentum et id metus. Aenean sed nulla velit.
</p>
<p>
Cras porta fermentum leo, et dapibus elit ullamcorper nec. Ut feugiat pellentesque augue, aliquam eleifend lacus pulvinar id. Aenean ultrices sagittis tellus in mattis. In hendrerit aliquam mauris at volutpat. Maecenas tortor nulla, gravida at ornare nec, dignissim ut tortor. Quisque eros mauris, varius vel lectus eget, consequat consequat leo. Cras vel tempor lacus. Sed elementum venenatis hendrerit. Sed nec pulvinar odio. Suspendisse egestas aliquam iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed blandit lacinia posuere. Aenean in sollicitudin mi. Aenean accumsan ullamcorper mauris, eget interdum tortor mollis ut.
</p>
<p>
Nam feugiat quam at sollicitudin vehicula. Morbi efficitur, quam eu ullamcorper venenatis, felis lacus auctor nibh, sed aliquam dolor elit ut nisl. Cras in luctus tellus. Aliquam auctor, eros a tincidunt fringilla, nunc libero semper est, quis faucibus dui tellus et elit. Donec eu massa eget quam porttitor varius quis nec sapien. Sed ullamcorper venenatis ante, eu blandit mauris. Integer fringilla nec felis quis vulputate. Nulla sit amet pharetra eros, eget consequat nunc.
</p>
I would be grateful for advice about how to rotate a button in a flex context. I have a flex container with a "row" direction (that is, the three content items are arranged from left to right in a row), and the leftmost content item is a <div> that contains just a <button> with a few words of text in it. I want that <div> to be rendered vertically (so that the text reads from bottom to top), to hug the left edge of the container, and to be just the width of its one line of text.
The sample at https://jsfiddle.net/djbpitt/gth3nck9/74/ works as I need it to in Firefox 89, but in Chrome 90 (and Safari 14.1.1) the button is not rotated. caniuse.com tells me that vendor prefixes should not be required for CSS transform: rotate() or writing-mode: vertical-lr;, and adding a -webkit prefix doesn't seem to help anyway.
I would be grateful if someone could please advise me about how I can obtain the behavior I need in the versions of Firefox, Chrome, and Safari mentioned above (which are the latest versions as I write this). I would prefer a pure HTML/CSS (that is, no JavaScript) solution. Thank you!
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body > * {
overflow-y: auto;
height: 100vh;
}
body > section {
flex: auto;
}
div#button {
display: flex;
flex: 0 0 1em;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
button {
margin: auto;
border: 1px black solid;
border-radius: 10px 0 0 10px;
padding: 3px;
}
button > span {
writing-mode: vertical-lr;
width: 1em;
margin: 3px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
</head>
<body>
<div id="button">
<button><span>Rotate me!</span></button>
</div>
<nav>
<ul>
<li>first</li>
<li>section</li>
</ul>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim tristique est, et facilisis urna aliquet et. Vivamus porta laoreet mi non cursus. Integer volutpat tortor lectus, interdum gravida libero interdum ac. Curabitur malesuada cursus laoreet. Donec nec varius est, ac venenatis velit. Vivamus ac ipsum et nibh dictum dignissim. Fusce eget turpis in sem rutrum congue. Donec vitae sollicitudin nunc, elementum porta tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque convallis quam leo, pretium fermentum ante imperdiet sit amet. Quisque egestas risus vitae ante fermentum tincidunt. Sed consectetur efficitur tempus. Nunc tincidunt nunc sed semper accumsan. Ut eu tortor scelerisque, aliquet leo eget, ullamcorper dolor.</p>
<p>Duis non nisi vitae felis ultricies dapibus pulvinar quis ex. Nullam imperdiet, risus sed pharetra aliquam, mi nulla condimentum purus, tincidunt hendrerit ex metus vitae nisl. Nullam venenatis turpis libero, a bibendum elit venenatis ut. Aenean et orci ac metus pretium pellentesque. Phasellus sed faucibus est. Aenean a dui non augue aliquet sagittis quis at ex. Vestibulum lorem lectus, sodales efficitur lacinia id, iaculis id ante. Fusce aliquam erat libero, a ultrices dolor volutpat et. Vivamus at euismod nisl. Donec hendrerit non lacus vel mollis.</p>
<p>Phasellus gravida non nisi quis vehicula. Curabitur sagittis nec nulla eget sollicitudin. Mauris sit amet mattis ligula. Nulla pretium posuere diam vitae tempor. Aenean consequat ligula luctus quam vestibulum, vel rhoncus turpis laoreet. Etiam nec aliquam ipsum, ut tristique lorem. In nec auctor arcu. Proin sed finibus ligula. Sed scelerisque lorem ligula. Nam quis quam vehicula, hendrerit nibh nec, rhoncus elit. Praesent porttitor, tellus nec aliquam sollicitudin, justo orci sagittis nisl, non imperdiet ligula mauris sit amet eros. In dignissim placerat laoreet. Aenean ipsum lorem, aliquet id arcu id, rhoncus porta justo. Integer egestas mauris quam, eget placerat metus sagittis eget. Aenean volutpat eleifend nisi eget interdum.</p>
<p>
Vestibulum in ante lectus. Mauris luctus imperdiet facilisis. Nunc sagittis velit lacus, eget gravida arcu efficitur vitae. Sed sodales felis elit, eget volutpat dui congue sit amet. Fusce mi velit, cursus volutpat dapibus in, auctor id dolor. Maecenas convallis nisl justo. Cras sollicitudin tellus nec dui dictum finibus. Fusce nec feugiat metus. Aliquam sit amet congue nulla. Sed cursus fringilla sapien et malesuada. Duis aliquet, nunc eget consectetur fringilla, felis lectus ultrices mi, id maximus justo mauris a mi.</p>
<p>
Vivamus ac est vitae nulla dignissim posuere ac id arcu. Duis sed tortor pretium, tempus orci vel, efficitur ex. Quisque aliquet enim mattis odio tincidunt lacinia. Vestibulum blandit congue neque ac bibendum. Proin at consequat tortor, id malesuada dolor. Integer interdum purus sit amet leo venenatis, gravida porttitor ipsum eleifend. Donec venenatis maximus faucibus. Duis et magna vitae arcu malesuada sodales.</p>
</main>
</body>
</html>
The problem seems to lie with Chrome/Edge settings for button. They have for example amongst other things:
-webkit-writing-mode: horizontal-tb !important;
So this snippet gives up trying to style a button and replaces it with a div. Obviously you'll want to style that as you wish:
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body>* {
overflow-y: auto;
height: 100vh;
}
div#button {
position: relative;
display: flex;
flex: 0 0 1em;
writing-mode: vertical-lr;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
#button div {
background-color: #eeeeee;
padding: 10px 5px 10px 5px;
border: 1px solid black;
border-radius: 5px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
<div id="button">
<div>Rotate me!</div>
</div>
<nav>
<ul>
<li>first</li>
<li>section</li>
</ul>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim tristique est, et facilisis urna aliquet et. Vivamus porta laoreet mi non cursus. Integer volutpat tortor lectus, interdum gravida libero interdum ac. Curabitur malesuada cursus
laoreet. Donec nec varius est, ac venenatis velit. Vivamus ac ipsum et nibh dictum dignissim. Fusce eget turpis in sem rutrum congue. Donec vitae sollicitudin nunc, elementum porta tortor. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Pellentesque convallis quam leo, pretium fermentum ante imperdiet sit amet. Quisque egestas risus vitae ante fermentum tincidunt. Sed consectetur efficitur tempus. Nunc tincidunt nunc sed semper accumsan. Ut eu tortor
scelerisque, aliquet leo eget, ullamcorper dolor.</p>
<p>Duis non nisi vitae felis ultricies dapibus pulvinar quis ex. Nullam imperdiet, risus sed pharetra aliquam, mi nulla condimentum purus, tincidunt hendrerit ex metus vitae nisl. Nullam venenatis turpis libero, a bibendum elit venenatis ut. Aenean et
orci ac metus pretium pellentesque. Phasellus sed faucibus est. Aenean a dui non augue aliquet sagittis quis at ex. Vestibulum lorem lectus, sodales efficitur lacinia id, iaculis id ante. Fusce aliquam erat libero, a ultrices dolor volutpat et. Vivamus
at euismod nisl. Donec hendrerit non lacus vel mollis.</p>
<p>Phasellus gravida non nisi quis vehicula. Curabitur sagittis nec nulla eget sollicitudin. Mauris sit amet mattis ligula. Nulla pretium posuere diam vitae tempor. Aenean consequat ligula luctus quam vestibulum, vel rhoncus turpis laoreet. Etiam nec aliquam
ipsum, ut tristique lorem. In nec auctor arcu. Proin sed finibus ligula. Sed scelerisque lorem ligula. Nam quis quam vehicula, hendrerit nibh nec, rhoncus elit. Praesent porttitor, tellus nec aliquam sollicitudin, justo orci sagittis nisl, non imperdiet
ligula mauris sit amet eros. In dignissim placerat laoreet. Aenean ipsum lorem, aliquet id arcu id, rhoncus porta justo. Integer egestas mauris quam, eget placerat metus sagittis eget. Aenean volutpat eleifend nisi eget interdum.</p>
<p>
Vestibulum in ante lectus. Mauris luctus imperdiet facilisis. Nunc sagittis velit lacus, eget gravida arcu efficitur vitae. Sed sodales felis elit, eget volutpat dui congue sit amet. Fusce mi velit, cursus volutpat dapibus in, auctor id dolor. Maecenas
convallis nisl justo. Cras sollicitudin tellus nec dui dictum finibus. Fusce nec feugiat metus. Aliquam sit amet congue nulla. Sed cursus fringilla sapien et malesuada. Duis aliquet, nunc eget consectetur fringilla, felis lectus ultrices mi, id maximus
justo mauris a mi.</p>
<p>
Vivamus ac est vitae nulla dignissim posuere ac id arcu. Duis sed tortor pretium, tempus orci vel, efficitur ex. Quisque aliquet enim mattis odio tincidunt lacinia. Vestibulum blandit congue neque ac bibendum. Proin at consequat tortor, id malesuada dolor.
Integer interdum purus sit amet leo venenatis, gravida porttitor ipsum eleifend. Donec venenatis maximus faucibus. Duis et magna vitae arcu malesuada sodales.</p>
</main>
OP here. Thank you, A Haworth, for the pointer to the !important user agent setting for writing-mode in Webkit. I knew that browsers had default styling, of course, but I didn't realize that some of that styling apparently could not be overridden with user specifications.
Your insight led me to give up on changing the writing-mode value for the <button>, as you suggest, and I approached the task by wrapping a <span> around the text inside my <button> and specifying the writing-mode for the <span>. The new version is at https://jsfiddle.net/djbpitt/gth3nck9/86/. HTML and CSS are copied below:
<div id="button">
<button>
<span>Rotate me!</span>
</button>
</div>
I had to do some additional fiddling with the CSS to get the rendering I wanted:
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body > * {
overflow-y: auto;
height: 100vh;
}
body > section {
flex: auto;
}
div#button {
display: flex;
flex: 0 0 1em;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
button {
margin: auto;
border: 1px black solid;
border-radius: 10px 0 0 10px;
padding: 3px;
}
button > span {
writing-mode: vertical-lr;
width: 1em;
margin: 3px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
Currently still doing my project and I'm trying to find out how to position headings in certain places. Figure 1 is my final goal for my headings to look like.
[Figure 1][1]
Currently this is what mine looks like (Figure 2), I am struggling to position the heading to a similar spot, every time I do, the paragraphs and the navbar move further down leaving a big white gap between the headings & paragraphs.
Also was wondering how would I level out the image with the text & navbar?
Thanks in advance, much appreciated.
[Figure 2][2]
I believe this is what you wanted:
preview
Basically, you could wrap the header (image + text) into a CSS flexbox, and the rest of the stuff into another flexbox. I edited the CSS file to reflect these changes. Hope this helps! Let me know if you have any other questions.
Here's a link to the jsfillde: https://jsfiddle.net/rzLbkw9m/
Here's the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="holiday.css" rel="stylesheet" type="text/CSS">
<title>Task 4</title>
</head>
<body>
<div class="header-container">
<div class="header-image">
<img src="https://st.depositphotos.com/1115174/1875/v/450/depositphotos_18752455-stock-illustration-summer-beach-vacation-background.jpg" alt="Holiday" width="400" height="200" align="left">
</div>
<div class="header-text">
<h1>Holiday Time</h1>
<h3>Get away from it all</h3>
</div>
</div>
<div class="row">
<div class="list-column">
<ul class="list">
<li>Destinations</li>
<li>Deals</li>
<li>Flights</li>
<li>Cruise</li>
<li>Extras</li>
<li>Money</li>
</ul>
</div>
<div class="main-column">
<div class="paragraph">
<p>
<img src="https://images.pexels.com/photos/88212/pexels-photo-88212.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Holiday" width="220" height="150" align="right" class="intext-img">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ultrices libero eu eros viverra, eget tristique ipsum commodo. Phasellus tempus a erat quis hendrerit. Quisque ipsum felis, vestibulum sed finibus vel, molestie id ante. Morbi metus leo, dictum nec pellentesque nec, condimentum quis magna. Praesent est turpis, pharetra non fermentum sed, elementum ac ante. Integer sodales metus id rutrum hendrerit. Phasellus vel dapibus massa, ut aliquet arcu. Ut consectetur feugiat neque, sed sagittis dui rutrum eget. Maecenas commodo mattis enim quis lacinia. Duis in ipsum vitae mi laoreet dignissim. Nullam consequat velit at magna commodo, in fringilla enim rutrum. Cras at augue sed nisl ultricies lobortis. Praesent rhoncus lectus facilisis, rhoncus purus et, luctus eros. Nunc eros nisi, finibus sit amet urna quis, posuere ultrices mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis lorem vel neque bibendum iaculis vel id tellus. Nulla auctor elit vitae sollicitudin ultrices. Fusce molestie dictum neque, et dictum magna iaculis eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed volutpat, augue eget tincidunt feugiat, felis mi vulputate sem, eu mattis nisi quam sit amet est. Cras eu sem nec metus iaculis tempus sit amet non sapien. Aenean id odio semper purus dignissim elementum. Vestibulum faucibus mi ac odio hendrerit venenatis. Cras rhoncus diam magna, at placerat quam rutrum ut.
</p>
</div>
<div class="paragraph">
<p>
<img src="https://i.pinimg.com/474x/c6/60/24/c66024ea79527d9bbafe79ed171558b9--luxury-travel-luxury-hotels.jpg" alt="Holiday" width="220" height="150" align="right" class="intext-img">
Quisque fringilla sodales lorem eget rhoncus. Curabitur pulvinar blandit justo nec volutpat. Mauris bibendum lobortis quam et aliquam. Nulla dictum varius est, sed fringilla ante volutpat ac. Sed tempus dolor diam, ac porta ligula sagittis ac. Morbi vitae nisi porttitor, sollicitudin urna non, tempus justo. Donec vel vulputate est. Donec aliquet vitae velit eu interdum. Quisque et facilisis diam. Duis rutrum faucibus purus at tempus. Mauris auctor tincidunt mauris, quis porttitor magna aliquam molestie. Aliquam efficitur, ex sed finibus porta, tellus diam dictum arcu, ac egestas quam enim tristique velit. Integer volutpat tortor et tortor consequat tincidunt. Donec imperdiet libero vitae sapien commodo, eget pretium libero eleifend. Sed mi felis, porttitor vel blandit laoreet, pretium a felis. Duis in erat interdum, rutrum lectus viverra, pellentesque elit. Sed imperdiet massa ullamcorper mauris tempus, at euismod nibh convallis. In sapien lorem, lacinia eget viverra sit amet, suscipit in diam. Phasellus at sapien eu orci pellentesque eleifend suscipit eu diam. Vivamus quis nibh id sem placerat rutrum. Nunc pellentesque aliquet congue.
Nam at eros elementum, venenatis nibh vel, volutpat mi. Donec varius sapien ipsum, sed sagittis ligula iaculis hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pharetra ante eget purus rhoncus, ac pharetra eros fermentum. Etiam porta nec leo pretium gravida. Integer a nulla quam. In ullamcorper, nibh id efficitur porttitor, lacus mi semper nisi, id pulvinar ex leo at mi. Vestibulum placerat lacus vitae velit laoreet, in efficitur risus convallis. Nunc at sagittis dolor, eu gravida nunc. In hac habitasse platea dictumst. Mauris vitae lobortis ipsum, quis rhoncus mauris. Ut eget nibh sed dolor sollicitudin dictum efficitur ac ligula. Nullam ut nulla sit amet leo varius tincidunt.
</p>
</div>
</div>
</div>
<div class="footer"> Contact: 0191 227 1111</div>
</body>
</html>
Here's the css file:
/* header */
.header-container {
display: flex;
align-items: center;
border: 1px solid lightblue;
}
.header-text {
margin-left: 25px;
}
.header-text h1 {
color: purple;
font-size: 48px;
}
.header-text h3 {
margin-left: 20px;
}
/* navbar */
.list-column {
flex: 30%;
align-self: flex-start;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:first-of-type {
padding-top: 2px;
}
/* main content */
.row {
margin-top: 10px;
display: flex;
align-items: flex-start;
}
.paragraph {
margin-bottom: 25px;
}
.intext-img {
margin-top: 5px;
margin-left: 10px;
margin-bottom: 10px;
}
p {
font-size: 18px;
margin: 0px;
}
/* footer */
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0.8rem;
text-align: left;
background-color: #64A3D6;
}
create a div around h1 and h3
.header{
position: relative;
top: 50%;
transform: translateY(-50%);
}
this will put the header in the middle of the area vertically. make sure the padding or margin is minimal
Why the .box has white background instead of yellow as .wrapper has yellow background however it's text does have green color font as .wrapper has green color font.
Link -- https://codepen.io/ravenkhan03/pen/mzdvKM
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
font: .9em/1.2 Arial, Helvetica, sans-serif
}
.wrapper {
background-color: yellow;
padding: 10px;
color: green;
border: 1px solid red;
}
.box {
float: left;
margin: 15px;
width: 150px;
height: 150px;
border-radius: 5px;
padding: 1em;
border: 1px solid black;
text-align: center;
}
<h1>Simple float example</h1>
<div class="wrapper">
<div class="box">Float</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
</div>
<p style="clear:left">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula
tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo
et a urna. Ut id ornare felis, eget fermentum sapien.</p>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium
metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus.</p>
Because the background-color property isn't inherited and the default value is transparent (the color property however, is inherited).
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
font: .9em/1.2 Arial, Helvetica, sans-serif;
background-color: yellow;
}
.wrapper {
padding: 10px;
color: green;
border: 1px solid red;
}
.box {
float: left;
margin: 15px;
width: 150px;
height: 150px;
border-radius: 5px;
padding: 1em;
border: 1px solid black;
text-align: center;
}
<h1>Simple float example</h1>
<div class="wrapper">
<div class="box">Float</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
</div>
<p style="clear:left">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula
tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo
et a urna. Ut id ornare felis, eget fermentum sapien.</p>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium
metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus.</p>
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
font: .9em/1.2 Arial, Helvetica, sans-serif
}
.wrapper {
display: flex;
background-color: yellow;
padding: 10px;
color: green;
border:1px solid red;
}
.box {
margin: 15px;
width: 150px;
height: 150px;
border-radius: 5px;
padding: 1em;
border:1px solid black;
text-align:center;
background-color:inherit;
}
<h1>Simple float example</h1>
<div class="wrapper">
<div class="box">Float</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
</div>
<p style="clear:left">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
I've got a problem with my website where Im using transform: translate(-50%,-50%); to fix my webpage not being in the middle of the page but slightly off the middle. Now ive got a problem : I cant scroll!
Example of a working webpage and a bad one:
As you can see the text is overflowing the page. How am I able to fix this?
Full CSS code of 'innerlayer'
.innerlayer {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
transform-origin: 0 0;
background-color: dodgerblue;
box-shadow: 10px 10px 40px #6680ed;
min-width: 50%;
max-width: 50%;
border: 1px solid black;
}
html {
padding: 0;
}
body {
background-color: cornflowerblue;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.contentlayer {
text-align: center;
}
.innerlayer {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
transform-origin: 0 0;
background-color: dodgerblue;
box-shadow: 10px 10px 40px #6680ed;
min-width: 50%;
max-width: 50%;
border: 1px solid black;
}
.header {
font-weight: bolder;
font-family: Calibri;
font-size: 30pt;
border-bottom: 1px solid black;
}
.navigation {
border-bottom: 1px solid black;
background-color: #6499f1;
}
ul {
list-style: none;
margin: 0;
padding: 10 0;
}
li {
background-color: #6499f1;
border-left: 1px solid black;
padding: 10 10;
margin-right: -4px;
font-family: Arial;
font-weight: bold;
text-decoration: none;
display: inline;
}
li:last-child {
border-right: 1px solid black;
}
li:hover {
background-color: #6490e8;
}
.body {
font-family: Arial;
}
.bodytitle {
font-weight: bolder;
font-family: Calibri;
font-size: 15pt;
padding: 5 0;
}
.bodytext {
padding: 5 5;
}
.border-bottom {
border-bottom: 1px solid black;
}
.border-top {
border-top: 1px solid black;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<script src="css/jquery-3.1.1.min.js"></script>
<title>Title</title>
</head>
<body id="body">
<div class="outerlayer" id="outerlayer">
<div class="innerlayer" id="innerlayer">
<div class="contentlayer">
<div class="header">
<?php echo $obj1[0]['name'] . " [" . $_GET['id'] . "]"; ?>
</div>
<div class="navigation">
<ul>
<li>Information</li>
<li>Statistics</li>
<li>Back</li>
</ul>
</div>
<div class="body">
<div class="bodytitle border-bottom">
Background Introduction
</div>
<div class="bodytext">
</div>
<div class="bodytitle border-bottom border-top">
Economy - overview
</div>
<div class="bodytext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus facilisis sollicitudin. Donec consectetur consectetur libero sed gravida. Nulla sit amet vehicula felis. In dapibus dui odio, id venenatis ante sollicitudin at. Aenean molestie lectus leo, in egestas mi tristique sit amet. Integer faucibus feugiat feugiat. Vestibulum ac porttitor dolor.
Vestibulum consectetur ornare magna, id suscipit lectus posuere ut. In dictum ornare fringilla. Quisque convallis ac libero vel vulputate. In hendrerit dolor id dapibus auctor. Donec ac nisl quis nulla volutpat condimentum ac eu velit. Nullam pretium neque tempor luctus pretium. Fusce quis diam sollicitudin, vestibulum sapien vitae, faucibus risus. Vestibulum tincidunt libero nec auctor maximus. Sed ultrices sem at nunc condimentum egestas. Praesent eu enim bibendum, consequat neque sed, sollicitudin diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eget maximus leo, eu feugiat purus. Nullam semper mauris id erat rhoncus malesuada. Cras nulla diam, euismod id purus eget, ultrices efficitur velit. Donec elementum auctor ex. Nunc condimentum placerat ex eget maximus.
Quisque dignissim, erat non lobortis egestas, enim justo cursus lectus, ac semper felis diam et eros. Sed scelerisque, nulla at vehicula ullamcorper, sem est pretium nisi, in consequat sapien lorem id erat. Aenean et dolor eget velit consectetur venenatis vel sit amet tellus. Fusce in venenatis nibh, vel euismod magna. Nunc sed libero vitae urna ullamcorper iaculis. Donec massa ipsum, mattis eu sollicitudin eu, porta non arcu. In porttitor turpis at purus aliquet consequat. Aliquam massa orci, tempus et suscipit et, tincidunt eu leo. Curabitur porta felis nunc, nec porttitor arcu mollis rhoncus. Vivamus vel sapien eleifend, hendrerit diam non, feugiat orci.
Nam consectetur ante ac consectetur eleifend. Vestibulum porta, tellus ut fermentum auctor, leo orci tincidunt metus, vitae tincidunt diam ex at quam. Integer nec placerat libero. Maecenas metus est, convallis a bibendum eget, dictum sit amet nunc. Nam ut nibh blandit, porta risus dapibus, imperdiet dolor. Donec viverra lectus non eros porttitor, non eleifend est ullamcorper. Etiam sed metus in nunc mollis hendrerit. Cras nec felis purus. Morbi nec posuere velit. Vivamus interdum convallis odio, sit amet tempor eros tempor non. Praesent vulputate mi sit amet nibh convallis luctus. Suspendisse vitae nisl vitae mauris scelerisque dictum in ut libero. Nam rutrum justo ex, id luctus risus laoreet vel. Aliquam non pulvinar orci, non maximus massa. Nulla condimentum orci sollicitudin libero faucibus, in rutrum neque suscipit.
Vestibulum aliquet ornare libero, ac luctus enim cursus ut. In scelerisque feugiat felis at viverra. Nam quis neque vestibulum, accumsan lorem nec, faucibus ligula. Sed feugiat quam ex, non commodo felis rutrum in. Nunc aliquet turpis in diam efficitur, vitae bibendum sapien dictum. Cras a pulvinar enim, hendrerit consequat erat. Pellentesque viverra viverra lorem, nec mattis eros dictum sed. Proin ut metus augue. Proin quis fermentum urna. Vestibulum lobortis augue a sapien iaculis, vitae vehicula magna pharetra. In suscipit ex ipsum. Aenean id efficitur massa. Vestibulum varius consectetur purus, ac ultricies leo scelerisque quis. Duis urna nisi, vehicula semper nulla nec, pellentesque dignissim nibh.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add this class to your css file and the scroll bar with be shown on that div but if you want to add scroll bar on whole page like a normal page then you have to translate the div as body but try to add this css code to the css file and hope it works:
.innerlayer {
height: 100%;
overflow-y: scroll;
}