
Hi All,
So I've been tasked by my GM to design a character sheet for a game system he's been working on. I have a sheet I've worked on already but it needs re-designing.
Problem is, things are happening with the sheet that I don't quite understand.
First off, I have the following HTML:
<!DOCTYPE html>
<head>
<title>Sheet Version 3</title>
</head>
<body>
<h2>Character Information</h2>
<div class = "basicInfo">
<div class = "basicName">
Name: <input type="text" name="attr_charName" id="charName" style="width: 130px;">
</div>
<div class = "basicGender">
Gender:
<select name="attr_chaGenderList" id="chaGenderList">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class = "basicRace">
Race:
<input name="attr_RACE" type="text" value="Human" id="txtRACE">
</div>
<div class = "basicLevel">
Level: <select name="attr_chaLevelList" id="chaLevelList">
<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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</div>
<div class = "basicProficiency">
Proficiency: <input name="attr_ProfAmt" type="text" value = "0" id ="chaProfLvl">
</div>
</div>
</body>
Then, the matching CSS:
.basicInfo {
border: 2px solid #ddd;
border-radius: 10px;
padding: 5px;
background-color: gray;
}
So from what I understand, this should cast a border around my entire div that contains all of these elements. However, this is what is displayed:
No border :(
Also, that greyish repeating background image shouldn't be there. I did use this in my other sheet but I'm starting fresh with this one. As you can see from both the HTML and the CSS above, there's no background image provided.
As for the CSS not making a border, am I not able to use class selectors? Would I need to use ID selectors or god forbid, element selectors?
If this turns out to be a simple thing, I apologise in advance. Currently learning the ropes.