Floats and Forms

1
Floats and Forms

• A presentation for the Web Standards Group
• by Tony Aslett
• Contents
• Overview of some Tools
• CSS Creator
• CSS Layout Generator
• Float Containers
• Form Layout

2
CSS Creator

• www.csscreator.com/version1/
• Lets you experiment with CSS in your browser.
• It generates simple CSS
• You can try that style on your site or someone
  elses

3
CSS Layout Generator

• One of the things most people have trouble with
  when learning CSS is laying out a site.
• It is difficult because we expect too much?
• Same length columns
• Some columns fixed width others flexible
• Footer positioned correctly

4
CSS Layout Generator

• www.csscreator.com/version2/pagelayout.php
• The CSS Layout generator allows you to generate a
  template for your site.
• Layouts can have one, two or three columns which
  will always appear to be the same length.
• A header and footer
• Full page width or fixed width centred on the
  page.

5
CSS Layout Generator

• Douglas Livingstone created a brilliant layout
  which the generator is based on.
  http//www.redmelon.net/tstme/3cols2/
• I was considering combining the Layout Generator
  with a Menu Generator and eventually making a
  whole site generator.

6
List-AO-matic

• At about this time there was a lot of talk about
  using lists for menus.
• Russ Weakly of Maxdesign wrote the
• List-a-matic
• http//css.maxdesign.com.au/listamatic/
• Followed closely by the
• List-o-matic by Ian Lloyd of Accessify
• http//www.accessify.com/tools-and-wizards/list-o-
  matic/list-o-matic.asp

7
CSS Layout Generator

• My plans were put on hold
• One day I may get around to it, but for now I
  have enough to keep me busy.

8
Float Containers

• If your new to floats you should read these great
  articles
• http//www.maxdesign.com.au/presentation/floatsamp
  le.htm
• http//www.cs.hmc.edu/mbrubeck/clear-after/
• http//www.positioniseverything.net/articles/float
  -theory.html
• http//www.positioniseverything.net/explorer/escap
  e-floats.html

9
Float Containers

• For years it was thought that you needed to have
  an extra element such as a ltdivgt, lthr /gt or ltbr
  /gt to clear floats.
• With the use of the after pseudo element
  combined with a height value we can clear floats
  in most browsers without adding any extra markup.

10
Float Containers

• The pseudo element after
• .containeraftercontent.
• clearboth
• height0
• displayblock
• visibilityhidden
• Which works in most browsers other then IE

11
Float Containers IE

• Setting the height to 100 causes problems unless
  the container is contained in another fixed
  height container.
• If an container is given a height that is less
  then the height of its contents, IE will expand
  the container to fit.

12
Float Containers

• To give only IE the height value we can use the
  Holly Hack from http//positioniseverything.net
• / targets IE win and hides from IE5 Mac \/
• html .container
• height1
• / finish the IE only Holly hack /

13
Float Containers

• What does this mean?
• we can now clear floats without any extra markup.
• Works in most browsers.
• Slightly lighter pages
• Much cleaner pages

14
Float Containers - Browsers

• http//www.csscreator.com/attributes/containedfloa
  t.php
• Works in
• Win IE 5, 5.5, 6
• Opera 6.05, 7.01, 7.22
• Win NN 7.2
• Firefox 0.8
• Mac Safari 1
• Known to Fail in
• Win NN4 (nothing works)

15
Form Layout

• There are a number of ways to layout forms, none
  are perfect.
• We dont have time to look at all of them.
• Today we will look at two form layout options.

16
Forms label and field

• Firstly lets briefly look at labels
• By default labels are inline elements
• They can be wrapped around the field or
  associated to the field via the for attribute.
• ltlabelgtnameltinput namen idn /gtlt/labelgt
• ltlabel forngtnamelt/labelgtltinput namen
  idn /gt

17
Form Layouts

• For these examples we will separate the labels
  from the fields as it gives greater positioning
  flexibility.
• The aim is horizontally aligned labels and
  fields, that degrade nicely in browsers which
  dont support CSS.

18
Form Layout - Divisions

• Many people use divs to layout forms
• Usually they are used as rows and then within the
  row as containers for each label and field.
• Somewhat like a table.

19
Form Layout - Divisions

• They can be used to hold form elements.
• Lets limit their use to just the rows.
• So we start with a label and field and contain
  them in a div that acts as a row.
• ltdiv classrowgt
• ltlabel fornamegtNamelt/labelgt
• ltinput typetext id name namename /gt
• lt/divgt

20
Form Layout - Divisions

• To act as a row the div needs to be cleared on
  both sides.
• The label can be floated and given a width.
• We will also align the text and add some margin.

21
Form Layout - Divisions

• .rowclearboth
• label
• width30
• floatleft
• text-alignright
• margin-right1em
• It can be as simple as that.
• The fields dont need any styling to fall into
  line.

22
Definition List - Forms

• If only you could make any element a label
• ltdt label-fornamegtNamelt/dtgt
• Definition list would be great for form layout
• Already paired
• Consistent layout in most browsers

23
Definition List - Forms

• Stop dreaming, we can still use definition lists
  if we like.
• The markup is a little heaver then divs
• Degrade well in older browsers without CSS.

24
Definition List Forms
ltdlgt ltdtgt ltlabel fornamegtNamelt/labelgt lt/dt
gt ltddgt ltinput typetext namename
/gt lt/ddgt lt/dlgt
25
Definition List - Forms

• To get the DT and DD on the same line we can
  float the dt.
• dtfloatleft clearleft
• width30 text-alignright
• margin0 1em 0 0
• ddclearright margin0

26
Form Layout

• Radio buttons and checkboxes are a slightly more
  tricky.
• Ive put up a simple test page with a couple of
  examples
• www.csscreator.com/attributes/tests/form.html

27
Form Layout

• It might be an interesting project to build a
  form layout generator.
• One that validated fields and lays out forms.
• But not this week.
• Thanks for Listening.

28
Some useful links

• http//css.maxdesign.com.au/floatutorial/
• http//www.maxdesign.com.au/presentation/definitio
  n/
• http//www.cs.hmc.edu/mbrubeck/clear-after/
• http//www.mezzoblue.com/archives/2003/06/24/simpl
  e_it_ai/
• http//www.positioniseverything.net/articles/float
  -theory.html
• http//www.positioniseverything.net/explorer/escap
  e-floats.html
• http//www.quirksmode.org/css/forms.html
• http//www.accessify.com/tutorials/better-accessib
  le-forms.asp
• http//www.csscreator.com/attributes/containedfloa
  t.php
• http//www.csscreator.com/attributes/tests/form.ht
  ml