table cell spacing

Discussion in 'HTML' started by bbxrider, Jan 29, 2008.

  1. bbxrider

    bbxrider Guest

    this is the page i'm working on
    http://1614-douglas-road.com/spectrum.html

    i want to get the generous space between the images in the table preferably
    without borders
    so i have been using cellpadding and/or cellspacing
    the picture titles can be 2 lines, 'hammered small', so they seem to need
    their own row to be
    centered under the pic and the same padding/spacing as the row with the
    images, so they line up

    what i'm trying to do is have similar spacing to the way the page goes now,
    but get the pic titles
    closer to the actual pics

    have tried all kinds of colspan, &nbsp, separate tables for each row, etc
    but getting nowhere fast

    also not sure why table is not centering on page

    any suggestions would be appreciated
    bob
    bbxrider, Jan 29, 2008
    #1
    1. Advertising

  2. bbxrider

    Guest

    you can use this code for centering with css

    body {
    margin:50px 0px; padding:0px;
    text-align:center;
    }

    #Content {
    width:500px;
    margin:0px auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
    }
    (source:http://bluerobot.com/web/css/center1.html)

    and have you tried using padding yet?

    > images, so they line up
    >
    > what i'm trying to do is have similar spacing to the way the page goes now,
    > but get the pic titles
    > closer to the actual pics
    >
    > have tried all kinds of colspan, &nbsp, separate tables for each row, etc
    > but getting nowhere fast
    >
    > also not sure why table is not  centering on page
    >
    > any suggestions would be appreciated
    > bob
    , Jan 29, 2008
    #2
    1. Advertising

  3. bbxrider

    Guest

    this took me less than five minutes so i went the extra mile. i used
    code from blue robot and css listamatic since i thought it would be
    better if you used lists for the images you had.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
    <div id="content">
    <div id="navcontainer">
    <ul id="navlist">
    <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    </ul>
    <br />
    <ul id="navlist">
    <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    </ul>
    </div>
    </div>
    </body>
    </html>

    body {
    margin:50px 0px; padding:0px;
    text-align:center;
    }

    #Content {
    width:500px;
    margin:0px auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
    }

    ul#navlist
    {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
    }

    #navlist li
    {
    display: inline;
    list-style-type: none;
    }

    #navlist a { padding: 3px 10px; }

    #navlist a:link, #navlist a:visited
    {
    color: #fff;
    background-color: #036;
    text-decoration: none;
    }

    #navlist a:hover
    {
    color: #fff;
    background-color: #369;
    text-decoration: none;
    }

    ul>li{
    padding:0 0 0 100px;
    }
    , Jan 29, 2008
    #3
  4. bbxrider

    bbxrider Guest

    wow wish i was that fast,
    thought about lists but obviously never got that far
    will try all this soon and post back, with results
    thanks
    bob
    <> wrote in message
    news:...
    > this took me less than five minutes so i went the extra mile. i used
    > code from blue robot and css listamatic since i thought it would be
    > better if you used lists for the images you had.
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    > <html>
    > <head>
    > <link rel="stylesheet" type="text/css" href="main.css" />
    > </head>
    > <body>
    > <div id="content">
    > <div id="navcontainer">
    > <ul id="navlist">
    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    > </ul>
    > <br />
    > <ul id="navlist">
    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    > </ul>
    > </div>
    > </div>
    > </body>
    > </html>
    >
    > body {
    > margin:50px 0px; padding:0px;
    > text-align:center;
    > }
    >
    > #Content {
    > width:500px;
    > margin:0px auto;
    > text-align:left;
    > padding:15px;
    > border:1px dashed #333;
    > background-color:#eee;
    > }
    >
    > ul#navlist
    > {
    > margin-left: 0;
    > padding-left: 0;
    > white-space: nowrap;
    > }
    >
    > #navlist li
    > {
    > display: inline;
    > list-style-type: none;
    > }
    >
    > #navlist a { padding: 3px 10px; }
    >
    > #navlist a:link, #navlist a:visited
    > {
    > color: #fff;
    > background-color: #036;
    > text-decoration: none;
    > }
    >
    > #navlist a:hover
    > {
    > color: #fff;
    > background-color: #369;
    > text-decoration: none;
    > }
    >
    > ul>li{
    > padding:0 0 0 100px;
    > }
    bbxrider, Jan 29, 2008
    #4
  5. bbxrider

    John Hosking Guest

    wrote:

    [without quoting of the message he's replying to...]

    > this took me less than five minutes so i went the extra mile.


    How does boasting about the small amount of time you spent demonstrate
    that you made any "extra" effort? Or is this some droll humor?

    > i used
    > code from blue robot and css listamatic since i thought it would be
    > better if you used lists for the images you had.
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    XHTML is pointless. Stay with HTML 4.01, but use strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    > <html>
    > <head>
    > <link rel="stylesheet" type="text/css" href="main.css" />


    If you're going to pretend to provide the complete source, include the
    <title> element.

    > </head>
    > <body>
    > <div id="content">
    > <div id="navcontainer">


    Not sure what makes this array of images a "nav" element.

    > <ul id="navlist">
    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>


    All of the instances of heigh will need to become height.

    > </ul>
    > <br />
    > <ul id="navlist">


    Only one instance of an id per page, please. OP will need to validate
    all this code before spending much time with it. Might even have to
    spend *six* minutes on it. ;-)

    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    > <li><img src="img/40.jpg" width="40" heigh="40" /></li>
    > </ul>
    > </div>
    > </div>
    > </body>
    > </html>
    >
    > body {
    > margin:50px 0px; padding:0px;
    > text-align:center;
    > }
    >
    > #Content {


    Watch for case mismatch with "content".

    > width:500px;
    > margin:0px auto;
    > text-align:left;


    But you just gave body text-align:center.

    > padding:15px;
    > border:1px dashed #333;
    > background-color:#eee;
    > }
    > [...]


    >
    > #navlist a { padding: 3px 10px; }
    >
    > #navlist a:link, #navlist a:visited
    > {
    > color: #fff;
    > background-color: #036;
    > text-decoration: none;
    > }
    >
    > #navlist a:hover


    There aren't any <a> links in the suggested code. If there *were* any
    links, they wouldn't look like links.

    > {
    > color: #fff;
    > background-color: #369;
    > text-decoration: none;
    > }
    >
    > ul>li{


    So, you mean to affect list items which are *immediate children* of <ul>
    elements. You really mean it.

    > padding:0 0 0 100px;
    > }


    This code doesn't do the enlarge-on-hover trick I presumed the OP
    wanted, nor does it demonstrate captioned images in a grid.

    Etc.

    --
    John
    Read about the UIP: http://improve-usenet.org/
    John Hosking, Jan 29, 2008
    #5
    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. Ryan
    Replies:
    7
    Views:
    364
    mark4asp
    Dec 8, 2004
  2. Selden McCabe

    Table within a Table - spacing

    Selden McCabe, Jan 14, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    331
    MWells
    Jan 15, 2005
  3. Terry Olsen

    Datagrid Cell Spacing Wierdness

    Terry Olsen, Mar 28, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    545
    Terry Olsen
    Mar 29, 2005
  4. Replies:
    16
    Views:
    15,802
    Andy Dingley
    Sep 5, 2005
  5. Andrew Poulos

    Table creation with cell spacing of 0 on IE

    Andrew Poulos, Mar 22, 2005, in forum: Javascript
    Replies:
    1
    Views:
    95
    Martin Honnen
    Mar 22, 2005
Loading...

Share This Page