phunni Posted March 10, 2004 Report Share Posted March 10, 2004 OK - I know I should be using CSS to set the layout for my page - and I have lrgely been doing this. I certainly haven't used any tables yet anyway. Is there a way with CSS to provide a nice layout for forms? Or is this something that does require tables? Or is there another way altogether? Quote Link to comment Share on other sites More sharing options...
Guest Adriano Posted March 10, 2004 Report Share Posted March 10, 2004 Depends on your forms, but it is certainly possible. Eric Meyer's "Eric Meyer On CSS" book has a chapter dedicated to this very issue. I haven't got it at hand now (a friend borrowed it) but I can guide you through it in a couple days. Quote Link to comment Share on other sites More sharing options...
Qchem Posted March 10, 2004 Report Share Posted March 10, 2004 You might find this useful: a post on css forms Quote Link to comment Share on other sites More sharing options...
aru Posted March 10, 2004 Report Share Posted March 10, 2004 IMHO any thing you can do with plain html is better done using css (and easier to mantain) you can create a general class .myform where you define font types, sizes, ... and polish the elements within the form, ie: button.myform or something Quote Link to comment Share on other sites More sharing options...
Darkelve Posted March 10, 2004 Report Share Posted March 10, 2004 IMHO any thing you can do with plain html is better done using css (and easier to mantain) I disagree. For displaying tabular data, tables were, and are, still great. Not the mention the safest and easiest way to do so. But here's an example of how you could make a form using css-based markup. For those with an interest in CSS, A List Apart is highly recommendable. The last few articles are be extremely interesting, especially for graphical (web) artists. http://www.alistapart.com/articles/practicalcss/ There's bound to be more on the web though, but this I remembered. Quote Link to comment Share on other sites More sharing options...
paul Posted March 11, 2004 Report Share Posted March 11, 2004 http://loudas.com/contact.php is what I came up with using CSS the code: <div class="form"> <form action="contact.php" method="post"> <fieldset> <legend>Name</legend> <label for="firstname"> First Name: <input name="firstname" id="firstname" value="" /> </label> <label for="lastname"> Last Name: <input name="lastname" id="lastname" value="" /> </label> </fieldset> <fieldset> <legend>Subject</legend> <label for="subject"> Subject: <input name="subject" id="subject" value="" /> </label> </fieldset> <fieldset> <legend>Your Email Address</legend> <label for="from"> Email Address: <input name="from" id="from" value="" /> </label> </fieldset> <fieldset> <legend>Type your message here</legend> <label for="message" id="message-label"> <span class="invisible"><input type="hidden" name="send" value="ok" /></span> <textarea name="message" id="message" rows="10" cols="55"></textarea> <span class="form-buttons"><button type="submit" name=" Send Email ">Send Email</button> <button type="reset" name=" Clear Form " onclick="LALink('LAcontact');">Clear Form</button></span> </label> </fieldset> </form> </div> Quote Link to comment Share on other sites More sharing options...
phunni Posted March 11, 2004 Author Report Share Posted March 11, 2004 Looks very nice - show us your css! Quote Link to comment Share on other sites More sharing options...
paul Posted March 11, 2004 Report Share Posted March 11, 2004 here are my style sheets <link rel="stylesheet" type="text/css" href="http://loudas.com/css/main.css" media="screen"/> <link rel="stylesheet" type="text/css" href="http://loudas.com/css/menu.css" media="screen"/> <link rel="stylesheet" type="text/css" href="http://loudas.com/css/print.css" media="print"/> this is the relevant bit from main.css /** Forms **/ span.form-buttons { background: #f9f9f9; color: #808080; text-align: center; width: 100%; padding-left: 5px; padding-top: 2px; padding-right: 4px; padding-bottom: 2px; } div.form { background: #f9f9f9; color: #808080; padding-left: 5px; padding-top: 2px; padding-right: 4px; padding-bottom: 2px; } .form-error { color: #fb3a0b; cursor: help; background: #f9f9f9; font-family: helvetica, verdana, sans-serif; font-size: 9pt; font-weight: bold; } legend { color: #306f85; background: #f9f9f9; font-family: helvetica, verdana, sans-serif; font-size: 9pt; font-weight: bold; } fieldset { width: 70%; background: #f9f9f9; text-decoration: none; font-family: helvetica, verdana, sans-serif; font-weight: normal; font-size: 9pt; color: #808080; } label { background: #f9f9f9; text-decoration: none; font-family: helvetica, verdana, sans-serif; font-weight: normal; font-size: 9pt; color: #808080; } input { font-family: helvetica, verdana, sans-serif; font-size: 8pt; border-color: #091b1d; border-width: 1px; background-color: #f9f9f9; width: 150px; } button { font-family: helvetica, verdana, sans-serif; font-size: 9pt; color: #306f85; border-color: #091b1d; border-width: 1px; background-color: #f9f9f9; } textarea { font-family: helvetica, verdana, sans-serif; font-size: 9pt; color: #091b1d; border-color: #091b1d; border-width: 1px; background-color: #f9f9f9; width: 457px; } input#subject { font-family: helvetica, verdana, sans-serif; font-size: 8pt; border-color: #091b1d; border-width: 1px; background-color: #f9f9f9; width: 400px; } input#from { font-family: helvetica, verdana, sans-serif; font-size: 8pt; border-color: #091b1d; border-width: 1px; background-color: #f9f9f9; width: 359px; } label#message-label { background: #f9f9f9; text-decoration: none; font-family: helvetica, verdana, sans-serif; font-weight: normal; font-size: 9pt; color: #808080; text-align: center; } a.clink { margin: 0; border: 1px solid #ccc background: #ccc; text-decoration: none; font-family: verdana, helvetica, arial, sans-serif; font-size: 9pt; color: #546e9d; } a.clink:hover { margin: 0; border: 1px solid #091b1d; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright: 20px; background: #fff; text-decoration: none; font-family: verdana, helvetica, arial, sans-serif; font-size: 9pt; color: #ff4500; } Quote Link to comment Share on other sites More sharing options...
phunni Posted March 16, 2004 Author Report Share Posted March 16, 2004 OK - I've got it looking good (thanks to Paul for design ideas) in mozilla (firefox at least) Trouble is - it doesn't look so good in IE - take a look The gap between the form fields and their labels is too large... If I reduce it then it looks crap in Mozilla. Most people that view the site will probably be using IE - because most people do So I need to fix this - trouble is, that I'm not sure how... Quote Link to comment Share on other sites More sharing options...
paul Posted March 16, 2004 Report Share Posted March 16, 2004 can you try text-align : left on the form fields? or you could try nesting the name and fields in a set width span (but that would be pretty ugly I think) Quote Link to comment Share on other sites More sharing options...
phunni Posted March 16, 2004 Author Report Share Posted March 16, 2004 I've also noticed that the whole thing just looks stupid in IE5 (I've been looking in IE6 so far) I have absolutely no idea why IE would render something so differently - especially since I'm kinda finding my way a bit with CSS In IE5 the form apears way down the page with no content above it - why would that be? The CSS, for reference, is www.redfruit.co.uk/construction.css Quote Link to comment Share on other sites More sharing options...
paul Posted March 16, 2004 Report Share Posted March 16, 2004 :D .. .welcome to the world of web development. have you looked at loudas.com in ie5? Quote Link to comment Share on other sites More sharing options...
phunni Posted March 17, 2004 Author Report Share Posted March 17, 2004 OK - loudas.com looks pretty shocking in IE5 Trouble is - his is going to be a commercial site and I need it to look fine in IE - at least 5 upwards Not that I expect anyone to do my work for me - but a few hints as to what I might try would be helpful. I am writing the site using JSP so I can, if necessary, use different stylesheets depending on the browser - that might be one solution, although I still need to figure out how to get it working in IE 5 & 6... Quote Link to comment Share on other sites More sharing options...
phunni Posted March 17, 2004 Author Report Share Posted March 17, 2004 (edited) OK - loudas.com looks pretty shocking in IE5 Trouble is - his is going to be a commercial site and I need it to look fine in IE - at least 5 upwards Not that I expect anyone to do my work for me - but a few hints as to what I might try would be helpful. I am writing the site using JSP so I can, if necessary, use different stylesheets depending on the browser - that might be one solution, although I still need to figure out how to get it working in IE 5 & 6... The form fields are currently in a span - which looks fine in Mozilla and OK - in IE 6 It's a disaster in IE5... They also alreasy are left aligned... Man this is tough! Edit: interestingly - mozilla in windows is also not as good at rendering as mozilla in Linux, there are some of the same problems as with IE - although it is not quite as bad... Edited March 17, 2004 by phunni Quote Link to comment Share on other sites More sharing options...
paul Posted March 17, 2004 Report Share Posted March 17, 2004 dont use position in your css if you want it to work ok in ie5 www.multipoint.co.nz was done with little (or no) position elements. It renders OK in ie5 and shocking in ie4 The only suggestion if you want to completely support old windows users is to use tables. You can still make a valid xhtml site using tables, but its far less uber geeky ;) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.