I am new to html and css and recently I started making a canvas game. I wish to have an image and align it in the centre of the canvas with HTML. I used the 'position: Absolute' property and could at least put it on the canvas but when I used the 'text-align: centre' property, my position property stopped working and came below the canvas.
So I wanted to know, how I can centre my image on the canvas.
CSS
#startgameimg{
text-align:center;
width: 50px;
display:block;
margin:auto;
position: absolute;
cursor: pointer;
}
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>GAME</title>
<link href = "style.css" rel = "stylesheet">
</head>
<body>
<div style = "text-align: center;">
<canvas
id = "canvas"
height = "560"
width = "800"
style = "border:5px solid rgb(33, 8, 61)"
>Your Browser is Not Supported</canvas>
<div id = 'start'>
<img src = "play.png" alt = "" id = "startgameimg"/>
</div>
</div>
<script src = "script.js" ></script>
</body>
</html>
Please Note: I went through about 5 to 6 Stack Overflow questions regarding the same topic but couldn't find any solution
#startgameimg{
text-align:center;
width: auto;
display:block;
margin:auto;
position: absolute;
cursor: pointer;
top:50%;
left:50%;
transform:translate(-50%, -50%)
}
<div style = "text-align: center; position: reletive">
<canvas
id = "canvas"
height = "560"
width = "800"
style = "border:5px solid rgb(33, 8, 61)"
>Your Browser is Not Supported</canvas>
<div id = 'start'>
<img src = "play.png" alt = "MY IMG" id = "startgameimg"/>
</div>
</div>
Related
This question already has answers here:
Adjust width and height of iframe to fit with content in it
(35 answers)
Closed 2 months ago.
I have an iframe embedding a pdf file but I want to ensure that the iframe extends its height automatically according to the contents in it so that the iframe scrolling bars are not shown, but every time I try the results comes unexpected here are my sample code
Here is what I tried
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Iframe</title>
<style>
iframe{
width: 100%;
border: 2px solid #ccc;
}
</style>
</head>
<body>
<iframe src="demo.pdf" id="myIframe"></iframe>
<script>
var iframe = document.getElementById("myIframe");
iframe.onload = function(){
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</body>
</html>
Remove the height in script
add fit-content in css
<html lang="en">
<head>
<meta charset="utf-8">
<title>Iframe</title>
<style>
iframe{
height: fit-content;
width: 100%;
border: 2px solid #ccc;
}
</style>
</head>
<body>
<iframe src="demo.pdf" id="myIframe"></iframe>
<script>
var iframe = document.getElementById("myIframe");
iframe.onload = function(){
iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</body>
</html>
I've already found many vlogs to align them vertically or horizontally, but what I am looking for is shown below in this image.
I wanted to take a magnifying glass and add different alphabets in it according to case.
https://i.stack.imgur.com/jEcMM.png
I think you just need to set the position propertie of the magnifying glass as relative and the alphabets inside as absolute and then handle the logic of showing each alphabet according to your case scenario
for example:
**html**
<div class="container">
<div class="glass">
<div class="alphabet">A</div>
</div>
</div>
**css**
.glass {
width: 100px;
height: 100px;
position: relative;
}
.alphabet {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
**javascript**
const alpahbetEl = document.querySelector('.alphabet')
let arrAlphabet = [A,B,C,D,E]
let CurrentIndex = Math.floor(Math.random() * arrAlphabet.length)
alpahbetEl.innerHTML= `<p>${arrAlphabet[CurrentIndex]}</p>`
https://playcode.io/970686
Create a div and give it a position relative.
Add the image of magnifying glass inside the div.
Add another element (eg, div) for the letter and give it a position of absolute. Then use top, left params to set them correctly inside magnifying glass.
When you set absolute position to an object it lets you position an object absolute to the last parent with relative position.
Please refer the playground link mentioned on top.
Solution: You Need to use position relative to parent element and position absolute to child element.
Index.html File
<!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>Stackoverflow Answer By Swapnil</title>
<link rel="stylesheet" href="style.css" />
<link
href="../fontawesome-free-6.2.0-web/css/fontawesome.css"
rel="stylesheet"
/>
<link
href="../fontawesome-free-6.2.0-web/css/brands.css"
rel="stylesheet"
/>
<link
href="../fontawesome-free-6.2.0-web/css/solid.css"
rel="stylesheet"
/>
</head>
<body>
<i class="fa-solid fa-magnifying-glass icon"></i>
<p class="character">A</p>
</body>
</html>
Style.css:
.icon {
position: relative;
font-size: 200px;
}
.character {
position: absolute;
font-size: 50px;
font-weight: bold;
text-align: center;
top: 5px;
left: 70px;
}
I have a set of thumbnail images whose width resizes with the size of the screen. They have a max-width but the height is unstated at present. The images all end up having the same width but differing heights which is half correct.
Essentially I would like them to be contained within a square and as the width changes then the height should change to be the same as the width with the image inside adjusting itself to maintain the aspect ratio. I currently have a set max-height and max-width but that doesn't maintain a 1:1 ratio of the container. The images themselves are not square.
The idea is that I will have multiple images next to each other. If I am not mistaken css vars cannot be tied to variables that haven't been expressly declared. SO to use javascript?
.product-single__thumbnail-image {
max-width: 100%;
max-height: 123px;
display: block;
margin: 0 auto;
padding: 2px;
}
<li>
<img class="product-single__thumbnail-image" src="//someting.jpeg">
</li>
hey did u mean something like this?
i used javasrcipt tho so i dont know if it counts as an aswer to ur question sry
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#image {
object-fit: cover;
width: 100%;
}
</style>
</head>
<body>
<div>
<img src="http://i.stack.imgur.com/aEEkn.png" alt="" id='image'>
</div>
<script>
const image = document.getElementById('image')
image.height = `${image.width}`
window.addEventListener('resize',()=>{
image.height = `${image.width}`
})
</script>
</body>
</html>
I currently have the beginning's of a flappy bird game and the css generates a small red ball. I want to replace the ball with a jpg image taken from the internet, which I can also style and control/animate from the css, as I would do with the ball.
Image source: "https://img1.pnghut.com/16/12/25/KjSdhUe19q/logo-app-store-smiley-smile-score.jpg"
I've tried various things to put it in the CSS and in the HTML, but do not fully understand how it all ties together.
If I add the image (as I have done) in the html, can I not style it using the CSS?
For now, I want to:
Render the image on the screen (as I have done)
Style it to the same specs as the red ball (e.g. 20 x 20 etc, with starting positions, positioning etc)
Currently the TOP POSITION in the CSS seems to work (when applied to the image) but not the width and height. I had to hard code the width and the height of the image in to the HTML.
Any explanations as to best practices and a solution please.
Full current code here:
https://repl.it/#iamapersonthing/flappybirds
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>FlappyBird</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="game">
<div id="block"></div>
<div id="hole"></div>
<div id="character">
<img src="https://img1.pnghut.com/16/12/25/KjSdhUe19q/logo-app-store-smiley-smile-score.jpg">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
*{
padding:0;
margin:0;
}
#game{
width:400px;
height:500px;
border: 1px solid greenyellow;
margin:auto;
overflow:hidden;
}
#block{
width:50px;
height:500px;
background-color:greenyellow;
position: relative;
left:400px;
animation:block 2s infinite linear;
}
#keyframes block{
0%{left:400px}
100%{left:-50px}
}
#hole{
width:50px;
height:150px;
background-color:red;
position: relative;
left:400px;
top:-500px;
animation:block 2s infinite linear;
}
#character{
width:20px;
height:20px;
background-color:red;
position: absolute;
top:100px;
border-radius:50%;
}
JavaScript
var block = document.getElementById("block");
var hole = document.getElementById("hole");
hole.addEventListener('animationiteration',() => {
var random = -((Math.random()*300)+150);
hole.style.top=random +"px";
});
You have to add you style to the img tag. You'll have to add a display:block as well otherwise, the image will not take the width and height you specified.
#character img{
width:20px;
height:20px;
background-color:red;
position: absolute;
top:100px;
border-radius:50%;
}
If you want a guide on how to select your components and which one is stronger, you can read that CSS Batman guide : http://batificity.com/
For your problem, you can also use an object-fit. Like so :
var block = document.getElementById("block");
var hole = document.getElementById("hole");
hole.addEventListener('animationiteration',() => {
var random = -((Math.random()*300)+150);
hole.style.top=random +"px";
});
*{
padding:0;
margin:0;
}
#game{
width:400px;
height:500px;
border: 1px solid greenyellow;
margin:auto;
overflow:hidden;
}
#block{
width:50px;
height:500px;
background-color:greenyellow;
position: relative;
left:400px;
animation:block 2s infinite linear;
}
#keyframes block{
0%{left:400px}
100%{left:-50px}
}
#hole{
width:50px;
height:150px;
background-color:red;
position: relative;
left:400px;
top:-500px;
animation:block 2s infinite linear;
}
#character{
display:block;
width:20px;
height:20px;
background-color:red;
position: absolute;
top:100px;
border-radius:50%;
}
#character img{
width: 100%;
height: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>FlappyBird</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="game">
<div id="block"></div>
<div id="hole"></div>
<div id="character">
<img src="https://img1.pnghut.com/16/12/25/KjSdhUe19q/logo-app-store-smiley-smile-score.jpg">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Full object-fit specification here : https://developer.mozilla.org/fr/docs/Web/CSS/object-fit
You have many ways to possibly solve your issue. The best way in my opinion is to not use a IMG object at all and instead use a DIV that changes its background properties. This allows you to use a sprite sheet more easily because you can set the offsets for x and y in a background image. This also allows you to more easily change the image being used by changing the background-image property.
Alternatively, you can continue using IMG objects and just unload that HTML and replace it with a new IMG object with a different src parameter. JQuery makes this a lot easier to manage in my experience, but it can be done fairly easily using straight JS as well. Here's how I'd do this in JQuery (because I simply remember this syntax better):
$('#character').html('<img src="new image address">');
As far as editing the width/height, it comes down to just manually setting the offset afterwards and leaving the width/height alone (assuming you aren't already forcing dimensions onto the image) or for manual placement/positioning, just manually setting the width/height every time you replace the image.
So, i've been searching in everywhere for a resolution to my problem, but i think i've tried everything but my code is not working at all.
I'm trying to put some text of a txt file in a iframe, and it's actually reading it, but, when i try to change the css, appears the message in the title: "The character encoding of a framed document was not declared."
This is my code:
<!DOCTYPE html>
<html lang = "pt">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
h1{
position: absolute;
left:85px;
top:0px;
}
.LOGO{
position: absolute;
width:70px;
height:70px;
z-index: 2;
}
.portugal{
position: absolute;
top: 65px;
left: 0px;
width:auto;
height:auto;
z-index: 1;
}
.PT01{
position: relative;
top: 438px;
left:560px;
width:20px;
height:20px;
z-index: 3;
}
</style>
</head>
<body>
<script>
var x = document.getElementsByTagName("PT01");
if(x.id == 'PT01'){
$("#div1").css("border-style","none");
$("#div1").css("position",'relative');
$("#div1").css("top",'315px');
$("#div1").css("left",'535px');
$("#div1").css("width",'auto');
$("#div1").css("height",'auto');
$("#div1").css("zIndex",'4');
}
</script>
<img class = "LOGO" src = "http://www.chronopost.pt/sites/all/themes/custom/quimera/favicon.ico"/> <h1> Informações Package Chronopost </h1>
<img class = "portugal" src = "http://s2.thingpic.com/images/HV/9N2YRDXBuosfkppy9Jut8Tvx.png"/>
<img class = "PT01" name = "PT01" src = "http://www.chronopost.pt/sites/all/themes/custom/quimera/favicon.ico"/>
<iframe id='div1' src = "PT01.txt">
</iframe>
</body>
</html>
I hope you can help me with this! I'm just a student and i'm trying to learn more.
Thank you!
Possible duplicate here
You can try this, add this between your iframe tag:
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">