How to stop the height growth of the div? - html

why when I try to embed a tiktok on my page, does the height of the iframe keep growing indefinitely? It only happens on Iphone. The div below as a result continues scrolling down indefinitely
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/#lemiericette1/video/6892399695595965697" data-video-id="6892399695595965697" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="#lemiericette1" href="https://www.tiktok.com/#lemiericette1">#lemiericette1</a> <p><a title="banana" target="_blank" href="https://www.tiktok.com/tag/banana">#banana</a> <a title="chocolate" target="_blank" href="https://www.tiktok.com/tag/chocolate">#chocolate</a> <a title="dessert" target="_blank" href="https://www.tiktok.com/tag/dessert">#dessert</a> <a title="new" target="_blank" href="https://www.tiktok.com/tag/new">#new</a> <a title="idea" target="_blank" href="https://www.tiktok.com/tag/idea">#idea</a></p> <a target="_blank" title="♬ sonido original - s.o.n.i.d.o" href="https://www.tiktok.com/music/sonido-original-6871655704382556930">♬ sonido original - s.o.n.i.d.o</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>
<div>
hello
</div>
</body>
</html>


you can do this by limit it's parent element with a maximum height value, like this:
blockquote {
max-height:500px;
}
or in html
<blockquote style="max:height:500px"...

Related

Why can't I insert HTML images?

I am a beginner who is learning HTML recently. I put the same HTML file and image in the same folder as below, but only the image icon is displayed and does not print out. Please help me.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-wid">
<title>Typing Text</title>
<img src="https://cdn-icons-png.flaticon.com/512/2889/2889312.png" alt= "img" width="1000", height="500">
<link herf="typr.css" rel="stylesheet">
</head>
<body>
<p id="dynamic" class="ig-text">
Learn To HTML
</p>
<p class="sm text" > LAilac
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-wid">
<title>Typing Text</title>
<img src="https://cdn-icons-png.flaticon.com/512/2889/2889312.png" alt= "img" width="1000", height="500">
<link herf="typr.css" rel="stylesheet">
</head>
<body>
<p id="dynamic" class="ig-text">
Learn To HTML
</p>
<p class="sm text" > LAilac
</p>
</body>
</html>

Try this code:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-wid">
<title>Typing Text</title>
<link herf="typr.css" rel="stylesheet">
</head>
<body>
<img src="https://cdn-icons-png.flaticon.com/512/2889/2889312.png" alt= "img" width="1000", height="500">
<p id="dynamic" class="ig-text">
Learn To HTML
</p>
<p class="sm text" > LAilac
</p>
</body>
</html>
The reason is because you didn't move your <img> tag inside the <body> tag.

Move the <img> tag inside the <body> tag. You placed it in the <head> section.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-wid">
<title>Typing Text</title>
<link herf="typr.css" rel="stylesheet">
</head>
<body>
<img src="https://cdn-icons-png.flaticon.com/512/2889/2889312.png" alt= "img" width="1000", height="500">
<p id="dynamic" class="ig-text">
Learn To HTML
</p>
<p class="sm text" > LAilac
</p>
</body>
</html>

How to add a page/container below a video background in html css

enter image description hereI created a website with a video as my background for my front page. My problem is that when I enter new set of codes supposedly for another tab in the same page but below it, it does not work. i tried using div class container but it does not work. How to fix it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Lakad Dalampasigan</title>
</head>
<body>
<section class="showcase">
<header>
<h2 class="logo">LAKAD DALAMPASIGAN</h2>
<div class="toggle"><img src="log1.png" width="90" height="90"></div>
</header>
<video src="ocean.mp4" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Lakad Dalampasigan </h2>
<h3></h3>
<p>Climate has always changed and is always changing.
Climate change was reframed from an environmental concern to a public health issue prior to and during this ongoing crisis, and it may soon be deemed a public health emergency. </p>
<a href="sec.html
" target="_blank">Learn more</a>
</div>
</section>
</body>
</html>

Span tag doesn't work in text-image or text combinations

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.

turning an image to a link

i'm experimenting in school with turning an image into a link but so far the link is not contained to the image but the entire row and i have tried looking at several example but none have worked for me so far. here is my code
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta charset="utf-8">
<title>Alpha page</title>
</head>
<p>The image is a link. You can click on it.</p>
<a href="https://www.youtube.com">
<img src="youtube.png" alt="Youtube">
</a>
<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.</p>
</body>
</html>

I think i know what you mean, but enlighten me if im wrong.
Your trying to use png image but link is also working if u click outside the visible image. (white area) This is because the link is the full image of the H x W
Example
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta charset="utf-8">
<title>Alpha page</title>
</head>
<p>The image is a link. You can click on it.</p>
<a href="https://www.youtube.com">
<img src="https://cdn3.iconfinder.com/data/icons/social-icons-5/607/YouTube_Play.png" alt="Youtube">
</a>
<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.</p>
</body>
</html>
If you want only a certain area you will have to use image-map. W3 LINK
I have used this site to ease the time.
Example
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta charset="utf-8">
<title>Alpha page</title>
</head>
<p>The image is a link. You can click on it.</p>
<map name="image-map">
<area target="" alt="youtube" title="" href="https://www.youtube.com" coords="304,303,302" shape="circle">
</map>
<img src="https://cdn3.iconfinder.com/data/icons/social-icons-5/607/YouTube_Play.png" usemap="#image-map">
</a>
<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.</p>
</body>
</html>

How to make text appear when hover over a href

How would I make text appear under a link?
<div class="login">
<a href="">Login
<p>Access your profile here</p>
</a>
</div>
Where the login triggers the p to show?
Do I need to use the p or something else?

that's simple just add title attribute in tag
Studyofcs

The following style makes the p visible on hover:
.login a p {display:none;}
.login a:hover p {display:block;}
<div class="login">
<a href="">Login
<p>Access your profile here</p>
</a>
</div>
Or if you want the whole link including p inside stay visible together on hover use the following:
.login a p {display:none;}
.login a:hover p {display:block;}
.login a:hover {display:block;}
<div class="login">
<a href="">Login
<p>Access your profile here</p>
</a>
</div>

Simple Html Tooltip
stackoverflow
Tooltip Using Bootstrap :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li>Top</li>
<li>Bottom</li>
<li>Left</li>
<li>Right</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
You can achieve hover tooltip By Bootstrap+JQuery also :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>

In case you are using bootstrap you can use the following:
<a class="login" href="" data-toogle="tooltip" title="Access your profile here">Login</a>

You just can use old title argument, works well, the shortest solution
Google