SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict dionsiseire's Avatar
    Join Date
    Apr 2005
    Location
    Dublin
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text alignment without Table Cells

    Hey im looking for a simple way to redesign my data report to display without Table

    Before i started redesigning the tables were outputing data in a semi formated order

    Product : Detail
    Product : Detail

    The Table cells made sure that the product name and the details all started at the same point on the page just like all posts on the message boards start at a point

    i have all this content inside 1 div now, displaying using <p> for paragraphs and breaking where needed

    but my information looks like this

    Product : details
    Extended Version : details
    ID : details
    sanity : details

    making it slightly harder to read, ive bolded the left hand side of the : to make it a little better but id prefer if i could somehow make

    it read
    : details
    : details
    : details
    : details

    as i read down with the titles to the left still but there is spacing between the say
    product
    and the
    :

    ive tried
    &nbsp; but it aligns so badly it makes me want to cry
    any help on this would be great

    Cheers

    dionsis

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Any reason you don't want to use a standard table with borders? What you have is tabular data, that said it doesn't make too much sense to use divs.

  3. #3
    SitePoint Addict dionsiseire's Avatar
    Join Date
    Apr 2005
    Location
    Dublin
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well the page is loading a LOT of information generated from the database

    when i use tables the page can generate in upwards of 2 minutes to fully load

    when i use div's it loads in about 5-6 seconds

    thats my reason for choosing div's , but i need to align segments of code individually inside the div without using tables to slow it down

  4. #4
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Alright, well you could do this:

    HTML Code:
    <style type="text/css">
    .leftcell
    {
       float: left;
       text-align: right;
    }
    .rightcell
    {
       float: left;
       text-align: left;
       padding-left: 5px; /* give some spacing here to fake cell padding */
    }
    </style>
    
    <div>
      <div class="leftcell">Product</div><div class="rightcell">: details</div>
      <div class="leftcell">Blah</div><div class="rightcell">: etc</div>
    </div>

  5. #5
    SitePoint Addict dionsiseire's Avatar
    Join Date
    Apr 2005
    Location
    Dublin
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just tried that there

    i just lines the text up just like it were written side by side

    i.e. i got

    Product : details
    another product : details

    instead of the words before the :
    and then
    :details
    :details

    the colons need to align correctly independent of the length of the word before it

  6. #6
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, try defining widths on the divs (100px or so)

  7. #7
    SitePoint Addict dionsiseire's Avatar
    Join Date
    Apr 2005
    Location
    Dublin
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bingo - Right on the Button , Brilliant, Cheers for that

  8. #8
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, I thought that was it. Basically the div's will take up as much space as their child elements inside. The width is done to expand all divs to the same width, so text will align properly based on the width.

  9. #9
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It sounds like you need to paginate your data. Have you tried that?
    Bring out our hope and reason, before we pine away.

  10. #10
    SitePoint Addict dionsiseire's Avatar
    Join Date
    Apr 2005
    Location
    Dublin
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PMichaud
    It sounds like you need to paginate your data. Have you tried that?
    no were talking data layout here and his suggestion was perfect

  11. #11
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I ran into this issue today while trying to layout tabular-like data. I wanted to do it with a table but was told to do it with divs and css.

    The problem I came across is that I needed a containing div to have padding and a border, then I need to create divs inside of this to act as table rows. But some of these table rows have 2 column within them, others have three. And once I started floating things, it just became a mess.

    I had something similar to this:

    Code:
    <div>
     <div class="leftCol">Left column content</div>
     <div class="rightCol">Right column content</div>
    </div>
    <div>
     <div class="leftCol">Left column content</div>
     <div class="leftCol">Left column content</div>
     <div class="rightCol">Right column content</div>
    </div>
    Are there any more tutorials on how to make this work? With good examples?

  12. #12
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You were told not to use tables for displaying tabular data?!?
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  13. #13
    SitePoint Addict dionsiseire's Avatar
    Join Date
    Apr 2005
    Location
    Dublin
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if might be a project

    plus with the right code a div can be made to do anything you like
    tabulating shouldnt be too hard,


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •