Results 1 to 3 of 3

Thread: Rmoving table and Creating 2 column list

  1. #1
    Join Date
    Nov 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Rmoving table and Creating 2 column list

    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>

  2. #2
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by 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
    Don't. It's tabular data, so it should be marked up using a table. You can drastically improve the structure, though:

    HTML Code:
    <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:

    Code:
    <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:

    Code:
    list-style: none;
    would have been simpler.

    Hope that helps,
    Mike

  3. #3
    Join Date
    Nov 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    Code:
    <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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •