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 aren’t supported by IE. • In many ways simpler to code and style. • Can be assured of readability of text given one width. • CON’s • 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.

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 <!--[if IE x.x]> Special instructions here <![endif]-->

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 <dl> tags which can contain <dt> and <dd> 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 <div> with <h1> and <p> 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.