Buscando una manera de simular DIV de forma irregular

Question

Estoy desarrollando un sitio web para un diseñador que está, digamos, más orientado hacia diseños impresos que para la web. Su diseño de página para este sitio me da un área de contenido que es irregular.

Si este fuera un sitio codificado a mano podría hacer el diseño (minuciosamente) cortando imágenes y el uso juicioso de flotadores, posicionamiento absoluto e índices z, pero el sitio se está haciendo en Drupal y mi área de contenido es de qué se trata (supongo que podría hacer una piratería seria en node.tpl.php, pero incluso eso sería problemático).

Esto es lo que quiero decir - tanto la cabecera y el pie tienen bits que sobresalen de ellos que se extienden en el área de contenido:

+--------------------------------------------------+ 
|             | 
|    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     | 
+--------------------------------------------------+ 

En este momento mi solución apenas viable es poner el contenido de las áreas de contenido en tablas , con un uso juicioso de filas y colmas para evitar las áreas sobresalientes. Además de ser un dolor, se frustra el propósito de usar un CMS: el HTML de cada página debe manipularse a mano para que las celdas de la tabla funcionen correctamente dentro de las limitaciones de la página.

Entonces, supongo que mi pregunta es esta: ¿existe una forma pura de CSS (o incluso de CSS/Javascript) para hacer esto sin recurrir a una codificación de tabla frágil y propensa a errores en cada página?

(NB Ya le he dicho al diseñador que este es un problema, pero el cliente ya había aprobado el diseño por lo que, para este proyecto, al menos, estoy atascado con él)

Answer 1

Hey! ¿Qué tal una solución como esta? http://jsfiddle.net/steweb/H7s2P/

Debería 'solo' dividir los párrafos de contenido.Top sola toma cuidado de cabecera 'efecto', el que toma parte inferior cuidado de pie de página 'efecto' (a través de la suspensión y trucos Ajuste de margen) :)

de marcado:

<div id="wrapper"> 
    <div id="header">LOGO/HEADER AREA</div> 
    <div id="content"> 
     <div id="piece-of-header"></div> 
     <p id="top"> 
     HEAD ONE FOR PAGE <br /> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget venenatis lorem. Fusce sit amet purus non nulla fringilla sollicitudin. Donec ultrices, nulla ac tincidunt faucibus, odio arcu pellentesque lectus, sit amet bibendum risus velit suscipit odio. Nulla facilisi. In scelerisque auctor orci, eu volutpat risus vulputate sit amet. Mauris dictum blandit fringilla. In et ante quis quam molestie consequat vehicula vitae ligula. Quisque ultricies volutpat lectus, eget accumsan diam malesuada eu. Fusce nec tellus magna. Phasellus at sem eget lectus varius vestibulum. Phasellus sodales aliquet lectus et feugiat. Curabitur mi nulla, vehicula sed dictum ut, dapibus ut sem. Fusce at tortor at augue tincidunt viverra. Aliquam aliquam porttitor est pharetra accumsan. Nunc porttitot viverra. Aliquam aliquam porttitor est pharetra accumsan. Nunc porttitor, enim et blandit placerat, sapien risus eleifend urna, sed posuere er 
     </p> 
     <div id="piece-of-footer"></div> 
     <p id="bottom"> 
     rttitor est pharetra accumsan. Nunc porttitor, enim et blandit placerat, sapittitor est pharetra accumsan. Nunc porttitor, enim et blandit placerat, sapienus eleifend urna, sed posuere er 
     </p> 
    </div>  
    <div id="footer">LOGO/FOOTER AREA</div>  
</div> 

css:

#wrapper{ 
    width:400px; 
    margin:0 auto; 
} 
#header, #footer{ 
    padding:20px; 
    text-align:center; 
    background:#BEBEBE; 
} 
#content{ 
    overflow:hidden 
} 
#content p#top{ 
    padding-top:10px; 
} 
#content p#bottom{ 
    padding-bottom:10px; 
} 
#piece-of-header{ 
    width:70px; 
    height:70px; 
    float:left; 
    margin:0 20px 10px 0; 
    background:#BEBEBE; 
    clear:both; 
} 
#piece-of-footer{ 
    margin:12px 0px 0px 10px; 
    width:70px; 
    height:70px; 
    float:right; 
    background:#BEBEBE; 
} 

Answer 2

la única manera de Puede hacer esto mientras que todavía tiene la envoltura de texto es poner imágenes en las 2 esquinas que sobresalen. Así que tienes 3 divs uno encima del otro con dos imágenes en ellos. El primero tiene un flotante: el segundo flotante: derecho

El texto debe estar float: izquierda y en medio de las 2 imágenes en el código

probarlo, que debería funcionar :) Creo

Answer 3

¿esto es por cierto?

http://jsfiddle.net/hR9ST/

Editar: Hay un poco de desplazamiento horizontal, pero eso no debería ser difícil de solucionar. Estoy trabajando en el minuto, así que he gastado todo el tiempo que puedo en él por ahora. :)

Answer 4

La parte superior es fácil, simplemente termine su bloque de encabezado con un div vacío que flota a la izquierda. El texto del bloque de contenido lo envolverá.

Comprobar, por ejemplo, este violín: http://jsfiddle.net/rodin/kcpbz/

Por la parte inferior, que está básicamente atornillado, como se indicó anteriormente: How can I wrap text around a bottom-right div?