Weblog

Tekst kolommen verbinden met CSS

Posted on: October 13th, 2003 | Category: Xhtml/Css

Om nog even door te gaan op het linken van tekst-kolommen op het web uit de vorige post: Anne liet me weten dat ik niet de enige ben die hiermee bezig was: 1, 2, 3, 4 en ongetwijfeld etc, etc.

Het W3C heeft een working draft voor een CSS3 module opgesteld, om tekst kolommen aan elkaar te linken en tekst dus over te laten lopen naar volgende kolommen.

In het voorstel worden een aantal nieuwe properties ingevoerd, die volgens het W3C in drie groepen zijn in te delen:

Het aantal en de breedte van de kolommen:

  • column-count
  • column-width
  • column-min-width
  • column-width-policy

De witruimte tussen de kolommen:

  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width

En tenslotte een property om een element over verschillende kolommen te strekken:

  • column-span

Een voorbeeld van hoe de css er uit zo komen te zien:

DIV { 
  width: 320px;
  column-count: 3;
  column-width: 100px;
  column-gap: 10px;
  column-rule: none; 
}

Om tot de totale breedte van de div te komen, moet de volgende optelsom gemaakt worden:

column_count * column_width + (column_count-1) * (column_rule_width) + (column_count-1) * column_gap)

Comments

Leave your own comment »

Leave a Reply

Keep it polite and on-topic please.

The Fine print™: By submitting a comment here you grant this site a perpetual license to reproduce your words and name/web site in attribution.
Your email is never published nor shared. Required fields are marked *