I have put this code on the board class to organize the < div > in the class.
.board{
display:flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-around;
}
However the justify content doesn't work... both div inside board class glued each other. but the align-items and flex-flow works well, why justify-content doesn't?
Here is my website looks like currently
my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<main>
<header>
<h1>Draw clues about the music playing </h1> <img src="images/v94_61.png">
</header>
<div class="board">
<div class="color-board">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="drawer">
</div>
<div class="tool-board">
</div>
</div>
</main>
</body>
</html>
my css code:
body {
margin: 0px;
background: linear-gradient(rgba(218, 210, 153, 1), rgba(176, 218, 185, 1));
background-repeat: no-repeat;
background-size: 100% 100%;
}
main {
display: flex;
flex-flow: column nowrap;
align-items: center;
border: 3px solid rgba(76, 121, 60, 1);
border-radius: 1em;
margin: 10px;
padding: 15px;
overflow: hidden;
}
header {
display: flex;
flex-flow: row nowrap;
justify-content: center;
width: fit-content;
height: fit-content;
border-radius: 1.75em;
background-color:rgba(131, 131, 131, 0.4000000059604645);
margin-bottom: 2%;
padding: 0px 5%;
}
header img {
width: "fit-content";
height: 90px;
}
header h1 {
vertical-align: middle;
white-space: nowrap;
min-width: 270px;
}
.board{
display:flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-around;
}
.color-board{
display: flex;
flex-flow: row wrap;
align-items: center;
background-color: rgba(131, 131, 131, 0.4000000059604645);
width: 100px;
height: fit-content;
}
.color-board div {
width: 30px;
height: 30px;
margin: 5px;
border: 1px black solid;
border-radius: 0.5em;
background-color: white;
}
.drawer{
background-color: white;
border: 3px solid rgba(76, 121, 60, 1);
border-radius: 1em;
width: 732px;
height: 352px;
}
Related
* {
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
box-sizing: border-box;
}
#mainContainer {
display: flex;
justify-content: center;
}
#window {
min-width: 600px;
min-height: 850px;
max-width: 600px;
max-height: 850px;
display: grid;
border: 3px solid black;
grid-template-rows: 1fr 0.5fr 0.2fr;
}
#window>div {
border-bottom: 3px solid black;
}
#window div:nth-child(3) {
border-bottom: none;
}
#image {
display: flex;
justify-content: center;
align-content: center;
background-color: black;
}
#content {
display: grid;
grid-template-rows: 2fr 1fr;
}
#movieSelect {
border-top: 3px solid black;
}
#movieDetails {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
align-items: center;
text-align: center;
}
#control {
display: flex;
justify-content: center;
align-content: center;
background-color: rgba(153, 65, 65, 0.83);
}
#mainForm {
align-self: center;
display: flex;
justify-content: space-between;
align-content: center;
}
#mainInput {
padding: 8px;
margin-right: 10px;
font-size: 20px;
border: 2px solid black;
}
#mainInput:focus {
outline: none;
background-color: rgba(0, 255, 242, 0.306);
}
/* //focus doesn't change specified background color */
#btn {
padding: 12px 24px;
border: 2px solid black;
}
#btn:active {
background-color: rgb(109, 109, 109);
}
#movieSelect {
display: flex;
overflow-x: scroll;
}
#movieSelect>button {
min-width: 118.8px;
max-width: 118.8px
}
#movieSelect>button:focus {
background-color: skyblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styling.css">
<title>Document</title>
</head>
<body>
<div id="mainContainer">
<div id="window">
<div id="image">
<img id="mainImage" src="https://static.tvmaze.com/uploads/images/medium_portrait/333/834110.jpg"
alt="">
</div>
<div id="content">
<div id="movieDetails">
<h3 class="h3Info" id="h3First">Name
<br> The Johnsons sdasd sad asdasasd as das as
</h3>
<h3 class="h3Info" id="h3Second">Rating:
<br> 89.92
</h3>
<h3 class="h3Info" id="h3Third">Release Date:
<br> 2012-12-02
</h3>
<h3 class="h3Info" id="h3Fourth">More Details:
<br> https://www.tv-wot.com
</h3>
</div>
<div id="movieSelect">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
</div>
<div id="control">
<form id="mainForm" action="">
<input id="mainInput" type="text" name="movieSearch">
<button id="btn">Search</button>
</form>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Hello! I am getting these ugly little white gaps when containing elements and they really just make everything very ugly and buggy looking. For example there's a random gap at the right of the black background where the image is which appears and disappears. There is another above the buttons. Also another css questions. Why is the input textarea so dark when focused even though I chose a very bright color. Thank you!
These are screen (not whole CSS) pixels sort of left behind when the system works out how to map part pixels (one CSS pixel on a modern screen can map to several screen pixels).
This snippet hacks round the problem by putting a pseudo before element on the image's containing div which has a black background and which is just slightly bigger than the element itself.
* {
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
box-sizing: border-box;
}
#mainContainer {
display: flex;
justify-content: center;
}
#window {
min-width: 600px;
min-height: 850px;
max-width: 600px;
max-height: 850px;
display: grid;
border: 3px solid black;
grid-template-rows: 1fr 0.5fr 0.2fr;
}
#window>div {
border-bottom: 3px solid black;
}
#window div:nth-child(3) {
border-bottom: none;
}
#image {
display: flex;
justify-content: center;
align-content: center;
background-color: black;
position: relative;
}
#image::before {
content: '';
background: black;
width: calc(100% + 2px);
height: calc(100% + 2px);
top: -1px;
left: -1px;
position: absolute;
z-index: -1;
}
#content {
display: grid;
grid-template-rows: 2fr 1fr;
}
#movieSelect {
border-top: 3px solid black;
}
#movieDetails {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
align-items: center;
text-align: center;
}
#control {
display: flex;
justify-content: center;
align-content: center;
background-color: rgba(153, 65, 65, 0.83);
}
#mainForm {
align-self: center;
display: flex;
justify-content: space-between;
align-content: center;
}
#mainInput {
padding: 8px;
margin-right: 10px;
font-size: 20px;
border: 2px solid black;
}
#mainInput:focus {
outline: none;
background-color: rgba(0, 255, 242, 0.306);
}
/* //focus doesn't change specified background color */
#btn {
padding: 12px 24px;
border: 2px solid black;
}
#btn:active {
background-color: rgb(109, 109, 109);
}
#movieSelect {
display: flex;
overflow-x: scroll;
}
#movieSelect>button {
min-width: 118.8px;
max-width: 118.8px
}
#movieSelect>button:focus {
background-color: skyblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styling.css">
<title>Document</title>
</head>
<body>
<div id="mainContainer">
<div id="window">
<div id="image">
<img id="mainImage" src="https://static.tvmaze.com/uploads/images/medium_portrait/333/834110.jpg" alt="">
</div>
<div id="content">
<div id="movieDetails">
<h3 class="h3Info" id="h3First">Name
<br> The Johnsons sdasd sad asdasasd as das as
</h3>
<h3 class="h3Info" id="h3Second">Rating:
<br> 89.92
</h3>
<h3 class="h3Info" id="h3Third">Release Date:
<br> 2012-12-02
</h3>
<h3 class="h3Info" id="h3Fourth">More Details:
<br> https://www.tv-wot.com
</h3>
</div>
<div id="movieSelect">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
</div>
<div id="control">
<form id="mainForm" action="">
<input id="mainInput" type="text" name="movieSearch">
<button id="btn">Search</button>
</form>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I just came across a website where almost all the div were styled that way, and I would be interested to know how it is done.
You can easily get the orange shape by using the clip-path property. I used a Generator to make this shape.
p {
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
width: 300px;
background-color: #1D1D1D;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.heading {
font-size: 18px;
text-transform: uppercase;
color: white;
}
.orange {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 20px;
width: 100%;
height: 100px;
margin-top: 0;
background-color: #FB961B;
clip-path: polygon(0 0, 100% 0, 100% 50%, 60% 100%, 40% 100%, 0% 50%);
}
.container {
margin: 10px 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
p{
color: white;
}
#heading{
font-size: 18px;
text-transform: uppercase;
}
.para{
margin-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="card">
<div class="orange">
<p class="heading">starter</p>
<p class="para">weekly 100% for 4 times</p>
</div>
<div class="container">
<p id="heading">weekly return</p>
<p>Lorem ipsum... </p>
</div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
justify-content: center;
align-items: center;
display: flex;
}
.container{
background: black;
width: 400px;
height: 300px;
align-items: center;
justify-content: center;
display: flex;
}
.smallerContainer{
width: 200px;
height: 50%;
background: rgb(68, 0, 0);
overflow-y: scroll;
}
.circle {
height: 64px;
width: 64px;
filter: drop-shadow(0 0 30px rgb(0, 255, 0));
}
<html>
<head>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<div class="container">
<div class="smallerContainer">
<img class="circle" src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Ski_trail_rating_symbol_red_circle.png">
<img class="circle" src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Ski_trail_rating_symbol_red_circle.png">
</div>
</div>
</body>
</html>
I have a div, where i got some little images that "glow", but they are also in another div which is set on "overflow-y: scroll;" and there the "green glow" is cut and dont want it to be cutted off please help D:
How do I center an image in a circle around it? The circle should then lie behind the picture and only frame it.
HTML
<div>
<div class="circle"></div>
<img src="../../assets/img/img.png" alt="" class="showslide">
</div>
CSS
.circle {
margin-top: 5%;
padding-top: 5%;
border: 4px solid #fff;
border-radius: 50%;
z-index: -1;
}
.showslide {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
}
Do you need to keep the circle div as a sibling of the image?
Because if you put the image inside the circle div, your code it´s already working:
.circle {
margin-top: 5%;
padding-top: 5%;
border: 4px solid #000;
border-radius: 50%;
}
.showslide {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="circle">
<img src="https://cdn.iconscout.com/icon/free/png-512/account-avatar-profile-human-man-user-30448.png" alt="" class="showslide">
</div>
I've removed the z-index (not needed in this case) and changed the border color to black.
Not quite sure what you are trying to accomplish here but as far as I understood, ur trying to make the frame unclickable. First of all, you can't keep the frame behind the picture because then the image gets in front of it and keeps it hidden.
pointer-events: none;
Set this for the frame and it should be good.
How do I center an image in a circle around it?
One approach would be to apply two CSS properties to the <img>:
a border
an outline
Working Example:
.my-image {
width: 144px;
height: 144px;
border: 18px solid rgb(255, 255, 255);
border-radius: 50%;
outline: 1px solid rgb(191, 191, 191);
}
<img class="my-image" src="https://picsum.photos/132/132" alt="My Picture">
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Montserrat", sans-serif;
color: #262e2e;
box-sizing: border-box;
margin: 0;
background: #f5f8fa;
padding: 40px 0px;
}
.image-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid #dddddd;
}
<h4>Center Image</h4>
<div class="image-container">
<img
src="https://image.shutterstock.com/image-photo/kiev-ukraine-march-31-2015-260nw-275940803.jpg"
width="100"
/>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Montserrat", sans-serif;
color: #262e2e;
box-sizing: border-box;
margin: 0;
background: #f5f8fa;
padding: 40px 0px;
}
.image-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid #dddddd;
}
</style>
<body>
<h4>Center Image</h4>
<div class="image-container">
<img class="image-container"
src="i.jpg"
width="100"
/>
</div>
<input type="file" >
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Box</title>
<link rel="stylesheet" href="">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
.container {
width: 90vw;
height: 90vh;
margin: 10px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
border: 10px solid black;
}
.box {
width: 100px;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
</div>
</body>
</html>
Hi everybody! I've been learning flex box but I'm having a problem with this particular example. There's a thin white space between the border and the elements, like a thin margin. I don't know why is it there and how to remove it. Can somebody help me, please?
EDIT: I'm not refering to the space-between propery, I want it, but there is a thin margin going from top to bottom, left and right that shouldn't be there
If you want to remove spacing in between, your child box div should be 1/4 of the width of the parent div, like below code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Box</title>
<link rel="stylesheet" href="">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
.container {
width: 90vw;
height: 90vh;
margin: 10px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
border: 10px solid black;
}
.box {
width: 25%;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
</div>
</body>
</html>
Is this what you want?
*{ /*Don't mind this, this is in place of your body style*/
margin:0;
padding:0;
}
.container {
box-sizing:border-box;
width: 100vw;
height: 100vh;
/* margin: 10px auto; This the one causing it to be surrounded by a white border*/
display: flex;
flex-direction: row;
/*justify-content: space-between; TAKE THIS OUT*/
align-items: stretch;
border: 10px solid black;
}
.box {
width: 100px;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
flex-grow:1; /* ADD THIS IN */
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>