We Keep Coding

Fill a circle on scroll in CSS

I'm trying to make a stem filling with a color and with circles for steps along the stem.
This is an example of what I'm currently aiming for: https://codepen.io/nicklassandell/pen/ztGac
This is currently what I have: https://codepen.io/TheOshika/full/xxRRVNb (the design is similar to the above code but I wrote the code from scratch)
I'm using a scrollspy script in order to trigger a filling animation in the circles. However I'm not satisfied with it because the offset for the trigger is too difficult to set for a responsive design. I'm now thinking about removing the javascript part and instead having a stem filling the circles with the scrolling, but no animation.
This is what I'm looking for, except I don't know how to make the background color in the stem fill the circles:
.header {
position: relative;
height: 800px;
background: blueviolet;
z-index: 3;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: #4c63b6;
}
.container {
margin: 0px auto;
position: relative;
}
/* stem */
.filling-stem {
position: sticky;
z-index: 1;
float: left;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 50vh;
width: 5px;
background-color: #bed0f7;
}
.stem-background {
position: absolute;
z-index: 0;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
width: 5px;
background-color: #1f2933;
}
.stem-nav {
position: absolute;
z-index: 2;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
}
#my-awesome-nav {
display: flex;
height: 100%;
justify-content: space-around;
flex-direction: column;
list-style: none;
margin-left: 0;
padding-left: 0;
}
#my-awesome-nav li a {
border: solid 3px black;
border-radius: 50%;
display: inline-block;
background-color: #1f2933;
}
#my-awesome-nav li a .color-change {
height: 40px;
width: 40px;
background-color: #1f2933;
border-radius: 50%;
}
/* timeline */
.timeline-container {
position: relative;
}
.step-container {
margin: 0 25% 0 25%;
display: flex;
align-items: center;
height: 1500px;
}
/* footer */
footer {
display: flex;
justify-content: center;
align-items: center;
height: 1000px;
width: 100%;
background-color: black;
color: white;
}
<div class="container">
<div class="container-inner">
<div class="filling-stem"></div>
<div class="header"></div>
<div class="timeline-container">
<div class="timeline-container-inner">
<div class="stem-background"></div>
<div class="stem-nav">
<ul id="my-awesome-nav">
<li data-index="0"><a href="#step-one">
<div class="color-change one"></div>
</a></li>
<li data-index="1"><a href="#step-two">
<div class="color-change two"></div>
</a></li>
<li data-index="2"><a href="#step-three">
<div class="color-change three"></div>
</a></li>
<li data-index="3"><a href="#step-four">
<div class="color-change four"></div>
</a></li>
<li data-index="4"><a href="#step-five">
<div class="color-change five"></div>
</a></li>
</ul>
</div>
<div class="step-container">
<div class="step-container-inner">
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>End of the page</p>
</footer>

