# Code snippet for Web Programming at 2013/11/6,
# slide at http://zoro.ee.ncku.edu.tw/wp2013/res/07-layout.pdf
################################################################################
# a list for users to input orders
Navigation Order
################################################################################
# beautify the above form
body { font: 100% serif; }
fieldset { background: #555555; padding: 1em; }
form { width: 50%; margin: 0 auto; }
input[type='text'] { width: 2em; text-align: center; position: absolute; left: 40%; }
legend { border: 1px #513939 solid; background: #FAFAFA; }
label { position: absolute; margin-left: -999em; }
ol { list-style: none; position: relative; }
ol li { border: 1px #FFF solid; background: #FAFAFA; padding: 0.7em; }
ol li:hover { border: 1px #513939 solid; }
################################################################################
# make the above form dynamic
################################################################################
# a simple three-column layout
Navigation Order
# vi:nowrap:sw=2:ts=2