Before and after works different after overflow: auto - css

I have a tooltip div, which has modified border on top to look like arrow, which is done by some before and after attributes. But when I use overflow: auto on that div, that "arrow" disappears.
How it should looks without overflow:auto;:
http://jsfiddle.net/nmvh4L6g/1/
How it looks with overflow: auto;:
http://jsfiddle.net/nmvh4L6g/2/
Sorry for my english and thanks for any help!


In top of my head, you can use an internal div, like:
<div id="tooltipNotifikace">
<div>Lorem impsum dolor sit amet</div>
</div>
And in CSS, you use the overflow in the internal div:
#tooltipNotifikace > div {
max-height: 500px;
overflow-y: auto;
}
JSFiddle: http://jsfiddle.net/nmvh4L6g/7/


You don't really need to set the overflow-y to auto. The tooltip will adjust its height automatically until it reaches the max-height value of 500px you have set.
Edit:
I guess I'm feeling magnanimous today:
/* Based on http://css-tricks.com/bubble-point-tooltips-with-css3-jquery/ */
.tooltipWrap {
position: fixed;
right: 6px;
top: 20px;
}
#tooltipNotifikace, .arrow:after {
background: #fff;
border: 2px solid #0dbe48;
}
#tooltipNotifikace {
color: #1bc204;
text-align: center;
padding: 0px 0px 0px 0px;
width: 350px;
max-height: 300px;
overflow-y: auto;
background: #fff;
border: 2px solid #0dbe48;
z-index:1;
}
.arrow {
width: 70px;
height: 18px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
top: -16px;
}
.arrow:after {
content: " ";
position: absolute;
left: 20px;
top: 10px;
width: 25px;
height: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
z-index:2;
}
<div class="tooltipWrap"><div id="tooltipNotifikace">Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet. Lorem impsum dolor sit amet.</div><div class="arrow"></div></div>
JSFiddle.

Related

Indent all elements under headdings by different amounts - CSS

I am trying to indent elements based on the heading tag they are under. I am doing this currently by using the sibling selector:
p{
padding-left: 0;
}
h1 + p, h1 + ul{
padding-left: 1em;
}
h2 + p{
padding-left: 2em;
}
However if have two or more paragraphs under a heading then the padding defaults back to zero.
Is there a way to set padding of all elements under h1 tag to the same value and all elements under the h1 tag to a different value (only using CSS)?
Thanks for the help!

You could do something like this:
h1+div {
padding-left: 1rem;
}
h2+div {
padding-left: 2rem;
}
<h1>My Title</h1>
<div>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
</div>
<h2>My Title</h2>
<div>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
<p>Lorem Ipsum Dolor sit amet</p>
</div>
There is also a way to achieve the same effect using only CSS, but I wont especially reccommend it:
h1 ~ p, h1 ~ ul {
padding-left: 1rem;
}
h2 ~ p, h2 ~ ul {
padding-left: 2rem;
}
<h1>My title</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<h2>My title</h2>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

How to custom scroll bar with default arrow in css

I want to customize the width and height of scrollbar but with default arrow
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
I didnt get default arrow. can anybody suggest here

::-webkit-scrollbar-thumb {
background-color: #b0b0b0;
background-clip: padding-box;
border: 0.05em solid #eeeeee;
border-radius: 10px;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
background-color: #bbbbbb;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0 8px 8px 8px;
border-color: transparent transparent #555555 transparent;
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
border-color: transparent transparent #777777 transparent;
}
/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
border-width: 8px 0 8px 8px;
border-color: transparent transparent #555555 transparent;
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
border-width: 8px 8px 0 8px;
border-color: #555555 transparent transparent transparent;
}
::-webkit-scrollbar-button:vertical:single-button:increment:hover {
border-color: #777777 transparent transparent transparent;
}
/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
border-width: 8px 8px 8px 0;
border-color: transparent transparent #555555 transparent;
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
border-color: transparent transparent #777777 transparent;
}
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
<div style="color:black;height:300px;width:600px;padding:8px;font-size:22px;overflow-y:scroll;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam ac tortor vitae purus. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Nullam ac tortor vitae purus faucibus
ornare. Risus quis varius quam quisque id diam vel quam. In egestas erat imperdiet sed euismod nisi porta. Elementum eu facilisis sed odio morbi quis commodo odio aenean. Sapien pellentesque habitant morbi tristique senectus et netus et malesuada. Mattis
pellentesque id nibh tortor id. Ullamcorper a lacus vestibulum sed arcu non. Lectus mauris ultrices eros in cursus turpis. Ipsum dolor sit amet consectetur adipiscing elit duis tristique. Ultricies mi eget mauris pharetra et ultrices. Id aliquet risus
feugiat in. Quam vulputate dignissim suspendisse in est. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Sed arcu non odio euismod lacinia. Sed blandit libero volutpat sed cras ornare arcu dui. Ultrices tincidunt arcu non sodales
neque sodales. Arcu dictum varius duis at consectetur lorem donec massa sapien. Vitae purus faucibus ornare suspendisse sed. Morbi tristique senectus et netus et malesuada fames. Adipiscing diam donec adipiscing tristique. Euismod lacinia at quis risus
sed. Pulvinar sapien et ligula ullamcorper malesuada proin libero.
</div>
You have to use
::-webkit-scrollbar-thumb for thumb holder
::-webkit-scrollbar-button:single-button,:vertical:decrement,:vertical:increment,:horizontal:decrement,:horizontal:increment, for buttons

