converting table layout to CSS

Discussion in 'HTML' started by shank, Sep 27, 2003.

  1. shank

    shank Guest

    I've just gotten serious about switching to CSS this week. I've been using
    CSS for text. Pretty simple. But when converting my table layout to CSS it's
    a bit daunting. My home page has 19 tables. I have 28 small graphics. This
    is what the client wants. Converting this to CSS is confusing...

    1) When validating, the validator red flags all the width="??" and
    border="0" attributes on graphics. Are they just supposed to be deleted? I
    thought those specs were designed to speed up the page viewing.

    2) In one area I have 10 small graphics spaced neatly in a 10 cell table and
    centered on the page. How do I accomplish something like that in CSS? I can
    see where positioning on the top-left of an element is done, but to do that
    for 10 graphics plus make sure they were centered on the page as group would
    take forever. What am I missing?

    3) Using the example of those 10 small graphics, I have 1 or 2 word snippets
    below them. I do I align those snippets centered with respect to each
    graphic?

    4) The home page header is an include file. How do I center an include on
    the main body?

    5) The body of the home page is layed out in 3 columns. How do I dupe that
    same layout?

    This group has been great!
    Thanks!
     
    shank, Sep 27, 2003
    #1
    1. Advertising

  2. shank

    picayunish Guest

    shank wrote in news:g_jdb.35665$:
    >
    > 1) When validating, the validator red flags all the width="??" and
    > border="0" attributes on graphics. Are they just supposed to be deleted?
    > I thought those specs were designed to speed up the page viewing.


    Use in the style sheet e.g.:
    img {width: 18px; height: 18px; border: 0px;}
    --
    Edwin van der Vaart (Geen familie van....)
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://members.chello.nl/e.vandervaart/ Experimental site
     
    picayunish, Sep 27, 2003
    #2
    1. Advertising

  3. > Use in the style sheet e.g.:
    > img {width: 18px; height: 18px; border: 0px;}


    when images have different heights/widths, this might be of use:

    CSS Code:
    ---------------------------------------------
    img { border: 0; }

    #img-Header { height: (XX)px; width: (XX)px; }

    #img-Button { height: (XX)px; width: (XX)px; }

    etc.

    (X)HTML Code:
    ---------------------------------------------
    <img id="img-Header" src="myFile.gif" />

    <img id="img-Button" src="button.gif" />

    Nick.
     
    e n | c k m a, Sep 28, 2003
    #3
  4. shank

    rf Guest

    "shank" <> wrote in message
    news:g_jdb.35665$...
    > I've just gotten serious about switching to CSS this week. I've been using
    > CSS for text. Pretty simple. But when converting my table layout to CSS

    it's
    > a bit daunting. My home page has 19 tables. I have 28 small graphics. This
    > is what the client wants. Converting this to CSS is confusing...
    >
    > 1) When validating, the validator red flags all the width="??" and


    Where, URL? Width on an image is not an error.

    > border="0" attributes on graphics. Are they just supposed to be deleted? I


    Yep. Border is deprecated. Use CSS.

    > thought those specs were designed to speed up the page viewing.


    Border is a presentational issue and is relegated to CSS. Width and height
    is part of the image and therefore part of the content.

    > 2) In one area I have 10 small graphics spaced neatly in a 10 cell table

    and
    > centered on the page. How do I accomplish something like that in CSS?


    You rethink your design. Why do you have 10 graphics to start with? If they
    are links than you might use an image map.

    > I can
    > see where positioning on the top-left of an element is done, but to do

    that
    > for 10 graphics plus make sure they were centered on the page as group

    would
    > take forever. What am I missing?


    URL? Maybe just plonk the graphics in as part of the content. They should
    just follow each other in the flow.

    > 3) Using the example of those 10 small graphics, I have 1 or 2 word

    snippets
    > below them. I do I align those snippets centered with respect to each
    > graphic?


    Ah, it gets better. A URL is now required. Probably stick the image and the
    description in div's and float them left. You will not get a chance to
    center them though.

    > 4) The home page header is an include file. How do I center an include on
    > the main body?


    What sort of include? SSI? If so then you center it the same way you center
    everything else. Apply margin: auto to the header element.
    >
    > 5) The body of the home page is layed out in 3 columns. How do I dupe that
    > same layout?


    Google for "three column css layout". There are thousands of them.

    Cheers
    Ricahrd.
     
    rf, Sep 28, 2003
    #4
  5. shank

    kchayka Guest

    rf wrote:

    > "shank" <> wrote in message
    > news:g_jdb.35665$...
    >>
    >> 2) In one area I have 10 small graphics spaced neatly in a 10 cell table
    >> and centered on the page. How do I accomplish something like that in CSS?

    >
    > You rethink your design. Why do you have 10 graphics to start with? If they
    > are links than you might use an image map.


    You might want to rethink using image maps, too. If you care much about
    accessibility, redundant text links are needed in addition to the image
    map. If you're not sure why, then try using the page with image-loading
    disabled. Virtually all graphical browsers suck at handling this.

    --
    To email a reply, remove (dash)un(dash). Mail sent to the un
    address is considered spam and automatically deleted.
     
    kchayka, Sep 28, 2003
    #5
  6. shank

    Wayfarer Guest

    Wayfarer, Sep 28, 2003
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    749
    clintonG
    Dec 24, 2004
  2. DavidB
    Replies:
    1
    Views:
    387
    Lauri Raittila
    Nov 19, 2004
  3. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,035
  4. Replies:
    1
    Views:
    604
    John Timney \(MVP\)
    Jun 19, 2006
  5. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,030
    Wÿrm
    Jun 20, 2006
Loading...

Share This Page