Advanced CSS techniques

1
Advanced CSS Techniques
2
Layouts

• Fixed Width layouts
• Main site wrapper is specific, immovable width,
  independent of users display resolution (often
  760px)?
• PROs
• Offers specific control without using max and min
  width which arent supported by IE.
• In many ways simpler to code and style.
• Can be assured of readability of text given one
  width.
• CONs
• Optimal width for readability can be compromised
  if text size is increased.

3
Layouts

• Fixed Width layouts
• CONs
• REALLY small resolutions have to be compromised.
• 760px wide can look too narrow on large displays.
• The width ultimately limits the number of columns
  you can have. This can be a good thing though.
• Tips
• Keep the content to the left.
• Provide a handheld stylesheet, and maybe a
  projector/tv display stylesheet.

4
Fixed example
5
Layouts

• Liquid layouts
• No specific width on site wrapper. Widths
  controlled by value.
• In theory, no horizontal scrollbar should ever be
  seen.
• PROs
• Can adapt to any screen size (not often though)?
• This is actually the standard way that browsers
  try to display anything.
• Makes the most out of all screen realestate. More
  content potentially above the fold.

6
Layouts

• Liquid layouts
• CONs
• Too much content can be a bad thing. The human
  brain works in specific ways.
• Can lead to lack of focus on the right
  information.
• Can cause a destruction of white space, and a
  cluttered look.
• Without max-width property, you can get lines of
  text spanning 1000px.
• Advice
• Make sure you are using Liquid for a reason.

7
Layouts

• Liquid layouts
• Advice
• Defeats the purpose if you make a fluid layout
  with fixed with content areas. If you are going
  to the trouble, make sure you do it properly.
• If you have to, make sure it will, at minimum,
  fit to an 800x600 browser size.

8
(No Transcript)
9
(No Transcript)
10
Layouts

• Elastic layouts
• Site wrapper and other content areas are measured
  in ems, which are relative to text size.
• If the text size increases, all of the content
  areas will.
• PROs
• Everything will change at the same rate. Nothing
  will change size disproportionally.
• Pretty challenging to code, but the end result is
  worth it.
• CONs
• Apart from the cool factor, there is not much
  benefit.
• In the end it will just keep getting wider and
  wider.
• With IE7 the whole effect is redundant

11
Layouts

• Elastic layouts
• Advice
• Once again, you still want to check that it works
  on a small screen res first.
• Still use a max width declaration using a
  percentage to limit the design. This may not be
  pure, but code purity should not sacrafice
  usability.
• Since IE doesn't support max width, so a good
  place to start planning is with max text size on
  IE at 1024x768.

12
Layouts

• Summary
• In the end, there is no right or wrong answer.
  Your decision will depend on what you want to do.
  
• Don't do it just because it's pure.
• All of these methods can be used to make a
  perfectly accessible, and valid, website.

13
Common browser bugs

• Too many to mention.
• But lets look at Box Model
• Only an issue with IE browsers below 5.0.
• Is not an issue if in new IE if you use strict
  DOCTYPE.
• Can target only IE with
• lt!--if IE x.xgt
• Special instructions here
• lt!endif--gt

14
Common browser bugs

• Double margin in IE
• Margins appear larger in Internet Explorer,
  sometimes double, sometimes just more.
• Simply use the display inline attribute on
  the tag containing your margin setting.
• I was going to go on, but there are just so many.
• The conditional statements for IE will help you
  solve many of your problems.
• Other than that, you just have to know how to
  search.
• Someone out there has had the same problem
  before, and there will be a fix.
• http//www.positioniseverything.net/

15
Some more HTML/CSS

• Lists again
• Unordered lists can be used as navigation.
• They are a lot more efficient.
• Use less code.
• Are easier to update.
• More scalable.
• More accessible.
• Give more information to screen readers.
• Just generally more suited semantically.
• They will comfortably wrap to the next line if
  the list gets too big.

16
Some more HTML/CSS

• Definition Lists
• Composed of ltdlgt tags which can contain ltdtgt and
  ltddgt tags.
• Really good structurally for a title/description
  sort of data.
• Or for question/answers.
• Can also work well for title/image/description.
• Can be more meaningful than ltdivgt with lth1gt and
  ltpgt tags as it is less generic.

17
Some more HTML/CSS

• Tables done right
• Tables have their place. When presenting tabular
  data.
• Don't use table cells for presentation.
• Don't waste whole rows and columns just to give
  spacing. Css will be able to do this for you much
  easier.
• Once again
• It will be easier to update.
• It will have cleaner more efficent code.
• It will be easier to re-style.
• And will be easier to write dynamic code for.

18
Some more HTML/CSS

• Indestructible boxes
• HTML panels that can be any width or height.
• Without background images and no rounded corners,
  this is really simple.
• With them, you need to assign each corner
  background image to 4 different HTML tags.
• And then use padding to ensure they don't overlap
  each other.
• Quite complex, and it may just be of benefit to
  have a look at some examples and discover how
  they work.
• Obviously they can be of great benefit to re-use
  code for so many different elements of a site.