CSS макет в полный рост, с несколькими столбцами - PullRequest
Новая
       22

CSS макет в полный рост, с несколькими столбцами

2 голосов
/ 14 ноября 2008

У меня есть макет, который работает, но у него есть одна очень неприятная проблема ... когда содержимое выше экрана, фон останавливается.

Это желаемый макет в формате bad-ASCII-art: 

_____________________  _
|    | long    |logo|   |
|    | content |    |   |
|    |         |    |   |
|    |         |    |   |
|grad|         |grad|   | Viewport
|    |         |    |   |
|    |         |    |   |
|    |         |    |  _|
|    |         |    |
|    |         |    |
_____________________

|2em| <-20em->| 2em|

.. или с коротким содержанием .. 

_____________________  _
|    | short   |logo|   |
|    | content |    |   |
|    |         |    |   |
|    |         |    |   |
|grad|         |grad|   | Viewport
|    |         |    |   |
|    |         |    |   |
|    |         |    |   |
|    |         |    |   |
_____________________  _|

По сути, это выглядит как один столбец, светящийся как столбец по обе стороны. Над левым светом находится логотип. Когда содержание короткое, оно по-прежнему в полный рост.

Я попытался использовать CSS минимальную высоту , которая исправляет средний столбец, но затем градиенты распространяются только до содержимого (в левом столбце, один &nbsp;, в правая колонка с логотипом)

Вот как выглядит макет:

Layout

И проблема (когда окно браузера сокращается по вертикали):

Problem

Наконец, проблема HTML / CSS, http://data.dbrweb.co.uk/tmp/fifestock_layout_problem/

Ответы [ 6 ]

5 голосов
/ 14 ноября 2008

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

Если вам нужны эластичные версии, взгляните на Колонки из эластичного искусственного волокна и Многостолбцовые макеты Вылезти из коробки .

2 голосов
/ 17 ноября 2008

Вот что я в итоге использовал, используя эту технику с высоким значением для padding-bottom, с равным, но инвертированным значением в margin-bottom - тогда вы устанавливаете overflow:hidden в div, заключающий в себе этот огромный запас.

Это довольно хакерски, но работает! Теперь у меня есть полная высота, одна определенная им ширина и полноразмерное фоновое изображение по бокам! Там не так много дополнительной разметки (контейнер div, div для каждого из трех столбцов) 

<html>
<head>
    <title>Yay</title>
    <style type="text/css" media="screen">
        body, html{
            height:100%;
            margin:0;
            background:#1d4b76;
        }
        #contain{
            width:40em;
            margin-left:auto;
            margin-right:auto;
            overflow:hidden;
        }
        #left{
            background-image:url("static/grad_left.png");
            background-repeat:repeat-y;
            background-position:right;

            height:100%;
            float:left;
            width:150px;

            padding-bottom:10000px;
            margin-bottom:-10000px;
        }
        #middle{
            float:left;
            background:#000;
            color:#fff;
            width:20em;

            padding-bottom:100000px;
            margin-bottom:-100000px;
        }
        #right{
            float:left;
            background-image:url("static/grad_right.png");
            background-repeat:repeat-y;
            background-position:left;
            width:150px;

            padding-bottom:100000px;
            margin-bottom:-100000px;
        }
    </style>
</head>
<body>
    <div id="contain">
        <div id="left">
            &nbsp;              
        </div>
        <div id="middle">
                    Put lots of text here
        </div>
        <div id="right">
            <img src="static/logo.png" width="150" height="150" alt="Logo">
        </div>
    </div>
</body>
</html>
1 голос
/ 14 ноября 2008

Попробуйте с этими модификациями: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>Test page</title>
 <style type="text/css" media="screen">
   html, body{
     margin: 0 auto 0 auto;
     padding:0;
     width:22em;
   }

   #wrapper{
      background-color:#ccc;
   }

   #left{
      float:left;
      width:22em;
      background-color:#00f;
    }

    #middle{
       float:right;
       width:18em;
       margin-right:2em;
       background-color:#f00;
     }

     #right{
        float: right;
        width:20em;
        background-color:#0f0;
        background-image: url(static/logo.png);
        background-position: top right;
        background-repeat: no-repeat;
      }

   </style>
   </head>
   <body>
     <div id="wrapper">
       <div id="left">
          <div id="right">
             <div id="middle">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in oluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br><br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br><br>
             </div>
           </div>
         </div>
       </div>
   </body>
</html>
1 голос
/ 14 ноября 2008

Я только что посмотрел видео о сетках YUI и выглядел очень многообещающе (рекомендуется смотреть!). У меня еще не было времени проверить это, но, скорее всего, я сделаю это в будущем. Это может быть то, что вы хотите.

0 голосов
/ 14 ноября 2008

Получилось в конце с этим, но пришлось внести несколько изменений в вашу разметку и изображения.

  1. Удалите разделы #left и #right.
  2. Создайте новое одиночное фоновое изображение шириной 592 пикселя, прозрачный фон и градиенты слева и справа от него - изображение высотой 1 пиксель с левым градиентом - прозрачный участок шириной 504 пикселя - правый градиент.
  3. Добавьте логотип в #wrapper, прямо перед # middle

Итак, разметка выглядит следующим образом: 

<body>
    <div id="wrapper">
        <img src="static/fifestock_logo.png" />
        <div id="middle">
        ... etc ...
        </div>
    </div>
</body>

Тогда соответствующие изменения в таблице стилей: 

#wrapper{
    height:100%;
    width:805px;
    margin-left:auto;
    margin-right:auto;
    text-align: right;
}

#middle {
    width:504px;
    padding: 0 44px;
    margin: -154px auto 0 auto;
    background:#000 url(new_bg.png) repeat-y top left;
}

Хорошо выглядит для меня.

Проверено только в FF3 и Opera (под управлением Linux без доступа к Windows / Mac atm), но я не думаю, что в IE / Opera с этим должны быть большие проблемы.

0 голосов
/ 14 ноября 2008

Добавьте это после <div id="right">...</div>: 

<div style="clear: both; font-size: 1px; line-height:1px">&nbsp;</div>
...