Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    jj1
    jj1 is offline
    Senior Member
    Join Date
    Oct 2008
    Posts
    319
    Member #
    17546
    I'm now trying to be good and to start replacing tables with CSS. For example, on our home page - http://www.uniquewebsites.co.uk/ - I want to replace the coloured-background table with the same design but using CSS.
    On a trial version on my PC, I've got part way there by creating two styles in my style sheet (tablehomeleftal and tablehomerightal):
    <p class="tablehomeleftal">
    <strong>Individual website design</strong>
    <br />
    including help with wording, SEO and a choice of web designs
    </p>
    <p class="tablehomerightal">
    <a class="rightaligntable" title="Website design Bury St Edmunds details" href="web-design/web-design.htm">Website Design Bury St Edmunds Info &gt;&gt;</a><br />
    </p>
    The trouble is, this leaves me with a white line in between the two paragraphs. When I try to make it all one paragraph, it doesn't work.
    Does anyone have any ideas on how to correct this? I keep reading about how you should use CSS and not tables, so I'm sure there must be something simple I'm overlooking.
    Many thanks to anyone who takes the trouble to reply.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    I don't see the white line.


  4. #3
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    If you are just adding the classes to the paragraph, then they will only apply to the text in those paragraphs. You need to wrap the paragraphs in a div, the use a class or id for the div.

  5. #4
    jj1
    jj1 is offline
    Senior Member
    Join Date
    Oct 2008
    Posts
    319
    Member #
    17546
    aeroweb99 - many thanks for your reply about the div. That gets rid of the white line between the two parts but I can't now seem to get the second part (website design Bury St Edmunds info) to be right-aligned - it's no longer left-aligned as per the first lines but it's now centred as can be seen in the example in the temporary location I've created: http://www.qwebsites.co.uk/ uniquetemp/temp/ temp.htm (excuse the spaces - I can't let Google index this). It is picking up the style sheet as I can get the size of the text to change just not be properly right aligned:
    <div class ="tablehomenoal">
    <p>
    <strong>Individual website design</strong>
    <br />
    including help with wording, SEO and a choice of web designs
    </p>
    <a class="tablehomerightal" title="Website design Bury St Edmunds details" href="web-design/web-design.htm">Website Design Bury St Edmunds Info &gt;&gt;</a><br />
    </div>
    My relevant style sheet entry is:
    .tablehomerightal {
    background-position: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    color: #000000;
    background-color: #FFCE9D;
    padding-right: 2px;
    padding-left: 2px;
    margin-left: 40px;
    margin-right: 40px;
    text-align: right;
    }
    Miseim - you won't see the white line on the live website as I'm experimenting on a trial version on my pc - I have however now uploaded the new results to a temporary location (see above).

  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I changed your code section here. Instead of adding a class to the "a" tag which I personally don't like to do, wrap it in a paragraph and add align="right". That's an easy fix. However, if you want control of that paragraph, wrap it in a div and give it a class of "tablehomerightal". Now it won't align to the right because of the margins you have set for it. I just got rid of the margins for that class as they aren't doing anything anyway. So here are 2 options for you.

    Option 1
    <div id="column_r">
    <h3>Heading</h3>
    <div class ="tablehomenoal">
    <p><strong>Individual website design</strong>

    <br />
    including help with wording, SEO and a choice of web designs
    </p>
    <p align="right"><a href="web-design/web-design.htm" title="Website design Bury St Edmunds details" >Website Design Bury St Edmunds Info &gt;&gt;</a></p>
    </div></div>

    Option 2
    <div id="column_r">
    <h3>Heading</h3>
    <div class ="tablehomenoal">
    <p><strong>Individual website design</strong>
    <br />
    including help with wording, SEO and a choice of web designs
    </p>
    <div class="tablehomerightal"><a href="web-design/web-design.htm" title="Website design Bury St Edmunds details" >Website Design Bury St Edmunds Info &gt;&gt;</a>
    </div>
    </div>
    </div>

    css (I just took the margins right out)
    .tablehomerightal {
    background-position: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000000;
    background-color: #FFCE9D;
    padding-right: 2px;
    padding-left: 2px;
    text-align: right;
    }


    Just a side note, I notice your graphics here and there are fuzzy and not looking as good as they should. You should use jpegs for the photo-like graphics. I noticed a couple of them were gifs which are terrible for photos: like your pic on your website and the site that has candles in the header. Just trying to help.

  7. #6
    jj1
    jj1 is offline
    Senior Member
    Join Date
    Oct 2008
    Posts
    319
    Member #
    17546
    aeroweb99 - many thanks for taking the trouble to give such detailed advice. I have spent a couple of hours trying both methods that you have suggested - and also variations upon them. Unfortunately, if I sort out the right alignment of the text then the size of the text doesn't change as requested; if I change that then the shaded background area doesn't centre.
    For now, I have decided to stick with the old table way as it is more important to me that the table looks right to the reader than that it is technically correct. But thank you so much for taking the trouble to help.
    You should use jpegs for the photo-like graphics
    Thanks for this. I do already use jpegs for photos but, have to admit, that I do use gifs for graphics created in Macromedia using different photos and text/backgrounds as they are smaller files for uploading. Having said that, will look at this again for the future.
    PS Sorry for not replying to your post earlier - one of my children took sick with a virus yesterday and so I've only just had the time to concentrate properly.

  8. #7
    jj1
    jj1 is offline
    Senior Member
    Join Date
    Oct 2008
    Posts
    319
    Member #
    17546
    aeroweb99 - just wanted to thank you again for the help on divs - I didn't manage to get it working for the more complex table on my own home page but have just now managed to use it for a less complicated layout on a client's website.
    Have also taken on board your comments about jpegs - saving a Macromedia map as a jpeg just recently definitely gave a clearer image.


Remove Ads

Posting Permissions

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

Search tags for this page

replacing a table with css

Click on a term to search for related topics.
All times are GMT -6. The time now is 09:28 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com