CSS Techniques for Lists and Layouts

Cascading Style Sheets Mike’s Favorite Techniques Mike Hamilton V.P. MadCap Software mhamilton@madcapsoftware.com @MadCapMike

Agenda • List handling • Indent control • Captions • “Keep With Next” in CSS • Positioned content • Borders • Fonts

List Handling

Lists • Two types of lists • Ordered Lists (OL) Think numbers/letters • Unordered Lists (UL) Think bullets • Both types contain List Items (LI) <ol> <li>Item 1</li> <li>Item 2</li> </ol>

Lists Nested List Construction <ol> <li>Item 1</li> <ol> <li>Sub-item A</li> <ol> <li>Sub-sub-item I</li> <li>Sub-sub-item II</li> </ol> <li>Sub-item B</li> </ol> <li>Item 2</li> </ol>

Lists Nested List In Browser • Item 1 • Sub-item A • Sub-sub-item I • Sub-sub-item II • Sub-item B • Item 2

Lists Styling “Nested Lists” (Lists inside Lists) • Manual method • Automatic method

Lists Manual Styling • Create UL or OL styles for your various lists and sub-lists • Apply them manually to the list elements

Lists New Styles ol.Level1 {list-style-type: decimal;} ol.Level2 {list-style-type: upper-alpha;} ol.Level3 {list-style-type: upper-roman;}

Lists Nested List In Browser • Item 1 • Sub-item a • Sub-sub-item I • Sub-sub-item II • Sub-item b • Item 2

Lists Automatic Styling • The “Complex” or contextual selector • UL UL • OL OL • UL OL • OL UL

Lists New Styles olol {list-style-type:upper-alpha;} ololol {list-style-type:upper-roman;}

Lists Nested List In Browser • Item 1 • Sub-item a • Sub-sub-item I • Sub-sub-item II • Sub-item b • Item 2

Lists Quick Review of the Box Model

The Box Model • This page contains three elements • Each element has in invisible box around it Heading 1 Text This is paragraph 1 This is paragraph 2

The Box Model • There are three primary attributes to the box model • Border • Margin • Padding • Each can be set in total, or by top, bottom, right, or left Heading 1 Text This is paragraph 1 This is paragraph 2

The Box Model • Lists have a complex box model • The UL element is a big box • The LI elements are the small boxes • All are subject to Box Model rules • Heading 1 Text • This is list item 1 • This is list item 2 • This is list item 3

Lists TIP: Make the borders visible before adjusting margins or padding!

Indent Control

Indent Control • In a CSS world there is no support for “Tab” • To compensate, indents must be handled with style settings • HOWEVER: Don’t go style crazy! • It is possible to have multiple levels of indent using 1 style

Introducing The DIV Element • DIV is one of the most important elements for CSS control • A DIV element is a container element which can wrap or contain other elements • A DIV can be styled • Can drastically reduce the number of styles needed

Indent Control <body> <h1>DivDemo</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 2a</p> <p>Paragraph 2b</p> <p>Paragraph 3</p> <p>Paragraph 4</p> </body>

Indent Control DivDemo Paragraph 1 Paragraph 2 Paragraph 2a Paragraph 2b Paragraph 3 Paragraph 4

Indent Control In Style Sheet: div.myindent { margin-left: 18pt; }

Indent Control <body> <h1>DivDemo</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <div class="myindent"> <p>Paragraph 2a</p> <p>Paragraph 2b</p> </div> <p>Paragraph 3</p> <p>Paragraph 4</p> </body>

Indent Control DivDemo Paragraph 1 Paragraph 2 Paragraph 2a Paragraph 2b Paragraph 3 Paragraph 4

Captions

Captions • Many authors struggle with captions • The key to getting captions to “stick” to the image, figure, table, etc. is our friend the DIV again • Wrap the image and caption paragraph with a DIV

Captions <div> <p><imgsrc=“image.jpg" /></p> <p>Caption Text</p> </div> div image.jpg Caption Text

Keep With Next

Keep With Next In CSS Keep With Next Doesn’t Exist! However…

Keep With Next CSS includes something even better! An attribute called: page-break-inside: avoid;

