www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Using X,Y Coordinates to draw complex boxes for layout within a div as a thumbnail?

Hybrid View

  1. #1
    Join Date
    Apr 2011
    Location
    New Home Team - Everett, WA
    Posts
    261

    resolved [RESOLVED] Using X,Y Coordinates to draw complex boxes for layout within a div as a thumbnail?

    Ok, so I am using FPDF and PHP to make automatic dynamic flyers for my office and I was wondering if anyone could help me out in making a "thumbnail" of the document layout for the page that lets the user select which layout they want to use in the document before they open it...

    I've got a page in the CMS that I'm making; it lists all of the current flyer layouts that are available. There has to be several and I'm including an add/edit feature so it will be easier to deal with in the future too. I want to make a thumbnail of the layout beside the "edit this layout" type of link. The database has the dynamic info for each layout so for each "box" in the layout there is an X, Y, Height, and Width coordinate. (X and Y are for the top left point)

    Anyone know how I can produce a layout thumbnail (there are only 4-6 boxes used in the layout) for the layouts that actually uses the X,Y coordinates to position it properly? I can do inline-block with div's, but I don't know how to make them configure properly to be higher or lower and to overlap multiple lines.

    I can also calculate the amount of pixels for the top and left margins of each square within the layout, but I don't know how to make them line up together without the risk of overlapping or "escaping" the square they're in, which will be an "8.5 x 11" page ratio shrunk down to around 120px tall +\- to be the thumbnail and then scaled up to about 600px tall +\- once clicked-on (probably as a light-box) to "take a closer look" at the layout.

    Any help is greatly appreciated.

  2. #2
    Join Date
    Apr 2011
    Location
    New Home Team - Everett, WA
    Posts
    261
    What I am basically trying to do is override the order the div's are dropped to the page in. If I have 4 divs and I drop them in 1, 2, 3, 4 I want to be able to have 4 on the left side of 3 if I need to...

  3. #3
    Join Date
    Apr 2011
    Location
    New Home Team - Everett, WA
    Posts
    261
    I managed to work through it myself.

    I ended up using position:absolute and putting the layout boxes inside of the "page" box as separate divs with font size of 1px and the background colors set per box and each box with a different z-index just for good measure.

    Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles