расширенный css: верх и низ с гибким центром - PullRequest
Новая
       1

расширенный css: верх и низ с гибким центром

3 голосов
/ 06 мая 2010

можно ли просто с помощью css2 иметь следующее:

  • все содержимое должно быть в разделе гибкого div.mid
  • перекрывают верхнюю и нижнюю части
  • не суетиться около ie6

Вот фотошоп с центральным срезом:

альтернативный текст http://i39.tinypic.com/11qnzbt.jpg

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

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

Я предполагаю, что для этого требуются либо отрицательные поля, либо абсолютно позиционирование элементов top и bottom с z-индексом.

1 Ответ

1 голос
/ 06 мая 2010

Вот пример запуска, вы можете скопировать и запустить его. 

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2781669</title>
        <style>
            #wrap_centre {
                width: 1000px;
                margin: 0 auto;
            }
            .top {
                padding: 0 100px;
                height: 200px;
                background: url('http://i39.tinypic.com/11qnzbt.jpg') no-repeat center top;
            }
            .mid {
                padding: 0 100px;
                background: url('http://url.to.1px.height.slice.jpg') repeat-y center center;
            }
            .content {
                position: relative;
                min-height: 200px;
                top: -100px;
                margin-bottom: -200px;
            }
            .bot {
                padding: 0 100px;
                height: 250px;
                background: url('http://i39.tinypic.com/11qnzbt.jpg') no-repeat center bottom;
            }
        </style>
    </head>
    <body>
        <div id="wrap_centre">
            <div class="top"></div> 
            <div class="mid">
                <div class="content">mid<p>mid<p>mid<p>mid<p>mid<p>mid<p>mid</div>
            </div>             
            <div class="bot"></div> 
        </div>
    </body>
</html>

Вам нужно будет только создать новый фрагмент для .mid.

Обновление : согласно комментариям выше обновлено.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...