As I said yesterday, I'm working on a new project for CESAC. It will automate our date auction nomination process, letting students enter their nominations via a laptop, instead of a sheet of paper.
Yesterday I drew some logic chains to figure out what all I'd need to do, if I wanted to do it right and include proper validation. I then started working on it, and immediately got stuck on the design of the submission page.
The design is fixed width at 1000px, but I wanted it to be flexible vertically, so that it always fills the page up and down, but without a scroll bar. The problem is that the bottom section is comprised of 4 small images, all of which are different heights. Having them change in height would be a mess.
So I decided, they'd be fixed. The top picture though, would change. It would need to be 100% of the height of the page, minus 384px of the bottom section. Then slap in the CSS3 border-size:cover; style, and you've got a winner.
Simple no? No. Problems abound. First, there's no easy way to specify a percentage minus pixels. A gross oversite of CSS I believe. Second, any solution is only going to work in modern browsers. Firefox 4+, IE9+, Opera, Chrome. The big problems being IE7 and IE8, which are still very widespread. If you want to do it though, without javascript though, you'll have to abandon the older browsers.
As off CSS3, if you specify "height:100%-384px;", along with "top:0; bottom:384px;", if works. Having "top" before "bottom" fixes the position from the top, and having "bottom:384px;" does the same thing as a "margin-bottom:384px;". But you need all 3 of those, along with "position:absolute", or it won't work. Seems repetitive, I know.
Anyway, while the PHP still hasn't been created (my plans for today until the Super Bowl tonight), the design is finalize .. I think. Check it out below. If if goes longer than your page, causes scroll bars, please leave a comment and let me know what browser you are using. (Unless it's IE7 or 8, in which case do a better job reading).
Nomination Page
PS. Thoughts on the submit button? I designed the the images myself with Photoshop.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment