Ищете способ имитировать DIV неправильной формы

Question

Я разрабатываю веб-сайт для дизайнера, который, скажем так, больше ориентирован на печатный дизайн, чем на веб. Их дизайн страницы для этого сайта дает мне область контента, которая является нерегулярной.

Если бы это был сайт с ручным кодированием, я мог бы сделать макет (кропотливо), разрезая изображения и используя разумные поплавки, абсолютное позиционирование и z-индексы - но сайт делается в Drupal, и моя область контента - это то, что это так (я полагаю, я мог бы сделать серьезный взлом в node.tpl.php, но даже это было бы проблематично).

Вот что я имею в виду - и в верхнем, и в нижнем колонтитулах есть биты, которые выходят из области содержимого:

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

В настоящее время мое едва осуществимое решение состоит в том, чтобы помещать содержимое области содержимого в таблицы с разумным использованием строк и столбцов, чтобы избежать областей слипания. Помимо того, что это боль, он побеждает цель использования CMS - HTML-код на каждой странице должен быть изменен вручную, чтобы заставить ячейки таблицы правильно работать в рамках ограничений страницы.

Итак - я предполагаю, что мой вопрос заключается в следующем: существует ли чистый CSS (или даже CSS / Javascript) способ сделать это, не прибегая к хрупкому, подверженному ошибкам табличному кодированию на каждой странице?

(Нет. Я уже говорил дизайнеру, что это проблема, но клиент уже одобрил дизайн, поэтому, по крайней мере, для этого проекта я застрял с ним)

Answer 1

Эй! как насчет такого решения? http://jsfiddle.net/steweb/H7s2P/

Вам просто нужно разделить абзацы контента. Верхняя часть заботится о «эффекте» верхнего колонтитула, нижняя - о «эффекте» нижнего колонтитула (с помощью трюков с плавающей запятой и корректировкой поля)

Markup:

<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

Верхняя часть проста, просто завершите блок заголовка пустым div, который плавает влево. Текст блока содержимого будет обернут вокруг него.

Проверьте, например, эту скрипку: http://jsfiddle.net/rodin/kcpbz/

Что касается нижней части, вы в основном ввернуты, как обсуждалось ранее: Как мне обернуть текст вокруг правого нижнего элемента?

Answer 3

Это примерно так?

http://jsfiddle.net/hR9ST/

Edit: есть немного горизонтальной прокрутки, но это не должно быть трудно исправить. Я работаю в минуту, поэтому я потратил на это все время. :)

Answer 4

Единственный способ сделать это, сохранив перенос текста, - поместить изображения в два выступающих угла.Таким образом, у вас есть 3 элемента div один поверх другого с двумя изображениями, на первом из которых есть число с плавающей точкой: слева, второе число с плавающей точкой: справа

Текст должен быть плавающим: слева и в середине двух изображенийкод

Попробуйте, это должно работать, я думаю:)