Rmoving table and Creating 2 column list

[pernes]

Hi I am trying to remove a 2 column table and replace it with a 2 column list, but I can't get it to display properly. I also need to be able to add a header between the list to split up th information for monthly purposes. Copy of page I am trying to change:
http://www.wealden.gov.uk/Council/Me...006/index.aspx

Can anyone help? Thanks

Changes to the page when adding new media releases is done via Macromedia Contribute.

Css code:
ul.left {
float: left;
width: 550px;
margin: 0px;
padding: 10px 0px;
border: 0px none;
list-style-position: outside;
list-style-type: none;
position: relative;
list-style-image: none;

}

ul.right {
float: right;
width: 150px;
margin: 0px -15px 0 0;
padding: 10px 0px;
border: 0px none;
list-style-position: outside;
list-style-type: none;
list-style-image: none;
}

.no-space #h2 {
font-weight: bold;
}
.no-space {text-align: center;
padding: 0px;
}

Some of the code used so far:
<p class="no-space">October</p>
<ul class="left" >
<li>062 <a href="../062DisabilitySurvey.aspx">Help us improve our services </a></li>
</ul>
<ul class="left" style="margin-top: 0;">
<li>061 <a href="061LotteryRecognition.aspx">Lottery Recognition For Wealden's Hidden Talents. </a></li>
<li>060 <a href="60FraudulentClaim.aspx">Fraudulent claimant found out</a>.</li>
<li>059 <a href="59SupermarketsAskedToHelpMakeWealden.aspx">Supermarkets Asked To Help Make Wealden More Sustainable.</a></li>
<li>058 <a href="058GardensofNationalHistoricImportance._000.aspx">Wealden&rsquo;s Gardens of National Historic Importance.</a></li>
</ul>
<ul class="right" >
<li>06 October </li>
<li>29 September</li>
<li>25 September</li>
<li>25 September</li>
<li>20 September</li>
</ul>

[mwinter]

Hi I am trying to remove a 2 column table and replace it with a 2 column list, but I can't get it to display properly. I also need to be able to add a header between the list to split up th information for monthly purposes. Copy of page I am trying to change:
http://www.wealden.gov.uk/Council/Me...006/index.aspx

Don't. It's tabular data, so it should be marked up using a table. You can drastically improve the structure, though:

<table>
    <tbody id="october">
        <tr>
            <th colspan="3" scope="rowgroup">October</th>
        </tr>
        <tr>
            <td>062</td>
            <td><a href="062DisabilitySurvey.aspx">Help us improve our services</a></td>
            <td>06 October</td>
        </tr>
    </tbody>

    <tbody id="september">
        <tr>
            <th colspan="3" scope="rowgroup">September</th>
        </tr>
        <tr>
            <td>061</td>
            <td><a href="061LotteryRecognition.aspx">Lottery Recognition For Wealden’s Hidden Talents</a></td>
            <td>29 September</td>
        </tr>
        <tr>
            <td>060</td>
            <td><a href="60FraudulentClaim.aspx">Fraudulent claimant found out</a></td>
            <td>25 September</td>
        </tr>
        <!-- ... -->
    </tbody>
</table>

The only changes to be made to that should be via CSS.

I hope, during the rewrite, you're planning on getting rid of things like:

<p style="margin-top: 0; margin-bottom: 0;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>

Vertical separation should be acheived using margins, and empty (including whitespace-only) paragraphs and similar elements are very bad form. In-line style attributes should be avoided, too.

ul.left {
float: left;
width: 550px;

Dimensions for elements containing text should not usually be defined using pixel lengths. Such elements won't scale at different font sizes, which tends to lead to rigid, fragile layouts. Use em lengths, instead. An exception is when images are involved and clipping is undesirable, though be careful not to make the document too wide.

list-style-position: outside;
list-style-type: none;
position: relative;
list-style-image: none;

The declaration:

list-style: none;

would have been simpler.

Hope that helps,
Mike

[pernes]

I hope, during the rewrite, you're planning on getting rid of things like:

<p style="margin-top: 0; margin-bottom: 0;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>

Vertical separation should be acheived using margins, and empty (including whitespace-only) paragraphs and similar elements are very bad form. In-line style attributes should be avoided, too.

Thanks for your help, I will make some modifications to the page. We use Dreamweaver and it seems to add the margin etc which is annoying. Not sure if it is because a user creates a new page in Contribute from a selection of templates and adds the content only.