I'm having an issue with a <div> pushing up another <div> from underneath.
Basically, the <div> above is a <canvas> of defined dimensions, and underneath is a <div> that contains a <p> element. After a event is fired, I'm using innerHTML to change the contents of the <p> element. Because of this, the content of the <p> element goes from one line to two. When that happens, however, the <canvas> is pushed up the page.
I've tried using different position CSS values, but because I'm using flexbox it means that the two divs stack up.
Here's the CSS and HTML:
.container {
padding: 10px;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.player {
margin-bottom: 20px;
}
.textContainer {
font-size: 24px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="main.js"></script>
</head>
<body>
<div class="container">
<div class="player">
<canvas id="canvas"></canvas>
</div>
<div class="textContainer">
<p id="moveText">Moves: 0</p>
</div>
</div>
</body>
</html>
Thanks in advance!
Related
Right now I'm coding a menu that has a two column layout. This is the code.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</body>
</html>
CSS:
.stockapps {
background-color: #111;
float: left;
width: 5%;
height: 100%;
}
.stockapps :after {
content: "";
display: table;
clear: both;
}
.stockapps img{
width:100%;
display: inline;
vertical-align: top;
}
.main {
float: left;
padding: 2%;
width: 91%;
overflow: hidden;
}
The issue is that the stockapps div tag is not filling the whole screen with height instead opting to only fill the area the children objects take up.
I have tried using the clear-fix and setting overflow to hidden but neither seem to fix the issue. Its likely some beginner mistake as CSS is not my strong suit
This fiddle showcases the issue.
You can wrap stockapps and main divs into a container div
Style this container as below
I used background color for stockapps div to show you its height
.container {
display: flex;
align-items: stretch;
/*Set height as you want, you can use height in px */
height: 100vh;
}
.stockapps {
/* used background-color to show you how much height it takes*/
background-color: #999;
/*You can ignore width if it's not convenient for your desired final output */
width: 50%
}
<div class="container">
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</div>
If I understand you correctly, you need to create a 2-column layout for your menu.
To achieve this layout, I would wrap the <div class="stockapps"> and <div class="main"> into another <div> with class of manu-wrap and add this CSS styles:
.menu-wrap {
display: flex;
justify-content: space-between;
}
I would then remove the float properties and you should have a working 2-column layout.
You can find more about display: flex here.
Is there a way in CSS to scale an img element's image to match the containing button element?
In this example, I would like the image to be centered on the button and scaled suitably for the size of the button. In fact they are neither suitably scaled nor aligned.
<html>
<head>
<title>Button img element scaling</title>
<style type="text/css">
div.container {
display: flex;
justify-content: center;
}
button {
min-width: 20px;
max-width: 20px;
flex-basis: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="container">
<button>
<img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
</button>
<button>
<img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
</button>
</div>
</body>
</html>
I believe it is possible using divs instead of button elements, but I'm asking about button elements (because it's nice semantically to have a button be a button, and because the buttons I have are already styled).
I also believe there are alternative ways to approach this using background images, but since here the image is not just decoration but has semantic meaning, I'd like to use an img (and later add an alt attribute).
The example uses flex, but the problem doesn't seem to be specific to that.
display flex on the button itself seems to do the trick
<html>
<head>
<title>Button img element scaling</title>
<style type="text/css">
div.container {
display: flex;
justify-content: center;
}
button {
min-width: 20px;
max-width: 20px;
flex-basis: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<button>
<img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
</button>
<button>
<img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
</button>
</div>
</body>
</html>
edit
incase it needs to grow to the button size aswell, you can add width="100%" height="100%" on the image to make it scale.
it would look like this:
<img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" width="100%" height="100%" />
I think you could use object-fit in your css -> https://www.w3schools.com/css/css3_object-fit.asp
I have some simple HTML and CSS written. I'd like to get a list of buttons to the right side of an image.
I've tried using float and display: inline
<html>
<head>
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="main">
<div class="container">
<div id="image">
<img src="img/placeholder.png" />
</div>
<div id="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
</section>
<div class="footer-container">
<footer>
<h5>footer</h5>
</footer>
</div>
</body>
</html>
.main{
background: yellow;
}
#image img {
width: 1000px;
height: 600px;
}
#controls-container{
background: pink;
}
.footer-container {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
I've highlighted the container for everything but the footer as yellow. The container holding the buttons are pink. I've done this to help me understand what's happening to the containers as I test things out.
For float, I've tried floating the buttons-container to the right. This results in the buttons going to the right of the page, and it seems to somehow disassociate itself from the main container as it is no longer highlighted in yellow.
I've also tried floating the img to the left. This seems to be the best help so far, except that the yellow background has disappeared. What happened to the rest of my container? I've tried using margin-top to move the buttons down towards the middle of the image but both the image and the button's margins seem to be altered.
Is there a better way to do this? Thank you.
I suggest you use display: flex; to do this. It's much easier to get alignment done with flex This is a sample code.
I have added align-items: flex-start to your controls-container so that it will only take up the space from the top. If you want the container to take the full height along with your image-container feel free to remove that code. Also I have removed your ids and used classes to reference the styles and I would advise you to do the same. Hope it helps you.
HTML
<div class="d-flex flex-column">
<div class="container main">
<div class="image-container">
<img src="img/placeholder.png" />
</div>
<div class="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
<div class="footer">
<h5>
Footer
</h5>
</div>
</div>
CSS
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.main {
background: yellow;
}
.image-container {
width: 1000px;
height: 600px;
}
.controls-container {
display: flex;
flex-direction: row;
background: pink;
}
.footer {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/fq8t3ndw/
The other way around is to use position.I have just tweaked your code, below is the snippet please have a look at it.
.main {
background: yellow;
position: relative
}
#image img {
width: 1000px;
height: 600px;
}
#controls-container {
background: pink;
position: absolute;
right: 0px;
top: 0px;
}
.controls {
display: inline;
}
.footer-container {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
<html>
<head>
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="main">
<div class="container">
<div id="image">
<img src="img/placeholder.png" />
</div>
<div id="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
</section>
<div class="footer-container">
<footer>
<h5>footer</h5>
</footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
background-color: red;
display: flex;
padding: 10px;
}
.div2 {
background-color: yellow;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div1">
<img src="smiley.gif">
<div class="div2">
A<br>Smiley<br>Face
</div>
</div>
</body>
</html>
I use the above code to create an outer div with flex display and in it to be an image and another div with a text right to it. Code works but the image seems to strech... How can I make the image keep its original size? Ty
Your image is stretching because the default value of align-self is stretch. You need to change it to center or something else.
align-self: center
See it the doc
So i have been trying to remove the space between my div elements and iframe to no success for an hour. Any help will be greatly appreciated. This is what I have done so far.
css:
h1 {
text-align: center;
color: white;
}
.d1 {
border-style: none;
background-color: blue;
}
iframe {
width: 50%;
height: 50%;
display: block;
margin: 0;
}
Here is my html: I am trying to to remove the white space between the the 2 divs elements on the top and bottom.
<!DOCTYPE html>
<!-- By Christian Soto -->
<html>
<head>
<meta charset="UTF-8">
<title>Event Driven JS</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="d1">
<h1>Using JavaScript to Change the HTML</h1>
</div>
<iframe id="section">
<!-- Will be loading different html pages into here -->
</iframe>
<div class="d1">
<h1>Christian Soto</h1>
</div>
</body>
</html>
You need to remove the default margin from the <h1> tag,
all HTML headings have a default margin style.
h1{
text-align: center;
color: white;
margin: 0;
}