Im trying to position the div element in the center responsively but the top-left corner act as I want (it goes to center instead of the whole div) what should I do?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
<div class="container"></div>
<input class="click-button" type="button" name="button" value="Click" onclick="clearWrite()"></button>
<p id="text"></p>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
body {
background-color: rgba(75, 75, 75, 0.7); }
.container {
background-color: white;
height: 360px;
width: 640px;
position: absolute;
top: 50%;
left: 50%;
}
Using translate(-50%,-50%) it would shift in Y and X axis to 50% of its height and width.
body {
background-color: rgba(75, 75, 75, 0.7);
}
.container {
background-color: white;
height: 200px;
width: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /** add this **/
}
<!DOCTYPE html>
<html>
<body>
<div class="container"></div>
<input class="click-button" type="button" name="button" value="Click" onclick="clearWrite()">
<p id="text"></p>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
Related
Am trying to do a Minecraft Steve css art but the face isn't rendering.
I am an amateur by the way.
Here's my code
.container {
height: 500px;
width: 500px;
border-radius: 12.5%;
box-shadow: 15px 15px rgba(0,0,0,0.5);
top: 50%;
left: 50%;
background: RGB(255,255,255);
}
.face {
position: relative;
height: 80 px;
width: 80 px;
background: #B4846D;
top: 240px;
left: 240px;
}
Here's my HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css"
</head>
<body>
<div class="container"></div>
<div class="face"></div>
</body>
</html>
I think there are a couple of problems.
The first problem is that your link tag is missing the the closing <, which may prevent your css from loading correctly
Another problem is that you have a space between the 80 px on the height and width properties. Between the value and the unit there should be no space, so you should have height: 80px; and width: 80px;
another "problem" is that i think you want to have the face element inside the container element. Is it so?
Maybe you need:
<div class="container">
<div class="face"></div>
</div>
The next problem is the way you are positioning the .face element. Without an "image" to show us what you want to do it is difficult to know what you could improve, but i am guessing you want to add position: absolute to the .face element, so you can place it inside the .container element...
Here is an example:
.container {
height: 500px;
width: 500px;
border-radius: 12.5%;
box-shadow: 15px 15px rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
background: rgb(255, 255, 255);
position: absolute;
}
.face {
position: absolute;
height: 80px;
width: 80px;
background: #B4846D;
top: 240px;
left: 240px;
}
<div class="container">
<div class="face"></div>
</div>
This is from cs50.
I don't understand why my image starts in the middle instead on the left.
Morever, if I change every container class to containera, it comepletely solves my problem. Not only it starts on the left as expected. It also completely filled the circle with the image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
<style>
.container {
position: relative;
width: 50%;
border: 3px solid #73AD21;
border-radius: 100%;
}
.container img{
display: inline;
width: 100%;
height: auto;
border-radius: 100%;
}
.container .overlay {
position: absolute;
border-radius: 200%;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="header">
<h1>Welcome to CS50 Homepage</h1>
</div>
<div class="container">
<img id="cs50bsh" alt="cs50 british shorthair wink" src= "img_avatar.png" >
>
<div class="overlay">
<div id="cs50bshtxt" class="text">Hello World From CS50</div>
</div>
</div>
</body>
</html>
I thought maybe container is a special class. Then I go w3school and test out simple stuffs with container class, but it somehow still starts on the left, so maybe I am missing something in my code.
An easy fix would be to add float: left to the container element. That should send the item all the way to the left.
I have a rectangle area on my page that needs to be filled with a square in the center. This rectangle can be both horizontal and vertical. This means that the plethora of existing questions based on making a square from just the width of a containing box don't work. [1] [2]
This square can also change dynamically and this approach doesn't resize the square. I'd also like to not use JavaScript or JQuery if possible. This is the only thing that I'd use JQuery for.
Below you can see what the code should do at the beginning, but when you resized the box it doesn't resize the square.
/* based on https://stackoverflow.com/a/5445536*/
$('.body').resizable();
var containingBlock = $('.box-rect');
var cmin = Math.min(containingBlock.width(), containingBlock.height());
$('#box-square').css({
'height': cmin+'px',
'width': cmin+'px'
});
.body{
width: 200px;
height: 100px;
}
.box-rect {
width: 100%;
height: 100%;
min-width: 50px;
min-height: 50px;
display: flex;
justify-content: center;
align-items: center;
/* example bounding box */
border: 1px solid gray;
}
.box-square {
width: 50px; /* min(box-rect.height, box-rect.width) */
height: 50px; /* box-rect min */
}
/*
The following is using a mix between the following two answers:
https://stackoverflow.com/a/6615994
https://stackoverflow.com/a/20117454
*/
.box-reset {
position: relative;
height: 100%;
width: 100%;
}
.box-reset:before {
content: "";
display: block;
padding-top: 100%;
}
.box {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* example gray box */
height: 100%;
background-color: gray;
}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='body'>
<div class="box-rect">
<div class="box-square">
<div class="box-reset">
<div class="box">
Not working at all
</div>
</div>
</div>
</div>
</div>
<br />
<div class='body'>
<div class="box-rect">
<div class="box-square" id="box-square">
<div class="box-reset">
<div class="box">
Fills to the bounds of the rectangle on load.
</div>
</div>
</div>
</div>
</div>
To be completely clear:
The first example above doesn't resize the gray square at all.
The second example resizes the gray square to the bound of the rectangle. (What I want)
However, it doesn't resize the gray square to the bound of the rectangle when resizing the containing block.
I want to resize the square to the bound of the rectangle. Like in the second example, when I resize the containing block.
I would prefer to do this all in pure CSS.
You may look at the jQuery example. It's better to understand how it worked.
I made a similar example on jsfiddle.
* {
margin: 0;
padding: 0;
box-sizing:border-box;
}
#resizable {
display:flex;
justify-content:center;
align-items:center;
width: 150px;
height: 150px;
min-width:100px;
min-height:100px;
}
#resizable h3 {
display:flex;
justify-content:center;
align-items:center;
height: 100px;
width: 100px;
text-align:center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#resizable" ).resizable();
} );
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content center-center">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
<!-- Reference link https://jqueryui.com/resizable/ -->
Removed the static height and width that was getting applied from js and added
width: 50%; and height: 50%; to .box-square
$('.box-rect').resizable();
.body{
width: 400px;
height: 200px;
}
.box-rect {
width: 100%;
height: 100%;
min-width: 100px;
min-height: 100px;
display: flex;
justify-content: center;
align-items: center;
/* example bounding box */
border: 1px solid gray;
}
.box-square {
width: 100px;
height: 100px;
/* width: 100px; min(box-rect.height, box-rect.width) */
/* height: 100px; box-rect min */
}
/*
The following is using a mix between the following two answers:
https://stackoverflow.com/a/6615994
https://stackoverflow.com/a/20117454
*/
.box-reset {
position: relative;
height: 100%;
width: 100%;
}
.box {
height: 100%;
background-color: gray;
}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='body'>
<div class="box-rect">
<div class="box-square">
<div class="box-reset">
<div class="box">
</div>
</div>
</div>
</div>
</div>
We are writing a video player on the browser where we need to display a play button on the video window. The video window size can be changed by the user. The play button should be displayed on the center of the video window.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Player</title>
<style>
#app {
width: 100%;
height: 100%;
overflow: hidden;
outline: none;
}
</style>
</head>
<body style="overflow: hidden; margin: 0px;">
<link rel="stylesheet" href="test.css">
<div id="app"></div>
<video src="" id="videoID" width="100%"></video>
<button type="button" id="playVideo">+</button>
</body>
</html>
CSS:
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
color: #2c3e50;
margin-top: 10px;
}
#playVideo {
position: absolute;
left: 200px;
top: 200px;
display: none;
border: none;
border-radius: 50%;
}
I just gave left and top for playVideo as 200px as I am unable to center the button. I tried with text-align, position and it is not working. We can do this in javascript by using getBoundingClientRect() of video Element and calculating coordinates of button manually. Can any one please let me know if we can center the button on video window without using Javascript.
Try this (#playVideo):
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
This page might help you.
Edit:
Consider creating a div that contains both elements:
<div id="container">
<video src="" id="videoID" width="100%"></video>
<button type="button" id="playVideo">+</button>
</div>
#container {
position:relative;
}
#playVideo {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
I'm trying to find a way to map an element, on top of a photo element that is placed at a given angle. The photo of a laptop is a good example, where I'd like to map an element (video, image, or other) on top of the screen, for example, let's say to loop a video etc.
The task seemed quite easy but I'm finding it quite tricky, because I couldn't find how to solve it properly with transforms rotate, scale, translate and even skew.
Here's a code example of what I want to achieve, the over element is the SPAN coloured green
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<span></span>
<img src="http://www.thesugarrefinery.com/wp-content/uploads/2015/08/sugar-macbook-7-5-perspective.png" />
</div>
</body>
</html>
css:
div {
position: relative;
}
span {
background: green;
width: 350px;
height: 200px;
position: absolute;
top: 0;
left: 0;
perspective: 250px;
transform: rotateX(0deg) rotateY(40deg) rotateZ(0deg) skewX(-10deg) translateX(220px) translateY(25px) scale(.94);
opacity: 0.5;
}
img {
width: 500px;
height: auto;
}
And the snippet:
div {
position: relative;
}
span {
background: green;
width: 350px;
height: 200px;
position: absolute;
top: 0;
left: 0;
perspective: 250px;
transform: rotateX(0deg) rotateY(40deg) rotateZ(0deg) skewX(-10deg) translateX(220px) translateY(25px) scale(.94);
opacity: 0.5;
}
img {
width: 500px;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<span></span>
<img src="https://i.stack.imgur.com/iL2xf.png" />
</div>
</body>
</html>
perspective needs to be added to the parent, not to the child. The rest are details:
span {
background: green;
width: 256px;
height: 176px;
position: absolute;
top: 0;
left: 0;
transform: rotateX(1deg) rotateY(-7deg) rotateZ(-1deg) skew(-11.25deg, 1.5deg) translate(233px, 37px);
opacity: 0.5;
}
div {
position: relative;
perspective: 400px;
width: 1200px;
}
img {
width: 500px;
height: auto;
}
body {
overflow-x: hidden;
}
<div>
<span></span>
<img src="https://i.stack.imgur.com/iL2xf.png" />
</div>