The penultimate control that we add to our application before we consider it finished, is the rotation control in the next example: ch06_rotate. We will place it in the bottom bar along with the upcoming projection control. In the first step, we extend our HTML file with container elements for them:
<div class="notification-bar">
<div id="messageBar" class="message-bar"></div>
<div id="projection"></div>
<div id="rotation"></div>
<div id="coordinates"></div>
</div>Next, we create some CSS rules for the rotation control:
.notification-bar #rotation {
width: 10%;
text-align: center;
}
.notification-bar #rotation input {
text-align: center;
outline: none;
border: 0;
-moz-appearance: textfield;
}We align the control to the center of the container element and remove any border or outline from it.