I just starting html see my following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>jklm</title>
</head>
<body style="background-color: black;">
<div contenteditable="false" id="uiti"
style="width: 100%; background-color: whitesmoke;">
<img src="universal.bmp" alt="universal" height="80"
width="60">
kkk</div>
</body>
</html>
The above created a div which can editable. You can write anything on it which I don’t want. I just want it as uneditable how to do?.
I see minor problems in your code:
you need to close the img tag by adding a / before > ... like this:
<img src="universal.bmp" alt="universal" height="80" width="60"/>
also ... you don't need contenteditable="false". It's not editable by default.
If you want to make it editable do: contenteditable="true"
A div is uneditable by default. You add that feature with the attribute contenteditable set to true or simply the attribute itself.
Remove it (or set it to false) & add the missing /> to image
<body style="background-color: black;">
<div contenteditable="false" id="uiti" style="width: 100%; background-color: whitesmoke;">
<img src="universal.bmp" alt="universal" height="80" width="60" />
kkk
</div>
</body>
Here is a fiddle
Related
below object tag rending html doc internally to display svg image.but getting scroll bars with that object.
<object class="borderlines" id="" type="image/svg+xml" data="https://qa-static-default.sf-cdn.com/renderer/imagerenderer/svgconversion?svgPath=http://swiftbuckets.sf-cdn.com/v1/cmg/qacell10/cdm/20c42364439845648af86bfb317e5481/4&imageHeight=200&imageFormat=JPG&publishedTime=1549521045 "
style="width: 100px;height: 100px;display: inline-block;position: relative"></object>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
<title>svgconversion (271×200)</title>
</head>
<body style="margin: 0px;">
<img style="-webkit-user-select: none;" src="https://qa-static-default.sf-cdn.com/renderer/imagerenderer/svgconversion?svgPath=http://swiftbuckets.sf-cdn.com/v1/cmg/qacell10/cdm/20c42364439845648af86bfb317e5481/4&imageHeight=200&imageFormat=JPG&publishedTime=1549521045">
</body>
</html>
i cant comment, but maybe this can help you https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image_mediaq2
This is quick simple but I'm really a noob and don't know how to resolve this.
Basically, I have an e-card to be displayed on a webpage. There's an image and music playing in the background. The html works fine on Chrome and Firefox (centralised and playing well even though size differs on Chrome and Firefox) but the main problem lies on IE. When I open the webpage on IE, the image is not aligned correctly.
Below is my html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
background-color: #214353;
}
</style>
</head>
<body>
<div align="center"><img src="image/Christmas-Card3.gif" width="800" height="533" /></div>
<div>
<div align="center">
<embed src="media/Feliz Navidad Instrumental Karaoke..mp3" width="32" height="32" hidden="ture" loop="ture"></embed>
</div>
</div>
</body>
</html>
Please help!
Thank you!
Use this style on your container div.
<div style="width: 800px; height: 533px; margin: 0 auto;"><img src="image/Christmas-Card3.gif" width="800" height="533" /></div>
I have read several similar questions, all involving use of width and height attributes either inline or in a class. However no matter how I seem to try it, it is not working.
Due to wanting to apply transformations to the button and text independently, I have had to use a class on the div and a sub class for the button. Stripping the code down, the width and height of the button are not filling the surrounding div.
I am working in Visual Studio 2008 and debugging against IE8 if that makes any difference.
HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td >
<h1> TITLE</h1>
</td>
<td style="width:150px;height:40px;">
<div class="button-wrapper">
<button ID="RetrieveButton2" title="tooltip" runat="server" serverclick="RetrieveButton_Click">Search</button>
</div>
</td>
<td></td>
</tr>
</table>
</div>
</form>
</body>
</html>
CSS:
body
{
}
.button-wrapper
{
width: 150px;
height: 40px;
}
.button-wrapper button
{
width: 100%;
height: 100%;
}
It appears to be environmental. It was not happening on deployment, but it is all academic because requirements have changed so no longer using this code.
Every other browser is rendering this correctly.
<body>
<div>
<div><img src="img/logo_top.png" width="168" height="85" alt="Logo top" /></div>
<div><img src="img/logo_bottom.png" width="168" height="83" alt="Logo bottom" /></div>
</div>
</body>
It's the same thing without the divs, and with a < br /> between images.
Update:
Here is my HTML, with doctype:
<!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>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
img {border: none;}
body {font-size: 0px;}
</style>
</head>
<body>
<div>
<div><img src="img/logo_top.png" alt="Logo top" /></div>
<div><img src="img/logo_bottom.png" alt="Logo bottom" /></div>
</div>
</body>
</html>
If it's the issue I think it is, it should be fixed if you add this CSS:
img {
vertical-align: top
}
Or this:
img {
display: block
}
Try removing the whitespace between the first </div> and the second <div>. Sometimes these CRLF whitespace characters are interpreted by the browser as an indication of physical space.
Please consider the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sign In</title>
</head>
<body bgcolor="#DDDDDD">
<img src="images/logo.png" style="float:right; margin: 0 0 15px 15px;"/>
<div align="center">
<table border="0" width="500" style="border:groove;background:#DCD5F9">
<tr><td width="50%">User Name:</td> <td width="55%"><input type="text" size="35"/></td></tr>
<tr><td width="50%">Password:</td> <td width="55%"><input type="text" size="35"/></td></tr>
<tr><td width="50%"> </td> <td align="left" width="55%"> <input type="submit" value="Login"/></td></tr>
</table>
</div>
</body>
</html>
In browser I see that the <div> is not under the logo.png. Why? And how I can make it to be under the logo.png?
P.S. I would like to add that problem occured when I added the style="float:right; margin: 0 0 15px 15px;" or align="right" in <img> tag.
It's because you've added the float:right on your img which changes how the img will behave in the page flow. Forcing the div to clear content will fix your issue.
change this:
<div align="center">
to:
<div align="center" style="clear:right;">
From Wikipedia:
"A floated item is taken out of the normal flow and shifted to the left or right as far as possible in the space available. Other content then flows alongside the floated item."