openstack team mailing list archive

[Sébastien Santoro <dereckson@xxxxxxxxxxxxxx>]

On Tue, Dec 18, 2012 at 11:03 AM, Thierry Carrez <thierry@xxxxxxxxxxxxx> wrote:
> The most obvious issue is how ugly the new main page is :) The loss of
> image inclusion and columns transformed an admittedly not perfect page
> (disclaimer: I authored it) into something unreadable and very
> unwelcoming. Note that it's probably the only page that uses column
> layout, so maybe we can just special case the main page rather than
> write a generic column-handler.

To create a multi column layout on MediaWiki, I use the following technique:

(1) Add in [[MediaWiki:Common.css]] a 960 Grid code - http://grids.heroku.com/

The explanation of the concept is on http://960.gs/.

An example on http://www.wolfplex.org/w/index.php?title=MediaWiki:Common.css&action=edit
(a grid of 12 columns, scroll to one quarter, or find "960" to find
the relevant CSS start)

(2) Use a classic CSS div layout.

For two columns with generous spaces:

<div class="container_12">
        <div class="grid_5 alpha suffix_2">Content of the first col</div>
        <div class="grid_5 omega">Content of the second col</div>
        <div class="clear"></div>
</div>

For a three columns layout and generous spaces, I think it would work
better with a 16 cols grid:

<div class="container_16">
        <div class="grid_4 alpha suffix_2">Content of the first col</div>
        <div class="grid_4 suffix_2">Content of the second col</div>
        <div class="grid_4 omega">Content of the third col</div>
        <div class="clear"></div>
</div>

If the columns has to be more compact, stick with a 12 grid:

<div class="container_12">
        <div class="grid_4 alpha">Content of the first col</div>
        <div class="grid_4">Content of the second col</div>
        <div class="grid_4 omega">Content of the third col</div>
        <div class="clear"></div>
</div>

-- 
Best Regards,
Sébastien Santoro aka Dereckson
http://www.dereckson.be/