Note: The -webkit-scrollbar is not supported in Firefox or in Edge, prior to version 79. check caniuse and MDN CSS Scrollbars
for more ways to create arrows : How to add arrows with -webkit-scrollbar-button
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
background-color: rgb(64, 64, 64);
}
/* Handle */
::-webkit-scrollbar-thumb {
background-color: rgb(96, 96, 96);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background-color: rgb(112, 112, 112);
}
/* Handle on active*/
::-webkit-scrollbar-thumb:active {
background-color: rgb(128, 128, 128);
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
background-color: rgb(64, 64, 64);
display: block;
background-size: 10px;
background-repeat: no-repeat;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
height: 12px;
width: 16px;
background-position: center 4px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,00 0,50 100,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:decrement:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
height: 12px;
width: 16px;
background-position: center 2px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:increment:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 100,0 50,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:vertical:increment:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
}
/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
height: 12px;
width: 12px;
background-position: 3px 3px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,50 50,100 50,0'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,50 50,100 50,0'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");
}
/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
height: 12px;
width: 12px;
background-position: 3px 3px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 0,100 50,50'/></svg>");
}
::-webkit-scrollbar-button:single-button:horizontal:increment:active {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");
}
<p></p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
res
https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

Display: Flex not adjusting flex items height with fluidity based on content inside the flex item [duplicate]

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 2 years ago.
I am trying to achieve the fluid height of the .flex-item containers according to the content pushed into them , beside also maintaining the display: flex behavior in it such that there is no whitespace left horizontally or vertically between the .flex-item and packing them beside each other in all the space provided.
As you run the code and observe the output i do not want to affect my second .flex-item due to the lengthy content in the first .flex-item, it should stick to the height of it's content and yet be aligned to other flex-items.
<!DOCTYPE html>
<head>
<title>question</title>
<style>
body{
display: flex;
flex-wrap: wrap;
}
div.flex-item{
width: 200px;
text-align: center;
background: linear-gradient(180deg, #eeeeee, #cccccc);
border: 1px solid #efefef;
margin: 12px;
}
</style>
</head>
<body>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
</body>

The align-items property set to flex-start will resolve this issue.
However, if you want the items lower items to fill out the empty space in the right column, you will need to use a Javascript library such as Masonry (https://masonry.desandro.com/).
<!DOCTYPE html>
<head>
<title>question</title>
<style>
body{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
div.flex-item{
width: 200px;
text-align: center;
background: linear-gradient(180deg, #eeeeee, #cccccc);
border: 1px solid #efefef;
margin: 12px;
}
</style>
</head>
<body>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
Lorem Ipsum dolor sit amet...
</div>
</body>

list of things that i dont know how to make

so i kinda new on web development scene and there is something i want to know how to make, here is the list that i want to make
https://i.imgur.com/PAQaJde.png
what is that bar thing called? and how to make it stay on top when i scrolled
https://i.imgur.com/ai0Vf2g.png
is this card or simple col that get styled using css?
sorry for the dumb question guys, i really kinda lost since i dont know how those thing called

1) Its called a navigation, or a navBar, and you position it absolute at 0,0 for it to stay up the top:
2) not sure what you are asking for your second question but to get it in that style. you can use CSS Grid, or FlexBox which are both native browser functionality.
Im happy to answer any further questions :)
welcome to the community

The first one is a navbar or navigation bar. You can make it stick to the top by setting position: fixed; top: 0; left:0; z-index:99;
nav {
position: fixed;
display: block;
top: 0;
left: 0;
height: 50px;
width: 100%;
padding: 10px;
background-color: #ccc;
}
.block {
display: block;
height: 1000px;
}
<nav>
Navbar
</nav>
<div class='block'>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
The second one you can achieve by nesting an element inst=ide another, applying a margin to the parent and border-radius to the child. It works with any layout style.
div{
border: solid 1px #ccc;
border-radius: 5px;
}
.container {
padding: 20px;
}
.card {
display: inline-block;
width: 100px;
height: 100px;
margin-right: 20px;
}
.card-wide {
display: inline-block;
width: 150px;
height: 50px;
margin-top: 30px;
margin-right: 30px;
}
<div class='container'>
<h1>Content</h1>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<br />
<div class='card-wide'></div>
<div class='card-wide'></div>
<div class='card-wide'></div>
<div class='card-wide'></div>
</div>

Text indentation in the shape of an arc

Is there a more elegant way of achieving this via CSS? The idea is to shape text like an Arc.
Thanks!
#p1 {
text-indent: 0;
}
#p2 {
text-indent: 10px;
}
#p3 {
text-indent: 20px;
}
#p4 {
text-indent: 30px;
}
#p5 {
text-indent: 40px;
}
#p6 {
text-indent: 30px;
}
#p7 {
text-indent: 20px;
}
#p8 {
text-indent: 10px;
}
#p9 {
text-indent: 0px;
}
<p id="p1">Lorem ipsum dolor sit amet</p>
<p id="p2">Lorem ipsum dolor sit amet</p>
<p id="p3">Lorem ipsum dolor sit amet</p>
<p id="p4">Lorem ipsum dolor sit amet</p>
<p id="p5">Lorem ipsum dolor sit amet</p>
<p id="p6">Lorem ipsum dolor sit amet</p>
<p id="p7">Lorem ipsum dolor sit amet</p>
<p id="p8">Lorem ipsum dolor sit amet</p>
<p id="p9">Lorem ipsum dolor sit amet</p>

