I am trying to construct a simple pixel-art game in html.
The basic idea is to make a fixed-size div inside which I am placing my images in pixel coordinates. I would like to keep individual img tags as I then can easily work with the mouse events (clicks) on them. I have this up and working:
<!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" />
<style>
.game_area {
position:relative;
}
</style>
</head>
<body>
<div class="game_area" style="width:320px;height:160px;" >
<img src="field_base.png" style="position:absolute;left:0px;top:0px;" />
<img src="field_base.png" style="position:absolute;left:16px;top:8px;" />
</div>
</body>
</html>
This is just a very basic test. "field_base.png" is a sample image 32x16 px in size:
Works fine.
Now I want to scale the whole thing to somewhat better visible, but I want to retain the pixel visuals. For a simple image I found this solution:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.pixelart {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
</style>
</head>
<body>
<img src="example.png" width="75%" class="pixelart" />
</body>
</html>
example.png is a pixel-art-image with size 168 x 97. Chose anyone you like.
This also works fine.
My question is now: can I get both together? Can I somehow "scale" my div-container in the upper example to, e.g., 75% page width, but keeping the pixel-content and pixel-based coordinates for the images inside?
Or do I have to use the canvas element and do the mouse interaction the hard way?
Related
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).
You can play with my code here:
http://jsfiddle.net/gqQnd/
Basically I want to have a div of content to have a semi-transparent border.
The border is semi-transparent but the insider div also become semi-transparent.
I want the inner div to be white BG
Anyone has suggestion?
<!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>
<title></title>
<style type="text/css">
#transparency {filter: alpha(opacity=75);opacity:.75; -moz-opacity:.75; background-color:#ccc;border:5px solid #333; position:absolute;top:50px; left:50px;}
#cont {background-color:#fff;filter: alpha(opacity=100);opacity:1;}
</style>
</head>
<body>
This is so cool way to do this
<br />
This is so cool way to do this
<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this
<div id="transparency">
<div id="cont">
<div>
This is header
</div>
<div>This is body</div>
</div>
</div>
</body>
</html>
Your styles for #cont are actually being applied (hence the white background, even if it is semi-transparent). The problem is that opacity is inherited, and so if you apply it to a parent element, there's no way to stop it being applied to the child elements.
You could use an rgba value for the border-color, but then you get dark corners in Chrome and Safari (I think), where the borders overlap. Read about it here (with workarounds).
What about just setting an rgba background on the parent, with some padding?
http://jsfiddle.net/Kp7JJ/
Update: see css3please.com for cross browser support for rgba, e.g. you will need to apply a Microsoft filter in the CSS to get it to work in IE
Here is an option how to do this, but in this case your popup will be with the fixed size and I don't know if it's possible to make it flexible without javascript (jQuery) with only css
http://jsfiddle.net/gqQnd/13/
Without the use of a rgba background, i would recommend you to create a container containing two divs. One for the opacity, the other for plain color.
The cons are that you can't user without knowing the height and width of the div you're going to create.
But it's working in every browser :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<title>my super page</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
body { background:#EF9; }
.container { width:200px;height:140px; }
.container > div { width:196px; height:136px; position: absolute;}
.c-opacified { position:absolute; border:2px solid #000;opacity: 0.5;-moz-opacity: 0.5;filter:alpha(opacity=50);}
.c-plain { background:red;margin:2px;/*because we have a border: 2px */}
</style>
</head>
<body>
<div class="container">
<div class="c-opacified"></div>
<div class="c-plain"></div>
</div>
</body>
</html>
In the example .html file below, the border-width attribute does not appear to be doing anything in either firefox 5 or firefox 3.6.18.
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<meta http-equiv="Content-Type" content="text/html;" />
<style type="text/css">
a:link img {
border-width: 1px;
border-style: solid;
}
</style>
</head>
<body>
<p><img src="thumbs/thumb-avh.jpg" alt="CB" /> A court barony.</p>
</body>
</html>
I have tried 1px, 3px, and 5px, and this does not change the output. Why is the border-width property being ignored?
Are you forgetting to give it a border-color? It defaults to transparent if it isn't explicitly set.
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.