I've been refreshing my HTML/CSS skills in preparation for a new job opportunity. The last time I dabbled in HTML was way back in 1999... Needless to say, I've fallen quite behind. As a big fan of the "Space Trader" game on Palm OS, I've taken on the challenge of recreating all the game screens in HTML. However, I'm currently facing a CSS issue that's proving to be quite challenging.
Here's the screen I'm attempting to recreate:
And here is the code snippet:
<div class="screenTitle">
<h1 class="leftTitle">Bank</h1>
<span class="titleButtons">
<input type="button" id="btB" value="B" />
<input type="button" id="btS" value="S" />
<input type="button" id="btY" value="Y" />
<input type="button" id="btW" value="W" />
</span>
</div>
And here is the corresponding CSS code:
.screenTitle {
height: 0.7em;
border-bottom-style: solid;
border-color: rgb(49,0,156);
font-size: 40px;
}
.leftTitle {
margin-top: 0;
font-size: 0.5em;
text-align: center;
color: white;
padding-left: 0.1em;
padding-right: 0.1em;
background-color: rgb(49,0,156);
float: left;
border-top-left-radius: 0.3em;
border-top-right-radius: 0.3em;
line-height: 1.5em;
font-weight: bold;
}
.titleButtons {
float: right;
}
Here is the current result of my efforts
I seem to be struggling with positioning the 4 shortcut buttons properly. Any suggestions or critiques you have will be greatly appreciated.
Thank you so much!