Jump to content

CSS, layouts and forms


phunni
 Share

Recommended Posts

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?

Link to comment
Share on other sites

Guest Adriano

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

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 :angry:

 

So I need to fix this - trouble is, that I'm not sure how...

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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 by phunni
Link to comment
Share on other sites

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 ;)

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...