Putting boxes side-by-side

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Wes Groleau
    #1

    Putting boxes side-by-side

    I have a huge pile of open-source PHP, far too big for me to
    wrestle it into submission. It generates nested tables
    MANY layers deep.

    What I am trying to do is extract several small pieces from it and put
    each of those in a box (in a new file) and arrange those boxes my way.

    The layout I want is (you'll need fixed width font):

    +-----+-----+-----+-----+
    | PGF | PGM | MGF | MGM |
    +-----+-----+-----+-----+
    | father | mother |
    +-----------+-----------+
    | child |
    +-----------------------+
    | child |
    +-----------------------+

    The stuff in the boxes is very complicated and also includes nested
    tables, but I was hoping that making these boxes out of divs, I could
    put boundaries on the pieces and then clean them up later.

    So the divs, without contents, are
    <div class="FGS">

    <div class="grandpar ents" -->

    <div class="PGP">
    <div class="PGF">
    </div><!-- class="PGF" -->
    <div class="PGM">
    </div><!-- class="PGM" -->
    </div><!-- class="PGP" -->

    <div class="MGP">
    <div class="MGF">
    </div><!-- class="MGF" -->
    <div class="MGM">
    </div><!-- class="MGM" -->
    </div><!-- class="MGP" -->

    </div><!-- class="grandpar ents" -->

    <div class="parents" >

    <div class="father">
    </div><!-- class="father" -->

    <div class="mother">
    </div><!-- class="mother" -->

    </div><!-- class="parents" -->

    <div class="children ">
    </div><!-- class="children " -->

    </div><!-- class="FGS" -->

    Here's the CSS I tried (in FireFox on Mac), but all these divs are
    stacked up in a single vertical column:
    ..FGS, .grandparents, .parents, .children, .child
    {
    width: 100%;
    margin: 0;
    padding: 0;
    }

    ..PGF, .PGM, .MGF, .MGM
    {
    width: 25%;
    margin: 0;
    padding: 0;
    }

    ..father, .mother, .PGP, .MGP
    {
    width: 50%;
    margin: 0;
    padding: 0;
    }

    ..PGF, .MGF, .father
    {
    float: left;
    }

    ..PGM, .MGM, . mother
    {
    float: right;
    }

    Obviously trivial to do with a table, but I'd rather not.

    Thanks!

    --
    Wes Groleau

    Nobody believes a theoretical analysis -- except the guy who did it.
    Everybody believes an experimental analysis -- except the guy who
    did it.
    -- Unknown
    Tags: None
    • dorayme
      #2
      Re: Putting boxes side-by-side

      In article <ylzkj.723$Yl.2 62@trnddc01>,
      Wes Groleau <groleau+news@f reeshell.orgwro te:
      I have a huge pile of open-source PHP, far too big for me to
      wrestle it into submission. It generates nested tables
      MANY layers deep.
      >
      What I am trying to do is extract several small pieces from it and put
      each of those in a box (in a new file) and arrange those boxes my way.
      >
      The layout I want is (you'll need fixed width font):
      >
      +-----+-----+-----+-----+
      | PGF | PGM | MGF | MGM |
      +-----+-----+-----+-----+
      | father | mother |
      +-----------+-----------+
      | child |
      +-----------------------+
      | child |
      +-----------------------+
      >
      ....
      <div class="grandpar ents" -->
      >
      <div class="PGP">
      >
      Obviously trivial to do with a table, but I'd rather not.
      >
      First why would you rather not use a table? Second, if you are
      going to post masses of code, why would you not post code that
      did something rather than be hopelessly invalid. And third, what
      possible benefit are the (wrongly coded) comments for? Of course
      a <div class=""PGF"is a classed div with PGF as the name of the
      class.

      --
      dorayme

        Comment

        • Wes Groleau
          #3
          Re: Putting boxes side-by-side

          dorayme wrote:
          So? Why does this preclude you using a table for selected data in
          a separate file considering it looks rather like tabular data you
          It doesn't. But I'd still like to understand the CSS & div issue.
          are dealing with? I recall there being a relationship between the
          cells, perhaps you might argue it is not really tabular in spite
          of the appearance?
          If you look at http://UniGen.us/PGV/FGS?famid=F25&ged=wgroleau
          compared to [1] http://UniGen.us/PGV/FGS-div?famid=F25&ged=wgroleau
          you will see how the parents and grandparents were arranged in
          the old version. If you view source, you will see, though
          "spaghetti" might be hyperbole, why I want to simplify this thing.

          Of course you won't be able to see how complicated the PHP is
          unless you download it from www.phpgedview.net
          The original version is
          http://UniGen.us/PGV/family?famid=F25&ged=wgroleau


          Although a case could be made that it is tabular, the original
          (and many other parts of the code) uses much more complicated
          tables to produce layouts that are not tabular (e.g., the pedigree
          tree). I want to figure out ways to simpify it that will still
          allow using non-tabular formats without excessive tables.
          Don't get upset. I did not mean to offend you (perhaps I was not
          liking having to stay in Sunday yesterday to meet a Monday
          deadline <g>)
          Forgiven. I understand that situation!

          [1] Apologies that I have been working on the table version,
          so the two are probably not completely equivalent.

          --
          Wes Groleau

          Change is inevitable.
          Conservatives should learn that "inevitable " is not a synonym for "bad."
          Liberals need to learn that "inevitable " is not a synonym for "good."
          -- WWG

            Comment

            Previous template Next
            Working...