Complete Form Layout with CSS [Archive]

lightnb

03-14-2007, 02:07 PM

I have an input form that I drew in a graphics program. After a couple hours of the chop-up-your-images-and-put-them-in-a-rediculously-long-table-method (with unsatisfactory results), I'm thinking it's time for something better.

I know how to apply styles to HTML objects with CSS, but I'd like to be able to do the layout and positioning using CSS as well.

Based on the following image, is it possible to create the entire thing with HTML/CSS and no-graphics? (and no layout tables?)

http://www.rahlentertainment.com/images/uichunker.png

Thanks for your advise,

Nick

ray326

03-14-2007, 11:19 PM

Yes, neither graphics nor tables are needed for that one.

WebJoel

03-17-2007, 12:10 PM

This isn't a <form>, but it demonstrate that just about anything that you can see, can be replicated using HTML/CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small;}
/*font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.2em; margin-top:6px;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
h1{font-size: 1.93em; margin-top:12px;}
h2{font-size: 1.72em; margin-top:12px;}
h3{font-size: 1.52em; margin-top:12px;}
h4{font-size: 1.42em; margin-top:12px;}
h5{font-size: 1.32em; margin-top:12px;}
h6{font-size: 1.21em; margin-top:12px;}

#wrapper {position:relative; width:785px; height:185px; background-color:#f7f7ef;}
#wrapper h3 {width:235px; float:left; margin:15px 10px 17px 10px; border-bottom:2px dotted #94615a;}

#starts {clear:left; position:relative; width:560px; height:30px; margin-left:10px; border:2px dotted #cbcec6;}
#starts ul {margin-top:7px;}
#starts ul li {display:inline; margin-left:10px;}
#starts ul li span {color:#b58a63}
#starts ul li a {}

#selects {position:relative; width:732px; height:70px; border:2px dotted #94615a; margin:10px auto;}
#selects ul {width:720px; margin:2px auto;}
#selects ul li {display:inline; width:120px; font-weight:600; text-align:center; float:left; margin:1px 10px 1px 10px; font-size:1.2em;}
#selects ul li a {color:#b58a63; text-decoration:none;}
#selects ul li a:hover {color:#520000; text-decoration:underline;}
#selects {}
</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<div id="wrapper">
<h3 title="Event Name">Event Name</h3>
<h3 title="Produced By">Produced By</h3>
<h3 title="Data">Data</h3>

<div id="starts">
<ul>
<li title="Start Time: 6:00 A.M." style="margin-left:7px;">Start Time: <span>6:00 A.M.</span></li>
<li title="Start Time: 6:00 A.M.">Start Time: <span>6:00 A.M.</span></li>
<li title="Start Time: 6:00 A.M.">Start Time: <span>6:00 A.M.</span></li>
<li title="Start Time: 6:00 A.M.">Start Time: <span>6:00 A.M.</span></li>
</ul>
<p title="Supervisor:" style="position:absolute; left: 573px; top:3px; font-size:1.1em; width:170px; float:left; border-bottom:2px dotted #94615a;">Supervisor:</p>
</div>

<div id="selects">
<ul>
<li title="Select"><a href="#">Select</a></li>
<li title="Select"><a href="#">Select</a></li>
<li title="Select"><a href="#">Select</a></li>
<li title="Select"><a href="#">Select</a></li>
<li title="Select"><a href="#">Select</a></li>
</ul>
<ul>
<li title="Select 2"><a href="#">Select 2</a></li>
<li title="Select 2"><a href="#">Select 2</a></li>
<li title="Select 2"><a href="#">Select 2</a></li>
<li title="Select 2"><a href="#">Select 2</a></li>
<li title="Select 2"><a href="#">Select 2</a></li>
</ul>
<ul>
<li title="Select Option"><a href="#">Select Option</a></li>
<li title="Select Option"><a href="#">Select Option</a></li>
<li title="Select Option"><a href="#">Select Option</a></li>
<li title="Select Option"><a href="#">Select Option</a></li>
<li title="Select Option"><a href="#">Select Option</a></li>
</ul>
</div>

</div>
</body>
</html>