Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
Im new to HTML & CSS and I can't figure out why my image doesn't show up. This is my code.
.test {
width: 100%;
height: 100%
}
<!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>
<body>
<div class=test>
<img src="file:///Users/myname/Desktop/picture%201.jpg" alt="">
</div>
</body>
</html>
Your mistake is here src="file:///Users/myname/Desktop/picture%201.jpg" you are missing drive name before Users such as C: or D: file:///C:/Users/myname/Desktop/picture%201.jpg
Your src="" suppose to look like src="YourProject/imagefolder/picture.jpg"
I used a random online available picture. src="https://media.istockphoto.com/photos/human-crowd-forming-a-chain-symbol-bonding-and-social-media-concept-picture-id936347578"
.test {
width: 100%;
height: 100%
}
<!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>
<body>
<div class="test">
<!-- <img src="file:///Users/myname/Desktop/picture%201.jpg" alt=""> -->
<img src="https://media.istockphoto.com/photos/human-crowd-forming-a-chain-symbol-bonding-and-social-media-concept-picture-id936347578" alt="">
</div>
</body>
</html>
The problem is with your image path mentioned in the src. you have to mention the correct image path otherwise the image won't display in your page.
.test {
width: 100%;
height: 100%
}
<!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>
<body>
<div class=test>
<img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
</body>
</html>
Related
how can I prevent this? the edge of the "f" character is overflowing from div. how can I make it fit the text?
HTML 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>Document</title>
</head>
<body>
<div class="parent" style="display: inline; background-color: coral; font-size: 200px;">test f</div>
</body>
</html>
You can also try padding to left and right.
<!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>
<body>
<div class="parent" style="display: inline; padding:0 25px; background-color: coral; font-size: 200px;">test f</div>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 months ago.
Improve this question
<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>
<style>
</style>
</head>
<body>
<div style="
display: grid;
grid-template-columns: 100px, 100px;">
<div style="background-color: lightblue;">div 1</div>
<div style="background-color: lightpink;">div 2</div>
</div>
</body>
</html>
I've been trying to make a grid in HTML and CSS and it's not working. Im new to CSS and HTML so please tell me what I did wrong thanks!
You should remove comma in grid-template-columns, write like this:
display: grid;
And
grid-template-columns: 100px 100px;
Also you can write like below and it's better
grid-template-columns: auto auto;
See here
There was just one error you have made in grid-template-columns there must be no comma should be included, so it must look like this grid-template-column:100px 100px;
<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>
<style>
</style>
</head>
<body>
<div style="
display: grid;
grid-template-columns: 100px 100px;">
<div style="background-color: lightblue;">div 1</div>
<div style="background-color: lightpink;">div 2</div>
</div>
</body>
</html>
You can use grid-template-columns: auto in this case. Hope that solves you
<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>
<body>
<div style="display: grid; grid-template-columns: auto auto auto;">
<div style="background-color: lightblue;">div 1</div>
<div style="background-color: lightpink;">div 2</div>
<div style="background-color: rgb(34, 192, 3);">div 2</div>
</div>
</body>
</html>
My css file is not changing the thhing i need:
Here's my 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">
<script src="/www/style.index.html.css"></script>
<title>Test</title>
</head>
<body>
<h1 class="test">Server Test</h1>
</body>
</html>
and here's my css:
.test{
font: optional;
color: red;
}
the class test is not working, and I have no Idea why. if you have an answer, please help! :)
Bob
PS: sorry for the weird ass title.. The bot is just stupid
You add/import/link your css file as follows <link href="./file_name.css" rel="stylesheet" />
I am saving my code and refreshing it. I dont think I did anything wrong. I am trying to make a Parallax website, I didn't add it yet because the image itself couldn't even load.
This is the code. It's not loading in any way. Completely white.
.img-1{
background-image: url("Image1.jpg");
margin-left: auto;
margin-right: auto;
}
Not so important but here's HTML section of it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="parallax.css">
</head>
<body>
<div class="img-1">
</div>
</body>
</html>
Your div is of 0 height - background-image doesn't give it any height.
Stumbled upon the following svg:
https://codepen.io/iliran11/pen/eRPxwG
While im copying the content of the pen into a file liran.svg there are the 2 following scenarios:
opening directly liran.svg with latest chrome - it works perfectly
Importing liran.svg to index.html (code below) - i can see nothing.
Maybe any exaplnation?
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="./liran.svg">
</body>
</html>
You did not import properly if it is the same folder with the index.html file use
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="liran.svg">
</body>
</html>
If it is the parent folder of the folder containing index.html use
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="../liran.svg">
</body>
</html>
Take a look a this link to learn more on referencing files in html and css How to properly reference local resources in html