floats – selects – lists

https://css.maxdesign.com.au/floatutorial/index.htm

Floats and "clear"

Elements following a floated element will wrap around the floated element. If you do not want this to occur, you can apply the "clear" property to these following elements. The four options are "clear: left", "clear: right", "clear: both" or "clear: none".

clear: left

The element is moved below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.

• Float: left element with clear: left applied to block level element below

clear: right

The element is moved below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.

• Float: right element with clear: right applied to block level element below

clear: both

The element is moved below all floating boxes of earlier elements in the source document.

• Float: left with clear: both applied to block level element below

The Win/IE6 Peekaboo bug

Big John, from Position is Everything, has documented a rendering bug to do with Win/IE6 and its problems clearing floats – well worth reading!

Back to main menu →

 

 

---

https://css.maxdesign.com.au/selectutorial/index.htm

Selectutorial – CSS selectors

Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled.

Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout.

Rules

• What is a rule or "rule set"?
• Grouping declarations
• Grouping selectors
• Shorthand properties
• CSS Comments

The document tree – it's a family thing

• Introduction
• Ancestor
• Descendant
• Parent
• Child
• Sibling
• Multiple descriptions

Selectors

• Type selectors
• Class selectors
• ID selectors
• Descendant selectors
• Child selectors
• Universal selectors
• Adjacent sibling selectors
• Attribute selectors
• Pseudo-classes
• Pseudo-elements

Advanced stuff

• Should you use ID or class?
• Inheritance
• Cascade
• What happens when conflicts occur?

Selectors in action – a step by step tutorial

• Introduction
• Step 1 – the html code
• Step 2 – drop in content
• Step 3 – styling the element
• Step 4 – styling the element
• Step 5 – styling the banner
• Step 6 – styling the heading
• Step 7 – styling the first container
• Step 8 – styling the second container
• Step 9 – styling the navigation
• Step 10 – styling the element
• Step 11 – styling the element
• Step 12 – styling the element
• Step 13 – styling the hover state
• Step 14 – styling the “more”
• Step 15 – styling the element
• Step 16 – styling the content
• Step 17 – styling the element
• Step 18 – setting the line height
• Step 19 – clearing the contents
• Step 20 – styling the footer
• Step 21 – styling the element
• Step 22 – styling the element

---

https://css.maxdesign.com.au/listutorial/index.htm

Listutorial takes you through the basics of building background image lists, rollover lists, nested lists and horizontal lists.

Tutorial 1. Background images for bullets

You can change list bullets to squares or circles, but a far better option is to use background images for bullets.

• Why use background images for bullets?
• Step 1 – Make a basic list
• Step 2 – Remove the bullets
• Step 3 – Remove padding and margins
• Step 3a – Add your own indent
• Step 4 – Add the background image
• Step 5 – Set no-repeat
• Step 6 – Position the image
• Step 7 – Move the content
• Variation – right-aligned list
• Variation – setting a list width
• Variation – adding space around list items
• Variation – icon lists
• All steps combined

Tutorial 2. Rollover list

This tutorial explains how to achive rollover effects using CSS.

• Introduction to rollovers
• Step 1 – Make a basic list
• Step 2 – Remove the bullets
• Step 3 – Remove padding and margins
• Step 4 – Display block
• Step 5 – Add a background color
• Step 6 – Set the list width
• Step 7 – Add padding
• Step 8 – Text decoration
• Step 9 – Add a rollover color
• Step 10 – Separate the list items
• Variation – current page indication
• Variation – Adding borders
• All steps combined

Tutorial 3. Nested lists

This tutorial explains how to apply CSS to nested lists.

• Introduction to nested lists
• Step 1 – Make a nested list
• Step 2 – Remove the bullets
• Step 3 – Remove padding and margins
• Step 4 – Display block
• Step 5 – Add a background color
• Step 6 – Set the list width
• Step 7 – Add padding
• Step 8 – Text decoration
• Step 9 – Add a rollover color
• Step 10 – Separate the list items
• Step 11 – Duplicating the main rule set
• Step 12 – Change nested list background color
• Step 13 – Adding padding-left to nested items
• Step 14 – Making main list items bold
• All steps combined

Tutorial 4. Horizontal lists

This tutorial explains how to build horizontal lists using "display: inline".

• Introduction to horizontal lists
• Step 1 – Make a basic list
• Step 2 – Remove the bullets
• Step 3 – Remove padding and margins
• Step 4 – Display inline
• Step 5 – Removing text decoration
• Step 6 – Padding around list items
• Step 7 – Adding background color
• Step 8 – Add a rollover color
• Step 9 – Center the list
• All steps combined