Errors you made:
1. <select name="MovedSamplesList" onchange="editMove(this);"
style="width:500; align:center">
you forgot to set the unit for the width value, width:500px is correct
align is not a CSS property, text-align is correct
2. You forgot to close the SELECT element "MovedSamplesList" with </
select>
My advice:
1. always quote HTML attributes!
2. don't use the align attribute, use CSS text-align instead
3. don't put H3 (or any other Heading elements) inside P elements...
This is not valid. P elements are containers for inline content, and
Heading elements are block containers... Heading and P elements are,
in practice, siblings:
<p>Paragraph</p>
<h3>Next heading</h3>
<p>Paragraph</p>
<p>Paragraph</p>
3. don't use the onclick attribute. Define the JavaScript behavior at
the bottom of the page inside a SCRIPT tag, preferably using jQuery...
The code:
#dataentrybox {
margin:30px auto;
width:600px;
border: 2px solid #333;
padding:10px;
background-color: #EDE8FF;
}
#titlebox {
font-weight:bold;
font-size:20px;
border-bottom:2px solid gray;
margin-bottom:20px;
}
#btnbox {
margin-top:20px;
padding-top:10px;
border-top:2px solid gray;
overflow:auto;
}
h2 { font-size:22px; font-weight:bold; padding:5px 0; }
h3 { font-size:18px; font-weight:bold; margin:15px 0 5px; }
#statusbox {
float: right;
}
form p {
margin: 0;
padding: 0;
padding-top: 5px;
}
form p label {
font: 0.9em Arial, Helvetica, sans-serif;
}
<form>
<div id="dataentrybox">
<div id="titlebox">
<h2>DNA Portal: Moved From/To Maintenance Screen</h2>
</div>
<h3>List of Moves:</h3>
<p>
<select id="MovedSamplesList">
<option>Scary movie</option>
<option>Epic movie</option>
<option>Disaster movie</option>
<option>Date movie</option>
<option>Not another teen movie</option>
<option>Dance flick</option>
</select>
</p>
<h3>Move From</h3>
<p>
Box from: <input name="box_from" size="10">
</p>
<p>
Row from:
<select name="row_from">
<option value ="A">A</option>
<option value ="B">B</option>
<option value ="C">C</option>
<option value ="D">D</option>
<option value ="E">E</option>
<option value ="F">F</option>
<option value ="G">G</option>
<option value ="H">H</option>
</select>
</p>
<p>
Column from:
<select name="col_from">
<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>
</select>
</p>
<h3>Move To</h3>
<p>
Box To
<input name="box_to" size="10">
</p>
<p>
Row To:
<select name="row_to">
<option value ="A">A</option>
<option value ="B">B</option>
<option value ="C">C</option>
<option value ="D">D</option>
<option value ="E">E</option>
<option value ="F">F</option>
<option value ="G">G</option>
<option value ="H">H</option>
</select>
</p>
<p>
Column To:
<select name="col_to">
<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>
</select>
</p>
<div id="btnbox">
<input type="button" id="save" value="Save"
class="btn" disabled>
<input type="button" id="new" value="New"
class="btn">
<input type="button" id="maintenance" value="Data
Maintenance" class="btn">
<input type="button" id="mainmenus" value="Main Menus"
class="btn">
<input type="button" id="logout" value="Logout"
class="btn">
<div id="statusbox">
screen state: <input type="button" name=state
value="Something">
</div>
</div>
</div>
</form>
<script>
$(document).ready(funciton() {
$("#MovedSamplesList").change(editMovie);
$("#save").click(submitForm("save"));
$("#new").click(submitForm("new"));
$("#maintenance").click(setURL('dataMaintMenu.php'));
$("#mainmenus").click(setURL('DNA_Portal_Menu.php'));
$("#logout").click(setURL('logout.php'));
}
function setURL(url) {
location.href = url;
}
</script>
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
