Databases
StackOverflow2013
Postsdbo
POLooking for a way to simulate irregularly shaped DIVs
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLooking for a way to simulate irregularly shaped DIVs
    text
    copied!<p>I'm developing a website for a designer who is, shall we say, more oriented towards print designs than for the web. Their page design for this site gives me a content area that is irregular. </p> <p>If this were a hand-coded site I could do the layout (painstakingly) by slicing images and judicious use of floats, absolute positioning, and z-indexes - but the site is being done in Drupal and my content area is what it is (I suppose I could do some serious hacking in node.tpl.php, but even that would be problematic).</p> <p>Here's what I mean - both header and footer have bits that stick out of them which extend into the content area:</p> <pre class="lang-none prettyprint-override"><code>+--------------------------------------------------+ | | | LOGO/HEADER AREA | | | | +------------------------------------------+ | | HEAD ONE FOR PAGE | | | Lorem ipsum dolor sit amet, consectetur | | | adipiscing elit. Praesent in lectus in | +-------+ lectus tempor volutpat vitae velnunc. | | Duis diam sem, mattis in eleifend nec,vulputate | | ac dolor.Aliquam eleifend, mi non adipiscing | | condimentum, erat nunc consectetur lorem, at | | aliquet arcu purus non sapien. Sed in neque eu | | velit venenatis tincidunt vel in est. | | | | Cras fermentum magna non erat pretium suscipit. | | Proin id leo neque. Aliquam vel metus eget | | libero venenatis consectetur. Aliquam +-----+ | lobortis lacinia eros vel vulputate.Mauris | | | lorem diam, bibendum et fringilla nec ... | | +--------------------------------------------+ | | | | LOGO/FOOTER AREA | +--------------------------------------------------+ </code></pre> <p>Right now my barely workable solution is to put the content-area content into tables, with judicious use of row- and col- spans to avoid the sticking-out areas. Besides being a pain, it defeats the purpose of using a CMS - the HTML in each page has to be fiddled with by hand to make the table-cells work properly within the page constraints.</p> <p>So - I guess my question is this: Is there a pure CSS (or even a CSS/Javascript) way to do this without resorting to fragile, error-prone table-coding in every page?</p> <p>(N.B. I've already told the designer that this is a problem, but the client had already approved the design so, for this project at least, I'm stuck with it)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload