After an outage on September 1, the Instructure Community is now fully available, including guides, release notes, forums, and groups. If some styling still looks unusual, clear your cache and cookies.
Found this content helpful? Log in or sign up to leave a like!
2 Solutions
Sorry you're going through this. I understand you may not have the skills to update the whole course, but there is something I would like to suggest that may help.
As @SusanNiemeyer and @Chris_Hofer have already pointed out, tables should not be used for layout. If you want something that would allow you to achieve this type of layout, you can do this by dividing the content into DIV blocks and something called the box model. This essentially puts your DIV context into boxes that you can lay out as you like.
To get started on this quickly, make a new page, switch to HTML (view > HTML editor), paste this code.
<div class="content-box">
<div class="grid-row">
<div class="col-xs-6">
<h1>First bit of information</h1>
<p>content</p>
<hr />
</div>
<div class="col-xs-6">
<h1>Second bit of information</h1>
<p>content</p>
<hr />
</div>
</div>
</div>A few things to point out:
- This will essentially create two boxes of content. One on the left and one on the right.
- You can change the numbers to change the relative sizes of the content, so instead of 6 and 6, 8 and 4, etc, adding up to 12.
- If you switch back out of the HTML editor, you can make changes more easily. Notice that in the editing view, the content appears underneath each other instead of side by side. This can make it easier to edit.
- If you paste this HTML at the very top of a page that has the old content, you can copy and paste old content into the right places.
- You are not restricted to just two columns.
It might take a little bit of time to set up, but most of that will be time copying and pasting content from the old table into the new DIV. Just be careful to not copy a table into the DIV. This is what it can looks like with just some text in it:
Super post Peter and @StefanHenley , I've 'learned' all my HTML design from the brilliant posts of @peter and other colleagues - I can never remember exactly how to do things so keep a collection of template pages similar to what Peter has shown above.
For clarity, the design that Peter shows as an example has a few subtleties to the HTML. For some reason, ( I dont know why and this might not be exactly true bit works for me), when using content-box code the class for col-xs has to add up to 12 eg a two column table has col-xs-6 as the code above shows.
If you want a three column table then the class needs to be col-xs-4
Replicating Peter's example above eg
Would use the code:
<div class="content-box">
<div class="grid-row">
<div class="col-xs-6">
<h2>Top Row - 1st Column - Title</h2>
<p><span>Content for top row, left hand side column<hr />
</div>
<div class="col-xs-6">
<h2>Top Row - 2nd Column - Title</h2>
<p><span>Content for top row, right hand side column<hr />
</div>
</div>
<div class="grid-row">
<div class="col-xs-4">
<h3>2nd Row - 1st Column - Title</h3>
<p>Content for second row, left hand side column<hr />
</div>
<div class="col-xs-4">
<h3>2nd Row - 2nd Column - Title</h3>
<p><span>Content for second row, middle column<hr />
</div>
<div class="col-xs-4">
<h3>2nd Row - 3rd Column - Title</h3>
<p>Content for second row, right hand column column<hr />
</div>
</div>
</div>
I used the h2 and h3 tags for the subtitles.
Hope this helps..
Example 1: all tables aligned left (gap on the right)
Example 2: overlapping tables
Sorry you're going through this. I understand you may not have the skills to update the whole course, but there is something I would like to suggest that may help.
As @SusanNiemeyer and @Chris_Hofer have already pointed out, tables should not be used for layout. If you want something that would allow you to achieve this type of layout, you can do this by dividing the content into DIV blocks and something called the box model. This essentially puts your DIV context into boxes that you can lay out as you like.
To get started on this quickly, make a new page, switch to HTML (view > HTML editor), paste this code.
<div class="content-box">
<div class="grid-row">
<div class="col-xs-6">
<h1>First bit of information</h1>
<p>content</p>
<hr />
</div>
<div class="col-xs-6">
<h1>Second bit of information</h1>
<p>content</p>
<hr />
</div>
</div>
</div>A few things to point out:
- This will essentially create two boxes of content. One on the left and one on the right.
- You can change the numbers to change the relative sizes of the content, so instead of 6 and 6, 8 and 4, etc, adding up to 12.
- If you switch back out of the HTML editor, you can make changes more easily. Notice that in the editing view, the content appears underneath each other instead of side by side. This can make it easier to edit.
- If you paste this HTML at the very top of a page that has the old content, you can copy and paste old content into the right places.
- You are not restricted to just two columns.
It might take a little bit of time to set up, but most of that will be time copying and pasting content from the old table into the new DIV. Just be careful to not copy a table into the DIV. This is what it can looks like with just some text in it:
Super post Peter and @StefanHenley , I've 'learned' all my HTML design from the brilliant posts of @peter and other colleagues - I can never remember exactly how to do things so keep a collection of template pages similar to what Peter has shown above.
For clarity, the design that Peter shows as an example has a few subtleties to the HTML. For some reason, ( I dont know why and this might not be exactly true bit works for me), when using content-box code the class for col-xs has to add up to 12 eg a two column table has col-xs-6 as the code above shows.
If you want a three column table then the class needs to be col-xs-4
Replicating Peter's example above eg
Would use the code:
<div class="content-box">
<div class="grid-row">
<div class="col-xs-6">
<h2>Top Row - 1st Column - Title</h2>
<p><span>Content for top row, left hand side column<hr />
</div>
<div class="col-xs-6">
<h2>Top Row - 2nd Column - Title</h2>
<p><span>Content for top row, right hand side column<hr />
</div>
</div>
<div class="grid-row">
<div class="col-xs-4">
<h3>2nd Row - 1st Column - Title</h3>
<p>Content for second row, left hand side column<hr />
</div>
<div class="col-xs-4">
<h3>2nd Row - 2nd Column - Title</h3>
<p><span>Content for second row, middle column<hr />
</div>
<div class="col-xs-4">
<h3>2nd Row - 3rd Column - Title</h3>
<p>Content for second row, right hand column column<hr />
</div>
</div>
</div>
I used the h2 and h3 tags for the subtitles.
Hope this helps..
@petern @GideonWilliams thank you so much for your help and practical guidance.
I will re-do the course using your code: you're absolute lifesavers. As I go I may have additional questions. Just sharing a screenshot below of what I created real quick using your code.
@Chris_Hofer just to respond to an earlier comment: this course was 'redone' as a part of an audit about a year ago, usually the in house IT support do this for us, but this time it was outsourced to another company and I was never happy with its design. So thanks for your feedback on that and it helps me understand what it is going on.
Community help
To interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign in