SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Two Boxes

  1. #1
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two Boxes

    Hi Folks,

    Using CSS, how do I create a page full of what's shown in the image found at the following URL?, with a 2px gap between each one.

    So when the page is printed, there should be roughly two rows of whats shown in the picture, with 10 on each?

    http://www.freewebs.com/ticstacs/Two%20Boxes.bmp

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I'm not really sure what you are asking but to get elements alongside each other you would need to float them there and use a margin for spacing.

    I couldn't really see what you were asking for from that image. Did you want 10 of those double boxes in a row? And if so - then what for?

    It would be easy to say just float the element there but it does all depend exactly on the dynamice of what is going to happen next.

    Printing web pages is a whole different issue as well and you may find that floated elements don't print very well and you would need to set up a print style sheet to get the printed output you require. However, even print style sheets can only handle basic things and it's best not to be too clever.

  3. #3
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I need two rows of 10 double boxes. But how?
    Is it possible to create 1 double box, then use JavaScript to loop through to create the others?

    There for Keyring inserts.

    TicTac

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the whole purpose of doing this is for printing then I'd have thought you'd have been better creating the keyring insert graphics in graphic software and printing directly from there?

    It sounds like you're trying to get a browser to do a job that it wasn't really meant to do?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    As I said you can simply float the elements.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    .row{
        width:910px;
        height:269px;
        margin:0;
        padding:0;
        list-style:none;
        clear:both;
    }
    .row li{
        float:left;
        margin:1px;
        width:89px;
        display:inline;
    }
    .box{
        width:87px;
        height:132px;
        border:1px solid #000;
    }
    .b2{border-top:none;}
    
    </style>
    </head>
    <body>
    <ul class="row">
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
    </ul>
    <ul class="row">
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
        <li>
            <div class="box">b1</div>
            <div class="box b2">b2</div>
        </li>
    </ul>
    </body>
    </html>
    Is it possible to create 1 double box, then use JavaScript to loop through to create the others?
    Yes it would be possible but that is a question for the javascript forum

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    As Dave said above you need to provide us with clear detailed information so that we can decide on which approach is best or whether you should be looking at other methods.


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
  •