How to position text in the web page

Example sitesUnderstand DB to HTML
Adding TextAdding picturesBuildUploadPage layoutsSetupMedia filesGraphic textAdd tablesPhoto albumCode GeneratorsStyleSItemap pages etcCD-Rom
Special TagsSetupPage LayoutMenu LayoutLinked sitesAuto-sequenceMore custom tagsTablesPhoto albumStylesheetsSitemapsAccessibility


Increase font size Decrease font size Reset to default



 Developed by Engineering Adventures



Last Updated


Locate text or make it flow around images or in columns etc

go to top arrow Be careful as line breaks and text end tags

Be careful using line breaks within other HTML tags.

One peculiarity of Pure SEO CMS is that it adds the (/p)(p) tags every time you start a new line. This is fine and easy but must be remembered if you try to be clever. You must not add line breaks in the middle of code but should use the line break (br /) character instead.

View the page source to see whats happening if you get any problems.

You can change what it adds by changing the parastart.txt and paraend.txt files in the default directory. As standard these contain the (p) and (/p) but can be changed to anything or left empty.

go to top arrow Placing the title text in every page

code example

Place the above Title tag anywhere on the template page and the Title text for that page will be placed there. Any tag can also be repeated in the META tag, hidden or alternate text areas as well as displayed within the site.

code example

The above summary text tag can also be place anywhere in the template and is also useful for the page META description, as reference by many search engines.

code example

The above author tag is also useful if you want to place a picture or note on a page.

code example

The above reference tag can also be placed anywhere on the page and was thought that it might be useful for a date or product code.


The Ref or Title tag will place the reference or Title text if no ref text is available. This is for lazy SEO people. Use the ref text box to add a unique hidden page title but if you don't put anything in it will use the page title.

go to top arrow Basic text headings, paragraphs and images

The "Begin" and "End Records Section" defines the start and finish of where the main text paragraphs, headings and pictures will be repeated throughout the page.

You can use any html between these tags control the way the content is displayed. The html code for the picture is held in a picture.txt file in the default directory. Every part of the code can be modified to your own requirements.

Basic paragraph example

go to top arrow More complex paragraph text controls

The following shows what extra features can be used.

Paragraph example with more features

This example shows a style toggle, anchor tag and image in the heading bar, a spacer div to overcome some browser differences.

The table wrapper is sometimes used to overcome an IE6 bug. You can remove it if you include the IE6 hack page included in this site. Common issues are using transparent backgrounds that IE6 does not like or not using position: relative for pageframe and articlepicture layouts.

go to top arrow Adding Pictures and Movies

The standard pictures, movie or script is located with the following tag.

Adding Pictures and Movies

The program recognises whether you ask for a picture, Flash, video or text file and then add the necessary code. You can change the code that controls the way each file type is displayed via the picture.txt, flash.txt or video.txt files in the default directory. Lot in the setup screen to see where the default directory is located and select a new directory if you change these files. There are various examples showing how to control the picture location and borders.

go to top arrow Adding CSS grid layouts

CSS grids are increasingly popular for laying out complex web pages.

Version 3.6 on has a grid system that can call different widths or styles for each paragraph. This requires the following, or similar, tags in the template and stylesheet. All the program does is replace the gridname tag with the drop down list line number.

Basic CSS Grid Layout Example

If the new row drop down is selected the program places the contents of the newrow.txt file from the default directory at the end of the repeated paragraph section.

You can also change the words in the drop down list by editing the gridnames.txt file in the program files text0 folder.

Turn the grid off if you don't have the grid tag in your template and this message will not keep appearing.

go to top arrow Other layout options

You may feel this repeating paragraph layouts is a bit limiting as every page looks the same, however, keeping a common format helps the user find information and is therefore a good thing. You can also apply a separate template or use some of the page or box tag identifiers to switch different stylesheets based on page, group, paragraph number or toggles etc. adding a style1 or style2 etc. in the style sheet list.

go to top arrow Make text flow around images or pictures

With some knowledge of CSS it's easy to make text flow around images or just make pretty shapes in the article text area.

This example uses the code below.

We've split this into code for the stylesheets and code to place in the page but you should organise this as required. It may be better to place everything in the template or custom scripts folder.

Place this code where the gaps will be

Place this code in the style sheet

go to top arrow Adding forms, tables or other custom codes

You can also load a *.txt file via the 'Add Extras' button and then place this code at the point where this tag is placed.

This is very powerful because it will allow you to include custom codes at any point within the website. Our demo site includes an example of a feedback form although any .html or JavaScript code can be added by simply saving it as a *.txt file and then calling it back at the point you need it displayed.

When writing JavaScript utilities you should know that often you have to add scripts to the head, body or main text regions of a page. If you look at our example you will see we have added some special tags that allow Pure SEO-CMS to recognise which part of the script goes where. This layout should be simple to follow and will allow you to load any JavaScript code whenever you require.

Of course with more advanced websites this facility can also be extended by using the server side include commands and VB scripts etc.

Previous Page   Next Page

Introduction | How to make site | Advanced Design | FAQ help | Contact | Top
© Copyright Engineering Adventures , all rights reserved.