SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: Two Boxes
-
Sep 4, 2007, 02:27 #1
- 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
-
Sep 4, 2007, 05:29 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 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.
-
Sep 4, 2007, 06:45 #3
- 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
-
Sep 4, 2007, 07:02 #4
- 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?
-
Sep 4, 2007, 07:14 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 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?
-
Sep 4, 2007, 07:17 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 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