Middle Column above Left and Right Columns

Middle Column above Left and Right Columns

Luke Stirk發表於
Number of replies: 4
Hello, I was wondering if this is possible to do. What I want is, the Middle column to be 100% width across the top under the header, and then the sideblocks underneath this. Can anybody give me any guidance on whether this is possible or not? Thank you.
評比平均分數: -
In reply to Luke Stirk

Re: Middle Column above Left and Right Columns

Mary Evans發表於
Luke,

Why would you want to do that? It would create a very strange layout.
It would be easier to do in Moodle 2.0 as there is more flexibility with page layout.
I'm not too sure if it is possible in Moodle 1.9, at least, not without a lot of recoding.
However, there is nothing stopping you adding an area above the main layout table.
Just add this at the end of your header in header.html before the main content starts.
<div id="table-top">
<table class="tabletop">
<tr>
<td>
Add your contents here...
</td>
</tr>
</table>
</div>

Then you will just need to add #tabletop and .tabletop to your CSS file and add some css code to make it look and work as you want it to...something like this...

div#tabletop {margin: 0; padding: 0; width: 100%; height: auto;}
table.tabletop {width: 98%; padding: 0 1%; margin: 0 }
Hope this helps?

Mary




In reply to Luke Stirk

Re: Middle Column above Left and Right Columns

Itamar Tzadok發表於
With a standard theme the following css might do the trick:

(all side blocks are placed in the right column!)

#middle-column,#right-column{display:table-row;}
#right-column div{vertical-align:top;}
div.sideblock,.skip-block-to{display:inline-block;}
div.sideblock{width:200px;}

The css basically renders the middle and right columns as table rows so you have in effect one column with two rows such that the middle column becomes the first row and right column the second row. Then the blocks are rendered inline-block which means multi-lines. The blocks should be assigned a fixed width (200 in the example above). Assigning also fixed height would make the display of the blocks tidier (try and you'll see what I mean). hth 微笑
In reply to Itamar Tzadok

Re: Middle Column above Left and Right Columns

Luke Stirk發表於
Thanks for the replies, I'll give this a go.

Basically, we are getting a demo site together for ASDA and they want a similar layout to http://www.asda.jobs/ So I was just seeing how this would look. Not sure how it would work. They want it to look more like a website than a Moodle.