It should be possible to get the required 'filling' effect using just CSS.
We add a pseudo before and a pseudo after element to each of the li elements. These have a radial-gradient background which has a transparent 'bite' out at the position of the circles containing the a (anchor) element. Behind the whole thing we put a fixed element which has the 'fill' color in the top half and the darker (non-filled) color in the bottom half. This is done by giving it a background image which is a linear gradient.
The inner divs (inside the anchor elements) are not now needed.
Here is a snippet to show the idea. CSS variables have been introduced to make it easier to change dimensions if required. (Note: there is redundant CSS in here which could do with tidying up.)
* {
margin: 0;
padding: 0;
--stemw: 5px; /* the width of the stem */
--circled: 40px; /* the diameter of the circles */
--lih: 300px; /* the height of each list item */
--nolis: 5; /* the number of items in the list */
--halfstemw: calc(var(--stemw) / 2);
--circler: calc(var(--circled) / 2); /* the circle radius */
--halflih: calc(var(--lih) / 2);
}
div.bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: linear-gradient(to top, #1f2933 0%, #1f2933 50%, #bed0f7 50%, #bed0f7 100%);
overflow: hidden;
}
#my-awesome-nav li {
position: relative;
}
#my-awesome-nav li::before, #my-awesome-nav li::after {
position: absolute;
transform: translateX(calc(-100% + var(--circler)));
width: calc(50vw - var(--halfstemw));
height: var(--lih);
top: calc(var(--halflih) * -1);
content: '';
z-index: -1;
}
#my-awesome-nav li::before {
left: 0;
background: radial-gradient(circle at calc(100% + var(--halfstemw)) calc(50% + var(--circler)), transparent 0%, transparent 3%, #4c63b6 3%, #4c63b6 100%);
}
#my-awesome-nav li::after{
left: calc(50vw + var(--halfstemw));
background: radial-gradient(circle at calc(var(--halfstemw) * -1) calc(50% + var(--circler)), transparent 0%, transparent 3%, #4c63b6 3%, #4c63b6 100%);
}
.header {
position: relative;
height: 800px;
background: blueviolet;
z-index: 3;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: #4c63b6;
}
.container {
margin: 0px auto;
position: relative;
}
/* stem */
.filling-stem {
position: sticky;
z-index: 1;
float: left;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 50vh;
width: 5px;
background-color: #bed0f7;
}
.stem-background {
position: absolute;
z-index: 0;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
width: 5px;
background-color: #1f2933;
}
.stem-nav {
position: absolute;
z-index: 2;
left: 50%;
transform: translate(-50%, 0);
height: 100%;
}
#my-awesome-nav {
display: flex;
height: 100%;
justify-content: space-around;
flex-direction: column;
list-style: none;
margin-left: 0;
padding-left: 0;
}
#my-awesome-nav li a {
width: 40px;
height: 40px;
border: solid 3px black;
border-style: none;
border-radius: 50%;
display: inline-block;
background-color: #1f2933;
background-color: transparent;
}
/*
#my-awesome-nav li a .color-change {
height: 40px;
width: 40px;
background-color: #1f2933;
border-radius: 50%;
background-color: transparent;
}
*/
/* timeline */
.timeline-container {
position: relative;
}
.step-container {
margin: 0 25% 0 25%;
display: flex;
align-items: center;
height: 1500px;
}
/* footer */
footer {
display: flex;
justify-content: center;
align-items: center;
height: 1000px;
width: 100%;
background-color: black;
color: white;
}
<div class="bg"></div>
<div class="container">
<div class="container-inner">
<div class="filling-stem"></div>
<div class="header"></div>
<div class="timeline-container">
<div class="timeline-container-inner">
<div class="stem-background"></div>
<div class="stem-nav">
<ul id="my-awesome-nav">
<li data-index="0"><a href="#step-one">
</a></li>
<li data-index="1"><a href="#step-two">
</a></li>
<li data-index="2"><a href="#step-three">
</a></li>
<li data-index="3"><a href="#step-four">
</a></li>
<li data-index="4"><a href="#step-five">
</a></li>
</ul>
</div>
<div class="step-container">
<div class="step-container-inner">
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>End of the page</p>
</footer>
Footnote: on retina screens I've occasionally seen a faint line between the pseudo elements - I think it's where the positioning calculations come at part of a CSS pixel (which on a high res screen may mean a screen pixel is 'left behind'). It's probably necessary to make the pseudo elements 1 CSS pixel higher to overlap the next one to give a continuous effect to the background.

Inherit padding width without position absolute? Is it possible?

