Hallo,
In html formulier gemaakt en opgemaakt met css3.
Naast de tekst staan de besteltypes in Firefox netjes onder elkaar.
IE verschuift bepaalde items.
Van alles geprobeerd maar krijg het niet voor elkaar.
Kom er niet uit,
Alvast bedankt voor het meedenken
In html formulier gemaakt en opgemaakt met css3.
Naast de tekst staan de besteltypes in Firefox netjes onder elkaar.
IE verschuift bepaalde items.
Van alles geprobeerd maar krijg het niet voor elkaar.
Kom er niet uit,
Alvast bedankt voor het meedenken
HTML:
<form>
<p><span class="cijfer">1 </span> Think and Grow Rich (Napoleon Hill)
<input id="kaartjes" name="Kaartjes" type="number" value="0" min="0" max="10">
<label for="Kaartjes">Maximaal 10 exemplaren: </label>
</form>
<form>
<p><span class="cijfer">2 </span> De Kleine Prins (Antoine de Saint-Exupéry)
<input id="kaartjes" name="Kaartjes" type="number" value="0" min="0" max="3">
<label for="Kaartjes">Maximaal 99 exemplaren: </label>
</form>
</p>
</form>
<form>
<p><span class="cijfer">3 </span>Droom van de rode kamer (Cao Xueqin)
<input id="bereik1" type="range" min="0" max="15" step="5" list="bereik-lijst">
<label for="bereik1">Bestel 5,10 of 15 exemplaren: </label>
<datalist id="bereik-lijst">
<option value="0" label="0">
<option value="1" label="5">
<option value="2" label="10">
<option value="3" label="15">
</datalist>
</p>
</form>
<form>
<p><span class="cijfer">4 </span>Harry Potter en de Steen der Wijzen (J.K. Rowling)
<label for="opt">20 </label>
<input id="opt" type="radio" name="mw" value="3">
<label for="opt">10 </label>
<input id="opt" type="radio" name="mw" value="2">
<label for="opt">1 </label>
<input id="opt" type="radio" name="mw" value="1">
</p>
</form>
<form>
<p><span class="cijfer">5 </span>Da Vinci Code (Dan Brown)
<select name="stijl" id="stijl">
<option value="geen">Geen</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</p>
</form>
CSS:
@charset "utf-8";
body {
}
header {
padding-bottom: 1em;
}
aside {
padding-top: 1em;
width: 50%;
float: left;
}
form {
width: 100%;
float: left;
}
span {
color: rgba(255,255,255,1);
background-color: rgba(0,0,0,1);
}
#kaartjes {
float: right;
}
#opt {
float: right;
}
article {
float: left;
width: 60%;
}
.button {
float: right;
width: 30%;
height: auto;
}
.button form button {
background-image: url(afbeeldingen/button.jpg);
float: right;
margin-right: 10em;
}
#bereik1 {
float: right;
display: inline-block;
width: 8%;
}
.visually-hidden {
color: rgba(255,255,255,1);
}
#stijl {
float: right;
}
form p label {
float: right;
}
range {
color: rgba(255,0,0,1);
}
footer {
}