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>
Related
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>
<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>xxxx</title>
<style>.center {
display: block;
margin-left: auto;
margin-right: auto;
}</style>
<link rel="icon" type="image/svg+xml" href="image" />
</head>
<body>
<div style="padding-left: 500px;">
<img src="image" alt="image" style="float:left ;" width="50" height="50" class="center">
<h2 style="text-align: center;font-family: sans-serif;color: rgb(81, 81, 133);float:left ;">xxxx</h2>
<hr>
</div>
</body>
</html>
this is what I have so far but whenever I try that the line goes to the top right what can I do to put it directly below the two elements
Use clear: left property on hr tag
It is not advised to use inline CSS
Also the float property creates unwanted(unexpected) behaviors so you can use flex or grid property instead
<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>xxxx</title>
<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<link rel="icon" type="image/svg+xml" href="image" />
</head>
<body>
<div style="padding-left: 500px;">
<img src="image" alt="image" style="float:left ;" width="50" height="50" class="center">
<h2 style="text-align: center;font-family: sans-serif;color: rgb(81, 81, 133);float:left;">xxxx</h2>
<hr style="clear:left">
</div>
</body>
</html>
I would suggest to use CSS classes and put your styling separately, because it creates cleaner HTML code.
padding-left isn't great because that only fits your own screen resolution. I just added text-align: right to push the whole shebang to the right, assuming that's what you wanted.
I added a container div and styled it with a border. Had to give it a width.
You shouldn't style using floats, unless you know what you're doing. display: flex or display: grid is what you're after when it comes to placing the elements on the right place.
<html>
<style>
header {
text-align: right;
}
header > .border-bottom-container {
width: 200px;
display: inline-flex;
align-items: center; /* align vertically */
justify-content: center; /* align horizontally */
border-bottom: 2px solid;
}
header img {
width: 50px
height: 50px;
}
header h2 {
text-align: center;
font-family: sans-serif;
color: rgb(81, 81, 133);
}
</style>
<body>
<header>
<div class="border-bottom-container">
<img src="image.png" alt="image">
<h2>xxxx</h2>
</div>
</header>
</body>
</html>
I'd suggest you wrap them in a div and then add the line to the div itself.
I'm trying to place my logo nicely on the top left corner of the navbar. However, when I do that the brand name gets placed in a weird position.
I would appreciate it if someone could tell me how I could place the logo and brand nicely on the navbar.
This is the HTML:
<nav id="navbar">
<div className="nav-wrapper">
<Link
to={this.props.auth ? "/dashboard" : "/"}
className="left brand-logo"
>
<img src={Logo} alt="logo" className="photo" />
<div id="logo">Logo</div>
</Link>
<ul className="right">{this.renderContent()}</ul>
</div>
</nav>
And this is the css:
#navbar {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
#logo {
display: inline-block;
height: 100%;
padding-left: 20px;
}
.photo {
width: 64px;
height: 64px;
}
I am currently using materialize CSS for the navbar.
Just add this css line and you are good to go.
.brand-logo {
display: inline-flex !important;
}
CodesandBox:
Logo Issue
You can declare nav-wrapper as display:"flex" and use align-items:"center".
Then it should work fine.
Do let me know if this was something you were looking for.
If not we can try few more things.
#Nav_Bar {
height: 45px;
background-color: salmon;
display: flex;
align-items: center;
}
#Nav_Bar>div {
margin: 10px;
}
img {
max-height: 35px;
}
<!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="./index.css" />
</head>
<body>
<nav id="Nav_Bar">
<div id="Logo_Wrapper">
<a href="https:google.com">
<img src="./Logo.JPG" />
</a>
</div>
<div>
<h2>Logo</h2>
</div>
</nav>
</body>
</html>
Use flex-box
#navbar{
display:flex;
align-items:flex-start;
justify-content:center || space-around || space-evenly;
}
This should do it, flex-box makes it effortless to create navbars.
Add margin padding where you see fit.
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>
.text{
width: 50px;
font-size: 27px;
float: left;
font-weight: bold;
}
.image{
width: 30%;
height: 100%;
clear: left;
float: right;
}
.parent{
background-color: pink;
height: 350px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="schrott.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="parent">
<p class="text">ihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnii</p>
<img src="Pictures\—Pngtree—triangle neon color glowing border_4072770.png" class="image">
</div>
</body>
</html>
My wish would be to move the text next to the image. I have put these two inside a div and floatet the image right, but now i cant move the text down with margin-op?why and what could i improve?
Here is an example to point you in the right direction: https://jsfiddle.net/h5o607e1/1/
The biggest thing for you to look at here is the position and display settings for both the text and image: position: relative; and display: inline-block;
What about using a flexbox (display: flex):
.text{
width: 49%;
word-wrap: break-word;
margin: 0;
align-self: center; /*Vertically align text*/
}
.image{
width: 49%;
height: 100%;
background-color: red; /*for illustration*/
}
.parent{
background-color: pink;
height: 350px;
display: flex;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="schrott.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="parent">
<p class="text">ihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnii</p>
<img src="Pictures\—Pngtree—triangle neon color glowing border_4072770.png" class="image">
</div>
</body>
</html>
This is CSS, level 1 people: just use float. The value for float is left, right or none (float on Mozilla Developer Network). The order of the elements should have an effect too.
<p>Placeholder...</p>
<img alt="Placeholder" src="4072770.png" style="float: left;" />
<p>Placeholder...</p>
<img alt="Placeholder" src="4072770.png" style="float: right;" />
<img alt="Placeholder" src="4072770.png" style="float: left;" />
<p>Placeholder...</p>
<img alt="Placeholder" src="4072770.png" style="float: right;" />
<p>Placeholder...</p>
Also don't put spaces or uppercase letters in URLs until you get more advanced or you'll create more headaches than it's worth.