Not sure, but I am currently not able to figure out. I'm trying to center the inner div (blue transparent one) from the parent (with the red background) inside the background. As an example, they're technically in each other perfectly at the first example in the snippet.
At the second example however I've added padding: 5px; to both of them to the red and blue one. To the blue one because I wanted to inherit the width some how.
https://jsfiddle.net/L8enbcy3/
.box-1-1 {
width: 50px;
height: 50px;
background: red;
position: relative;
display: block;
}
.box-1-2 {
width: 50px;
height: 50px;
background: #0000ffb0;
position: relative;
}
.box1 {
width: 50px;
height: 50px;
background: red;
padding: 5px;
position: relative;
display: block;
}
.box2 {
width: 50px;
height: 50px;
background: #0000ffb0;
padding: 5px;
}
<div class="box-1-1">
<div class="box-1-2"></div>
</div>
<pre>
</pre>
<div class="box1">
<div class="box2"></div>
</div>
What I'm trying is to get "box2" centered into "box1" like example 1 but with its padding, so that's covered by blue. without having to position: absolute it, if possible. What I'm thinking I have to do is to create and invisibile box absolute it, "center it with top: 0 and left: 0 when the parent has position: relative. Then as I mentioned with it being absolute it would go to the corners of the parents padding too and then in the absolute box, I would create a relative one with display: table and put in all the content.
My question now though is, is there another way to do that?

Solution 1: transform: translate()
You could use transform: translate() with variables to achieve what you want, without weird margins (next solution). Here's some MDN about translate().
:root {
--padding: 5px;
}
.box1 {
height: 50px;
width: 50px;
background-color: red;
padding: var(--padding);
}
.box2 {
height: calc(50px + var(--padding)*2);
width: calc(50px + var(--padding)*2);
background-color: #0000ffb0;
transform: translate(calc(0px - var(--padding)), calc(0px - var(--padding)))
}
<div class="box1">
<div class="box2"></div>
</div>
As you can see, the box is brought up and left with translate, and the height is lengthened by adding the needed padding to it. Thisachieves the desired cover effect.
Solution 2: Positive padding, negative margin
You could also use positive paddings and negative margins. Info below code snippet.
:root {
--padding: 5px;
}
.box1 {
height: 50px;
width: 50px;
background-color: red;
padding: var(--padding);
position: relative;
display: block;
}
.box2 {
height: 50px;
width: 50px;
background-color: #0000ffb0;
padding: var(--padding);
margin: calc(0px - var(--padding));
}
<div class="box1">
<div class="box2"></div>
</div>
What's happening here is following the CSS box model, found on MDN and w3schools. We're simply pushing out with margin and sucking in with padding.
Then, as per request in the comments, --padding is a CSS variable that stores the amount of padding that you want.
Hope I helped!
Cheers, Bobbay

You can add a negative margin if you insist on keeping the padding in place.
.box-1-1 {
width: 50px;
height: 50px;
background: red;
position: relative;
display: block;
}
.box-1-2 {
width: 50px;
height: 50px;
background: #0000ffb0;
position: relative;
}
.box1 {
width: 50px;
height: 50px;
background: red;
padding: 5px;
position: relative;
display: block;
}
.box2 {
width: 50px;
height: 50px;
background: #0000ffb0;
padding: 5px;
margin: -5px;
}
<div class="box-1-1">
<div class="box-1-2"></div>
</div>
<pre>
</pre>
<div class="box1">
<div class="box2"></div>
</div>

To center box2 within box1 without absolute position, you can use following css:
.box1 {
display: flex;
align-items: center;
justify-content: center;
}

Edit: example 2 illustrate your need. just remove padding from both boxes and settop: 0; and 'left: 0' with position: relative on box 2. I hope this is the required solution
to center box 2 you need to make its dimension less than box 1. consider the extra pixels added with padding. so the inner box width and height should be 10px less than the outer box.
Example:
.box1 {
width: 50px;
height: 50px;
background: red;
padding: 5px;
position: relative;
display: block;
}
.box2 {
width: 40px;
height: 40px;
background: #0000ffb0;
padding: 5px;
}
.box1-1 {
border: 2px solid yellow;
width: 50px;
height: 50px;
background: red;
position: relative;
display: block;
}
.box2-2 {
position:relative;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
background: #0000ffb0;
}
<div class="box1">
<div class="box2"></div>
</div>
<br>
<div class="box1-1">
<div class="box2-2"></div>
</div>

