I miss my tables

Discussion in 'HTML & Website Design' started by StickMaker, Jan 26, 2007.

  1. #1
    I'm trying to learn CSS here by re-doing this page without tables:
    http://www.sticksite.com/cottage/

    Am having trouble lining up text with pictures. I want it all lined up just like on the original page but I'm getting this mess:
    http://www.sticksite.com/cottage/index-NEWWWWWW.htm

    It is sort of like what I need is an imaginary line after each pic and its accompanying text, after which the next image with its text will follow. I'm using a huge lot of BR statements but if somebody looks at it with a different font size than what I use, it will be messed up anyway, so that's no good.

    Am trying to use the "floatLeft" and "floatRight" classes with little success.

    Will some genius please put me back on the straight and narrow? Thanks!
     
    StickMaker, Jan 26, 2007 IP
  2. unitedrokz

    unitedrokz Peon

    Messages:
    86
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    sometimes its still ok to use tables in your site design - in this case i dont necessarily think its that bad of an idea to keep the tables in.

    but if you really want css.....then it can obviously be done

    but you are going to have to use div's as well

    search two column layout or something similar in google and you should find some good tutorials there.....

    basically if it was me, i would have one overall div thats basically 100% by 100% and then two divs (left and right column) inside that are using float left and right classes that have a fixed width...that way it wont spread across the screen like it is now.

    then it will just be a matter of copying all the content into each of the divs.
     
    unitedrokz, Jan 26, 2007 IP
  3. ccoonen

    ccoonen Well-Known Member

    Messages:
    1,606
    Likes Received:
    71
    Best Answers:
    0
    Trophy Points:
    160
    #3
    Yah, you will want to create a Div structure (a wrapper) for each grouping

    so you would do to emulate your Table Structure

    Add the CSS:
    div.col { float:left; width:49%; }

    Add the xHTML:
    
    <div class="row">
      <div class="col">Here is my left column Data</div>
      <div class="col">Here is my right column Data</div>
    </div>
    <div class="row">
      <div class="col">Here is my left column Data</div>
      <div class="col">Here is my right column Data</div>
    </div>
    
    Code (markup):
     
    ccoonen, Jan 26, 2007 IP
  4. StickMaker

    StickMaker Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thank you both.

    It looked like changing my "P" tags to:
    <p class="clear">
    HTML:
    would do it but while it seems to work 100% in another sample page I played with, it does not work here.
     
    StickMaker, Jan 27, 2007 IP
  5. StickMaker

    StickMaker Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    And, of course, adding this to my stylesheet:
     
    StickMaker, Jan 27, 2007 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    Make that
    
    clear: both;
    Code (markup):
    cheers,

    gary
     
    kk5st, Jan 27, 2007 IP
  7. Subfusion

    Subfusion Member

    Messages:
    56
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #7
    You should only use tables in your design to display tabular data!
     
    Subfusion, Jan 28, 2007 IP
  8. unitedrokz

    unitedrokz Peon

    Messages:
    86
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #8
    did you look at the page he had originally - it was a 2 column layout with the content being a step guide to cabin maintenance on the left and a supporting image on the right.

    IMO that kind of content would justify the use of a simple 2 column table!
     
    unitedrokz, Jan 28, 2007 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    Actually, not. Tabular data, tables if you will, derive their meanings from their positions in the record. Eg., if you decide to put a phone number in the address slot, the data validity is destroyed. In this case, the pics could be to either side without affecting the information. So it is, in no way, a table.

    cheers,

    gary
     
    kk5st, Jan 28, 2007 IP
  10. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #10
    @StickMaker:

    I made a short version of your page. I included variations so that you could see how to handle different aspects. See my Enclosing Float Elements demo, and note how it was applied here.

    As you move your content into a well structured document, validate the html and css often. Fix errors immediately. Don't let them pile up, or debugging will be a cast iron b!tch.

    Take a look at your background image. At window sizes larger than 1024×768px, the page breaks. Blend the edges to a solid color, and use that color as your base background color.
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          lang="en">
      <head>
        <title></title>
        <meta name="generator"
              content=
              "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
        <meta http-equiv="content-type"
              content="text/html; charset=utf-8" />
        <meta name="editor"
              content="Emacs 21" />
        <meta name="author"
              content="Gary Turner" />
    <style type="text/css">
      /*<![CDATA[*/
    html, body {
        margin: 0;
        padding: 0;
        }
    
    body {
        font: 100% verdana, helvetica, sans-serif;
        line-height: 1.4;
        color: #333;
        background: #fefefe 
            url(http://www.sticksite.com/cottage/cabinback.jpg) 
            center fixed no-repeat;
        }
    
    p {
        font-size: 1em;
        margin-bottom: 0;
        }
    
    p.enclosing {
        overflow: hidden;
        width: 100%; /*required for IE6*/
        }
       
    h1, h2, h3 {
        font-family: georgia, serif;
        }
    
    img {
        margin: 0 20px;
        border: 5px solid #008000;
        }
    
    a img,
    h1 img {
        border: none;
        }
    
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        }
    
    li {
        margin-top: 2.8em;
        overflow: hidden;
        width: 100%;  /*required by IE6*/
        }
    
    li p:first-child:first-line {
        font-weight: bold;
        }
    
    #wrapper {
        width: 90%;
        margin: 0 auto;
        }
    
    .side-a {
        float: left;
        }
    
    .side-b {
        float: right;
        }
    
    /*allows you to flip-flop sides without confusion*/
    
    
    /*]]>*/
    </style>
    
      </head>
      <body>
        <div id="wrapper">
          <h1>
            <img src="http://www.sticksite.com/cottage/tipshead.jpg"
                class="no-border"
                alt="Tips, Ideas and Suggestions" />
          </h1>
          <h2>
            For Cottage / Cabin Owners
          </h2>
    
          <p>
            This list will, hopefully, be changing constantly as YOU
            offer your suggestions. If YOU have suggestions, I'd love
            to hear from you. Thanks - ken
          </p>
          <p>
            These are not grouped under headings nor in any particular
            sequence, as many of them would have to be listed under
            several headings.
          </p>
          <ul>
            <li>
              <p>
                <img src=
                "http://www.sticksite.com/cottage/bluebirds.jpg"
                   class="side-a"
                   width="300"
                   height="225"
                   alt="blue birds at the feeder"
                   title="bluebirds" /><img src=
                   "http://www.sticksite.com/cottage/birdfeeder.jpg"
                   class="side-b"
                   width="225"
                   height="559"
                   alt="bird feeder"
                   title="birdfeeder" />Set up a bird feeder. To make
                   the feeder more "user friendly" add a branch from a
                   tree. Tape a piece of pipe to the bird-feeder pole
                   and set a can of water under it. This way when the
                   branch dies you can replace it with a fresh one.
                   Here is mine. (see below for an <a href=
                   "#improved-birdfeeder"
                   rel="no-follow">improved version</a>) 
                   <!-- Notice the named ref, rather than depending 
                        on that item being #71. Doing it this way 
                        lets you insert or move things without 
                        breaking cross-references -->
    
              </p>
              <p>
                The birds are sometimes uncomfortable with a feeder and
                a branch helps overcome any fears. Plus, often, one
                will feed while another keeps watch, sitting in the
                branch. Here it is being enjoyed:
              </p>
              <p>
                I put the feeder "just the right" distance from the
                window so as to give them as little reason for
                discomfort and to give me the maximum opportunity to
                take their pictures."
              </p>
            </li>
            <li>
              <p>
    
                <img src="http://www.sticksite.com/cottage/shower.jpg"
                   class="side-a"
                   width="350"
                   height="371"
                   alt="solar heated shower"
                   title="portable shower" />If you do not have a hot
                   shower, rig one up as we did at very low cost. You
                   can get the bag in many stores which sell camping
                   gear and we made a rig so that when it is not too
                   hot out, we can put this thing into an insulated box
                   with a glass top. It got so hot that the seam at the
                   top of the bag gave out. We put a strong handle on
                   it as you can see here. At night we lay the bag with
                   its plywood support, on a shelf at a slope. We stand
                   in a rubber tub intended as a cattle watering
                   trough, and we hung plastic from a mattress around
                   it. Works GREAT and the cost was near zero. The only
                   downside: it is tough in such a small tub, to shower
                   with a friend.
              </p>
            </li>
            <li id="improved-birdfeeder">
              <p>
                <img src=
                "http://www.sticksite.com/cottage/birdfeed.jpg"
                   class="side-b"
                   width="250"
                   height="606"
                   alt="improved bird feeder"
                   title="birdfeeder" />Our "New - Improved"
                   bird-feeder pole, made from, of course, Diamond
                   Willow!
              </p>
              <p>
                The base is made of 2 short pieces of 2x8 and is held
                down with short pieces of metal pipe loosely inserted
                through holes in that lumber. The idea here is to have
                it so that if a bear attacks it, the damage might be
                minimal.
              </p>
    
              <p>
                Now, I guess it is only "right" that I design a nicer,
                wood bird-feeder to replace this tacky plastic one.
              </p>
            </li>
            <li>
              <p class="enclosing">
                <img src="http://www.sticksite.com/cottage/log.jpg"
                   class="side-b"
                   width="350"
                   height="262"
                   alt="log fence"
                   title="divider" />If your driveway looks a bit
                   "lame" you might be able to dress it up with a few
                   spruce trees planted along it. We did that on one
                   side and laid two logs (on blocks) along the other
                   side, well painted with wood preserver to keep out
                   those miserable ants.
              </p>
              <p class="enclosing">
                <img src=
                "http://www.sticksite.com/cottage/witerock.jpg"
                   class="side-a"
                   width="350"
                   height="262"
                   alt="white rocks"
                   title="white boulders" /> A couple of big white
                   rocks at the end help too. I poured small concrete
                   blocks to set the rocks on.
              </p>
    
              <p class="enclosing">
                <img src="http://www.sticksite.com/cottage/antler.jpg"
                   class="side-b"
                   width="350"
                   height="262"
                   alt="moose antlers"
                   title="antler sign" />So does a moose antler with
                   your name on it.
              </p>
            </li>
          </ul>
        </div><!-- end wrapper -->
      </body>
    </html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Jan 28, 2007 IP
  11. unitedrokz

    unitedrokz Peon

    Messages:
    86
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Thats why i said that its MY opinion. I know technically what you are saying is correct - my 3 and half year uni multimedia degree did teach me some things :D

    and i know personally i would have been using div's (like i said in my original post).... all i was also saying is that its not the worst thing in the world to have used tables as well........ im sure we have both seen much WORSE examples of tables being used when they shouldnt have.

    but alas, looking over your code now, you definately helped him out heaps and it looks good...so alls well that ends well :D
     
    unitedrokz, Jan 28, 2007 IP