tricky item for experts

Discussion in 'HTML' started by richard, Jun 2, 2012.

  1. richard

    richard Guest

    The problem sounds simple enough.
    A 3 column flexible layout.
    Column 1 is a row counter. Column 3 has an image.
    The problem is in colum 2.
    A minimum of four lines of text.
    With each text line having an unknown length of content.
    75% of column 2 will consist of an inner box.Highlighted with a border.
    From the center of the borders on either side will extend a horizontal
    rule.
    That part is not a problem. Except I can't get the horizontal rule
    precisely in the middle as desired.

    The tricky part, comes when the center box has more than two text lines.
    Thusly, the horizontal rule must also change its position to align with the
    center box.

    Below is the code and css I've got so far.
    You want a url? What? YOu don't know how to do copy and paste?


    ..rule, .label {float:left;}
    ..blank {clear:left;}
    ..label {padding:5px; width:250px; border:solid 1px #f00;}
    ..pic {75px;}
    ..rule { width:36px; display:table-cell; vertical-align:middle;}
    hr {color:#f00;}


    <table border="1">
    <tr>
    <td>1</td>
    <td>item1
    <div>
    <div class="rule"><hr></div>
    <div class="label">item2</div>
    <div class="rule"><hr></div>
    <div class="blank"></div>
    </div>
    item3
    </td>
    <td class="pic">image</td>
    </tr>
    </table>
    richard, Jun 2, 2012
    #1
    1. Advertising

  2. richard

    Andy Guest

    "richard" <> wrote in message
    news:...
    >
    > The problem sounds simple enough.
    > A 3 column flexible layout.
    > Column 1 is a row counter. Column 3 has an image.
    > The problem is in colum 2.
    > A minimum of four lines of text.
    > With each text line having an unknown length of content.
    > 75% of column 2 will consist of an inner box.Highlighted with a border.
    > From the center of the borders on either side will extend a horizontal
    > rule.
    > That part is not a problem. Except I can't get the horizontal rule
    > precisely in the middle as desired.
    >
    > The tricky part, comes when the center box has more than two text lines.
    > Thusly, the horizontal rule must also change its position to align with
    > the
    > center box.
    >
    > Below is the code and css I've got so far.
    > You want a url? What? YOu don't know how to do copy and paste?
    >
    >
    > .rule, .label {float:left;}
    > .blank {clear:left;}
    > .label {padding:5px; width:250px; border:solid 1px #f00;}
    > .pic {75px;}
    > .rule { width:36px; display:table-cell; vertical-align:middle;}
    > hr {color:#f00;}
    >
    >
    > <table border="1">
    > <tr>
    > <td>1</td>
    > <td>item1
    > <div>
    > <div class="rule"><hr></div>
    > <div class="label">item2</div>
    > <div class="rule"><hr></div>
    > <div class="blank"></div>
    > </div>
    > item3
    > </td>
    > <td class="pic">image</td>
    > </tr>
    > </table>
    >
    >



    Hi,

    Just a suggestion...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <body>

    <style>
    ..label { padding: 5px; width: 250px; border: solid 1px #f00; }
    ..pic { width: 75px; }
    ..rule { valign: middle; width:36px; }
    hr {color: #f00; }
    </style>

    <table border="1">
    <tr>
    <td>1</td>
    <td>
    item1

    <table cellspacing="0" cellpadding="0" border="0">
    <td class="rule"><hr></td>
    <td class="label">item2<br>item2a<br>item2b</td>
    <td class="rule"><hr></td>
    </table>

    item 3
    </td>
    <td class="pic">image</td>
    </tr>
    </table>

    </body>
    </html>


    Hope this helps

    Andy
    Andy, Jun 4, 2012
    #2
    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. ssoss

    Display Related Item or Add Item

    ssoss, Sep 17, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    467
    ssoss
    Sep 19, 2003
  2. Replies:
    2
    Views:
    596
  3. root

    item[LENGTH] vs. *item and malloc()

    root, Aug 21, 2003, in forum: C Programming
    Replies:
    2
    Views:
    370
    Eric Sosman
    Aug 21, 2003
  4. Replies:
    2
    Views:
    331
    Roger Upole
    Dec 20, 2006
  5. Replies:
    9
    Views:
    517
    CBFalconer
    Apr 25, 2006
Loading...

Share This Page