I have created an HTML template, to which I will push data from SQL using python and print it as pdf. The document needs to be printed always in landscape. I have achieved the functionality, but the logo on the right gets offset by an awkward amount and looks odd.
Please find the image as below:
However, if I don't resize the image, the spaces are somewhat even but the image is too big, as below:
My code is as below
<!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>Test</title>
<style>
body {
background-color: powderblue;
}
#media print {
#page {
size: landscape;
}
}/*required because this page will always have to be printed in landscape */
.Row{
display: flex;
}
.Cell{
align-items: center;
}
.Cell h1{
align-items: center;
text-align: center;
}
.Cell h2{
text-align: center;
}
.Cell .logo{
width: 30%;
height: auto;
}
</style>
</head>
<body>
<div class="Row">
<div class="Cell">
<img src="logo1.jpg" alt="logo1" class="logo">
</div>
<div class="Cell">
<h1>THIS IS A VERY LONG MAIN HEADING XXX</h1>
<h2>THIS IS A SUBHEADING</h2>
<br>
<h2>ANOTHER SUB HEADING</h2>
</div>
<div class="Cell">
<img src="logo2.jpg" alt="logo2" class="logo">
</div>
</div>
</body>
</html>
If anyone could point out to me how to make the logo equidistant from the headings, it would be much appreciated.
I have reconstructed your code.
<!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>Test</title>
<style>
body {
background-color: powderblue;
}
#media print {
#page {
size: landscape;
}
}/*required because this page will always have to be printed in landscape */
.Row{
display: flex;
flex-direction: row;
/* align-items: center; */
justify-content: center
}
.Cell{
/* justify-content: center */
align-items: center;
text-align:center;
}
.Cell .logo{
width: 30%;
height: auto;
}
</style>
</head>
<body>
<div class="Row">
<div class="Cell">
<img src="https://i.picsum.photos/id/173/200/200.jpg?hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo1" class="logo">
</div>
<div class="Cell">
<h1>THIS IS A VERY LONG MAIN HEADING XXX</h1>
<h2>THIS IS A SUBHEADING</h2>
<br>
<h2>ANOTHER SUB HEADING</h2>
</div>
<div class="Cell">
<img src="https://i.picsum.photos/id/173/200/200.jpg?hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo2" class="logo">
</div>
</div>
</body>
</html>
This below link will guide you much better way:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Setting the width of <img> elements to percentage value is a little confusing because their containers don't have a specified width, so it isn't clear what the width should be.
I assume you wanted the first and last .Cell to be 30% wide, but logos smaller and pushed to the opposite ends of the page. I set the width of the logos to be 100px, but you can tweak that as you like. The key part is pushing the logo in the last .Cell to the right, one way to do it using Flexbox:
.Cell:last-child {
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
The align-items declaration is there so that the logo doesn't stretch to take up the height of the container.
I also removed some of the the align-items declarations from your code that weren't doing anything because they weren't Flex containers.
<!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>Test</title>
<style>
body {
background-color: powderblue;
}
#media print {
#page {
size: landscape;
}
}
.Row {
display: flex;
justify-content: center
}
.Cell h1{
text-align: center;
}
.Cell h2{
text-align: center;
}
.Cell:first-child,
.Cell:last-child {
width: 30%;
}
.Cell:last-child {
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
.Cell img {
width: 100px;
height: auto;
}
</style>
</head>
<body>
<div class="Row">
<div class="Cell">
<img src="https://i.picsum.photos/id/173/200/200.jpg?hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo1" class="logo">
</div>
<div class="Cell">
<h1>THIS IS A VERY LONG MAIN HEADING XXX</h1>
<h2>THIS IS A SUBHEADING</h2>
<br>
<h2>ANOTHER SUB HEADING</h2>
</div>
<div class="Cell">
<img src="https://i.picsum.photos/id/173/200/200.jpg?hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo2" class="logo">
</div>
</div>
</body>
</html>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 8 months ago.
I want my first element to be on the left and my second element to be in the exact center of the screen (while being horizontally aligned). Logo/text left, navigation bar in the middle.
I cant seem to get the following result with the code below:
|red|-------|green|------------|
I want the center of the Green square in the middle of the screen. Which would normally happen if I used text-align: center; on a single element if its not inline-blocked.
HTML:
<body>
<div class="red-color"></div>
<div class="green-color"></div>
</body>
CSS:
.red-color {
background-color: red;
padding: 100px;
display: inline-block;
}
.green-color {
background-color: green;
padding: 100px;
display: inline-block;
}
Would really appreciate any advice, I have been stuck on this for a few days now already. I've tried to wrap them both up in a div and text-align: center; them. but then I cant seem to push the red square back to the left.
And while I can do it by playing with the margins and eyeballing the center, this does not feel like the optimal solution.
<!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>Document</title>
</head>
<style>
.main{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
}
.red-color {
background-color: red;
width: 30%;
}
.green-color {
background-color: green;
width: 30%;
}
</style>
<body>
<div class="main">
<div class="red-color">logo/text</div>
<div class="green-color">navbar</div>
</div>
</body>
</html>
u can use flexbox to adjust elements accordingly. I created a main-div then gave height and width and then its has green and red div's , I applied flex property to main and gave width to each div so , by adjusting the width u can change the position of logo or navbar.
<!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">`enter code here`
<title>Document</title>
</head>
<style>
.main{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
}
.red-color {
background-color: red;
width: 30%;
margin-right: 5%;
}
.green-color {
background-color: green;
width: 30%;
margin-left: 10%;
}
</style>
<body>
<div class="main">
<div class="red-color">logo/text</div>
<div class="green-color">navbar</div>
</div>
</body>
</html>
This question already has answers here:
height: 100% or min-height: 100% for html and body elements?
(2 answers)
Why does height: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value?
(1 answer)
Closed 12 months ago.
Problem
I've given a child element (id=main) of the body a height percentage, but it doesn't seem to do anything.
I have labelled the problematic CSS code.
Code
*{
margin:0;
padding:0;
background-color: black;
color: white;
border-radius: 10px;
}
/* Problematic Code!------------------------------------------------------------- */
html, body {
min-height: 100%;
}
/* ---------------------------------------------------*/
/* Header */
header{
height: 80px;
display: flex;
align-items: center;
}
/* Main section */
#main{
width: 100%;
height: 80%;
background-color: rgb(12, 12, 12);
display: flex;
justify-content: center;
}
#main #center_piece{
background-color: rgb(12, 12, 12);
height: 80%;
}
<!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>Forum</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<h1>Forum (v0.3)</h1>
</header>
<section id="main">
<section id="center_piece">
<div id="middle_column">
<div id="title">Posts</div>
<div id="posts_section">
<div class="post">
<span>Username</span>
<p>Comment body</p>
</div>
</div>
<div id="input_area">
<form>
<textarea cols="" rows=""></textarea>
<span>Submit</span>
<span>Refresh</span>
</form>
</div>
</div>
</section>
</section>
</body>
</html>
Solutions that don't work
When I remove the min-height and give both the html and the body a height of 100%, the problem goes away, but then I won't get the layout I need.
Changing the display of the body to grid also solves the problem but the layout changes, so I'd prefer if I didn't have to do that.
I removed the min-height from the html and gave it a height of 100%; this didn't do anything.
you can use viewport height vh instead of percentage.
*{
margin:0;
padding:0;
background-color: black;
color: white;
border-radius: 10px;
}
/* Problematic Code!------------------------------------------------------------- */
html, body {
min-height: 100%;
}
/* ---------------------------------------------------*/
/* Header */
header{
height: 80px;
display: flex;
align-items: center;
}
/* Main section */
#main{
width: 100%;
height: 80vh;
background-color: rgb(12, 12, 12);
display: flex;
justify-content: center;
}
#main #center_piece{
background-color: rgb(12, 12, 12);
height: 80%;
}
<!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>Forum</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<h1>Forum (v0.3)</h1>
</header>
<section id="main">
<section id="center_piece">
<div id="middle_column">
<div id="title">Posts</div>
<div id="posts_section">
<div class="post">
<span>Username</span>
<p>Comment body</p>
</div>
</div>
<div id="input_area">
<form>
<textarea cols="" rows=""></textarea>
<span>Submit</span>
<span>Refresh</span>
</form>
</div>
</div>
</section>
</section>
</body>
</html>
I have a 4x11 grid and I am trying to place an image and caption next to it within the same area. Currently, the image is sitting above the text, rather than to the left in line with it:
<div class="Time">
<figure class = "Time-icon">
<img src="/images/time.png" alt="time icon" width= "20%" height= "20%">
</figure>
<h2>Time</h2>
</div>
.time {
grid-area: 10 / 3 / 12 / 4;
align-items: center;
padding-left: 85px;
}
.time-icon{
float: left;
display: block;
}
How would I go about making the icon sit nicely to the left inline with the text?
I think you can use this css.
.time {
display: flex;
justify-content: center;
align-items: center;
}
.time-icon {
margin: 0 8px 0 0;
width: 20%;
height: 20%;
}
.time-icon img {
width: 100%;
height: 100%;
}
html
<div class="time">
<figure class = "time-icon">
<img src="/images/time.png" alt="time icon">
</figure>
<h2>Time</h2>
</div>
you should use for this display flex, not float left.
.container{
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="hec.css">
<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>Document</title>
</head>
<body>
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" width="60px" height="60px" alt="logo">
<h2>This is a logo!</h2>
</div>
</body>
</html>
So I'm creating a footer for my web document and I'm trying to achieve the following i drafted in word:
Home, Legal, Location and Contact are hyperlinks as seen in many website footers, and they are evenly spaced out vertically.
I'm having issue getting them to evenly space out in my html document. I tried using "margin-top" property but the Home hyperlink would then have uneven spacing at the top.
Would appreciate some help on this.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#wrapper {
border: 1px solid orange;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
#content {
border: 1px solid black;
display: flex;
flex-direction: column;
}
<!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>Document</title>
<link rel="stylesheet" href="css/test_style.css">
</head>
<body>
<div id="wrapper">
<div id="content">
Home
Legal
Location
Contact
</div>
</div>
</body>
</html>
This would be totally even spacing implementation for your use-case :-
(Currently I had to make width and height to be 100% since you have an explicit border on them and it wouldn't look good but without border, you can just use height:100% and it should work the same )
Also you can use space-around as well for justify-content which will decrease the top and bottom margin for your links.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#wrapper {
border: 1px solid orange;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
#content {
border: 1px solid black;
display: flex;
flex-direction: column;
width:100%;
height:100%;
align-items:center;
justify-content:space-evenly;
}
<!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>Document</title>
<link rel="stylesheet" href="css/test_style.css">
</head>
<body>
<div id="wrapper">
<div id="content">
Home
Legal
Location
Contact
</div>
</div>
</body>
</html>
I'm building a component that will have variable content. So I'd like the img to respond like a bg img, taking the height of it's container rather than defining the height. Even when I define add object-fit: cover though, the img still affects the height of it's parent. I want the text to define the height of the parent, not the img. I would prefer not to use a background img as the image is populated via a wysiwyg editor and I don't have control over where the uploaded img is loaded (ie. it has to be an img). Thanks for your help.
Codesandbox
CODE:
.container {
display: flex;
flex-direction: row;
padding: 20px;
background: lightblue;
width: 80%;
}
.img-item {
align-self: stretch;
flex-shrink: 2;
}
.img-item img {
object-fit: cover;
height: 100%;
width: 100%;
}
.text-item {
flex-shrink: 3;
padding: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="img-item">
<img src="https://i.imgur.com/2bvab7y.jpg" alt="" />
</div>
<div class="text-item">
<h1>
Heading one
</h1>
<p>Hello world. You're the best.</p>
</div>
</div>
</body>
</html>
you are missing the flex-basis CSS property
.container {
display: flex;
flex-direction: row;
padding: 20px;
background: lightblue;
width: 80%;
}
.img-item {
align-self: stretch;
flex-shrink: 2;
}
.img-item img {
object-fit: cover;
height: 100%;
width: 100%;
}
.text-item {
flex-shrink: 3;
padding: 20px;
}
[class$=item]{flex-basis: 120px;}
<div class="container">
<div class="img-item">
<img src="https://i.imgur.com/2bvab7y.jpg" alt="" />
</div>
<div class="text-item">
<h1>
Heading one
</h1>
<p>Hello world. You're the best.</p>
</div>
</div>