<!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
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.
Sorry for bad english. How do you align this image to center and adding space on top after the header and for the footer.
Image Link (bc new user)
If I tried this code
margin-left: auto;
margin-right: auto;
width: 50%;
it goes to the center but the background also moves.
What I want is to move the image in the center, having spaces in both header and footer. And background color stays. Below is the code I use.
HTML
<template>
<div class="list">
<headerpc></headerpc>
<dropdown />
<div class="main">
<img src="../home-img/list.png" alt="" />
</div>
<div class="count">
<footerpc></footerpc>
</div>
</div>
</template>
CSS
<style scoped lang="scss">
$font-color: #fff;
.list {
.main {
position: relative;
display: block;
z-index: 1;
background: #131a28;
}
.count {
background: #131a28;
}
}
</style>
you can try giving a specific height to the image and set margin as auto.
img{
width: 300px;
height: 200px;
margin: auto;
}
this will center the image along both axes in its container div.
To center an image, set left and right margin to auto and make it into a block element. here, I have provide the sample code for aligning an image in the center for your reference.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:10%
margin-bottom:10%
}
</style>
</head>
<body>
<h2>Center</h2>
<img src="img_flower.jpg" style="width:50%;">
</body>
</html>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 2 years ago.
I am trying to make a box like the following in HTML and CSS:
I have the following code:
orders.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Orders Page</title>
<link rel="stylesheet" type="text/css" href="orders.css">
</head>
<body>
<div class="order-container">
<div class="order-header">
<p>ORDER #10980<p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
</body>
</html>
orders.css:
.order-container {
border-style: solid;
height: 400px;
width: 400px;
}
.order-header {
text-align: center;
background-color: #a9dbde;
height: 60px;
}
I want the blue header to align with the top of the box. However, there is a white space between the blue header and the top of my box, as seen in the following image. I am not sure how to make the top of the header align with the top of the box. Any insights are appreciated.
Browsers have default styles that you have to override and the browser you are using is adding a margin to p element.
I recommend you use one of the header tags for your element (more semantic).
<h1 class="order-header">ORDER #10980<h1>
And remove margins
.order-header {
margin: 0;
...
}
You can use font-size to adjust text size and line-height to center the text vertically (you can remove height if you do this).
HTML has some default value like #khan said. Also you can try flex property in css, it will help u a lot when doing some element align operation.
<!DOCTYPE html>
<html>
<head>
<title>Making a box with a coloured header in HTML and CSS</title>
<style type="text/css">
.order-container{
border: 1px solid #999;
height: 200px;
width: 300px;
}
.order-header{
text-align: center;
height: 50px;
background: #81CCD3;
}
.order-header p{
margin:0 ;
}
</style>
</head>
<body>
<div class="order-container">
<div class="order-header">
<p>ORDER #10980</p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
</body>
</html>
Remove the default margin from the p tag. Here's a list of default values.
p {
margin: 0;
}
p {
margin: 0;
}
.order-container {
border-style: solid;
height: 400px;
width: 400px;
}
.order-header {
text-align: center;
background-color: #a9dbde;
height: 60px;
}
<div class="order-container">
<div class="order-header">
<p>ORDER #10980
<p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
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!
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!