Re: <div>s based layout -- HTML 4.01 Strict

[Davi Leal]

Antenore Gatta wrote:
> 1. Layout migration section by section.
>
> Identifying the sections and pages that will most benefit from the
> conversion will simplify the whole work.

All the pages share the 'main' <table>s layout.

> I think that as a good start we should focus our attention to the content,
> fixing headings and paragraphs, removing <br> and <b> (search for <b>ad and
> <br>eakfast ;-) , replacing where possible tables with div/lists, paddings
> and margins.
> Cleaning the base html tags styles.

Before uploading a modification to production we should check that removing 
<br>s, etc. do not break the look&feel.


I agree with you that smalls steps should be done when it is possible.

Removing the use of <table>s at the heading, menu, and log-in box can be one 
of such steps.  IMHO, experimenting just on a "Save as" copy of the HTML code 
of the home page is a good way to carry out this 'step'.

When all be right on such 'experiment', we will be able to modify the below 
files, which are used to build all the pages. Inside such files is coded 
the 'main' webapp layout:

  Layer-0__Site_entry_point/templates/web_page.tpl
  Layer-0__Site_entry_point/templates/header.tpl
  Layer-0__Site_entry_point/templates/menu.tpl
  Layer-0__Site_entry_point/templates/log_out_box.tpl
  Layer-0__Site_entry_point/templates/log_in_box.tpl
  Layer-0__Site_entry_point/templates/content.tpl

All the pages share such 'main' <table>s layout.

P.S.: As a start, it is OK we send to this email list the work done on 
the "Save as" copy of the HTML code. It is not needed modify the above files. 
That can be done later.


About the 'content' area of the pages, some have just <p> tags [1], others 
have even nested <table>s [2].

  [1] Layer-0__Site_entry_point/templates/FS_Business_Networks_content.tpl
  [2] Layer-0__Site_entry_point/templates/Qualifications_skills_form.tpl


I thought it would be good idea do not replace the content-area <table>s which 
are used to align form fields, because of I think we can not get the same 
form layout using <div>s and CSS!  We can not get all cells right aligned, as 
it is for example at the JobOffer view? Isn't it?


> 2. Logical divisions of content.
>
> This should the second logical step. We should identify our pages for
> logical divisions of content.
> I mean something like:
>
>    - Main menu
>    - Login/registration menu
>    - Option/languages menu
>    - Headers and footers
>    - Content
>    - Related information
>    - Others...
>
> And start to replace these with divs and lists (ul) where possible and/or
> fixing existing tables.

IMHO the current webapp use already a more or less logical division. Note the 
files listed above. Anyway, maybe there is room to improvement. However IMHO 
the main problem is the HTML and CSS which is used at the already identified 
logical divisions, not the logical divisions theyself.


> 3. Look and feel.
>
> When the content will be more organized and clean we can start to think
> about the look.
>
>    - Colors.
>    - Header style.
>    - Menus positioning.
>    - and so on...

Experimenting is always good! If we found something which we think improves 
the webapp we should use it.

I like the current 'clean' menu and languages control positioning. But if it 
can be improved, better!  Obviously, we should not upload to production a 
change which shows the webapp in a worse state.