I'm a CSS newbie, and have some basic questions about box
positioning.
I've tried to answer my own questions by reading here, as well as CSS
tutorials all over the place, to no avail; CSS is a slippery fish! But
I do want to learn...
Here is my CSS for trying to position a few simple boxes:
#dataentrybox {
position: absolute;
top: 50px;
left: 250px;
right: 250px;
height: 700px;
border: 2px solid #333;
border-style: ridge;
background-color: #EDE8FF;
text-align: left;
}
#row {
padding: 2em;
margin: 10px ;
text-align:left;
}
#titlebox {
position: relative;
float: top;
width: 100%;
top: 0px;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
border: 1px solid #333;
}
#upperbox {
position: absolute;
width: 100%;
top: 75px;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
border: 1px solid #333;
}
#lowerbox {
position: absolute;
width: 100%;
top: 10px;
left: 20px;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid #333;
}
#btnbox {
position: absolute;
width: 100%;
top: 500px;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
border: 1px solid #333;
clear: both;
}
#statusbox {
float: right;
padding: 5px;
border: 1px solid #333;
}
#leftbox {
position: abolute;
top: 400px;
left: 5px;
margin-top: 2em;
margin-left: 1em;
margin-bottom: 3em;
border: 1px solid #333;
}
#rightbox {
position: abolute;
top: 400px;
right: 100px;
margin-top: 2em;
margin-left: 1em;
margin-bottom: 3em;
border: 1px solid #333;
}
form p {
margin: 0;
padding: 0;
padding-top: 5px;
}
form p label {
font: 0.9em Arial, Helvetica, sans-serif;
}
form p boldlabel {
font-weight: bold;
}
And then, here's my code using these div's (this also used PHP, which
can be ignored):
<div id="dataentrybox">
<div id=titlebox>
<div align="center">
<h3>DNA Portal: Moved From/To Maintenance
Screen</h3>
</div>
</div>
<h3>List of Moves:</h3>
<p>
<select name="MovedSamplesList"
onchange="editMove(this);"
style="width:500; align:center">
<?php
$i=0;
while ($i < $num_MovedSamples) {
$samp =
pg_fetch_row($showMoved_result);
echo '<option
value="'.$samp[1].'">'.$samp[0];
$i++;
}
?>
</p>
<p>
<h3>Move From</h3>
</p>
<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>
<p>
<h3>Move To</h3>
</p>
<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" name="save" value="Save"
onclick="submitForm('save')" class="btn" disabled>
<input type="button" name="new" value="New"
onclick="submitForm('new')" class="btn">
<input type="button"
onClick=location.href='dataMaintMenu.php'
value="Data Maintenance" class="btn">
<input type="button"
onClick=location.href='DNA_Portal_Menu.php'
value="Main Menus" class="btn">
<input type="button" name="logout"
onClick="location.href='logout.php'" value="Logout" class="btn">
<!-- This button displays the screen state. -->
<div id=statusbox>
screen state: <input type="button" name=state
value=<?php echo
$scrstate ?>
</div>
</div>
</div>
</form>
I put in the solid borders around the div's so I can see where they
are.
Anyway, this looks pretty awful; to see it, I put up a simple
screenshot at:
http://sites.google.com/site/rickcaseysite/Home/bad-css-example
Particularly baffling is how the select element covers up the inline
element <h3>Move From</h3> that comes right after it; but, like I
said, I'm new to CSS.
I've read some really excellent posts here, so I'm in hopes some
wizards might contribute a few helpful insights...
thanks,
--rick in Boulder
--
--
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]
