Правая боковая панель с основным содержимым - как? - PullRequest
Новая
       20

Правая боковая панель с основным содержимым - как?

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

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

Требования:

  1. Содержимое под боковой панелью должно занимать всю доступную ширину
  2. Содержимое ниже боковой панели не должно переноситься, когда оно попадает в левую часть боковой панели
  3. Основное содержание должно предшествовать боковой панели в разметке
  4. Боковая панель имеет фиксированную ширину, но неизвестна / переменная высота
  5. Только для CSS - без JavaScript-решений

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

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

Пример разметки (без CSS, только соответствующие биты): 

<body>
  <div id="content">
    <p>
      Lorem ipsum ....
    </p>
    <p>
      Pellentesque ....
    </p>
    <div id="sidebar">
      /* has some form of fixed width */
    </div>
  </div>
</body>

Пример макета:

альтернативный текст http://webignition.net/images/layoutexample.png

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

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

Обновление 2 : я не могу игнорировать требование 3 - боковая панель не может предшествовать содержимому.

Ответы [ 6 ]

3 голосов
/ 06 ноября 2008

Простое плавающее с противоположным порядком источника просто невозможно (без черновых спецификаций CSS3). Прагматичный подход заключается в том, чтобы сначала создать красивый макет, который поддерживает желаемый исходный порядок. HTML: 

<div id="content" class="noJs">
  <div id="floatSpace"></div>
  <p>Lorem ipsum ....</p>
  <p>Pellentesque ....</p>
  <div id="sidebar">content</div>
</div>

CSS: 

#content {position:relative;}
#sidebar {width:150px; position:absolute; top:0; right:0;}
.noJs {padding-right:150px;}
.noJs #floatSpace {display:none;}
.js #floatSpace {float:right; width:150px;}

Это удовлетворяет всем, кроме 1 и 2. Теперь мы добавим JS: 

$(function () {
  // make floatSpace the same height as sidebar
  $('#floatSpace').height($('#sidebar').height());
  // trigger alternate layout
  $('#content')[0].className = 'js';
});

Это заставит содержимое плавать вокруг #floatSpace, а #sidebar останется поверх него. Это лучше, чем перемещение #sidebar, потому что порядок исходного кода остается тем же (для программ чтения с экрана, поддерживающих Javascript и т. Д.).

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

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

Хорошо, вот еще один ответ, так как мы можем игнорировать одно из требований, пропустим первое требование, когда содержимое помещается под боковую панель. 

#sidebar {
  float: left;
  width: 100px;
}
#actualContent {
  width: 700px;
  float: left;
}

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

<div id="content">
    <div id="actualContent">
        <p>...</p>
        <p>...</p>
    </div>
    <div id="sidebar">
        <p>...</p>
    </div>
</div>
2 голосов
/ 06 ноября 2008

Полагаю, вам придется изменить порядок для этого, поставив боковую панель первой. Затем используйте CSS float свойство (без изменения порядка, div#sidebar окажется ниже абзацев против них). div#sidebar должен растягиваться по мере необходимости для высоты.

CSS: 

#sidebar {
    float: right;
    width: 50px;
}

HTML: 

<body>
  <div id="content">
    <div id="sidebar">
      /* has some form of fixed width */
    </div>

    <!-- paragraphs -->
  </div>
</body>

@ Джон Крам [комментарий]

Хорошо ... NVM. Вы изложили свой ответ и одновременно отклонили его.

Вы не можете плавать элемент вокруг других элементов, которые определены до него. Браузер должен уметь отвечать "плавать вокруг чего?" И он ищет следующий элемент для запуска, продолжая, насколько это необходимо.

1 голос
/ 06 ноября 2008

Если вы можете изменить порядок HTML, чтобы боковая панель находилась перед содержимым, тогда это просто: 

#sidebar { float: right; width: 150px; }

.. а затем просто обязательно очистите его после (в конце #content div).

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

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

У меня нет нигде, чтобы проверить это прямо сейчас, и я не уверен, будет ли это работать, но вы пытались отобразить div боковой панели как inline и идти оттуда?

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

Насколько мне известно, единственный способ получить боковую панель, где вы хотите (без очевидного переупорядочения разметки), это установить #content { position: relative; } и #sidebar { position: absolute; right: 0; top: 0; }

К сожалению, абсолютное позиционирование выведет боковую панель из текущего макета, и содержание #content не будет избегать #sidebar, как вы пожелаете.

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

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

...