Using CSS for Backgrounds / Objectives Layout (Advanced skill)

Posted on by

Last Revised by DSM on 6/5/2018. 

Overview:

This post offers CSS layout options that avoid the use of tables.  This is better for accessibility concerns.

 

Objectives page WITHOUT using tables:

Example:

Module Overview

Objectives:

  1. aaaaaaaaaaaaaa
  2. bbbbbbbbbbbbbb
  3. cccccccccccccccc


Learning Activities:

  1. ddddddddddddddd
  2. eeeeeeeeeeeeeeeeee
  3. fffffffffffffffffffffffffff

Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.

Code below
<h3>Module Overview</h3>
<div style="width: 80%; background-color: #D7E4F7; padding: 8px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: 2px 2px 2px #d5d5d5;">

<strong>Objectives: </strong>
<ol>
<li>aaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbb</li>
<li>cccccccccccccccc</li>
</ol>
</div>
&nbsp;<p>
<strong>Learning Activities:</strong></p>
<ol>
<li>ddddddddddddddd</li>
<li>eeeeeeeeeeeeeeeeee</li>
<li>fffffffffffffffffffffffffff</li>
</ol>
&nbsp;<p>
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
</p>

 

Related Posts: