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>
Related
heres my project and i've been having a hard time trying to figure out the reason why this div "leftCardapio", whenever its zoomed in, the elements inside of it increase their height and width.
i have no ideia what this may be, can someone please gimme a hand?
appreciate the help.
here is my full projecttt
/* Variables */
:root {
--Gray: #323a3a;
--DarkBlue: #123B79;
--LightBlue: #18A5A7;
--LightGray: #D9D9D9;
--White: white;
}
html,
body {
margin: 0 auto;
user-select: none;
background-color: black;
font-family: 'Arial';
/* overflow: hidden; */
}
/* Order:
Bottom,
Left,
Top,
Content,
Container
*/
/* Container DIV*/
.container {
display: flex;
justify-content: center;
margin: 0 auto;
width: 100vw;
height: 100vh;
}
.content {
text-align: center;
background-color: gray;
position: absolute;
right: 0;
width: 100%;
height: 100%;
}
#img_Content {
height: 97%;
width: 100%;
object-fit: cover;
}
/* Bottom DIV */
.bottom {
display: flex;
flex-direction: column;
position: absolute;
background-color: black;
bottom: 0;
margin-left: 0%;
width: 100%;
height: 10%;
}
/* LEFT DIV */
.left {
display: flex;
flex-direction: column;
column-gap: 10px;
background-color: var(--Gray);
position: absolute;
left: 0;
width: 10%;
height: 100%;
}
.itemDestaque,
.itemCardapio,
.itemBebidas,
.itemReservar_mesa {
display: flex;
flex-direction: column;
padding-top: 10%;
display: inline-block;
vertical-align: middle;
text-align: center;
overflow: hidden;
cursor: pointer;
flex: 1;
}
.itemDestaque {
margin-top: 33%;
}
.itemDestaque,
.itemCardapio,
.itemBebidas,
.itemReservar_mesa span {
font-weight: 550;
overflow: hidden;
color: white;
}
.itemCardapio:hover,
.itemDestaque:hover,
.itemBebidas:hover,
.itemReservar_mesa:hover {
box-shadow: 5px 20px 20px rgba(0, 0, 0, 0.5);
background-color: var(--LightBlue);
}
#destaqueIMG,
#cardapioIMG,
#bebidasIMG,
#reservar_mesaIMG {
height: 80%;
width: 40%;
display: inline-block;
vertical-align: middle;
object-fit: contain;
overflow: hidden;
}
#bebidasIMG {
width: 30%;
}
/* LEFT CARDAPIO DIV */
.leftCardapio {
display: none;
}
.itemCardapio:hover>.leftCardapio {
display: flex;
flex-direction: column;
background-color: white;
text-align: center;
position: absolute;
left: 0;
top: 0;
margin-left: 100%;
width: 250px;
height: 100%;
}
.itemPratos,
.itemSaladas,
.itemSopas,
.itemSobremesas,
.itemMolhos,
.itemPorcoes {
height: 80px;
width: 100%;
background-color: lightgray;
border-bottom: 3px solid white;
}
.itemPratos:hover,
.itemSaladas:hover,
.itemSopas:hover,
.itemSobremesas:hover,
.itemMolhos:hover,
.itemPorcoes:hover {
background-color: var(--DarkBlue);
}
/* LEFT BEBIDAS DIV */
.leftBebidas {
display: none;
}
.itemBebidas:hover>.leftBebidas {
display: flex;
flex-direction: column;
background-color: white;
text-align: center;
position: absolute;
left: 0;
top: 0;
margin-left: 100%;
width: 250px;
height: 100%;
}
.itemBebida1 {
height: 80px;
width: 100%;
background-color: lightgray;
border-bottom: 3px solid white;
}
.itemBebida1:hover {
background-color: var(--DarkBlue);
}
/* TOP DIV */
/* Top Box 1 = Logo Recanto
Top Box 2 = Mesa
Top Box 3 = Pesquisa
Top Box 4 = Conta
Top Box 5 = Pedidos */
.top {
display: flex;
flex-direction: row;
background-color: #123B79;
position: absolute;
top: 0;
width: 100%;
height: 7%;
}
.topBox1 {
display: flex;
flex-direction: row;
flex: 8;
}
.topBox2,
.topBox3,
.topBox4,
.topBox5 {
text-align: center;
cursor: pointer;
flex: 1;
}
.topBox2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: #ffffff;
}
.topBox3,
.topBox4,
.topBox5 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border-right: 1px solid #2fa9ab;
background-color: var(--LightBlue);
}
.topBox2:hover {
transform: scale(1.0);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: #dadada;
}
.topBox3:hover,
.topBox4:hover,
.topBox5:hover {
transform: scale(1.0);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: #4eb9bb;
border-right: none;
}
.imgTopBox1 {
display: flex;
justify-content: center;
align-items: center;
width: 19%;
height: 100%;
}
#logoRecanto {
max-width: 100%;
max-height: 90%;
}
#mesaIMG,
#pesquisarIMG,
#contaIMG,
#pedidosIMG {
width: 20%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
object-fit: contain;
overflow: hidden;
}
#mesaIMG {
filter: invert(0%) sepia(9%) saturate(0%) hue-rotate(130deg) brightness(0%) contrast(0%);
}
<!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="icon" type="image/x-icon" href="./imgs/HMSC_Catavento.png">
<link rel="stylesheet" href="css/style.css">
<title>Restaurante Recanto </title>
</head>
<body>
<div class="container">
<div class="content">
<img src="./imgs/Prato_Content_5.png-" id="img_Content">
</div>
<div class="bottom"></div>
<div class="left">
<div class="itemDestaque">
<img src="./imgs/Destaque.png" id="destaqueIMG">
<br><span> DESTAQUE</span>
</div>
<div class="itemCardapio" id="itemCardapio">
<img src="./imgs/Cardapio2.png" id="cardapioIMG">
<br><span> CARDÁPIO </span>
<div class="leftCardapio">
<div class="itemPratos"></div>
<div class="itemSaladas"></div>
<div class="itemSopas"></div>
<div class="itemSobremesas"></div>
<div class="itemMolhos"></div>
<div class="itemPorcoes"></div>
</div>
</div>
<div class="itemBebidas">
<img src="./imgs/Bebidas.png" id="bebidasIMG">
<br><span> BEBIDAS </span>
<div class="leftBebidas">
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
</div>
</div>
<div class="itemReservar_mesa">
<img src="./imgs/Mesa.png" id="reservar_mesaIMG">
<br><span> RESERVAR MESA </span>
</div>
</div>
<div class="top">
<div class="topBox1">
<div class="imgTopBox1">
<img src="./imgs/LogoRecanto.png" id="logoRecanto">
</div>
</div>
<div class="topBox2">
<img src="./imgs/Mesa.png" id="mesaIMG">
</div>
<div class="topBox3">
<img src="./imgs/Pesquisar.png" id="pesquisarIMG">
</div>
<div class="topBox4">
<img src="./imgs/Conta.png" id="contaIMG">
</div>
<div class="topBox5">
<img src="./imgs/Pedidos.png" id="pedidosIMG">
</div>
</div>
</div>
<!-- <script src="./scripts/changeImg.js"></script> -->
</body>
</html>
Your sub-menu elements increase in height when you zoom because that's the expected behavior of the zoom. Try zooming on any site or even here on stack-overflow.
When you zoom in browser what happens is that your visible area dimensions decrease. For example lets say your page is 1000px wide, when you zoom in to 200% it's now 500px wide, but these 500px are stretched to 1000px on your monitor.
On your site everything except sub-menu has % width and height. So if element width is 10% on 1000px screen it's 100px. If you zoom to 200% it's 10% of 500px, so 50px. Visually it stays the same size. Now when you have fixed dimensions on element like you have on your sub-menu, 80px is still 80px no matter how much you zoom in. On 500px screen of course 80px element will take more space then on 1000px screen.
Note the 80px height
I am trying to style what is to become a datepicker. The issue is that my header does not seem to fully align with its container, so that there is some space between the header and the container border:
I know this is probably some nitty gritty detail I am missing out on, but maybe somebody can help me find it:
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>Calendar</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="calendar">
<div class="calendar__header">
</div>
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
.container {
background-color: white;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calendar {
color: black;
background-color: white;
width: 45rem;
height: 46.4rem;
border: 2px solid black;
box-sizing: content-box;
position: relative;
}
.calendar__header {
color: white;
background-color: black;
width: 100%;
height: 10rem;
padding: 0 2rem;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
What is very strange for me is that the behaviour seems to differ on whether I am displaying the result on my 27'' monitor or on my notebook. I cannot see this gap on my monitor, but it is quite obvious on my notebook.
This is a known issue that was introduced in Chromium when they revamped the algorithm that deals with fractional pixels. Don't expect this to be fixed any time soon. Currently the only way to fix it is working with fixed pixel widths, to guarantee that no fractional pixel values are being computed.
The reason you're seeing this on your hi dpi notebook screen is exactly that - a CSS pixel is being represented by more than one physical pixel, resulting in a different rendered result than on your 27" monitor, which I assume you are running at the full physical resolution.
You could instead use box-shadow like this:
* {
margin: 0;
padding: 0;
}
.container {
background-color: white;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calendar {
color: black;
background-color: white;
width: 45rem;
height: 46.4rem;
/* border: 2px solid black; */
box-shadow:inset 0 0 0 5px #000;
box-sizing: content-box;
position: relative;
}
.calendar__header {
color: white;
background-color: black;
width: 100%;
height: 10rem;
padding: 0 2rem;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
<div class="container">
<div class="calendar">
<div class="calendar__header">
</div>
</div>
</div>
*{
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:
Desired Ui
I'm trying to make a search bar with a button to the right of it, in which both are halfway overlapping a banner. Above both of these is a title (One issue I'm having is the title covering the search bar when the page shrinks).
I have already made it, but it is far from mobile responsive. The most important thing I am struggling with is the button going to the next line when the page shrinks. The button needs to stay square so how do I make the search bar the only thing shrinking? Does anyone have any ideas on how to make this look good at all sizes?
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.root {
width: 100%;
height: 100%;
}
.header {
height: 50%;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
font-size: 30px;
border-bottom: solid 2px;
}
.search {
z-index: 20;
position: absolute;
background: transparent;
padding: 20px;
width: 100%;
text-align: center;
height: 20px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: center;
}
.search_main {
background: white;
width: auto;
padding: 10px;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: center;
border-radius: 20px;
height: 100%;
border: solid 2px;
}
.search_input {
/* border-radius: 20px; */
border: solid 0px;
outline: none;
text-decoration: none;
height: 100%;
padding: 8px;
}
.btn {
background: white;
width: auto;
/* padding:10px; */
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: center;
border-radius: 50%;
/* height:100%; */
border: solid 2px;
padding: 7px;
margin-left: 20px;
}
.ionicon {
/* width: 35px;
height: 35px; */
font-size: 25px;
font-weight: 40;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="root">
<div class="header">
Search from hundreds of recepies.
</div>
<div class="search">
<div class="search_main"><input class='search_input' placeholder='Search...'></div>
<div class="btn">
<ion-icon name="filter-outline" class='ionicon'></ion-icon>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
I'm just starting to learn HTML/CSS and I can't get flexbox to vertically justify elements (or do much of anything at all). I'm having trouble conceptually understanding why it's not recognizing the elements as separate elements to justify.
CSS and HTML:
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.odd-elements {
margin: auto;
width: 100px;
height: 100px;
border-top-width: 1px;
border-top-color: #687291;
border-top-style: solid;
text-align: center;
background-color: #dfe1e7;
}
.even-elements {
margin: auto;
width: 100px;
height: 100px;
border-top-width: 1px;
border-top-color: #687291;
border-top-style: solid;
text-align: center;
background-color: #eeeff2;
}
#e6 {
margin: auto;
width: 100px;
height: 100px;
border: 4px solid black;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #687291;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styleA.css" />
<title>CS142 Project #1</title>
</head>
<body>
<div class="box">
<span class="odd-elements">A</span>
<span class="even-elements">B</span>
<span class="odd-elements">C</span>
<span class="even-elements">D</span>
<span class="odd-elements">E</span>
<span id="e6">F</span>
</div>
</body>
</html>
Just change your CSS to:
.odd-elements, even-elements{
display: inline-flex;
justify-content: center;
align-items: center;
}
If you would like to center your child item, you have to use your child as a flex container. In that case, the span tags are your child. So, You have to add display: flex (To do flex container), justify-content: center, align-items: center in your span tag. By the way, It would be great If you add a common class in your span tag.
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box span {
display: flex;
justify-content: center;
align-items: center;
}
.odd-elements {
margin: auto;
width: 100px;
height: 100px;
border-top-width: 1px;
border-top-color: #687291;
border-top-style: solid;
text-align: center;
background-color: #dfe1e7;
}
.even-elements {
margin: auto;
width: 100px;
height: 100px;
border-top-width: 1px;
border-top-color: #687291;
border-top-style: solid;
text-align: center;
background-color: #eeeff2;
}
#e6 {
margin: auto;
width: 100px;
height: 100px;
border: 4px solid black;
text-align: center;
vertical-align: middle;
line-height: 100px;
background-color: #687291;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styleA.css" />
<title>CS142 Project #1</title>
</head>
<body>
<div class="box">
<span class="odd-elements">A</span>
<span class="even-elements">B</span>
<span class="odd-elements">C</span>
<span class="even-elements">D</span>
<span class="odd-elements">E</span>
<span id="e6">F</span>
</div>
</body>
</html>