Help:Structural page elements

Jump to: navigation, search

Columns

Two Columns

Classes for two column layouts are already predefined. The allow to divide the content part into the following ratios:

  • 75% / 25% (Classes c75l and c25r)
  • 66% / 33% (Classes c66l and c33r)
  • 62% / 38% (Classes c62l und c38r)
  • 50% / 50% (Classes c50l and c50r)
  • 38% / 62% (Classes c38l und c62r)
  • 33% / 66% (Classes c33l and c66r)
  • 25% / 75% (Classes c25l and c75r)

Nesting column classes is possible.

Left Column (62%)

This is the left column. It is 62% wide. This is the left column. It is 62% wide. This is the left column. It is 62% wide. This is the left column. It is 62% wide. This is the left column. It is 62% wide. This is the left column. It is 62% wide.

Right Column (38%)

This is the right column. It is 38% wide. This is the right column. It is 38% wide. This is the right column. It is 38% wide. This is the right column. It is 38% wide.

The code looks like this:

<!-- 2 Columns, ratio 66/33 -->
<div class="subcolumns">
 <div class="c68l">
  <div class="subcl">
   ...Content left column...
  </div>
 </div>
 <div class="c32r">
  <div class="subcr">
   ...Content right column...
  </div>
 </div>
</div>

Three Columns

Classes for three column layouts are already predefined. The allow to divide the content part into a 33% ratio.

Left Column (33%)

This is the left column. It is 33% wide. This is the left column. It is 33% wide. This is the left column. It is 33% wide. This is the left column. It is 33% wide.

Middle Column (33%)

This is the middle column. It is 33% wide. This is the middle column. It is 33% wide. This is the middle column. It is 33% wide.

Right Column (33%)

This is the right column. It is 33% wide. This is the right column. It is 33% wide. This is the right column. It is 33% wide. This is the right column. It is 33% wide.

The code looks like this:

<!-- 3 Columns, ratio 33/33/33 -->
<div class="subcolumns">
 <div class="c33l">
  <div class="subcl">
   ...Content left column...
  </div>
 </div>
 <div class="c33l">
  <div class="subc">
   ...Content middle column...
  </div>
 </div>
 <div class="c32r">
  <div class="subcr">
   ...Content right column...
  </div>
 </div>
</div>

Boxes

The boxes from the left menu can be used within the content area, too. They consist of a header and footer providing the round corners, an optional colored title bar, an optional colored footer and the content area. Therefore the box layout is very flexible with various combinations. Preferably use the boxes in combination with Columns.

Simple boxes

A Green Box

This is the content area of the green box. Any type of wiki/HTML markup may go here.

A Gray Box

This is the content area of the gray box. Any type of wiki/HTML markup may go here.


The Code looks like this:

<div class="green_box">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Box title...
  </div>
 </div>
 <div class="box_content">
  ...Content...
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>
<div class="grey_box">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Box title...
  </div>
 </div>
 <div class="box_content">
  ...Content...
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>

Double Boxes

A Green Double Box

This is the content area of the green double box. Any type of wiki/HTML markup may go here.

A Gray Double Box

This is the content area of the gray double box. Any type of wiki/HTML markup may go here.


The Code looks like this:

<div class="green_box_double">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Box title...
  </div>
 </div>
 <div class="box_content">
  ...Content...
 </div>
 <div class="box_footer_row">
  <div class="box_footer">
   ...Footer...
  </div>
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>
<div class="grey_box_double">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Box title...
  </div>
 </div>
 <div class="box_content">
  ...Content...
 </div>
 <div class="box_footer_row">
  <div class="box_footer">
   ...Footer...
  </div>
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>

Assembled Boxes

An Assembled Green Box

This is the content area of the green double box. Any type of wiki/HTML markup may go here.

Subtitle 1

This is another content area of the assembled green box. Any type of wiki/HTML markup may go here.

Subtitle 2

This is yet another content area of the assembled green box. Any type of wiki/HTML markup may go here.

An Assembled Gray Double Box

This is the content area of the gray double box. Any type of wiki/HTML markup may go here.

Subtitle

This is another content area of the assembled gray double box. Any type of wiki/HTML markup may go here.


The Code looks like this:

<div class="green_box">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Box title...
  </div>
 </div>
 <div class="box_content">
  ...Content...
 </div>
 <div class="box_title_row">
  <div class="box_title" style="padding-top: .5em">
   ...Subtitle1...
  </div>
 </div>
 <div class="box_content">
  ...Content1...
 </div>
 <div class="box_title_row">
  <div class="box_title" style="padding-top: .5em">
   ...Subtitle2...
  </div>
 </div>
 <div class="box_content">
  ...Content2...
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>
<div class="grey_box_double">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Box title...
  </div>
 </div>
 <div class="box_content">
  ...Content...
 </div>
 <div class="box_title_row">
  <div class="box_title" style="padding-top: .5em">
   ...Subtitle1...
  </div>
 </div>
 <div class="box_content">
  ...Content1...
 </div>
 <div class="box_footer_row">
  <div class="box_footer">
   ...Footer...
  </div>
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>