Inline divs are not lining up in a row

It's my understanding that simply adding display:inline to divs with a relative position will line them up (left to right), somewhat like float:left. I've tried both approaches but they haven't worked.
Below is an example of my last attempt, using inline displaying. I want all three segments to line up from left to right, but they're displaying just like unstyled divs.
function showProfile() {
var profile = document.getElementById('userprofile');
profile.style.opacity = 0.8;
var profileImage = document.getElementById('userimage');
profileImage.style.opacity = 0.8;
}
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
opacity: 0;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
opacity: 0;
width: 100px;
height: 100px;
}
.miniBioSegment {
display: inline;
margin-right: 5px;
width: 33%;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>
<button onclick="showProfile()">View Profile</button>

You should use inline-block instead of inline for more control. I used a width of 33%-2px because the browser rounds the div's size up therefore leading to overflowing. Your 5px margins weren't helping with the sum either.
function showProfile() {
var profile = document.getElementById('userprofile');
profile.style.opacity = 0.8;
var profileImage = document.getElementById('userimage');
profileImage.style.opacity = 0.8;
}
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
opacity: 0;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
opacity: 0;
width: 100px;
height: 100px;
display:inline-block;
}
.miniBioSegment{
display: inline-block;
width: calc(33% - 2px);
vertical-align:middle;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>
<button onclick="showProfile()">View Profile</button>

CSS should target the ID's and use float:left. See example
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
float:left;
max-width: 33%;
height: 100px;
}
#miniBio {
float:left;
margin-right: 5px;
width: 33%;
}
#miniQuote {
float:left;
margin-right: 5px;
width: 33%;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>

I'm asking myself, why do you have position:absolute;?
To make it work, I have just added display: flex; justify-content: space-between; to the .profileclass.
Remove the position, and try adding the last two lines.
See example here: http://sandbox.clickadelic.de/demos/lineup.html

With the divs set to display: inline; they will only line up horizontally if the total length of the divs does not exceed the container's width.
And width, height of inline elements is ignored, you should use display: inline-block; instead. The wrapping behavior is the same as above.
Also browser renders whitespace among inline* elements, which is about 4px, see How to remove the space between inline-block elements? for more details.
In your example, there are 3 divs, if you want them to be equal width, you can do:
.profile {
font-size: 0; /*remove whitespace*/
background: silver;
}
.miniBioSegment {
font-size: 16px; /*reset font-size*/
display: inline-block;
vertical-align: top; /*vertical alignment*/
width: 33.3333%;
}
However, the image object in the first div is set to 100px, I think you would prefer that div to be the same width too, and each one takes 50% of the rest space for other two divs. Examples:
1. Inline block
jsFiddle
.profile {
font-size: 0;
background: silver;
}
.miniBioSegment {
font-size: 16px;
display: inline-block;
vertical-align: top;
border: 1px dotted red;
box-sizing: border-box;
width: 100px;
}
#miniBio, #miniQuote {
width: calc((100% - 100px) / 2);
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
2. Float
jsFiddle
.profile {
background: silver;
}
.profile:after {
content: "";
display: table;
clear: both;
}
.miniBioSegment {
float: left;
border: 1px dotted red;
box-sizing: border-box;
width: 100px;
}
#miniBio, #miniQuote {
width: calc((100% - 100px) / 2);
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
3. CSS table
jsFiddle
.profile {
background: silver;
display: table;
border-collapse: collapse;
width: 100%;
}
.miniBioSegment {
display: table-cell;
vertical-align: top;
border: 1px dotted red;
}
#miniBio, #miniQuote {
width: 50%;
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
4. Flexbox
jsFiddle
.profile {
background: silver;
display: flex;
}
.miniBioSegment {
border: 1px dotted red;
}
#miniBio, #miniQuote {
flex: 1;
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}

How to put <ul> around image in css

