so I'm learning HTML and CSS, I made a container and within that container I have a div that is scrollable, but the scrollbar is the height of the div (looks more like it's a border-right than a scrollbar), why is that? (Don't mind my comments, it's just so I know what stuff does)
This is how it looks: here
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexbox funsies</title>
<link rel="stylesheet" href="./style.css">
</link>
<script src="./script.js"></script>
</head> <!-- I need to remember this;
the head is basically like importing modules and setting variables except this is HTML so we only set our meta(data) tags, import our script & css and also can set the title of our page !-->
<body>
<main>
<div class="container"> <!-- Here I made a container, containers are for... containing stuff, so if you make a div that's 50vh and 50vw, and then put something IN the div, it will be positioned in the div !-->
<div class="inContainer">
<div>Hello cruel world!</div>
<div>This is another div!</div>
<div>And could we do another one?</div>
<div class="scrollbarHere">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce tellus. Nam quis nulla. Nullam sit amet magna in magna gravida vehicula. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Fusce wisi. Aenean fermentum risus id tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dapibus fermentum ipsum. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Integer tempor. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante.
Nullam sit amet magna in magna gravida vehicula. Nam quis nulla. Aliquam id dolor. Proin mattis lacinia justo. Fusce wisi. Nulla pulvinar eleifend sem. Suspendisse nisl. Duis pulvinar. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Et harum quidem rerum facilis est et expedita distinctio.</div>
<div id="toChange">Flexbox is so awesome!</div>
</div>
<div class="inContainer2">
<div>Hey nice world!</div>
<button type="button" onclick="changeDivText()" class="basicButton">Click me!</button>
</div>
</div>
</main>
</body>
</html>
CSS
/* To change something by ID, use # ex.: #my2ndDiv
To change sonething by class, use . ex.: .container
To change something by the DOM, use its name ex.: button */
* { /* sets these things for every element */
font-family: "./Lekton-Bold.ttf", monospace; /* for some reason you have to pass in the type of the font? */
color: #A6ADB8; /* text color */
margin: 0; /* these two reset some stuff for other browsers i dont really know */
padding: 0;
box-sizing: border-box;
}
main {
min-height: 100vh; /* vh is view-height so basically what is visible on the screen :) */
display: flex; /* makes our main a flexbox so that we can have things aligned easily */
align-items: center; /* will not work without display: flex; */
justify-content: center; /* will not work without display: flex; */
text-align: center; /* will not work without display: flex; */
background-color: #050A12;
}
.container {
background: linear-gradient(
to bottom left,
rgba(185, 181, 199, 0.05), /* rgba stands for Red Green Blue Alpha, which means that the last number, from 0 to 1 is the alpha (opacity) of the color */
rgba(185, 181, 199, 0.12)
); /* linear gradient, you did gfx you know what that is. */
min-height: 80vh; /* sets the minimum height to 80 view-height */
min-width: 80vw; /* sets the minimum width to 80 view-width */
border-radius: 2rem; /* round things = better */
display: flex; /* covered on line 11 */
align-items: center; /* ^^^^ */
justify-content: center;
text-align: center;
}
.inContainer {
display: flex; /* line 11 */
flex: 1; /* we set our 'flex' to be 1 so that means if something next to it has 'flex' 2 then the width of this container will be 33% and the other thing next to it would have 66%, just get me... */
flex-direction: column; /* makes it so that stuff inside the container is displayed vertically instead of horizontally */
min-width: 30vw;
min-height: 80vh; /* ^^ blablabla talked about it before */
align-items: center;
justify-content: space-evenly; /* speaks for itself */
text-align: center;
background: linear-gradient(
to right bottom,
rgba(185, 181, 199, 0.1),
rgba(185, 181, 199, 0.2)
);
border-radius: 2rem;
box-shadow: 16px 0 12px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.15); /* makes a shadow just on the right side of the container */
}
.inContainer2 {
display: flex;
flex: 1.5;
flex-direction: column;
min-width: 30vw;
min-height: 80vh;
align-items: center;
justify-content: space-evenly;
text-align: center;
}
.basicButton {
font-size: 125%; /* here i have set the font size of the button text to 125%, 100% is the default size, by increasing font size, button size also increases */
border-radius: 0.25rem;
border-style: none; /* i remove the ugly default style it gives it */
padding-top: 5px; /* makes a 5px space between text of the button and the top of the button */
padding-bottom: 5px; /* makes a 5px space between text of the button and the bottom of the button */
padding-left: 5px; /* makes a 5px space between text of the button and the left side of the button */
padding-right: 5px; /* makes a 5px space between text of the button and the right side of the button */
background: linear-gradient(
to right bottom,
rgba(185, 181, 199, 0.1),
rgba(185, 181, 199, 0.3)
);
box-shadow: 16px 0 12px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.15);
}
.scrollbarHere {
min-height: 20vh;
max-height: 20vh;
min-width: 20vw;
max-width: 20vw;
overflow-y: scroll;
word-break: break-all;
}
::-webkit-scrollbar {
background-color: red; /* This is just so I know where the scrollbar is */
}
Aucun commentaire:
Enregistrer un commentaire