Reason for this Demo
This demo shows how to create multi-column layout with a header on top using only WYSIWYG features of Nvu version 0.9. An older version was used to prove that Nvu 0.90 did allow arbitrarily positioning text and graphics. During the design of the page we have used only Nvu's GUI and at no stage have we edited the source code. This in turn also shows the WYSIWYG capabilites of Nvu in web page design.
The page also shows that the CSS editor built into Nvu does has the capability of creating multiple columns. Please note that the CSS editor has not undergone any major change in functionality since Nvu 0.50.
Style Sheet Explanation
The style sheet consists of 5 major div elements used to create the multi-column layout. The div elements have been styled using the following ids:
- mastHead
- leftNav
- mainContent
- rightCol
- articleText
#mastHead is a simple div element used to contain the header portion of the page containing the text "Multi Column Demo" . The Nvu logo on the left side is attached to the div as a background image.
#leftNav is a block level div element having a width of 10em and is floated to the left side so as to accomodate the #mainContent div on its right side.
#mainContent div element acts as a contained for div elements with id #rightCol and #articleText. It was give a left margin of 11em to keep the visibility of #leftNav such that it stays on the left side of #mainContent block.
#rightCol and #articleText id div elements are positioned similarly to the #leftNav and #mainContent. The only difference being that the positioning is a mirror image in this case, as #articleText has a right margin this time and the #rightCol is floated to the right side.
Absolute Positioning
Nvu is able to do absolute positioning of images as well as text. IIRC Nvu has this capability atleast since version 0.50. The unwanted text box with a dark orange colored background under the left navigation column is an example of absolute positioning using Nvu's WYSWYG features.
Conclusion
We just proved with this page that Nvu is capable of absolute positioning of text (and images too) using its GUI. Its inbuilt CSS editor, CaScadeS, is capable enough to help create a multi-column layout using style rules.
An added advantage of using Nvu was that this page resulted into a document which was HTML 4.01 compliant. What else do we want from an open source WYSIWYG HTML editor!
