Trouble recreating layout sans tables
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I am attempting to use some of the different styles in the style guide to replace a layout which currently uses tables. I am not sure the best direction to head (grids? image text combo class?), and would really appreciate your advice. Below is an example of the tables I am attempting to recreate.
|
|
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
My colleagues and I have used inline CSS on <div> tags to structure content in a table style. Accessibility ought to be a key factor to consider when you do this as screen readers will attempt to read the content linearly, so my recommendation is to keep the 2 column format. It boils down to a basic starter template as shown below: Try this code in the html view of any RCE editor enabled area of Canvas:
<div>
<div style="width:100px;float:left;display:inline-block;">
<!-- The icon content goes here. Adjust the px value to suit the needs
of your icon or image -->
</div>
<div style="margin-left:100px;">
<!-- This is the text content. Note how the px value of the margin-left rule matches
width of the icon content div. Adjust as necessary -->
</div>
</div>
It might help to put some filler text in each div so you can switch back to the visual view of the RCE and add your content using the Canvas RCE toolbar and keyboard. You should be able to switch back to HTML view as needed.
When you are ready to make a new section repeat the pattern.
Hope that helps.