I've been racking my brain on this and I can't seem to get it to behave the way I want to. Essentially, I want the element which contains the open and close buttons to remain fixed even when I've already opened the navigation.
Right now, what happens is after clicking #open, the container scrolls with the screen. I want it to emulate the behavior similar to when I haven't cliked #open yet (meaning the said container remains fixed in position).
Thanks everyone! Code provided below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous"
/>
<title>Rotating Navigation</title>
</head>
<body>
<div class="container">
<div class="circle-container">
<div class="circle">
<button id="close">
<i class="fas fa-times"></i>
</button>
<button id="open">
<i class="fas fa-bars"> </i>
</button>
</div>
</div>
<div class="content">
<h1>Amazing Article</h1>
<small>Florin Pop</small>
<p
>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora,
nihil nisi! Aut, deleniti consectetur ratione consequatur, rerum
dolorum, ipsa debitis nulla ut autem maiores architecto quos quia amet
sapiente labore. Ex ipsam minima quam accusamus, perferendis illum
rerum numquam repellendus recusandae sed quas. Aperiam quisquam animi
commodi excepturi, at magni, in assumenda veniam impedit iusto,
molestiae dolores consectetur tenetur non fugit sapiente beatae eius
praesentium consequatur! Maxime magnam ipsam laborum expedita totam
nihil magni similique ratione sequi mollitia tempore voluptate dolorum
dolorem, quisquam quasi explicabo dolores natus temporibus
necessitatibus rerum praesentium perspiciatis nesciunt modi harum!
Perspiciatis amet modi eveniet doloremque?</p
>
<h3>My Dog</h3>
<img src="./assets/charles-deluvio-Mv9hjnEUHR4-unsplash.jpg" alt="" />
<p
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
explicabo ipsum quaerat debitis sapiente cum ratione perspiciatis
dolore, odio impedit necessitatibus eligendi facilis obcaecati
temporibus expedita repudiandae harum incidunt, enim perferendis
cupiditate distinctio! Earum optio accusantium quos qui et
perspiciatis ullam odio error modi voluptas quidem, itaque quisquam
labore minima. Tenetur libero distinctio sit animi iusto dolore
adipisci quam dolorum ea blanditiis pariatur perferendis, ullam
aliquid, qui voluptates id facilis inventore quibusdam minus quia.
Eveniet!</p
>
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-user-alt"></i>About</li>
<li><i class="fas fa-envelope"></i>Contact</li>
</ul>
</nav>
<script src="./js/main.js"></script>
</body>
</html>
#import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
background-color: #333;
color: #222;
overflow-x: hidden;
margin: 0;
}
.container {
background-color: #fafafa;
transform-origin: top left;
transition: transform 0.5s linear;
width: 100vw;
min-height: 100vh;
padding: 50px;
}
.container.show-nav {
transform: rotate(-20deg);
}
.circle-container {
position: fixed;
top: -100px;
left: -100px;
}
.circle {
background-color: #ff7979;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
transition: transform 0.5s linear;
}
.container.show-nav .circle {
transform: rotate(-80deg);
position: fixed;
}
.circle button {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
background: transparent;
border: 0;
font-size: 26px;
color: #fff;
}
.circle button:focus {
outline: none;
}
.circle button#open {
left: 60%;
}
.circle button#close {
transform-origin: top left;
transform: rotate(90deg);
}
.container.show-nav + nav li {
transform: translateX(0);
transition-delay: 0.3s;
}
nav {
position: fixed;
bottom: 40px;
left: 0;
z-index: 100;
}
nav ul {
list-style-type: none;
padding-left: 30px;
}
nav ul li {
text-transform: uppercase;
color: #fff;
margin: 40px 0;
transform: translateX(-100%);
transition: transform 0.4s ease-in;
}
nav ul li i {
font-size: 20px;
margin-left: 10px;
transform: translateX(-150%);
}
nav ul li + li {
margin-left: 15px;
transform: translateX(-200%);
}
nav ul li + li + li {
margin-left: 30px;
}
.content img {
width: 100%;
}
.content {
max-width: 1000px;
}
.content h1 {
margin: 0;
}
.conent small {
color: #555;
font-style: italic;
}
.content p {
color: #333;
line-height: 1.5;
}
const open = document.getElementById("open");
const close = document.getElementById("close");
const container = document.querySelector(".container");
open.addEventListener("click", () => container.classList.add("show-nav"));
close.addEventListener("click", () => container.classList.remove("show-nav"));
You need to pull out the circle-container and everything in it from the container. Once it is separate you can position it to be fixed to the top left corner of the body and won't be bound by the same rules as if it was inside container Then you can style it from there.
I changed quite a few things in this code to get it to work so look it over and see what I did.
Fiddle here: https://jsfiddle.net/708Lo31v/
const open = document.getElementById("open");
const close = document.getElementById("close");
const container = document.querySelector(".container");
const cont1 = document.querySelector(".circle-container");
open.addEventListener("click", () => container.classList.add("show-nav"));
open.addEventListener("click", () => cont1.classList.add("show-nav"));
close.addEventListener("click", () => container.classList.remove("show-nav"));
close.addEventListener("click", () => cont1.classList.remove("show-nav"));
#import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
background-color: #333;
color: #222;
overflow-x: hidden;
margin: 0;
}
.container {
background-color: #fafafa;
transform-origin: top left;
transition: transform 0.5s linear;
width: 100vw;
min-height: 100vh;
padding: 50px;
}
.container.show-nav {
transform: rotate(-20deg);
position: relative;
}
.circle-container {
position: fixed;
top: -100px;
left: -100px;
z-index: 2;
}
.circle {
background-color: #ff7979;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
transition: transform 0.5s linear;
}
.circle-container.show-nav .circle {
transform: rotate(-100deg);
position: fixed;
}
.circle button {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
background: transparent;
border: 0;
font-size: 26px;
color: #fff;
}
.circle button:focus {
outline: none;
}
.circle button#open {
left: 60%;
}
.circle button#close {
transform-origin: top left;
transform: rotate(90deg);
}
.container.show-nav + nav li {
transform: translateX(0);
transition-delay: 0.3s;
}
nav {
position: fixed;
bottom: 40px;
left: 0;
z-index: 100;
}
nav ul {
list-style-type: none;
padding-left: 30px;
}
nav ul li {
text-transform: uppercase;
color: #fff;
margin: 40px 0;
transform: translateX(-100%);
transition: transform 0.4s ease-in;
}
nav ul li i {
font-size: 20px;
margin-left: 10px;
transform: translateX(-150%);
}
nav ul li + li {
margin-left: 15px;
transform: translateX(-200%);
}
nav ul li + li + li {
margin-left: 30px;
}
.content img {
width: 100%;
}
.content {
max-width: 1000px;
}
.content h1 {
margin: 0;
}
.conent small {
color: #555;
font-style: italic;
}
.content p {
color: #333;
line-height: 1.5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous"
/>
<title>Rotating Navigation</title>
</head>
<body>
<div class="circle-container">
<div class="circle">
<button id="close">
<i class="fas fa-times"></i>
</button>
<button id="open">
<i class="fas fa-bars"> </i>
</button>
</div>
</div>
<div class="container">
<div class="content">
<h1>Amazing Article</h1>
<small>Florin Pop</small>
<p
>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora,
nihil nisi! Aut, deleniti consectetur ratione consequatur, rerum
dolorum, ipsa debitis nulla ut autem maiores architecto quos quia amet
sapiente labore. Ex ipsam minima quam accusamus, perferendis illum
rerum numquam repellendus recusandae sed quas. Aperiam quisquam animi
commodi excepturi, at magni, in assumenda veniam impedit iusto,
molestiae dolores consectetur tenetur non fugit sapiente beatae eius
praesentium consequatur! Maxime magnam ipsam laborum expedita totam
nihil magni similique ratione sequi mollitia tempore voluptate dolorum
dolorem, quisquam quasi explicabo dolores natus temporibus
necessitatibus rerum praesentium perspiciatis nesciunt modi harum!
Perspiciatis amet modi eveniet doloremque?</p
>
<h3>My Dog</h3>
<img src="./assets/charles-deluvio-Mv9hjnEUHR4-unsplash.jpg" alt="" />
<p
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
explicabo ipsum quaerat debitis sapiente cum ratione perspiciatis
dolore, odio impedit necessitatibus eligendi facilis obcaecati
temporibus expedita repudiandae harum incidunt, enim perferendis
cupiditate distinctio! Earum optio accusantium quos qui et
perspiciatis ullam odio error modi voluptas quidem, itaque quisquam
labore minima. Tenetur libero distinctio sit animi iusto dolore
adipisci quam dolorum ea blanditiis pariatur perferendis, ullam
aliquid, qui voluptates id facilis inventore quibusdam minus quia.
Eveniet!</p
>
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-user-alt"></i>About</li>
<li><i class="fas fa-envelope"></i>Contact</li>
</ul>
</nav>
<script src="./js/main.js"></script>
</body>
</html>
Related
I have 4 boxes, each with a fontawesome icon, a background for the icon, an h3 and a p with some text. When I hover i want the box and everything inside to scale about 1.1. I've tried adding transition to the boxes class and and scale on hover but it does nothing. I also tried adding these properties to each element inside the box individually. Im using grid to align the boxes horizontally and vertically on mobile. Im not including the media queries.
The first orange box titled "box" is a very basic example of what i want to accomplish with the rest of the boxes.
this is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/42f1fd7b3c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./box.css">
<title>Document</title>
</head>
<body>
<div class="zoom-box">
<div>
<i class="fas fa-phone"></i>
</div>
<h3>box</h3>
<p>box zooms on hover</p>
</div>
<section id="services">
<h1>Services</h1>
<div class="service_grid">
<div class="service_box dlvry">
<div class="truck_back icon_back">
<i class="fas fa-truck fa-3x"></i>
</div>
<h3>Delivery</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit fuga quasi molestias error aliquam sint alias cum, praesentium blanditiis amet placeat nemo soluta voluptate. Non ex provident distinctio voluptatem fuga.</p>
</div>
<div class="service_box mnfct">
<div class="industry_back icon_back">
<i class="fas fa-industry fa-3x"></i>
</div>
<h3>Manufacture</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias dolor repellendus velit inventore. Nam rerum eligendi libero odit, vero accusantium est placeat provident id animi vitae quaerat dolore fugit unde?</p>
</div>
<div class="service_box mktg">
<div class="bullhorn_back icon_back">
<i class="fas fa-bullhorn fa-3x"></i>
</div>
<h3>Marketing</h3> <br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti doloribus velit cum molestiae eius accusantium, et debitis sapiente quae culpa, cupiditate eum magni quod quas nam dolorum, hic voluptatum accusamus!</p>
</div>
<div class="service_box merch">
<div class="store_back icon_back">
<i class="fas fa-store fa-3x"></i>
</div>
<h3>Merchandising</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum obcaecati nostrum qui incidunt consequatur repellendus, commodi eligendi placeat voluptates! Iste magnam illum debitis modi fugiat aliquam vero unde, minima sequi?</p>
</div>
</div>
</section>
</body>
</html>
this is the css
/* GLOBALS */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* EXAMPLE BOX */
.zoom-box {
background-color:#CF4B32;
width: 100px;
height: 100px;
border-radius: 5%;
padding: 5px;
margin: 32px auto;
transition: transform .2s; /* Animation */
}
.zoom-box h3 {
text-align: center;
}
.zoom-box:hover {
transform: scale(1.1);
}
/* EXAMPLE BOX END */
/* BOXES WITH NO HOVER EFFECT */
#services {
background: rgb(0, 0, 17);
min-height: 100vh;
}
#services h1 {
padding: 80px;
color: #fdfffc;
text-align: center;
}
.service_grid {
padding: 0 30px;
display: grid;
gap: 20px;
grid-template-columns: repeat(4, 1fr);
grid-template-areas: 'de mn ma me';
}
.service_box {
margin: 0 auto;
background: #fdfffc;
border-radius: 5%;
padding: 1.5rem 2rem;
max-width: 400px;
text-align: justify;
}
.service_box h3 {
text-align: center;
}
/* ICONS & BACKGROUNDS */
.icon_back {
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto 15px auto;
}
.dlvry {
grid-area: de;
}
.truck_back {
background: #b0def5;
padding: 20px;
}
.fa-truck {
color: #03254c;
}
.mnfct {
grid-area: mn;
}
.industry_back {
background: #f1acac;
padding: 20px;
}
.fa-industry {
color: #b71c1c;
}
.mktg {
grid-area: ma;
}
.bullhorn_back {
background: #fcf088;
padding: 20px;
}
.fa-bullhorn {
color: #fabc20;
}
.merch {
grid-area: me;
}
.store_back {
padding: 17px;
background: #aed581;
}
.fa-store {
color: #33691e;
}
/* ICONS & BACKGROUNDS END */
Using the same code for your example seems to work...
I added/edited this to your CSS:
.service_box {
margin: 0 auto;
background: #fdfffc;
border-radius: 5%;
padding: 1.5rem 2rem;
max-width: 400px;
text-align: justify;
transition: transform .2s; /* Animation */
}
.service_box:hover {
transform: scale(1.1);
}
Working example:
/* GLOBALS */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* EXAMPLE BOX */
.zoom-box {
background-color:#CF4B32;
width: 100px;
height: 100px;
border-radius: 5%;
padding: 5px;
margin: 32px auto;
transition: transform .2s; /* Animation */
}
.zoom-box h3 {
text-align: center;
}
.zoom-box:hover {
transform: scale(1.1);
}
/* EXAMPLE BOX END */
/* BOXES WITH NO HOVER EFFECT */
#services {
background: rgb(0, 0, 17);
min-height: 100vh;
}
#services h1 {
padding: 80px;
color: #fdfffc;
text-align: center;
}
.service_grid {
padding: 0 30px;
display: grid;
gap: 20px;
grid-template-columns: repeat(4, 1fr);
grid-template-areas: 'de mn ma me';
}
.service_box {
margin: 0 auto;
background: #fdfffc;
border-radius: 5%;
padding: 1.5rem 2rem;
max-width: 400px;
text-align: justify;
transition: transform .2s; /* Animation */
}
.service_box:hover {
transform: scale(1.1);
}
.service_box h3 {
text-align: center;
}
/* ICONS & BACKGROUNDS */
.icon_back {
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto 15px auto;
}
.dlvry {
grid-area: de;
}
.truck_back {
background: #b0def5;
padding: 20px;
}
.fa-truck {
color: #03254c;
}
.mnfct {
grid-area: mn;
}
.industry_back {
background: #f1acac;
padding: 20px;
}
.fa-industry {
color: #b71c1c;
}
.mktg {
grid-area: ma;
}
.bullhorn_back {
background: #fcf088;
padding: 20px;
}
.fa-bullhorn {
color: #fabc20;
}
.merch {
grid-area: me;
}
.store_back {
padding: 17px;
background: #aed581;
}
.fa-store {
color: #33691e;
}
/* ICONS & BACKGROUNDS END */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/42f1fd7b3c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./box.css">
<title>Document</title>
</head>
<body>
<div class="zoom-box">
<div>
<i class="fas fa-phone"></i>
</div>
<h3>box</h3>
<p>box zooms on hover</p>
</div>
<section id="services">
<h1>Services</h1>
<div class="service_grid">
<div class="service_box dlvry">
<div class="truck_back icon_back">
<i class="fas fa-truck fa-3x"></i>
</div>
<h3>Delivery</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit fuga quasi molestias error aliquam sint alias cum, praesentium blanditiis amet placeat nemo soluta voluptate. Non ex provident distinctio voluptatem fuga.</p>
</div>
<div class="service_box mnfct">
<div class="industry_back icon_back">
<i class="fas fa-industry fa-3x"></i>
</div>
<h3>Manufacture</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias dolor repellendus velit inventore. Nam rerum eligendi libero odit, vero accusantium est placeat provident id animi vitae quaerat dolore fugit unde?</p>
</div>
<div class="service_box mktg">
<div class="bullhorn_back icon_back">
<i class="fas fa-bullhorn fa-3x"></i>
</div>
<h3>Marketing</h3> <br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti doloribus velit cum molestiae eius accusantium, et debitis sapiente quae culpa, cupiditate eum magni quod quas nam dolorum, hic voluptatum accusamus!</p>
</div>
<div class="service_box merch">
<div class="store_back icon_back">
<i class="fas fa-store fa-3x"></i>
</div>
<h3>Merchandising</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum obcaecati nostrum qui incidunt consequatur repellendus, commodi eligendi placeat voluptates! Iste magnam illum debitis modi fugiat aliquam vero unde, minima sequi?</p>
</div>
</div>
</section>
</body>
</html>
To scale on hover you should add css code below.
.service_box:hover{
transform: scale(1.1);
}
You can test your code at jsfiddle and add my hover code.
I have an interesting situation.
What I want to achieve is that, instead of spreading from top to bottom, the animation will spread from the middle.
I also want to achieve this without any help of JS/jQuery.
Appreciate your thoughts :)
* {
border: 0;
margin: 0;
padding: 0;
}
h1 {
margin-top: 30px;
text-align: center;
line-height: 30px;
transition: line-height 0.3s ease-in-out;
}
h1:hover {
line-height: 60px;
}
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti doloribus beatae laboriosam aspernatur magni, molestias possimus, rerum voluptates dolorum aliquam est soluta animi inventore ut at eius voluptatum quod omnis.</h1>
Just wrap this text in a wrapper, give it a height, position the text in center vertically and it will work. View it in full page.
* {
border: 0;
margin: 0;
padding: 0;
}
h1 {
margin-top: 30px;
text-align: center;
line-height: 30px;
transition: line-height 0.3s ease-in-out;
}
h1:hover {
line-height: 60px;
}
.wrapper {
height: 400px;
display: flex;
align-items: center;
}
<div class="wrapper">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti doloribus beatae laboriosam aspernatur magni. consectetur adipisicing elit. Corrupti doloribus beatae laboriosam aspernatur magni.</h1>
</div>
Easy, Just use the line-height in this case, or you can use flex as well.
The only issue is the height of the container, in this case I use the 120px, that is the max height that the text can expand, you can also use height:100%; or height:100vh on the
* {
border: 0;
margin: 0;
padding: 0;
}
h1 {
display:inline-block;
text-align: center;
line-height: 30px;
transition: line-height 0.3s ease-in-out;
vertical-align:middle;
}
h1:hover {
line-height: 60px;
}
.container-mod{
margin-top: 30px;
height:100vh;
}
.container-mod:before{
content:"";
vertical-align:middle;
display: inline-block;
height:100%;
}
<div class="container-mod"><h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti doloribus beatae laboriosam aspernatur magni, molestias possimus, rerum voluptates dolorum aliquam est soluta animi inventore ut at eius voluptatum quod omnis.</h1></div>
Here's the setup:
#out {
background-color: blue;
width: 100px;
padding: 5px;
max-height: 250px;
overflow: hidden;
}
#in {
background-color: red;
overflow: scroll-y;
}
input {
width: 100%;
box-sizing: border-box;
}
<div id="out">
<input value="stuff here that i don't know the height of">
<div id="in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eius voluptatibus tenetur cumque, incidunt maxime, cum dolorem sed corporis. Iste illum eaque enim cum quo saepe dicta perferendis incidunt. Accusamus.
</div>
</div>
You can see that the red box runs off the bottom. I want a scrollbar to appear instead, and the 5-pixel blue padding should be visible on the bottom.
How can I do this?
Note that I don't know the exact height of the red box. If there's less content, there should be no scrollbar, and the total height will be less than 250px.
Update: Based on your updated question, you can use display:flex instead of the max-height that I initially suggested and keep the overflow:auto.
#out {
background-color: blue;
width: 100px;
padding: 5px;
max-height: 250px;
overflow: hidden;
display: flex;
flex-direction: column;
}
#in {
background-color: red;
max-height: 240px;
overflow: auto;
}
<div id="out">
<input value="stuff here that i don't know the height of">
<div id="in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eius voluptatibus tenetur cumque, incidunt maxime, cum dolorem sed corporis. Iste illum eaque enim cum quo saepe dicta perferendis incidunt. Accusamus.
</div>
</div>
Ok so we have a div #out with a max-height to get scrollbars. The #in div will add the blue border and the #scroll div contains the content that will scroll on overflow-y
#out {
width: 100px;
max-height: 250px;
position:relative;
background:blue;
padding:5px;
}
#in {
background-color: red;
height:240px
}
#scroll{
height:100%;
overflow-y: scroll;
overflow-x: hidden;
}
<div id="out">
<div id="in">
<div id="scroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eius voluptatibus tenetur cumque, incidunt maxime, cum dolorem sed corporis. Iste illum eaque enim cum quo saepe dicta perferendis incidunt. Accusamus.
</div>
</div>
</div>
#out {
width: 100px;
max-height: 250px;
overflow: scroll;
background-color: blue;
padding: 5px;
}
#in {
background-color: red;
overflow: scroll;
max-height: 245px;
}
I have a little question due to position of background image in my footer.
As You can see on the picture, my current background image (green dotted line with ball - it is svg image) is placed in the middle if the footer.
I would like to place it in the position of the red line, staying there while resizing window.
Code of it is:
footer{
position: relative;
/* START OF IMAGE BG */
&:before{
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("/wp-content/themes/company/static/img/line.svg");
-moz-background-size:90%;
background-size:90%;
background-repeat: no-repeat;
}
/* END OF IMG BG */
padding: rem-calc(45 20);
#media #{$medium-up}{
padding: rem-calc(85);
}
background-color: $bluedark;
color: $white;
min-height: rem-calc(500);
p{
font-size: rem-calc(12);
#media #{$medium-up}{
font-size: rem-calc(16);
}
font-weight: 300;
&.section-header{
text-transform: uppercase;
font-weight: 600;
}
&.bold{
font-weight: 600;
}
&.green{
color: $green;
}
}
.social-media{
img{
display: inline-block;
margin: rem-calc(0 5 20 5);
max-height: rem-calc(20);
#media #{$medium-up}{
max-height: rem-calc(40);
}
}
}
.underline{
margin-top: rem-calc(50);
border-top: 1px solid $bluegrey;
padding-top: rem-calc(20);
.logo{
float: left;
width: rem-calc(200);
height: rem-calc(45);
background: url("/wp-content/themes/company/static/img/logo_light.svg");
background-size: contain;
background-repeat: no-repeat;
}
select{
float: right;
}
}
}
And html is:
<footer>
<div class="line"></div>
<div class="flex">
<div class="row">
<div class="large-3 columns">
<p class="section-header">O nas</p>
<p>O Firmie</p>
<p>Zespół</p>
<p class="green">Blog</p>
</div>
<div class="large-3 columns">
<p class="section-header">Pomoc</p>
<p>FAQ</p>
<p>Regulamin</p>
<p>Polityka prywatności</p>
</div>
<div class="large-3 columns">
<p class="section-header">Social Media</p>
<div class="social-media">
<img src="{{site.theme.link}}/static/img/social-media/facebook.png">
<img src="{{site.theme.link}}/static/img/social-media/twitter.png">
<img src="{{site.theme.link}}/static/img/social-media/instagram.png">
</div>
</div>
<div class="large-3 columns">
<p class="section-header">Kontrakt</p>
<div class="button green">Formularz kontaktowy</div>
</div>
</div>
<div class="row underline">
<div class="logo"></div><span>
<select>
<option value="Polski">Polski</option>
<option value="English">English</option>
</select>
</div>
</div>
I know it is wrong placed due to top:0 however I dont know how to make it stay right on the top border of footer.
I would be grateful for any help.
A similar example of yours, I think its usefull for your purpouse:
div {
border: solid 1px green;
margin-bottom: 20px;
}
footer {
position: relative;
height: 50px;
background-color: red;
text-align: center;
padding-top: 20px;
}
footer:before {
content: "";
position: absolute;
display: block;
top: -50%;
left: 0;
width: 100%;
height: 100%;
background: url("http://www.curtainshopsouthport.co.uk/scissors.png");
-moz-background-size: 90%;
background-size: 90%;
background-repeat: no-repeat;
background-position: left 50%;
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam quis placeat architecto dolore recusandae nam amet, voluptate consequatur tenetur, quibusdam cupiditate culpa perferendis praesentium ab quasi voluptatum doloremque illum suscipit ea. Placeat
aperiam tempore maiores minus harum sint debitis beatae sit, eos voluptas est temporibus animi ullam praesentium voluptates molestiae dolore illo officiis blanditiis dolores. Qui labore asperiores quia dolore amet, culpa consectetur est quibusdam iusto
incidunt maxime aliquid sit eius explicabo aut, possimus corporis temporibus. Alias officia libero repellat veritatis, obcaecati repudiandae at voluptas, maxime doloremque facilis, sunt praesentium voluptatibus eaque provident natus, earum asperiores?
Possimus voluptatem, soluta deserunt.</div>
<footer>footer</footer>
As long as you don't have overflow issues, all you should need to do is replace top:0 with bottom:100%
footer{
position: relative;
&:before{
content: "";
position: absolute;
display: block;
bottom: 100%; /* change here */
left: 0;
width: 100%;
height: 100%;
padding-bottom: 50%;
background: url("img/line.svg");
-moz-background-size:90%;
background-size:90%;
background-repeat: no-repeat;
}
I've wrote this CSS :
div {
width: 500px;
height:150px;
margin-left:150px;
background: lightblue;
}
div::before {
content:'';
width:50px;
height:150px;
display: inline-block;
background:red;
position: absolute;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia rem quasi laborum dolor explicabo nobis pariatur ad deleniti repellendus dicta, ducimus expedita! Temporibus quo facilis quae magni, saepe, sapiente rem.</p>
</div>
What I want is to put the :before content outside div but still collapse to it and not inside.
Thanks for your help !
You can use transform: translateX(-100%) with left: 0 and add position: relative on parent
div {
width: 500px;
height: 150px;
margin-left: 150px;
background: lightblue;
position: relative;
}
div::before {
content: '';
width: 50px;
height: 150px;
left: 0;
display: inline-block;
transform: translateX(-100%);
background: red;
position: absolute;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia rem quasi laborum dolor explicabo nobis pariatur ad deleniti repellendus dicta, ducimus expedita! Temporibus quo facilis quae magni, saepe, sapiente rem.</p>
</div>
You have a few options, I would use the transform property which only requires a single style entry.
div {
width: 500px;
height:150px;
margin-left:150px;
background: lightblue;
}
div::before {
content:'';
width:50px;
height:150px;
display: inline-block;
background:red;
position: absolute;
transform: translateX(-50px);
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia rem quasi laborum dolor explicabo nobis pariatur ad deleniti repellendus dicta, ducimus expedita! Temporibus quo facilis quae magni, saepe, sapiente rem.</p>
</div>
You could do it with left property of the :before and setting div to position relative
div {
width: 500px;
height:150px;
margin-left:150px;
background: lightblue;
position: relative;
}
div::before {
left: -50px;
content:'';
width:50px;
height:150px;
display: inline-block;
background:red;
position: absolute;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia rem quasi laborum dolor explicabo nobis pariatur ad deleniti repellendus dicta, ducimus expedita! Temporibus quo facilis quae magni, saepe, sapiente rem.</p>
</div>