mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-11-09 09:20:15 +01:00
75 lines
1.8 KiB
HTML
75 lines
1.8 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
|
||
|
|
|
||
|
|
<!-- http://www.bath.ac.uk/%7Epy8ieh/a/internet/projects/mozilla/widgets/ -->
|
||
|
|
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<title>Mozilla Tests: Styled Widgets Eleven</title>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
|
||
|
|
div.right, div.left { width: 100px; height: 30px; background: green; color: white; }
|
||
|
|
div.left { float: left; } div.right { float: right; }
|
||
|
|
.center, input { display: block; margin: auto; width: 300px; }
|
||
|
|
input.left { margin-left: 0; } input.right { margin-right: 0; }
|
||
|
|
p, hr { clear: both; }
|
||
|
|
div { padding: 5px; border: solid; }
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<H1>Styling Widgets! 11</H1>
|
||
|
|
|
||
|
|
<p>In all these tests, INPUT should act as a BLOCK element because it
|
||
|
|
is given 'display:block' in the stylesheet.</p>
|
||
|
|
|
||
|
|
<p>In the following test case there a centered INPUT element.</p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<input type="text" value="I am centered with 'margin:auto'.">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>In the following test case, there is the same INPUT but this time
|
||
|
|
it is next to a float. <em>The INPUT should be in the same place!</em></p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="right">I float.</div>
|
||
|
|
<input type="text" value="I am centered with 'margin:auto'.">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>This problem does not seem to occur with left floated images: </p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="left">I float.</div>
|
||
|
|
<input type="text" value="I am centered with 'margin:auto'.">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>Similarly, if we right align the INPUT, the INPUT does
|
||
|
|
not go under the floated block as it should:</p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="right">I float.</div>
|
||
|
|
<input class="right" type="text" value="I am right aligned with 'margin-left:auto'.">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>In this case, though, the problem <em>does</em> appear for the left
|
||
|
|
case: </p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="left">I float.</div>
|
||
|
|
<input class="left" type="text" value="I am left aligned with 'margin-right:auto'.">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<p><a href="10.html">Prev</a> <a href="12.html">Next</a></p>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|