Keep With Next Example: Given the page. When printed we don’t want a page break here

Keep With Next • Create a DIV class called “nobreak” • Assign div.nobreak the attribute page-break-inside: avoid; • Wrap the content with the new div.nobreak element

Keep With Next In Style Sheet: div.nobreak { page-break-inside: avoid; }

Keep With Next <div class=“nobreak"> <h2>Paragraphs - Heading 2 </h2> <p>Urnanullam at in vulputate, rutrum non tristique, tortoreunislnulla non mauris sit, nonummyadipiscingphasellus, integer ac interdum vel. Maecenas.</p> <ol> <li>Sem id donecliberoquiselementum, pulvinar, est.</li> <ol> <li>Velit in vitae dolores ac. Porttitormassaquisque, et quis. </li> <li>Hymenaeosmauris sit eratmassafeugiat. </li> <li>Id urnavelitaliquam, proin ac per etiamnibhtristique. </li> <li>Enim ante ac aliquam, vitae nuncodioproinmollis. </li> </ol> <li>Nequeeuismodsedleo magna nisl. </li> </ol> <p>Egetvelitconsectetuer vitae vitae sit lectus, elitsem at wisi, magnisvestibulum integer quis parturient tortor sem. Tempus lacus tinciduntvestibulumametpharetra, suscipitdiamposuerenasceturelementumconvallis et. </p> </div>

Positioned Content

Positioned Content Example: Nav Box

Positioned Content • Create the content you want in the positioned box • For this example it will be 2 links <h1>This is a Heading</h1> <p> <a href="http://www.google.com/">Link1</a> </p> <p> <a href="http://www.yahoo.com/">Link2</a> </p> <p>Volutpat ac acmauriscurabiturpurussuspendisse, lacinia a in, egestasmetus, in nullacondimentummaurismolestieduisnam, est tempus orci sit. Egettellussemaugue. Risustortor, laciniaodiotempor a nameu. Vitae erat non. Congueportatortorfelisliberoeleifend et, et tellus, facilisiselitadipiscingutmassadonecultricies, ultrices sit arcuturpispulvinar. Nam nislnascetururnamalesuada ligula montes, in ultricies. Luctusegestasconvallisnumquamphaselluselitfacilisi, eu integer, cum metus, enimturpis sit eget, facilisisvestibulumnecutullamcorperelit.</p>

Positioned Content When rendered in a browser:

Positioned Content Introducing the Float attribute • Positions content horizontally • AND enables the rest of the page content to flow around the floated element

Positioned Content • Create a new DIV element with the class name “floatright” • Define the div.floatright attributes • Apply the new div around the links

Keep With Next In Style Sheet: div.floatright { padding: 1em; margin: 1em; float: right; border: solid 1px #000000; }

Positioned Content <h1>This is a Heading</h1> <div class=“floatright"> <p> <a href="http://www.google.com/">Link1</a> </p> <p> <a href="http://www.yahoo.com/">Link2</a> </p> </div> <p>Volutpat ac acmauriscurabiturpurussuspendisse, lacinia a in, egestasmetus, in nullacondimentummaurismolestieduisnam, est tempus orci sit. Egettellussemaugue. Risustortor, laciniaodiotempor a nameu. Vitae erat non. Congueportatortorfelisliberoeleifend et, et tellus, facilisiselitadipiscingutmassadonecultricies, ultrices sit arcuturpispulvinar. Nam nislnascetururnamalesuada ligula montes, in ultricies. Luctusegestasconvallisnumquamphaselluselitfacilisi, eu integer, cum metus, enimturpis sit eget, facilisisvestibulumnecutullamcorperelit.</p>

Positioned Content When rendered in a browser:

CSS3 Borders

CSS3 Borders The big news is CURVES! • Use “border-radius: 50px;“ • And you get • Rounded corners!

CSS3 Borders Syntax -moz-border-radius: 50px; border-radius: 50px; Browser Support IE9+, Firefox1+, Chrome5+, Safari5+ Important Note If browsers don’t support border-radius it “fails gracefully” with square corners

CSS3 Fonts

CSS Techniques for Lists and Layouts