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.
Related
I have the css code below but it doesn't apply the css to html in general only to h1 and h3 i have used the same type of looking code before but it worked
html {
text-align:center;
border:25px dotted #ff5c33;
background-color:#00b300;
color:#ff5c33;
font-family:Arial;
}
h1 {
background-color:#ff5c33;
color:#00b300;
}
h2 {
background-color:#ff5c33;
color:#00b300;
}
html is as follows I could not find a error in it.
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Official Volleball</title>
<link href="VolleyB/CssforVB.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Official volleyball team score</h1>
<h3>Wins:1 Losses:0</h3>
<h2>Number of spikes by shawn</h2>
<h4>Spikes:3</h4>
</body>
</html>
You're applying styles to html that you appear to be wanting applied to body.
Change html to body in your CSS so that the styles apply to the correct element.
body { /* Change html to body */
text-align:center;
border:25px dotted #ff5c33;
background-color:#00b300;
color:#ff5c33;
font-family:Arial;
}
h1 {
background-color:#ff5c33;
color:#00b300;
}
h2 {
background-color:#ff5c33;
color:#00b300;
}
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?
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.
I am trying to position a <span> relative to a particular image. I must use the XHTML Transitional doctype because that is what the application has been using since years before I ever laid hands on it and too much depends on it.
The following code correctly positions the <span> way off to the side:
<html>
<head>
<style type="text/css">
span.tooltip {
z-index:1000;
position:absolute;
top:200;
left:600;
}
</style>
</head>
<body>
<span class="hasTooltip">
<img src="https://www.google.com/images/srpr/logo3w.png" />
<span class="tooltip">Tooltip!</span>
</span>
</body>
</html>
However, this code breaks the <span> position, and it always appears in the same spot no matter what the left or top values are:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
span.tooltip {
z-index:1000;
position:absolute;
top:200;
left:600;
}
</style>
</head>
<body>
<span class="hasTooltip">
<img src="https://www.google.com/images/srpr/logo3w.png" />
<span class="tooltip">Tooltip!</span>
</span>
</body>
</html>
How can I correctly position this <span> element with the XHTML Transitional doctype?
Use top: 200px and left: 600px. They work in any mode, whereas if you omit `px', it is incorrect CSS code and only works in Quirks Mode.
I have two divs. I want one with id "hor_rule" to appear beneath the other with id "header".
I was under the impression that this should happen automatically. I must be making some silly error.
--- The HTML file ---
<!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>ARCS <~~ the title ~~></title>
<style type="text/css" media="all">#import "css/styles.css";</style>
</head>
<body>
<div id="container">
<div id="header">
<span id="header_title"><~~ the title ~~></span>
</div>
<div id="hor_rule"></div>
</div>
</body>
</html>
--- The CSS File ---
#charset "utf-8";
/* CSS Document */
#header {
float:left;
width:64%;
vertical-align:top;
margin:12px;
}
#header_title {
font-family: Arial;
font-size:xx-large;
font-weight: bold;
}
#hor_rule{
height:1px;
background-color:#999;
}
your "header" div is floated and has a width of 64%... this means that something (without a width applied to it, or of a width less than 36% of the container) below it will slide up and fill that spot. set the width of "hor_rule" to something higher than 36%.
alternatively, you can set your "container" div to a greater width or have your "container" div clear: both;