SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    After </ul> how do i make space?

    After

    Code:
    <ul class="tableY"><li class="lt"><div><font color="#800000"><b>Type</font></div></li>
            <li class="rt"><div>Total</b></div></li>
        </ul>
    how can I make space under it rather than </br></br></br></br> etc?

    Thanks

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    ul    {margin-bottom:2em;}
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.

    I tried this in-line. it didn't work.

    Code:
    <ul class="tableY" "margin-bottom: 3em";>
    Can you tell me how to do it in line?

    Thanks

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You really shouldn't be.

    But anyway:

    Code HTML4Strict:
    <ul class="tableY" style="margin-bottom:3em;">
        <li>something</li>
    </ul>
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply. I tired thsi and yes it creates a space below the table.
    However, the text below the table and the space, wraps up the right side of the table. Can you help me remedy that?

    For example:

    Code:
    <ul class="tableY" style="margin-bottom:3em;">    <li>something</li></ul>
    And the text below is "It's easy to see, blah, blah, blah..." but the word It's appeared next to the top of the <ul table, to the right of it, so the text below the table appears like this:
    easy to see, blah, blah, blah..

    Why is the word It's wrapping?
    Thanks

  6. #6
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Which table? There is only an unordered list mentioned. Can you show your code?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #7
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your interest in helping me.

    Here is the code:

    Code:
    <div id="column-wide">
          <div id="generic-container">
        <ul class="tableZ">
    	        <li class="lt"><div><font color="#800000"><b>Type</font></div></li>
    	        <li class="rt"><div>Number</b></div></li>
    	        <li class="lt"><div>x</div></li>
    	        <li class="rt"><div>y</div></li>
    	        <li class="lt"><div>z</div></li>
    	        <li class="rt"><div>2</div></li>
        </ul>
    <font size="2" color="#000000" face="Arial"><b>It is easy to see that the more text etc.</font><br><br>
          </div>
        </div>

  8. #8
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    ChrisjChrisj, do you also have the CSS?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  9. #9
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for your reply.
    Here is the css code:

    Code:
    ul.tableZ {
        width:232px;
        float: left;
        margin:0 0 0px 5px;
        padding: 0;
        list-style: none;
        border: solid #000;
        border-width: 0 1px 1px 0;
    }
    .tableZ li.lt {
    width: 115px;
        float:left;
        border: solid #000;
        border-width: 1px 0 0 1px;
    }
    .tableZ li.rt {
    width: 115px;
        float:right;
        border: solid #000;
        border-width: 1px 0 0 1px;
    }
    .tableZ li div {
        width: 110px;
        text-align: center;
        color: #000;
        font-size: 12px;
        padding: .4em 0;
    }

  10. #10
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Hi ChrisjChrisj,

    the text appears next to your unordered list because you're floating the unordered list with a fixed (and small width), so the element below it takes advantage of the available space and sits next to your floated element. If you want to prevent this, you should either not float your ul or clear the element after your ul.

    There are plenty of deprecated elements you're using. Also, this is plain tabular data, so you should be using the table element, not an unordered list element. This will also make it easier for you in this case.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  11. #11
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.

    Can you give me an example of how you would change this:

    Code:
    ul.tableZ {
        width:232px;
        float: left;
        margin:0 0 0px 5px;
        padding: 0;
        list-style: none;
        border: solid #000;
        border-width: 0 1px 1px 0;
    }
    .tableZ li.lt {
    width: 115px;
        float:left;
        border: solid #000;
        border-width: 1px 0 0 1px;
    }
    .tableZ li.rt {
    width: 115px;
        float:right;
        border: solid #000;
        border-width: 1px 0 0 1px;
    }
    .tableZ li div {
        width: 110px;
        text-align: center;
        color: #000;
        font-size: 12px;
        padding: .4em 0;
    }
    into "table elements"?
    Thanks

  12. #12
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Not a problem. Will get back to you in a min.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  13. #13
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Here's how I would translate your code:


    Code CSS:
    body {
        font:85&#37;/1.5 "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    }
     
    table.mytable {
        border-collapse: collapse;
        border:1px solid #000;
    }    
     
    table.mytable td, table.mytable th {
        border:1px solid #000; 
        padding:5px;
        vertical-align: middle;
        text-align: center;
    }
     
    .type {color: #800000;}

    And the HTML:

    Code HTML4Strict:
    <div id="column-wide">
        <div id="generic-container">
            <table class="mytable">
                <thead>
                    <tr>
                        <th class="type">Type</th>
                        <th>Number</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>x</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>y</td>
                        <td>2</td>
                    </tr>
                </tbody>
            </table>
            <p>It is easy to see that the more text etc.</p>
        </div>
    </div>
    Maleika E. A. | Rockatee | Twitter | Dribbble



  14. #14
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. That was very helpful. I appreciate it.

    Would you be interested and telling me how I could put these tables
    side-by-side? (with some space in between them?)

    Thanks

  15. #15
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    If you inspect the code I gave you, you will be able to figure out how to expand the table data or table rows.

    Unless you mean something else?
    Maleika E. A. | Rockatee | Twitter | Dribbble



  16. #16
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I inspected the html code and duplicated it, so that I had two tables.
    And then I tried to have the two tables them appear side-by-side, by adding in float:left; clear:left: etc, to the css code, but I didn't succeed. So any help in getting the two tables to appear side-by-side, would be appreciated.

  17. #17
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You can give your tables a width and float them.

    An example:

    Code CSS:
    body {
        font:85&#37;/1.5 "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    }
     
    table.mytable {
        border-collapse: collapse;
        border:1px solid #000;
        width:50%;
        float:left;
    }    
     
    table.mytable td, table.mytable th {
        border:1px solid #000; 
        padding:5px;
        vertical-align: middle;
        text-align: center;
    }
     
    .type {color: #800000;}

    And the HTML:

    Code HTML4Strict:
    <div id="column-wide">
        <div id="generic-container">
            <table class="mytable">
                <thead>
                    <tr>
                        <th class="type">Type</th>
                        <th>Number</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>x</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>y</td>
                        <td>2</td>
                    </tr>
                </tbody>
            </table>
                    <table class="mytable">
                <thead>
                    <tr>
                        <th class="type">Type</th>
                        <th>Number</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>x</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>y</td>
                        <td>2</td>
                    </tr>
                </tbody>
            </table>
     
            <p>It is easy to see that the more text etc.</p>
        </div>
    </div>
    Maleika E. A. | Rockatee | Twitter | Dribbble



  18. #18
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    And then I tried to have the two tables them appear side-by-side, by adding in float:left; clear:left: etc,
    Well the floating you had right but do you understand what clear does? You often see it with floats but not to get things to float. It's more to stop things who come afterwards from coming up alongside or sitting up to high. Clearing a float means your next element always stays under the float and on a new line (even if that next element is a float too).


    You seem busy on your own thing, Chris, but if you have the time and can get a copy from your public library or something, you'll really like HTML Utopia: Desigining Without Tables Using CSS by Rachel Andrew and Dan Shafer, because esp the second half of the book really shows you how to make things do what you want with CSS, and also gives you good examples of HTML so you have a better idea of how to write that too. It's what got me and many others going in the right direction re CSS.


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
  •