.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.
Related
<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 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>
#div {}
img {
height: 200px;
}
#img1 {
float: left;
}
#img2 {
float: right;
}
#img3 {
float: right;
}
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
Currently, when you shrink the screen horizontally, the images start stacking vertically, which I don't want, I want them to all stay on the same horizontal line.
I'm looking how to do the following things:
Make an image disappear when it starts overlapping another image.
Make the images push to the right past the vertical scroll bar when the images start to overlapping.
The reason I ask for both is because I've now got two projects where each require one of those two and I don't know how to do it :P
I'd also like to avoid #media only screen and (max-width: ---px) if possible.
You need to add separate div for each image, and arrange it by display: flex element. Also use margin for align contents inside the flex div.
#div {
display: flex;
}
.new {
max-height: 200px;
}
.left {
margin-right: auto;
}
img {
max-width: 100%;
max-height: 200px;
}
#media (max-width: 768px) {
.hidden-xs {
display:none;
}
}
<div id="div">
<div class="new left">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
</div>
<div class="new hidden-xs">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="new">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</div>
Try this code
#div::after {
display: table;
content: "";
clear: both;
}
#div img {
float: left;
width: 33.33%;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
<title>Demo</title>
</head>
<body>
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</body>
</html>
Try this Code::
ul.img {
margin: 0;
padding: 0;
white-space: nowrap;
width: 500px;
overflow-x: auto;
}
ul.img li {
display: inline-block;
width: 200px;
height: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
</head>
<body>
<ul class="img">
<!-- Inline styles added for demonstration purposes only. -->
<li style="background-color: #000"></li>
<li style="background-color: #cdc"></li>
<li style="background-color: #fed"></li>
</ul>
</body>
</html>
try this code, And modify your image height according to need.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
<title>Demo</title>
<style>
#div {
display: flex;
flex-wrap: wrap;
}
#div img{
width: 33.33%;
height: 200px;
}
</style>
</head>
<body>
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</body>
</html>
The problem is you are using a float for positioning.
Floats will automatically move to a new line when their containers becomes too small.
You could either set the size of the image container to a width of 600px with no resize in which your images would remain in place when the window becomes smaller.
Or you could use the fixed position which is what I would go for.
#img1 {
position: fixed;
width:200px;
left: 0px;
top: 0px;
border: 0px;
padding: 0px;}
#img2 {
position: fixed;
width:200px;
left: 200px;
top: 0px;
border:0px;
padding: 0px;}
#img3 {
position: fixed;
width:200px;
left: 400px;
top: 0px;
border: 0px;
padding: 0px;}
If you dont care about image resize, set the div with a minimum width of a total px sum of the image widths. That way you have less containers.
This question already has answers here:
Align image in center and middle within div
(35 answers)
Closed 5 years ago.
I have tried every answer on this site but it's not working!
Tried helpers, absolute position and some CSS.
<!DOCTYPE html>
<html>
<title>Title</title>
<head>
<style>
body {
background-color: rgb(18,19,19);
}
</style>
</head>
<body>
<img src="image.png" width="513" height="396" />
</body>
</html>
For img to center you need a parent to hold it (with 100% width)
In the middle of the screen see example below.
For center of the row you can remove height: 100vh;
.centered {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
<!DOCTYPE html>
<html>
<title>Title</title>
<head>
<style>
body {
background-color: rgb(18, 19, 19);
}
</style>
</head>
<body>
<div class="centered">
<img src="image.png" width="513" height="396" />
</div>
</body>
</html>
Try this, it will center any kind of element against its parent:
.centerElement{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<img class="centerElement" src="image.png" width="513" height="396" />
body {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<img src="https://i.vimeocdn.com/portrait/58832_300x300" alt="">
</div>
</body>
</html>
Use position: absolute and give top and left to place the image in center.
Better approach: Use flex
.image{
position:absolute;
top:46vh;
left:46vw;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<title>Title</title>
<head>
<style>
body {
background-color: rgb(18,19,19);
}
</style>
</head>
<body>
<img class="image" src="https://i.stack.imgur.com/CE5lz.png" width="50" height="50" />
</body>
</html>
put your img in a then make your image position to relative and use padding-top and padding-left to center your image in position you want!
I want the logo of my page on the top left corner surrounded by a black background. However, the background color does not cover the area on the right of the image. I am using HTML and CSS.
This is my code:
#title {
width: 100%;
height: 100%;
background-color: black;
}
#title img {
width: 50%;
height: 50%;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<body>
<div id="title">
<a href="index.html">
<img src="http://i.stack.imgur.com/WE2r4.png" align="left" />
</a>
</div>
</body>
</html>
Remove align="left" attribute. It acts similar as if you made image float: left, however you never clear the float after so the parent collapses and you simply can't see background:
#title {
width: 100%;
height: 100%;
background-color: black;
}
#title img {
width: 50%;
height: 50%;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<body>
<div id="title">
<a href="index.html">
<img src="http://i.stack.imgur.com/WE2r4.png" />
</a>
</div>
</body>
</html>
If you want to make logo left-aligned you should use text-align: left of the #title, it will work properly because img is inline-block by default.
You have to add a display rule to your title element so that it actually gets a placement in the flow:
#title {
display: inline-block;
width: 100%;
height: 100%;
background-color: black;
}
#title img {
width: 50%;
height: 50%;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<body>
<div id="title">
<a href="index.html">
<img src="http://i.stack.imgur.com/WE2r4.png" align="left" />
</a>
</div>
</body>
</html>