The image tag does not work. Not sure if I'm missing something or I added the image tag incorrectly. The image is in the same folder, so there's no problem in inserting the picture.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="type the content description here" />
<meta name="keywords" content="type, keywords, here" />
<link rel="stylesheet" href="text.css" type="text/css" />
<style type="text/css">
h1.align1 { text-align: center; }
h2.align2 { text-align: center; }
h3.align3 { text-align: center; }
</style>
</head>
<body style="background-color: black;">
<h1 class="align1" style="color: yellow;"><font size="8"> TEXT </h1>
<hr style="white" />
<h2 class="align2" style="color: red;"><font size="10"> TEXT </h2>
<hr style="white" />
<h3 class="align3" style="color: blue;"><font size="10"> TEXT </h3>
<img src="years1.jpg" />
</body>
</html>
You have to close your font tags (the unfinished tags may affect elements following these, in this case "image").
For example:
<h1 class="align1" style="color: yellow;"><font size="8"> TEXT </font></h1>
font tag is deprecated obsolete in HTML5 anyway, so you should write like this:
<h1 class="align1" style="color: yellow; font-size: 8em; "> TEXT </h1>
It's a img path issue. Please use a suitable file path for the image,
and also remove the font tag and use it under style.
Related
I have Googled and found this functionality is deprecated. Found many solution on Stack overflow but all are showing icon when selected but i need it when dropdown is open and when dropdown is open it's showing Question Mark icon not actual icon.
enter image description here
Tried this is on mozilla not like this.
Alternatively If i can bold or change the color of text (DO NOT NEED TO ADD ICON) but it should also on when dropdown is open not after selection. On Mozilla Firefox Color issue is solved it is showing when dropdown is open but not on Chrome or Safari.
Any help would be appreciated.
You can checkout on select2, https://select2.org/dropdown
Allow you to customize your options.
If you really want to do it without plugin, you can try to use with custom to do your own dropdown and make it behave like dropdown with javascript.
Here is the sample code
document.querySelector('#selector').addEventListener("focus",()=>{
document.querySelector('#dropdownbox').setAttribute("style","");
});
function onclickdropitem(id)
{
console.log(id);
document.querySelector('#selector').value = document.querySelector("#"+id+" p").innerHTML;
document.querySelector('#dropdownbox').setAttribute("style","display:none");
}
#selector { width:300px; }
#dropdownbox { position: absolute; width: 300px;}
.dropitem { display: flex; padding:10px;border: 1px solid lightgrey; }
.dropitem img { height:50px; }
.droptext { margin-left: 30px; }
<!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>
<input id="selector" type="text" placeholder="Select your option" />
<div id="dropdownbox" style="display: none;">
<div id="test1" class="dropitem" onclick="onclickdropitem(this.id)">
<img src="https://static.thenounproject.com/png/5279-200.png" />
<p class="droptext">Testing 1</p>
</div>
<div id="test2" class="dropitem" onclick="onclickdropitem(this.id)">
<img src="https://static.thenounproject.com/png/5279-200.png" />
<p class="droptext">Testing 2</p>
</div>
<div id="test3" class="dropitem" onclick="onclickdropitem(this.id)">
<img src="https://static.thenounproject.com/png/5279-200.png" />
<p class="droptext">Testing 3</p>
</div>
</div>
</body>
</html>
This is sample code(HTML):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="The_secondweb.css">
<meta charset="utf-8">
<title><!-- There will be a title --></title>
</head>
<body>
<h1 class="title">Welcome to this website</h1>
</body>
</html>
This is what I did in CSS:
#title{
text-align: center;
}
Problem:
When I don't use the id attribute the text don't gets aligned to the center, but when I don't use the id attribute the code does what it should. Am I doing something wrong while using the id attribute or we cannot align the text to center using any attribute we should name the tag in CSS?
When you are using class you have to use "." whereas "#" is used in case of id.
You can also do it with inline styling in html as below:
<html>
<head>
<link rel="stylesheet" href="The_secondweb.css">
<meta charset="utf-8">
<title><!-- There will be a title --></title>
</head>
<body>
<h1 style="text-align: center;">Welcome to this website</h1>
</body>
</html>
using # in CSS is id selector
.title{
text-align: center;
}
when your use classes
I have a piece of code and it seems that my code doesn't care about my span tag, I don't know if it is the problem of my browser (Chromium Edge) or my code, all my websites seems to have this problem. ALSO THIS ONLY HAPPENS IN TEXT-IMAGE COMBINATION OR JUST TEXT, NOT IN IMAGES. THE SNIPPET WILL HELP YOU UNDERSTAND BETTER. That means whenever I want to show an image exactly like this:
text But what my span does is:
text
I hope that gave a better understanding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span>
<p>This is text</p>
</span>
<span>
<p>It doesn't work with spans.</p>
</span>
<span>
<img src="https://images.unsplash.com/photo-1603381616642-42b585a184b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="Image #1">
</span>
<span>
<img src="https://images.unsplash.com/photo-1603132852827-5857c966512e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="Image #2">
</span>
<br>
<br>
<br>
<br>
<span>
<p>This is a image text combination</p>
</span>
<span>
<img src="https://images.unsplash.com/photo-1599993771158-370837d1dba8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="ImageText">
</span>
</body>
</html>
The image might appear to be in div state because of the size of the post area. Expand to get accurate results.
You can use the CSS property display: inline-block to make a set of components inline. Here's a simple example. Since the image you're using is somewhat big, it is displayed on a separate line in your browser. You can fix this by defining a width and/ or height to the image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="display:inline-block">This is text</p>
<p style="display:inline-block">It doesn't work with spans.</p>
<img src="https://images.unsplash.com/photo-1603381616642-42b585a184b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Image #1" style="display:inline-block; width:100px">
<img src="https://images.unsplash.com/photo-1603132852827-5857c966512e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Image #2" style="display:inline-block; width:100px">
</body>
</html>
I'm still not clear what you're trying to achieve with spans here. If you want to surround a particular <p> tag with a <image> tag, I would recommend you to use <div>s instead of spans.
I am creating a test website with Angular, just to learn some things. First I put everything into the index.html, and this is the look I came up with:
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reiche Freunde</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
</html>
I then copied this html code and entered it into the app.component.html. Back in the index.html, I changed
<body style="background-image: url('assets/geld.jpg');">
<a href="http://google.com">
<p style="text-align: center; margin-top: 15%;"><img src="assets/Mony.gif" /></p>
</a>
</body>
to
<body>
<app-root></app-root>
</body>
But then my Site started to look like this:
Where did I make the error? My app.component.css is empty, so there is nothing able to change the look of that background. I can't see any connection between the paragraph and the body itself, but the background is still relative to my dollar bill. When I put this into the app.component.css:
body {
position: absolute;
}
,then i get this:
I'm just a starter in html/css, but all the tutorials about background images changed nothing for me
Looks like you have two body tags, according to your answer ofc :)
One here (index.html) and second in app.component.html:
<body>
<app-root></app-root>
</body>
You can probably keep body into app.component.html, but you should remove it from index.html. And apply display: block; height: 100% for app-root, I suppose.
I'm trying to design a simple page about pets I would like to have. I can't seem to figure out why my HTML won't link to my CSS file. I'm using Atom.
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
p {
text-decoration: line-through;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> My Website about Pets</title>
<link rel="stylesheet" href="styles.css" type = "text/css" />
</head>
<body>
<h1> Pets</h1>
<h3> Below is a list of descriptions of pets that I would like to have. </h3>
<div class="center">
<img src="https://s7d1.scene7.com/is/image/PETCO/ball-python-1" alt="Ball Python"
height="200">
<p> A picture of a noodly boi</p>
</div>
<h2>Ball Python</h2>
<p> I would like to have a pet ball python. I don't care what gender it is, but it's name will be Goose.</p>
</body>
</html>
These files are both in the same folder on my desktop.