CSS Layout Вопрос

Question

У меня достаточно сложная проблема с макетом:

Мне бы хотелось, чтобы основной ящик имел ширину 95%
и имел боковые поля со всех сторон (140px 2.5% 20px 2.5%).

В этом поле я хотел бы иметь два столбца:
Первый должен (слева) должен иметь прозрачный фон и будет в основном для ссылок, а также для некоторого другого содержимого произвольного блока (например, результатов опроса и т. Д.). Меню в этой строке представляет собой неупорядоченный список, и я хотел бы, чтобы он выделялся таким образом, чтобы он отображался для соединения с содержимым, когда он активен (это означает, что 2-й столбец должен быть по крайней мере таким же высоким, как и меню; Высота столбцов является проблемой, хотя, я не против использовать минимальную высоту и предполагать, что меню никогда не будет длиннее, скажем, 400 пикселей). Этот столбец должен иметь размер 180px (если процент не является абсолютно необходимым; тогда просто предположите, что 30%)

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

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

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

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

Вот что мне удалось получить в браузерах, соответствующих стандартам: альтернативный текст http://www.inselpix.com/img/24036931603.jpg (Я никогда не использовал этот образ хоста, надеюсь, он работает ...)

Answer 1

Ознакомьтесь с учебником по .

Answer 2

Спасибо всем, вероятно, Кейтсмеу помогла больше всего:

Оказалось, что мне нужно было просто расположить основной div и левый (menu) div (который я дал минимальную высоту), а затем относительно позиционировать div содержимого. Я сделал левое меню шириной 18% с левым полем в 1%, а раздел содержимого сделал шириной 80% с правым полем в 1%. Мне также пришлось добавить нижний отступ к основному div в соответствии с верхним смещением, которое я дал контенту div (поэтому я использовал «top: 30px», чтобы получить основной div-заполнитель из моего контента div, а затем использовал «padding-bottom»: 60px ", чтобы компенсировать 30px для вершины - потому что в противном случае div простирается слишком далеко - и затем добавить еще 30px отступов).

Проблема в том, что IE все еще портит; поэтому, хотя мой основной div имеет ширину 95%, IE не выполняет относительную ширину должным образом, а моя основная панель содержимого слишком широка. Итак, я использовал условные комментарии и установил div контента шириной 76% (95% x 80% = 76%), и он работает достаточно хорошо. Закругленные углы делают что-то немного странное в IE, но это нормально ... Самая большая проблема сейчас в том, что у меня нет нижнего поля в главном div, но я могу с этим смириться, если не смогу разобраться.

Answer 3

IE имеет проблемы с моделью float (хотя, очевидно, в IE 8 есть улучшения). Вы можете попробовать использовать только абсолютное позиционирование ... хотя это, вероятно, не идеальное решение.

Answer 4

Этот 2 столбец макет обслуживает недостатки IE.