I have this code, but the image is always out of the showcase box, I tried using align,float,position but none of these seem to work. how can I fix it?
div#main {
padding-top: 20px;
background-color: #ffffff;
}
.showcase-box {
width: 330px;
height: 200px;
box-shadow: 5px 15px 30px rgba(0, 0, 0, 0.3);
border-radius: 10px;
margin: 0 20px 10px 20px;
background-size: contain;
}
.showcase-box img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
<div id="main">
<h1 class="showcase-heading">Showcase</h1>
<div class="showcase-box">
<img src="Images/POTC1.jpg" />
</div>
</div>
thank you!!
You can add the overflow:hidden; and the background-size:cover; property, so that the image isn't visible when it's out of it's container.
main {
padding-top: 20px;
background-color: #ffffff;
}
.showcase-box {
width: 330px;
height: 200px;
box-shadow: 5px 15px 30px rgba(0, 0, 0, 0.3);
border-radius: 10px;
margin: 0 20px 10px 20px;
background-size: cover;
overflow: hidden;
}
.showcase-box img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<h1 class="showcase-heading">Showcase</h1>
<div class="showcase-box">
<img src="" />
</div>
</main>
</body>
</html>
now, it should work!
Try using the display: block for the showcase img, Unless you treat a image to be a block level element it cannot be aligned easily. Just a suggestion but not sure.
div#main{
padding-top: 20px;
background-color: #ffffff;
}
.showcase-box{
width: 330px;
height: 200px;
box-shadow: 5px 15px 30px rgba(0,0,0,0.3);
border-radius: 10px;
margin: 0 20px 10px 20px;
background-size: contain;
}
.showcase-box img{
width: 100%;
height: 100%;
display:block;
}
Now add all the alignments and look
you must write such a code
.showcase-box{
width: 330px;
height: 200px;
box-shadow: 5px 15px 30px rgba(0,0,0,0.3);
border-radius: 10px;
margin: 0 20px 10px 20px;
background-size: contain;
display: flex;
justify-content: center;
align-items: center;
overflow:hidden;
}
.showcase-box img{
width: 100%;
height: 100%;
}
display flex with align items and justify content center will center your image in the center of the box
I'm adding this answer to see if your existing code produces the correct results here.
div#main{
padding-top: 20px;
background-color: #ffffff;
}
.showcase-box{
width: 330px;
height: 200px;
box-shadow: 5px 15px 30px rgba(0,0,0,0.3);
border-radius: 10px;
margin: 0 20px 10px 20px;
background-size: contain;
border: 1px solid red; /* added border so to see if image overflows */
}
.showcase-box img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
<div id="main">
<h1 class="showcase-heading">Showcase</h1>
<div class="showcase-box">
<img src="http://www.freeimageslive.com/galleries/backdrops/abstract/preview/pink_wires.jpg"/>
</div>
</div>
And it appears it does. I put the red border in to see if the image overflowed. It did not.
So the issue could be a browser support issue for "object-fit" or other css property.
Related
I have two divs stacked next to each other, and I'm attempting to use shadowing to make it look like one div is behind the other. Adding shadowing to the left of the div on the right seems to work, but adding shadowing to the right of the div on the left side casts the shadow behind the right div instead of in front of it. Is there any fix to this?
.wrapper{
display: grid;
width: fit-content;
height: 150px;
align-items: center;
grid-template-columns: 1fr auto;
border: solid 2px black;
margin-left: 15%;
}
.wrapper:hover{
cursor: pointer;
}
.wrapper:hover > .left{
height: 100%;
box-shadow: 4px 0px 15px -1px black;
}
.wrapper:hover > .right{
height: 80%;
box-shadow: none;
}
.left{
width: 150px;
height: 80%;
background-color: red;
border: 2px red solid;
transition: 0.3s;
}
.right{
width: 100px;
height: 100%;
background-color: blue;
border: 2px blue solid;
transition: 0.3s;
box-shadow: -4px 0px 15px -1px #000000;
}
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
I have solved your problem.
You should change your code like below.
.wrapper{
display: grid;
width: fit-content;
height: 150px;
align-items: center;
grid-template-columns: 1fr auto;
border: solid 2px black;
margin-left: 15%;
}
.wrapper:hover{
cursor: pointer;
}
.wrapper:hover > .left{
height: 100%;
box-shadow: 4px 0px 15px -1px black;
z-index: 1;
}
.wrapper:hover > .right{
height: 80%;
box-shadow: none;
}
.left{
width: 150px;
height: 80%;
background-color: red;
border: 2px red solid;
transition: 0.3s;
}
.right{
width: 100px;
height: 100%;
background-color: blue;
border: 2px blue solid;
transition: 0.3s;
box-shadow: -4px 0px 15px -1px #000000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
</html>
Adding z-index to the left div when hovering over the wrapper appears to work.
.wrapper {
display: grid;
width: fit-content;
height: 150px;
align-items: center;
grid-template-columns: 1fr auto;
border: solid 2px black;
margin-left: 15%;
}
.wrapper:hover {
cursor: pointer;
}
.wrapper:hover>.left {
height: 100%;
box-shadow: 4px 0px 15px -1px black;
z-index: 1;
}
.wrapper:hover>.right {
height: 80%;
box-shadow: none;
}
.left {
width: 150px;
height: 80%;
background-color: red;
border: 2px red solid;
transition: 0.3s;
}
.right {
width: 100px;
height: 100%;
background-color: blue;
border: 2px blue solid;
transition: 0.3s;
box-shadow: -4px 0px 15px -1px #000000;
}
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
You can add z-index inside .wrapper:hover>.left so when you hover the left <div> it will bring the <div> in front and cast the shadow in front of the right <div>.
.wrapper:hover > .left{
height: 100%;
box-shadow: 4px 0px 15px -1px black;
z-index: 1;
}
enter image description here
Hi, I was working on a school project I needed to create a canvas that fills all the remaining width but upon creating the flex box container my chat div wont join/enter the flexbox.
#Right-Box-Wrapper{
display: flex;
position: fixed;
width: 320px;
min-width: 320px;
height: 100% !important;
right: 0px;
top: 0px;
border: 8px solid black;
border-radius: 10px;
background-color: #484848;
}
#Input-Wrapper{
display: flex;
justify-content: center;
}
#mwrap{
width: 100%;
display: flex;
justify-content: center;
}
#message-wrapper::-webkit-scrollbar{
width: 5px;
}
#message-wrapper::-webkit-scrollbar-thumb{
background: black;
border-radius: 5px;
}
#message-wrapper::-webkit-scrollbar-track{
background: rgb(85, 85, 85);
border-radius: 5px;
}
#message-wrapper{
top: 12px;
position: absolute;
height: 80%;
width: 95%;
background-color: #333333;
border: 3px solid black;
overflow: auto;
overflow-wrap: break-word;
}
#a{
position: fixed;
height: 100%;
width: 10px;
background-color: #262626;
top: 0px;
right: 0px;
}
#inpbox{
background-color: #333333;
position: absolute;
width: 95%;
height: 50%;
top: 80px;
text-align: left;
color: whitesmoke;
border: 3px black solid;
font-family: sans-serif;
font-size: 13px;
resize: none;
}
#inpbox::-webkit-scrollbar{
width: 5px;
}
#inpbox::-webkit-scrollbar-thumb{
background: black;
border-radius: 5px;
}
#inpbox::-webkit-scrollbar-track{
background: rgb(85, 85, 85);
border-radius: 5px;
}
#inpbox:focus{
outline: none;
}
#Chat-Wrapper{
position: absolute;
bottom: 0px;
right: 0px;
z-index: 50;
width: 100%;
height: 25%;
}
.Inputs{
color: whitesmoke;
padding-top: 8px;
padding-bottom:8px;
padding-right: 3px;
padding-left: 3px;
border-top: black solid 2px;
border-bottom: black solid 2px;
font-family: sans-serif;
}
.Tlc{
color:red;
font-weight: 1000;
padding-top: 8px;
padding-bottom:8px;
padding-right: 3px;
padding-left: 3px;
border-top: black solid 2px;
border-bottom: black solid 2px;
font-family: sans-serif;
}
.dice_roll{
color:greenyellow;
font-weight: 1250;
padding-top: 8px;
padding-bottom:8px;
padding-right: 3px;
padding-left: 3px;
border-top:greenyellow solid 2px;
border-bottom: greenyellow solid 2px;
font-family: sans-serif;
}
#canvas-wrapper{
justify-content: center;
display: flex;
min-width: 350px;
height: 400px;
background-color: rgb(112, 112, 78);
}
#screen-wrap{
display: flex;
flex-direction: row;
}
body{
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
}
#flxt{
display: flex;
flex-direction: row;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="site.css">
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<div id = "screen-wrap">
<div id = "canvas-wrapper">
<canvas id = "canv">
</canvas>
</div>
<div style="background-color: aqua;width: 100px;height: 100px;">
<canvas id = "canv">
</canvas>
</div>
<div id = "Right-Box-Wrapper">
<div id = "mwrap">
<div id = "message-wrapper">
</div>
</div>
<div id = "Chat-Wrapper">
<div id = "Input-Wrapper">
<textarea placeholder="Type here...." id = "inpbox"></textarea>
</div>
</div>
</div>
</div>
<div id = "flxt">
<div style="padding: 10px;background-color: aqua;">
asdasdasd
</div>
<div style="padding: 10px;background-color: aqua;">
asdasdasdasdasd
</div>
</div>
<script src="site.js"></script>
</body>
</html>
I have no idea what is wrong with this but this is my first time using flex box I couldn't find anyone else with a similar problem
From what I can see you have a lot of positioning going on that is somewhat unneeded when using flexbox. Ill give you a basic example. First I set all objects to box sizing border-box to help when using percentages. Position your container with position fixed and place it on the top right (you already have this done). Make it display flex and give it a flex direction of column so the objects stack on top of each other. Give it a height and width. I use vh(viewport height) and vw(viewport width). Next your message area will have a property called flex-grow that is set to 1. This allows it to take up all the remaining available space. Next set the height on your chat container I set mine to 25 viewport height. This means your message area will take up all but 25% of the viewport height. Then I just set the height and width of the chat textarea to 100% and since it now uses border-box box sizing it will just fill the container.
Flexbox and Grid are there to help you position objects while keeping them in the flow of the document so be careful when using position absolute when trying to move objects around. Here is a really good guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and here is more information on positioning. Take a good look at how absolute moves objects out of the normal flow of the document https://developer.mozilla.org/en-US/docs/Web/CSS/position
* {
box-sizing: border-box;
}
.chat-container {
position: fixed;
right: 0;
top: 0;
display: flex;
flex-direction: column;
height: 100vh;
width: 40vh;
}
.message {
flex-grow: 1;
background-color: #808080;
border: 4px solid #000;
border-bottom: 2px solid #000;
border-radius: 10px 10px 0 0;
}
.chat {
height: 25vh;
border: 4px solid #000;
border-top: 2px solid #000;
border-radius: 0 0 10px 10px;
}
.chat-area {
width: 100%;
height: 100%;
background-color: #808080;
border-radius: 0 0 5px 5px;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #fff;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #fff;
}
<div class="chat-container">
<div class="message"></div>
<div class="chat">
<textarea placeholder="input message here" class="chat-area"></textarea>
</div>
</div>
Incase the first answer does not help Ill give you an example on how to position objects using flexbox. This keeps objects in the flow of the document and manipulates their position using display flex, flex direction and flex grow.
body {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
height: 100vh;
width: 100vw;
}
.remaining-area {
flex-grow: 1;
background-color: #f2f2f2;
}
.chat-area {
width: 30vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.message {
flex-grow: 1;
background-color: #ccc;
}
.chat {
height: 25vh;
}
<div class="wrapper">
<div class="remaining-area">
<p>this area is left empty</p>
</div>
<div class="chat-area">
<div class="message">
<p>message area</p>
</div>
<div class="chat">
<p>chat area</p>
</div>
</div>
</div>
I'd like to center an icon in the y-middle of an input field.
What I've tried was something like this:
#container {
position: absolute;
width: 40%;
height: 20%;
}
#icon {
position: absolute;
top: 0;
bottom: 0;
width: 15px;
height: 15px;
margin: auto;
right: 4%;
background-image: url("https://i.stack.imgur.com/Xcmsc.png");
background-repeat: no-repeat;
background-size: contain;
z-index: 2;
}
#input {
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
border: none;
border-top: 1px solid #eae8ea;
border-bottom: 1px solid #eae8ea;
}
<div id="container">
<input id="input" placeholder="input" />
<div id="icon"></div>
</div>
For desktop safari (Mac OS) it is working quite fine but on mobile devices like on my iPhone the icon does not seems to be centered at all:
How to fix this error occurring on mobile devices? Any help would be really appreciated. Thanks in advance!
Issue is caused by default margin and padding for input element. Default values are used by browser and need to be overwritten to be nulled. box-sizing: border-box; ensures borders which you add to #input are collapsed to it's height and don't exceed it.
Here you can read more about border-box.
Default browser CSS (example)
More about them.
Here already partially overwritten.
Key part
#input {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Snippet
#container {
position: absolute;
width: 40%;
height: 20%;
}
#icon {
position: absolute;
top: 0;
bottom: 0;
width: 15px;
height: 15px;
margin: auto;
right: 4%;
background-image: url("https://i.stack.imgur.com/Xcmsc.png");
background-repeat: no-repeat;
background-size: contain;
z-index: 2;
}
#input {
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
border: none;
border-top: 1px solid #eae8ea;
border-bottom: 1px solid #eae8ea;
}
<div id="container">
<input id="input" placeholder="input" />
<div id="icon"></div>
</div>
I see no reason that you can't just use a background image directly on the input? (I made some adjustments to the original example, but you get the idea)
#container {
width: 100px;
height: 50px;
}
#input {
line-height: 50px;
font-size: 15px;
border: none;
border: 1px solid #eae8ea;
background-image: url("https://i.stack.imgur.com/Xcmsc.png");
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: right center;
}
<div id="container">
<input id="input" placeholder="input" />
</div>
I'm quite new to javascript & jquery and wanted to use the snappuzzle plugin:
snappuzzle plugin
I thought that i should just download & link in my html-file to jquery, jquery ui & the snappuzle.js, as well as link to a code.js file where i put the $(document).ready()(
But somehow I can't seem to figure out what to do exactly to implement this plugin - both in my html as well as what i should do with the javascript
Can anyone help me?
Edit: Do you know if it's possible to change the background/template picture of the puzzle? As in, I would like to use another picture as the source of the template than the puzzle itself. I can't seem to find the code that does that..
$(document).ready(function() {
});
body {
font-family: 'Roboto', sans-serif;
background: #ee9ca7; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #ee9ca7 , #ffdde1); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ee9ca7 , #ffdde1); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
* {
margin: 0;
padding: 0;
}
.ref_imgWrap {
max-width: 200px;
margin: 0 auto;
overflow: hidden;
margin-top: 1em;
position: relative;
}
.ref_imgWrap img {
max-width: 100%;
float: left;
height: auto;
}
.contRofl_clr,
.wrap {
width: 100%;
float: left;
}
.restartPuzzleWrap {
width: 100%;
float: left;
text-align: center;
padding: 1em 0;
}
.restart_puzzleX999 {
padding: 1.6em;
display: inline-block;
background: orange;
color: #ffffff;
letter-spacing: 1px;
font-weight: 300;
border-radius: 2px;
cursor: pointer;
-webkit-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
-moz-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
}
.snappuzzle-piece {
-webkit-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
-moz-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
}
/* required snapPuzzle styles */
.puzzleX999_paddedWrap {
width: 100%;
float: left;
position: relative;
overflow: hidden;
}
.puzzleX999_imgWrap {
max-width: 560px;
padding: 5%;
padding-top: 0;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
.puzzleX999_imgWrap img {
max-width: 100%;
float: left;
height: auto;
}
.puzzleX999_relWrap {
position: relative;
display: block;
max-width: 500px;
float: left;
}
#puzzleX999_Main {
width: 100%;
float: left;
}
.snappuzzle-wrap {
position: relative;
display: block;
}
/*snappuzzle-pile { position: relative; }*/
.snappuzzle-piece {
cursor: move;
}
.snappuzzle-slot {
position: absolute;
background: #fff;
opacity: .8;
}
.snappuzzle-slot-hover {
background: #eee;
}
<!DOCTYPE html>
<head>
<title>Test puzzle</title>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<script src="code.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery-ui-1.12.1.js"></script>
<script src="jQuery-snapPuzzle.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js'></script>
</head>
<body>
<div class="contRofl_clr">
<div class="ref_imgWrap">
<img src="https://images.unsplash.com/photo-1462524500090-89443873e2b4?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=991&h=661&q=80" alt="" />
</div>
<div class="restartPuzzleWrap">
<span class="restart_puzzleX999">
Restart Puzzle
</span>
</div>
</div>
<div class="puzzleX999_paddedWrap">
<div class="puzzleX999_imgWrap">
<img class="puzzleX999_img" src="https://images.unsplash.com/photo-1462524500090-89443873e2b4?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=991&h=661&q=80" alt="" />
<div id="puzzleX999_Main">
</div>
</div>
</div>
</body>
</html>
I'm trying to keep my page from having to horizontally scroll.
When I add my navbar and header div to my page, everything works fine. However, when I add my content div it forces my page to scroll left and right. It's no wider than my header so why is this happening?
Here is my code:
body {
min-width: 1024px;
min-height: 700px;
max-width: 1920px;
max-height: 1080px;
width: 100%;
height: 100%;
margin: 0 auto;
background: url(/style/images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
<!-- FOR IE -->
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
.overlay {
width: 100%;
height: 100%;
-webkit-box-shadow: inset 0 0 5px rgba(68,105,244,.45);
-moz-box-shadow: inset 0 0 5px rgba(68,105,244,.45);
box-shadow: inset 0 0 5px rgba(68,105,244,.45);
}
.divstyle {
background-color: rgba(247,247,247,.9);
-webkit-box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
}
#navbar {
height: 50px;
min-width: 1600px;
width: 100%;
margin-bottom: 50px;
}
#header {
width: 1000px;
height: 200px;
margin: 0 auto;
border-radius: 5px;
}
#content {
width: 1000px;
min-height: 500px;
margin: 0 auto;
margin-top: 25px;
border-radius: 5px;
}
Here's my html:
<div id="navbar" class="divstyle">
<div class="overlay">
</div>
</div>
<div id="header" class="divstyle">
<div class="overlay">
</div>
</div>
<div id="content" class="divstyle">
<div class="overlay">
</div>
</div>
http://jsfiddle.net/9mRHT/
It is because of min-width: 1600px; present in
#navbar {
height: 50px;
/* min-width: 1600px; */
width: 100%;
margin-bottom: 50px;
}
This will remove the horizontal scrollbar