vendredi 24 juin 2016
Can't move an input field in order to align it with other fields
The last input text field is a bit lower than the images on the left. These ones, at the same time, are higher than the rest of the elements.
I want to move the input type number at the same level as all the circle images and to move those to the same level as the X. However, when I try to add CSS properties, circles+input field are moved together. Can't figure out how to move only one element. Here is the code, removing unnecessary elements:
table {
font-size: 7px;
font-weight: normal;
margin: 45px;
text-align: center;
border-collapse: collapse;
}
th {
font-size: 9px;
font-weight: bold;
padding: 8px;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff;
color: #039;
height:5px;
}
td {
padding: 8px;
background: #e8edff;
border-bottom: 1px solid #fff;
color: #669;
border-top: 1px solid transparent;
white-space: nowrap ;
}
td:hover{
background: #F1F1F2;
}
tr:hover td {
background-color: #ccd7ff;
}
.results {
-webkit-filter: grayscale(80%); /* Chrome, Safari, Opera */
filter: grayscale(80%);
}
.results:hover {
-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
filter: grayscale(0%);
}
.valueRes {
font-style: italic;
}
.extra {
width: 300px;
}
#manual {
float:right; /* without this, the input number field is below the circles and I need it next to them */
height:8px;
width:40px;
font-size: 9px;
float:none;
margin-left: 3px;
}
<body>
<table id="pendents">
<tbody>
<tr>
<th colspan="9"> data</th>
<th id="valueRes" colspan="6" style="color: rgb(102, 102, 153);">Pendent</th>
</tr>
<tr id="headers">
<th>data</th>
<th>Dia</th>
<th>Hora</th>
<th>data</th>
<th class="extra">data</th>
<th class="extra">data</th>
<th class="extra">data</th>
<th class="extra">data</th>
<th>data</th>
<th colspan="5">data</th>
</tr>
<tr class="sube" id="0">
<td>data</td>
<td>24-06</td>
<td>13:33:00</td>
<td>data</td>
<td>---</td>
<td>---</td>
<td>Mdata</td>
<td>-5</td>
<td><img src="./res/no.png" alt="HA" height="16" width="16"></td>
<td>
<img src="./res/creurojo.png" class="results" alt="creurojo" height="16" width="16" id="creurojo0" onmouseover="Update(0, 0, 0);" onmouseout="Restore(0)" onclick="Update(5, 0, {"code":"2016-06-24 13:33:48"});">
<img src="./res/hanegatiu.png" class="results" alt="hanegatiu" height="16" width="16" id="hanegatiu0" onmouseover="Update(1, 0, 0);" onmouseout="Restore(0)" onclick="Update(6, 0, {"code":"2016-06-24 13:33:48"});">
<img src="./res/void.png" class="results" alt="void" height="16" width="16" id="void0" onmouseover="Update(2, 0, 0);" onmouseout="Restore(0)" onclick="Update(7, 0, {"code":"2016-06-24 13:33:48"});">
<img src="./res/hapositiu.png" class="results" alt="hapositiu" height="16" width="16" id="hapositiu0" onmouseover="Update(3, 0, 0);" onmouseout="Restore(0)" onclick="Update(8, 0, {"code":"2016-06-24 13:33:48"});">
<img src="./res/winverde.png" class="results" alt="winverde" height="16" width="16" id="winverde0" onmouseover="Update(4, 0, 0);" onmouseout="Restore(0)" onclick="Update(9, 0, {"code":"2016-06-24 13:33:48"});">
<input type="number" id="manual" name="manual" step="any">
</td>
</tr>
</tbody>
</table>
</body>
Pretty sure this is somewhere but can't find it, too many related questions.
Inscription à :
Publier les commentaires (Atom)
Aucun commentaire:
Enregistrer un commentaire