I am trying to display some text in traditional Chinese on my site ie
HTML:
<div id = "shareText">好</div>
CSS:
#shareText
{
position: absolute;
right: 125px;
padding: 20px 0 0 0;
color: #a9a4a4;
font-size: 25px;
}
However the output character I'm getting is: 好. I tired changing the font like this:
#shareText
{
position: absolute;
right: 125px;
padding: 20px 0 0 0;
color: #a9a4a4;
font-size: 25px;
font-family: "微軟正黑體", "Microsoft JhengHei", Tahoma , Verdana , Arial , sans-serif;
}
However the character remains the same. What am I doing wrong? Is it something to do with the coding of the html file? I tried changing from unicode 8 to 16, the character appears but I lose all formatting, all my divs are in the wrong place..
This displays correctly for me. Note the <meta charset="utf-8" /> tag in the head.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Chinese</title>
<style>
#shareText{
position: absolute;
right:125px;
padding: 20px 0 0 0;
color: #a9a4a4;
font-size: 25px;
}
</style>
</head>
<body>
<div id = "shareText">好</div>
</body>
</html>
For traditional chinese,
You have to use, <html lang="zh-Hant">
Full code:
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8" />
<title>Chinese</title>
<style>
#shareText{
position: absolute;
right:125px;
padding: 20px 0 0 0;
color: #a9a4a4;
font-size: 25px;
}
</style>
</head>
<body>
<div id = "shareText">好</div>
</body>
</html>
Note: I ran above code, it works fine.
Related
I am attempting to re-create something similar to this image below, minus the little page curl in top right hand corner.
Banner Example:
I am adding the code to a previously coded website by another designer. I am first coding it separately, but cannot get the text and banner to be responsive, though the image is. Nor can I get it to overlay like I wish on the image itself.
Here is my code below, I know it is something simple but seem to be hitting a mental wall.
#charset "UTF-8";
/* CSS Document */
/*Header Image*/
.headerimage
img
{
}
h1
{
position: absolute;
display: block;
width: 100%;
font-size: 1.45em;
font-family: 'Roboto Slab', Rockwell, Serif;
font-weight: bold;
color: #FFF;
text-shadow: 0 .125em .125em rgba(0, 0, 0, .5);
padding: .6em 1em .6em 1.7em;
background: linear-gradient(to right, rgba(178,34,34,0) 0%,rgba(169,32,32,0.8) 5%,rgba(160,30,30,1) 50%,rgba(152,29,29,0.8) 75%,rgba(178,34,34,0) 100%);
}
.interior-header img
{
display: block;
position: relative;
width: 100%;
height: auto;
border: 1px solid #b22222;
padding: 1px;
}
<!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>Test Heading</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="interior-header img>
<div class="headerimage">
<img src="images/Joslyn-Interior-Images.jpg" width="630" height="240" alt="Traffic Control" />
<h1>Traffic Control</h1>
</div>
</div>
</body>
</html>
Traffic Violations Image
I didn't want to type out all your code so here is an example.
Note: When I posted this one, no codes were up, I left it up in case it helps others. The code for the answer is at the bottom of the answer.
https://jsfiddle.net/norcaljohnny/5o95L0qy/
.box {
background: grey;
height: auto;
width: 100%;
}
.text {
font-size: 6vw
}
Updated: Here is the current JsFiddle. Hope this helps.
https://jsfiddle.net/norcaljohnny/65wnds86/
I am using auto growable div to display code. It shows a line of space above the code and a line of space below the code. I want to remove it. I tried my best but failed. Can you please help it. I thank you for your all support. Here is image of how it looks -
image of output
This is my code
.code{
background-color: #d1e0e0;
font-family: 'Microsoft New Tai Lue', sans-serif;
font-size: 15px;
overflow: hidden;
height: auto;
width: 100%;
}
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<div class="code" id="text">
<xmp>
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
This is a simple HTML page
</body>
</html>
</xmp>
</div>
</body>
</html>
You can adjust the spacing in the html.
.code{
background-color: #d1e0e0;
font-family: 'Microsoft New Tai Lue', sans-serif;
font-size: 15px;
overflow: hidden;
height: auto;
width: 100%;
}
<div class="code" id="text">
<xmp> <!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
This is a simple HTML page
</body>
</html></xmp>
</div>
give margin and padding 0px
element { margin: 0px; padding: 0px; }
Use this if your okay with it. Hope it helps you. Thank you.
.code{
background-color: #d1e0e0;
font-family: 'Microsoft New Tai Lue', sans-serif;
font-size: 15px;
overflow: hidden;
height: auto;
width: 100%;
}
xmp {
margin: 0px;
line-height: 1;}
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<div class="code" id="text">
<xmp>
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
This is a simple HTML page
</body>
</html>
</xmp>
</div>
</body>
</html>
or you can use negetive margin like
xmp{margin:-15px;}
xmp {
margin-top: -15px;
margin-bottom: -15px;
}
I have this html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/test.css" rel="stylesheet">
</head>
<p></p>
<h2>Meeting the Old Guard </h2>
<p>I was shot in Vietnam by an old man. .</p>
</body>
</html>
and this css stylesheet named test.css
body {
width: 100%;
margin-right: auto;
margin-left: 2cm;
color: #f0f;
background-color: #000;
margin-left: max-width: 1400px; }
}
h2 {
color: #fff;
margin-left: 0;
font-weight: 700;
font-style: italic;
}
p {
color: #fff;
}
The body tag specifies a magenta color. The h2 tag and the p tag specify white. However, the h2 is rendered magenta and the paragraph white. Why doesnt the header render white?
You've got an extra bracket on your body tag
body {
width: 100%;
margin-right: auto;
margin-left: 2cm;
color: #f0f;
background-color: #000;
margin-left: max-width: 1400px; }
} <----Your extra bracket is messing things up
Check out https://jsfiddle.net/bryanseven/vvw3k7to/ to see it working correctly.
You are missing starting body tag here.
It should be :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/test.css" rel="stylesheet">
</head>
<body>
<p></p>
<h2>Meeting the Old Guard </h2>
<p>I was shot in Vietnam by an old man. .</p>
</body>
</html>
Also you have an extra ending bracket bracket in your css of body.
I'm trying to create a custom textbox for a search function. However, the browser is ignoring the width setting in the css. I even took the code out completely and placed it in its own html file in case it was being restricted by something else. I've used both Google Chrome v38 and IE11
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/Site.css" rel="stylesheet" />
</head>
<body>
<input type="text" class="bigsearch">
</body>
</html>
with the css
.bigsearch {
top: 20px;
left: 20px;
padding: 5px;
border-radius: 10px;
box-shadow: 0 0 12px;
width: 700px;
font-size: 22px;
}
yet in the browser, the textbox is rendered with a width of about 300px, regardless of what I set it to in css.
If I change the code to
<body>
<input type="text" style="width: 700px" class="bigsearch">
</body
I get the same result. However, if I take all the css and put it in the html page, removing the link to the stylesheet file as such,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.bigsearch {
top: 20px;
left: 20px;
padding: 5px;
border-radius: 10px;
box-shadow: 0 0 12px;
width: 700px;
font-size: 22px;
}
</style>
</head>
<body>
<input type="text" class="bigsearch">
</body>
</html>
it works properly. So, what gives?
EDIT:
I should add that the rest of the styles are being applied to the textbox - shadow, rounded corners etc.
It's not working because your style sheet is not properly linked
If your file is index.html and is in:
C:/User/Documents/index.html
and your style sheet is in
C:/User/Documents/Content/style.css
Then the following works fine
<link href="Content/style.css" rel="stylesheet" />
The HTML div for the navigation bar design in CSS will not work.
CSS
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background:url(../images/bg.jpg) no-repeat scroll center top #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('../images/navigation.png') no-repeat center top;
height: 198px;
width: 737px;
}
This is just a short example.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg">
Any help will be much appreciated!
Make sure the URL to your image is correct.
Place the URL in between ' or " tags (url("../images/navigation.png"))
Add a width to your div, f.e. width: 200px;
EDIT: When looking at your full HTML, you also need to close your <body> and <html> tags.
Your full code will look like this:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg"></div>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('http://placehold.it/737x198') no-repeat center top;
height: 198px;
width: 737px;
}
DEMO: JSBin (JSFiddle doesn't seem to work at the moment)
You need to assign it a width attribute.
#header_menu_bg {
background: url(../images/navigation.png) no-repeat center top;
height: 280px;
width: 200px; }
EDIT
Check in the console log, to see if there are issues with the browser finding your image. Perhaps you have the wrong path.
EDIT 2
Close your <body> and <div> tags.
Assuming you have referenced the css file correctly and no error in your html coding structure I suggest clearing your browser cache.
background: url(../images/navigation.png) no-repeat center top;
you need "" or '' like this:
background: url('../images/navigation.png') no-repeat center top;
probably this helps you
The following css works and puts an image in the DIV. Fiddle is not working at the moment and I can't put a link for it now.
#header_menu_bg
{
background-image: url('fnordware.com/superpng/pngtest16rgba.png');
height: 32px;
width: 32px;
}
You either have a wrong url or something else is wrong if this css doesn't work for you.
Try this :
Download the sample image from Here and save it as bg.jpg.
Create a new folder and put the 2 below files & a image in same folder.
HTML (index.html)
<!DOCTYPE html>
<head>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="header_menu_bg">
</body>
</html>
CSS (main.css)
body
{
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg
{
background: url('bg.jpg') no-repeat center top;
width: 280px;
height: 500px;
}
RESULT: