I want to show tooltips on parts of an image. I have this technique where it puts a invisible div on the image with absolute positioning.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta http-equiv="X-UA-Compatible" content="IE=10" >
</head>
<body>
<div style="position:relative;">
<img src="http://blog.caranddriver.com/wp-content/uploads/2016/11/BMW-M2-lead.jpg"/>
<div title="HELLO" style="position:absolute; width:100px; height:100px; top:0; left:0;"></div>
</div>
</body>
</html>
but when I hover over, the tooltip does not show.
Does anyone know what's wrong? This same code works on chrome 59.
Thanks
this code seems to be ok on Explorer, Chrome, Firefox and Edge.
img tag has a different behaviour of div tag in Explorer.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta http-equiv="X-UA-Compatible" content="IE=10">
</head>
<body>
<div style="position:relative;">
<img src="http://blog.caranddriver.com/wp-content/uploads/2016/11/BMW-M2-lead.jpg"/>
<img style="position:absolute; width:100px; height:100px; top:0; left:0; border-width: 0px;" src="javascript:void(0)" title="Test" alt="">
</div>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<link rel="stylesheet" href="movie.css">
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
</body>
</html>
so far i have succeeded with
img{
width: 100%;
}
but i want to it make it so only this image fits and not the other ones.
i tried doing it with
img.fit
on my css file, but this just returns it back to normal.
.fit img{
width: 100%;
}
should do it for you. The div's class name is fit, not the image's. Therefore img.fit won't work.
If your image had the class .fit then you could just do
.fit {
width: 100%:
}
If you remove class="fit" from div and add it to img then the effect will be the same for this image as you had for all images before.
You can Go little easier!
Just add width="100%" in <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8g4PCYI2ssAVPKlJmC9q4T_k84PE7zOHqAWultSDb-BbSy5YfK-5P0I1f" alt="Rancid Tomatoes" >
</div>
</body>
</html>
this is my problem:
<!Demo html>
<html>
<head>
<img src="html\111.jpg" alt="can't be displayed" align="center">
</head>
<body>
</body>
and i just want to fit the picture onto the screen
If I understand your problem correctly, you want the image to cover the screen, then this is the simplest solution to your problem:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="html\111.jpg" alt="can't be displayed" align="center" width="100%" height="100%">
</body>
But if your intention is actually to use the image as a background, I would strongly suggest adding it as a background image (with CSS) to the body element.
Edit:
With css:
html, body {
width: 100%;
height: 100%;
}
body {
background: url( html/111.jpg ) 100% 100%;
}
Also, don't forgot to link to your .css in your .html file.
<head>
<link rel="stylesheet" href="css/styles.css">
</head>
For inside a head tag......
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background: url(url of the image) !important; }
</style>
</head>
<body>
yourbody
</body>
</html
I think this is what you want!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<img src="html/111.jpg" alt="can't be displayed" align="center" width="100%" height="100%">
</header>
</body>
In this snippet just replace src code with your link.
<!Demo html>
<html>
<head>
<style>
.img{
top:0px;
left:0px;
position:absolute;
height:100%;
width:100%;
}
</style>
</head>
<body>
<img src="http://wallpapersrang.com/wp-content/uploads/2015/12/wallpapers-for-3d-desktop-wallpapers-hd.jpg" alt="can't be displayed" align="center" class="img">
</body>
I'm fighting with this problem:
I have iframe in which I'm showing website, which has some html structure. And inside this structure is element, which has css property: height: 100%;
Problem is, that element stretch to iframes full height, anyway it shouldn't I think. Could you give me some idea, how to solve this problem?
Here is source code for iframe content:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/swiper.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/style.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/grid.css" />
</head>
<body>
<div id="overview">
<div class="overview slider swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
XXX
</div>
</div>
</div>
<div id="benefits">
<div class="grid">
<article id="article1" class="clearfix">
<div class="text col right">
<h2>People behavior in one picture</h2>
</div>
</article>
</div>
</div>
</body>
</html>
Here is source code, where I put an iframe:
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="1600" height="4000"></iframe>
</body>
</html>
Thank you very much for you help.
On the child page (the page inside the iframe) will be shown starting from the top left corner, so positioning the child page is usually not necessary. The styling of the iframe's dimensions on the parent page determines how much of the child page will be seen. The easiest and most effective way is to make the iframe responsive (able to adapt to changes of screen sizes and/or window)
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="100%" height="100%" style="position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%;overflow: hidden; overflow-x: hidden; overflow-y: hidden;" allowfullscreen webkitallowfullscreen mozallowfullscreen ></iframe>
</body>
</html>
Hello every one I have wrote a simple code in html5 in which I am calling the click handler of image and display the alert but I don't know why it isn't working can any one please guide Where am I doing wrong
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script>
function clickhandler(){
alert ("I am called");
}
</script>
<style>
#div1
{
float:left;
width:100px;
height:150px;
margin:10px;
border:1px solid #aaaaaa;
}
</style>
<body>
<div id="div1">
<img src="myimage.png" onClick="clickhandler" draggable="false" />
<img>
</div>
</body>
</html>
THANKS
It should look like this:
<img src="myimage.png" onClick="clickhandler()" draggable="false" />
The onClick attribute should be a function call or statement.
You should also move your style and script tags inside the head tag:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function clickhandler(){
alert("I am called");
}
</script>
<style>
#div1
{
float:left;
width:100px;
height:150px;
margin:10px;
border:1px solid #aaaaaa;
}
</style>
</head>
<body>
<div id="div1">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Exponential_Function_(Abs_Imag_Part_at_Infinity)_Density.png" onclick="clickhandler()" draggable="false" />
</div>
</body>
</html>
I have a very simple holding page I built centering a div, anchor and image. For some reason it will not center in IE8 (either mode), and I am hoping someone can tell me why. I haven't had a chance to try it in other IE browsers. I have tried this in Chrome and FF3 where it works OK.
<html>
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
I said it was really simple. :)
Thank you,
Brett
Do you really want your page to work in quirks mode? Your HTML centers fine once I added doctype to to force standards mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div>
</body>
</html>
The margin of auto on the sides of the div leave it up to the browser to decide where it goes. There is nothing telling the browser that the div should be centered in the body, or left or right aligned. So it's up to the browser. If you add a directive to the body, your problem will be solved.
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center;}
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
I added a 1px border to the div so that you could see what was happening more clearly.
You're leaving it up to the browser because it's in quirks mode. To remove quirks mode, add a doctype definition to the top, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
Now you'll be able to see your 300 px div center on the page.
Add text-align:center to the body. That should do it when combined with the margin:0 auto on the div.
You can center without using the text-align:center on the body by wrapping the entire page contents in a full-width container & then setting text-align:center on that as well.
<html>
<head>
<title>Welcome</title>
<style>
#container {text-align:center;border:1px solid blue}
#pageContainer {width:300px; margin:0 auto; border:1px solid red}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="container">
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</div>
</body>
</html>
(I added the container div). It doesn't really change anything though... just an extra div. You still need all the same css properties.
You probably want to change it to the following:
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center; }
#pageContainer {width:300px;margin:0 auto;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
The text-align:center; is moved to the body. If you want to place other aligned left content within the div #pageContainer, then you'll need text-align:left; for that class. This is the solution that I have used in quite a few websites now and seems to work across all browsers (it's what Dreamweaver uses in it's starter templates).
FOR BLUEPRINT USERS
This drove my nuts, until i found this post: problem with ie8 and blueprint
Long story short, in you html code change the
<!--[if IE]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
for
<!--[if lt IE 8]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
Regards
Alex
This works for me on IE6,7,8,FF 3.6.3:
#container
{
width:100%;
}
#centered
{
width:350px;
margin:0 auto;
}
and
<div id="container">
<div id="centered">content</div>
</div>