If you want a perfect arc you can use shape-outside to create a circle or ellipse that the text will follow.
You can see how this works
However support is spotty to say the least.
div{
shape-outside: circle(50%);
width: 140px;
height: 140px;
float: left;
}
<div></div>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>

You can achieve the same result with one class and one rule on that class. The trick is to repeat the elements inside each other:
.blubb {
margin: 5px 0 5px 10px;
}
<div class="blubb">
Lorem ipsum dolor sit amet
<div class="blubb">
Lorem ipsum dolor sit amet
<div class="blubb">
Lorem ipsum dolor sit amet
<div class="blubb">
Lorem ipsum dolor sit amet
<div class="blubb">Lorem ipsum dolor sit amet</div>
</div>
<div class="blubb">Lorem ipsum dolor sit amet</div>
</div>
<div class="blubb">Lorem ipsum dolor sit amet</div>
</div>
<div class="blubb">Lorem ipsum dolor sit amet</div>
</div>
<div class="blubb">Lorem ipsum dolor sit amet</div>

As Dale said, use shape-outside for a pure css solution. However due to browser support we have to find a lower-level solution.
Contains comments for non-jQuery solution, code contains jQuery.
var ps = 9;//paragraphs
var i = 1;//start id
var x = 0;//left position
var amount = 50;
for(i=1;i<ps;i++){
//calculate left position in arc
//(i/ps) gets value between 0 and 1, Math.PI is to make it radians for sine, *amount is max indent
//bearing in mind this bit can be changed to give more desired effect.
x = Math.sin(((i-1)/(ps-1))*Math.PI)*amount;
//get element using jquery and set its text-indent to x
//otherwise you could use document.getElementById('p'+i); and textIndent JS property if you dont want jQuery.
$('#p'+i).css('text-indent', x+'px');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1">Lorem ipsum dolor sit amet</p>
<p id="p2">Lorem ipsum dolor sit amet</p>
<p id="p3">Lorem ipsum dolor sit amet</p>
<p id="p4">Lorem ipsum dolor sit amet</p>
<p id="p5">Lorem ipsum dolor sit amet</p>
<p id="p6">Lorem ipsum dolor sit amet</p>
<p id="p7">Lorem ipsum dolor sit amet</p>
<p id="p8">Lorem ipsum dolor sit amet</p>
<p id="p9">Lorem ipsum dolor sit amet</p>

Resources