Text layout in book

Text layout in book

by William Stapleton -
Number of replies: 2

I'm using book to display readable text and it works fine with one exception.  I'd like to display the text in 3 columns for easier reading.  I have generated html code with css to do this, and the text displays fine in my editor and as a preview.  However, when I copy the code into the <HTML> editor in the book module, it seems to just erase the tags and goes back to a 1 column format.  Any help would be much appreciated.  I've copied in the file for the code I'm using, in case someone wants to see it.

---

<title>Three Column CSS Layout</title>

<html>

<head>

<blockquote>

<p style="font:italic 24px Times New Roman; width:900px;">

"This is a block quote at the head of the page.  I'm using larger type and inset margins for typographical effect.  This should display as several lines of text and head up the page quite nicely.  "

</blockquote>

<blockquote>

<p style="text-align:right;">This is the Attribution Line for the Block Quote above"</right> </p></p>

</blockquote>

</p>

<style type="text/css">

body

{ line-height: 24px; position: relative; min-width: 750px; max-width: 1000px; width: 960px; background-color: #f7f1e7; color: #004080; font-size: medium; font-family: Georgia, "Times New Roman", Times, serif; margin-top: 10; margin-bottom: 0; margin-left: 0;  margin-right: 0; padding-left: 0; padding-right: 0;}

#left { padding-left: 6px;  padding-bottom: 5px;  padding-right: 5px;  padding-top: 128px;  margin-left: 20px;  position: absolute;  left: 5px;  top: 9px;  width: 300px;}

#center { padding-left: 0px;  padding-bottom: 0px;  padding-right: 0px;  padding-top: 16px;  margin-left: 330px;  top: 0px;  width: 300px;}

#right {  padding-left: 0px;  padding-bottom: 0px;  padding-right: 20px;  padding-top: 126px;  position: absolute;  margin-left: 630px;  right: 5px;  top: 10px;  width: 300px;}

</p>

<p style="font:16px/22px Garamond;>

</style> 

<div id="left">

<br>

Here would be text for column 1 on the Left side of the page.

</div>

<div id="center">

Here would be text for column 2 on the middle of the page

</div>

<div id="right">

<br>

Here would be text for column 3 on the right side of the page.

</p>

</div>

</html>

Average of ratings: -
In reply to William Stapleton

Re: Text layout in book

by cedric guindon -

Hello William

Some modifications are needed in order to make it work.

  1. Remove the title, html and head tag, you don't need them.
  2. Inserting the style tag in a web page is a bad idea, some browser will let you do it but it is not a good practice to do it, style should only be in the head section.  In Moodle, if you really need to add some custom styling, html or javascript, you can add it in the following section:  site administration -> Appearance -> Themes -> {Your theme} -> custom css  OR site administration -> Appearance -> {Your choice} (css should be in head section)
  3. The better way: Depending on your version of Moodle, you can use predefined styles to do what you're looking for, the recent Moodle versions (not sure on which version it started exactly) uses bootstrap v2.3.2, you can use the grid system http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem


Hope this helps

Average of ratings: Useful (1)
In reply to cedric guindon

Re: Text layout in book

by William Stapleton -

Thank you very much, Cedric.  I'm new to much of this and do so appreciate your advice.  I'll reformat as you've suggested.

William

Average of ratings: -