replace table for possibly better mobile view
This commit is contained in:
parent
bf712137e2
commit
6f76920e3f
80
kole.html
80
kole.html
@ -7,21 +7,27 @@
|
|||||||
<!--
|
<!--
|
||||||
@media only screen {
|
@media only screen {
|
||||||
}
|
}
|
||||||
|
-->
|
||||||
@media only screen and (max-width: 600px){
|
@media only screen and (max-width: 600px){
|
||||||
body #wrap { font-size: 2.1em; }
|
body #wrap { font-size: 2.1em; }
|
||||||
|
input[type='number'],input+label { display: block;}
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 768px){
|
@media only screen and (min-width: 768px){
|
||||||
label { display:inline-block;width: 12ex; }
|
label {
|
||||||
body #wrap { font-size: 1.2em; width: 80%; }
|
display:inline-block;
|
||||||
|
width: 12ex;
|
||||||
|
}
|
||||||
|
body #wrap {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
-->
|
|
||||||
<!--
|
<!--
|
||||||
body { font-family: sans-serif; }
|
body { font-family: sans-serif; }
|
||||||
-->
|
-->
|
||||||
#wrap {
|
#wrap {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
fieldset{
|
div fieldset{
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 50ex;
|
max-width: 50ex;
|
||||||
padding: 2ex;
|
padding: 2ex;
|
||||||
@ -29,7 +35,15 @@
|
|||||||
legend{
|
legend{
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
label{ width: auto !important; }
|
.radiogroup > legend{
|
||||||
|
min-width: 20ex;
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.radiogroup > label{
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
label{ min-width: 20ex; }
|
||||||
input[type='number']{text-align:right;}
|
input[type='number']{text-align:right;}
|
||||||
input[readonly='readonly']{background-color:#eee;}
|
input[readonly='readonly']{background-color:#eee;}
|
||||||
h1{
|
h1{
|
||||||
@ -45,20 +59,48 @@
|
|||||||
<noscript>
|
<noscript>
|
||||||
Dieser Rechner ist auf JavaScript angewiesen!
|
Dieser Rechner ist auf JavaScript angewiesen!
|
||||||
</noscript>
|
</noscript>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend></legend>
|
<legend></legend>
|
||||||
<table>
|
<section class="radiogroup">
|
||||||
<tr><td>Eingangsgröße:</td><td><input accesskey="b" type="radio" name="b" value="e" id="bb" class="bb" checked="checked"/><label for="bb"><u>B</u>rutto</label><input accesskey="n" type="radio" name="b" value="b" id="bn" class="bb"/><label for="bn"><u>N</u>etto</label><input accesskey="k" type="radio" name="b" value="k" id="bk" class="bb"/><label for="bk"><u>K</u>oLe</label></td></tr>
|
<legend>Eingangsgröße</legend>
|
||||||
<tr><td>Br<u>u</u>tto</td><td><input accesskey="u" type="number" step="0.01" id="e" value="100.00"/> €</td></tr>
|
<input accesskey="b" type="radio" name="b" value="e" id="bb" class="bb" checked="checked"/><label for="bb"><u>B</u>rutto</label><input accesskey="n" type="radio" name="b" value="b" id="bn" class="bb"/><label for="bn"><u>N</u>etto</label><input accesskey="k" type="radio" name="b" value="k" id="bk" class="bb"/><label for="bk"><u>K</u>oLe</label>
|
||||||
<tr><td>Umsatzsteuersatz</td><td><input type="number" step="0.01" id="u" value="19.00"/> %</td></tr>
|
</section>
|
||||||
<tr><td>Umsatzsteuer</td><td><input readonly="readonly" type="number" step="0.01" id="us" value="0.00"/> €</td></tr>
|
<section>
|
||||||
<tr><td>N<u>e</u>tto</td><td><input accesskey="e" type="number" step="0.01" id="n" value="0.00"/> €</td></tr>
|
<div>
|
||||||
<tr><td>Entropieumlagesatz</td><td><input type="number" step="0.01" id="z" value="23.00"/> %</td></tr>
|
<label for="e">Br<u>u</u>tto</label>
|
||||||
<tr><td>Entropieumlage</td><td><input readonly="readonly" type="number" step="0.01" id="eu" value="23.00"/> €</td></tr>
|
<input accesskey="u" type="number" step="0.01" id="e" value="100.00"/> €
|
||||||
<tr><td>K<u>o</u>Le</td><td><input accesskey="o" type="number" step="0.01" id="k" value="0.00"/> €</td></tr>
|
</div>
|
||||||
<tr><td> </td><td><button accesskey="c" id="b" type="button">Bere<u>c</u>hnen</button></td></tr>
|
<div>
|
||||||
</table>
|
<label for="u">Umsatzsteuersatz</label>
|
||||||
</fieldset>
|
<input type="number" step="0.01" id="u" value="19.00"/> %
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="us">Umsatzsteuer</label>
|
||||||
|
<input readonly="readonly" type="number" step="0.01" id="us" value="0.00"/> €
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="n">N<u>e</u>tto</label>
|
||||||
|
<input accesskey="e" type="number" step="0.01" id="n" value="0.00"/> €
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="z">Entropieumlagesatz</label>
|
||||||
|
<input type="number" step="0.01" id="z" value="23.00"/> %
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="eu">Entropieumlage</label>
|
||||||
|
<input readonly="readonly" type="number" step="0.01" id="eu" value="23.00"/> €
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="k">K<u>o</u>Le</label>
|
||||||
|
<input accesskey="o" type="number" step="0.01" id="k" value="0.00"/> €
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<button accesskey="c" id="b" type="button">Bere<u>c</u>hnen</button>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var e=document.getElementById('e');
|
var e=document.getElementById('e');
|
||||||
var u=document.getElementById('u');
|
var u=document.getElementById('u');
|
||||||
|
Loading…
Reference in New Issue
Block a user