20 likes | 136 Views
23 Blueprint “gaps” (10px each). …. …. 950 px (span-24). 24 Blueprint “grid squares” (30px each). Top bounding image (wraptop.jpg). +. Header background image repeating-x (header_bg.jpg). +. map(fma.jpg). Note: The border will be overwritten by the background images colors. +.
E N D
23 Blueprint “gaps” (10px each) … … 950 px (span-24) 24 Blueprint “grid squares” (30px each) Top bounding image (wraptop.jpg) + Header background image repeating-x (header_bg.jpg) + map(fma.jpg) Note: The border will be overwritten by the background images colors + Main wrapping image repeating-y (wrapmid.jpg) + Main background image - ie the beige (info_bg.jpg) + Footer background fill color bottom bounding image (wrapbotom.jpq)
Problem: If we try to allow the border to take up a grid point (span-1), we get this: … … 950 px (span-24) (span-22) This will leave a whitespace gap on the page 40 px total Solution: Resize/recreate the border images so that they can fit into a single blueprint grid square and gap and we can span the main content over 22 grid squares. Example (background border for header):