So, as the title says, I want to put <ul> around an image. The ul got 4 <li>, and I want to put 2 <li> on the left side of the image, and 2 <li> on the right side:
<ONE>-----<TWO>-----(imageLOGO.png)-----<THREE>-----<FOUR>
Here is how it looks at the moment:
As you can see the 4 <li> are at the top left corner of the site. They are put on the blue line from the same <div> - #line . I tried with padding, but it looks really bad, and it is hard to control once the page is minimized or resized in any way.
Here is the html file:
<body>
<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>TREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="images/chelsea-logo.png">
</div>
</div>
</body>
And the css file:
body {
background: url('../images/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
}
#top{
width: 150px;
margin: 0 auto;
height: 150px;
z-index: 1;
}
#top img {
position: absolute;
width: 150px;
height: 150px;
z-index: 1;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: inline-block;
padding: 5px;
margin: 25px;
}
.line-menu li {
padding: 0 89px;
display: inline-block;
}
I'll provide more information if needed. Thank you in advance for your time.

Here is one way of doing it.
You have the right idea by using absolute positioning to place the logo over the link panel.
I specified a width for the li elements and then applied text-align: center on the parent ul to keep then centered.
To open up space for the logo, I added a right-margin of 200px between the 2nd and 3rd li elements, using the nth-child selector.
You can adjust margins on various elements to control the spacing between and above the li elements.
Note, for smaller screena, you may need to use media queries and make adjustments to the margins and so on.
body {
margin: 0;
}
#top {
border: 1px dotted black;
position: absolute;
top: 0px;
left: 0;
right: 0;
text-align: center;
}
#top img {
vertical-align: top;
width: 150px;
height: 150px;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: block;
text-align: center;
margin: 20px 0 0 0;
padding: 0;
}
.line-menu li {
display: inline-block;
margin: 0 20px;
width: 100px;
border: 1px solid #CCCCCC;
}
.line-menu li:nth-child(2) {
margin-right: 200px;
}
<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="http://placehold.it/150x150">
</div>
</div>

Add image after one and two. And .list-menu li float:left; display:block;

Problems with positioning and z-index

I'm trying to have the menu overlap content, but as of now it moves the content box away.
I've already tried the position: relative trick, but the problem doesn't seem to go away. The solution is probably something really obvious, but I need help finding it.
EDIT: Sorry, forgot to add, the box will also be resizable() so I'm trying to avoid absolute positioning.
EDIT2: nevermind, right:5px fixes that problem
JSFiddle
HTML
<div class="box">
<div class="top">
<div class="icon"></div>
<div class="menubox">
<ul class="menu">
<li>Menu Option 1
</li>
<li>Menu Option 2
</li>
</ul>
</div>
</div>
<div class="content">
<p>content goes here</p>
</div>
<div class="content">
<p>content goes here</p>
</div>
</div>
CSS
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
}
.top {
width: 100%;
height: 25px;
background: lightblue;
}
.icon {
float: right;
background: red;
height: 15px;
width: 15px;
margin: 5px;
}
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
}
.content {
width: 180px;
height: 165px;
margin: 0px 10px 47px;
float: left;
position: relative;
z-index: 0;
display: block;
background:DarkGray;
}
li {
list-style-type: none;
text-decoration: none;
}
ul {
margin:none;
padding:none;
}
JS/jQuery
$('.icon').mouseover(function () {
$(".menu").show();
}); //toggle menu on hover
$(".menu").mouseleave(function () {
$(this).hide();
});

use position: absolute?
fiddle
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
top: 25px;
right: 5px;
position: absolute;
}
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
position: relative; /* add this */
}
Edit: better position

The yellow menubox needs to be positioned absolutely so it does not interfere with the flow of the document (take up space).
Give it a position:absolute;
Furthermore, the .box element needs to have a position:relative so the menu is positioned relative to that box.
Updated your fiddle for you:
http://jsfiddle.net/CcVnL/11/

Check the below link i have updated your code.
"jsfiddle.net/CcVnL/9/"