I have an input field which currently looks like this:
I would prefer the value to be hidden like this:
Here is the kicker, I know that giving the field a type=password will do this, but unfortunately the software I am using brings over 2 password fields in this case. So, I am left with a standard text input to create the effect.
My hope is that there is some CSS styling that I can do to the field id in order to hide the input information. Thanks for you attention to this issue.
You could just use:
input { -webkit-text-security: disc; /* Default */ }
as described here
Here is also a dirty hack for other browsers
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<script type="text/javascript">
function replaceT(obj){
var newO=document.createElement('input');
newO.setAttribute('type','password');
newO.setAttribute('name',obj.getAttribute('name'));
obj.parentNode.replaceChild(newO,obj);
newO.focus();
}
</script>
</head>
<body>
<form>
<input type="text" name="password" onfocus="replaceT(this)">
</form>
</body>
</html>
Related
I have a site which support Arabic Languge and I need to move the text from right to left ,I have tried
dir="rtl"
but it doesn't work any help please? thanks in advance :)
use direction and unicode-bidi
div { direction:rtl; unicode-bidi:bidi-override; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<div>stack over flow</div>
</html>
or Refer this article
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8">
</head>
<p><span dir="rtl">ARABIC</span><span>aaaddd</span></p>
</html>
I have written a website using HTML and CSS and, basically, I'm trying to get it to display now. The code is just a page of text and a few images. Currently when I go to the domain, the source code from start to finish is displayed instead of the actual content.
I just got cPanel hosting with godaddy (who naturally weren't of any help). I downloaded cyberduck. Uploaded the file containing the HTML text and called it index.html.
A CSS file was uploaded, and saved as index.css This might be the issue if something was incorrect.
On cyberduck it says there is a file called layout-style.css, perhaps I should edit that and add my CSS code to it?
Possibly the top few lines of the HTML code are missing some important command? [updated]:
<!DOCTYPE html>
<html lang="en">
<body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div class = enterprise> <br>
<p>text<p>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Also, does Bootstrap have to be installed anywhere?
I appreciate your responses.
The content must be in the body tag
The structure of an HTML document is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Article</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<!-- CONTENT HERE -->
<div >
<h1>Site name</h1>
</div>
</body>
</html>
You should not have in the part.
This is a html5 structure :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Then you should put inside the part like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class= top>
</div>
<div class = enterprise>
<p> text goes here </p>
</div>
</body>
</html>
I can't set the font-size of a text input from the style sheet. However, it works fine by setting the style attribute.
This works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text-htmlcharset=utf-; 8" />
<title>Test</title>
<style type="text/css">
#about {
}
</style>
</head>
<body>
<input id="about" type="input" value="anything" style="font-size:21pt;" />
</body>
</html>
This does not work (font-size is ignored):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text-htmlcharset=utf-; 8" />
<title>Test</title>
<style type="text/css">
#about {
font-size:21pt;
}
</style>
</head>
<body>
<input id="about" type="input" value="anything" />
</body>
</html>
What am I missing? Surely, you're not expected to use inline style for all text inputs? That seems pretty tacky and redundant in some cases. Thanks a bunch!
Change <style type="text/javascript"> to <style type="text/css">
You are confusing the browser because it is looking for JavaScript code, but you are feeding it CSS. <script> tags should be used for javascript, and <style> tags for CSS.
Your style block has a type of text/javascript. Remove that and it'll work fine.
This is my code. http://furkan.brove.net/syflm.php
It is not working in Chrome when i print it. I wish it puts header and footer on every page in print mode. Also in every browser last footer is going bottom of the content. But i want it to be bottom of the page.
Is there any way to solve my problem?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>Brove.NET ISO Yazılımı</title>
<link rel="stylesheet" type="text/css" href="css/pagination.css" />
<style>
#all thead { display: table-header-group; }
#all tfoot { display: table-footer-group; }
.header_table{ height:100px; }
.footer_table{ height:100px; }
</style>
</head>
<body>
<table id="all">
<thead><tr><td><table class="header_table"><tr><td>Your header goes here</td></tr></table></td></tr></thead>
<tfoot><tr><td><table class="footer_table"><tr><td>Your footer goes here</td></tr></table></td></tr></tfoot>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be<br />
<!-- i wrote this many -->
</td></tr>
</tbody>
</table>
</body>
</html>
This is IE screenshot. In second page it puts header and footer well.
This is Firefox screenshot. It is working too.
But in chrome it is not working
This is a known issue with Webkit, unfortunately.
Here it is on the Chrome issue tracker: http://code.google.com/p/chromium/issues/detail?id=24826
And the Webkit issue tracker: https://bugs.webkit.org/show_bug.cgi?id=17205
Star it on the Chrome issue tracker if you want to show that it is important to you (I did).
OK so uh.. it seems like XHTML Transitional doesn't wanna take 0 padding...
Help? :|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Tadah</title>
<style>
body {
width:1440px;
}
* {
margin:0;
padding:0;
}
img {
margin:0;
padding:0;
width:144px;
height:90px;
}
</style>
</head>
<body>
<img src="http://www.gravatar.com/avatar/63ba857eda5875ce057cffd1adf960d3?s=128&d=identicon&r=PG" /><br />
<img src="http://www.gravatar.com/avatar/63ba857eda5875ce057cffd1adf960d3?s=128&d=identicon&r=PG" />
</body>
</html>
The space between the images isn't coming from padding, it is coming from line-height. If you set line-height: 0; in the block that contains the images then they'll fit together without any space between them.
Using <br/> to stack images like that probably isn't the best approach anyway. You might have better luck with explicit positioning or sized <div> elements with background images. What will work best really depends on your specific situation though.