Skip Navigation

www.wimb.net - Page Layout



CSS Page Layout

The main content of the site is placed in a (content) div on the index.php. In this content div some other divs are used to separate the content div in columns.

For these columns I've made a few "designs".
It are all made with "div" and they have a class to get them in the good shape and in the good position.
Here is an overview of the three divs used for the full page width :

  • txt - general, to place only text
  • txtimg - general, text goes on the left, images to the right
  • imgtxt - general, text goes to the right, images to the left

and here are the divs that separate the page in two columns :

  • kolom12 - two columns on the left
  • kolom3 - one column on the right

It's nothing special the content area is just divided in one, two or three columns.
The first three, txt, txtimg and imgtxt covers a 100% width. It is to place text only, or a combination of text and images.

div class="txt"

This column is only used to place text. It's width is over the full width of the page. In general there are no images in this div.

div class="txtimg"

www.wimb.net This column is used to place text and images. The images appears at the right side of the text. It's width is over the full width of the page. In general there are no images in this div.

div class="imgtxt"

www.wimb.net This column is used to place text and images. The images appears at the left side of the text. It's width is over the full width of the page. In general there are no images in this div.


kolom3

Place some
text here




















kolom12

The second page model is with two columns; a large one at the left and a small one at the right. The two columns can be of different length.
Only three columns are used:

  1. kolom123 - 100%, whole screen : txt, txtimg and imgtxt
  2. kolom12   - 60% left side
  3. kolom3     - 30% right side

As you can see, there are a few more possibilities.

  1. kolom1     - 30%, left side
  2. kolom23   - 60% right side
  3. kolom2     - 30% in the middle

Since there is already a column at the left side, the navigation menu, these last column types are not used here.

Other

This site undergoes continuously improvements. At any time the used system can be different from the system mentioned above.
Already on several places there are some variations on the system. At least, that keeps the things interesting.





















PID: 7002 CLT: 0.001 LMD: 2013-Aug-17

Updated 2007 Oct. 09