Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Aug 2007
    Posts
    3
    Member #
    15679
    Hello to everyone,

    I want to code a layout which looks like this:

    Attachment 2768

    If it weren't for that vertical line in the middle, then it would simply be a two column table. But I want a line between two columns and I want it dotted, so setting right border of each first column cell won't do (or imagine I want a drawn line).

    So I use a table with rowspan, like that:

    HTML Code:
      <table class="Layout" cellpadding="0px" cellspacing="0px">
        <tr>
          <td class="Margin">test</td>
          <td class="Separator" rowspan="2"></td>
          <td class="Data">test</td>
        </tr>
        <tr>
          <td class="Margin">test2</td>
          <td class="Data">test2</td>
        </tr>
      </table>
    But here is my problem. I can't set the border of that middle cell properly. When the cell is empty, no border appears even if I set it width. I tried to put a div inside with height="100%" and it occured that cell height is less than the table height. How do I do it? Or maybe you'll suggest a total different way of coding such layout?

    Then I wanted to ask: is it possible to code that in pure CSS, no tables. I mean, you are speaking of total refusal from tables as layout elements, but I don't realise how to create and ordinary, 2x2 table layout on divs and spans. Any explanations or links will do.
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I think you could probably do this:

    HTML Code:
    <dl>
      <dt>test</dt>
      <dd>This is data in paragraph form for the test.</dd>
    
      <dt>test2</dt>
      <dd>This is more data in paragraph form for test2.</dd>
    </dl>
    With the following CSS:

    Code:
    dt
    {
        float: left;
    }
    
    dd
    {
        border-left: 1px dotted black;
        padding-left: 0.5em;
    }
    Disclaimer: I only tested in Firefox, and if you want to see it with the small amount of test data, you can set [minicode]body { width: 100px; }[/minicode] so that the body is really narrow and forces the content in the dds to wrap.

  4. #3
    Junior Member
    Join Date
    Aug 2007
    Posts
    3
    Member #
    15679
    Shadowfiend,

    Thanks for your reply. This really is a way to replace 2x2 table. But it features the same drawback as the table does: border is drawn for each of the blocks (cells in table), and with dotted line those junctions are visible.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    True. It actually isn't the junction that's visible so much as the end of some borders. That's really a border-drawing issue, and it's kind of annoying.

    Anyway, the other way to do it would be with a fixed-width left area and a background image.

  6. #5
    Junior Member
    Join Date
    Aug 2007
    Posts
    3
    Member #
    15679
    Shadowfiend,

    I did as you adviced and everything was well untill there was no text wrapping. What occured then is visible on a screenshot (IE7):

    Attachment 3826

    Any way to fix this?
    Attached Images Attached Images

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Ah, yes. Give the main text elements a left margin equal to the width of the word elements.

  8. #7
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    I would use tables for this, as it is tabular data (yes, in two columns, meaning a title and detail, but still tabular). And the dash can be added via the left border of the content column.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:52 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com